Lighthouse, ilk sayfa yükleme sırasında performansı ve en iyi uygulamaları test etmek için harika bir araçtır. Ancak, bir sayfanın yaşamının diğer yönlerini analiz etmek için Lighthouse’u kullanmak geleneksel olarak zor olmuştur, örneğin:
- Sayfa sıcak bir önbellekle yükleniyor
- Aktif bir Servis Çalışanı olan sayfalar
- Potansiyel kullanıcı etkileşimlerinin muhasebeleştirilmesi
Bu, Lighthouse’un hayati bilgileri kaçırabileceği anlamına gelir. Önemli Web Verileri şuna dayalıdır: Tümü sayfa yüklenir, yalnızca önbelleği boş olanlar değil. Ek olarak, Kümülatif Düzen Kayması (CLS) gibi ölçümler, bir sayfanın açık olduğu süre boyunca ölçülebilir.
Lighthouse, bir sayfanın ömrü boyunca herhangi bir noktada laboratuvar testine izin veren yeni bir kullanıcı akışı API’sine sahiptir. kuklacı sayfa yüklemelerini kodlamak ve sentetik kullanıcı etkileşimlerini tetiklemek için kullanılır ve Lighthouse, bu etkileşimler sırasında önemli içgörüleri yakalamak için birden çok şekilde çağrılabilir. Bu, sayfa yükleme sırasında performansın ölçülebileceği anlamına gelir Ve sayfayla etkileşimler sırasında. Erişilebilirlik kontrolleri, yalnızca ilk görünümde değil, hiçbir şeyin gerilemediğinden emin olmak için ödeme akışınızın derinliklerinde CI’da çalıştırılabilir.
Çalışan bir kullanıcı akışını sağlamak için yazılan hemen hemen tüm Puppeteer komut dosyaları, artık performansı ve en iyi uygulamaları ölçmek için Lighthouse’u herhangi bir noktaya yerleştirebilir. Bu öğretici, kullanıcı akışlarının farklı bölümlerini ölçebilen yeni Lighthouse modlarını ele alacaktır: gezintiler, anlık görüntüler ve zaman aralıkları.
Kurmak #
Kullanıcı akışı API’leri hâlâ önizleme aşamasındadır, ancak bugün Lighthouse’ta kullanıma sunulmuştur. Aşağıdaki demoları denemek için Node sürüm 14 veya sonraki bir sürüme ihtiyacınız olacak. Boş bir dizin oluşturun ve içinde şunu çalıştırın:
# Default to ES modules.
echo '{"type": "module"}' > package.json# Init npm project without the wizard.
npm init -y
# Dependencies for these examples.
npm install lighthouse puppeteer open
navigasyon #
Yeni Lighthouse “gezinme” modu aslında (şimdiye kadar) standart Lighthouse davranışına bir ad veriyor: bir sayfanın soğuk yükünü analiz et. Bu, sayfa yükleme performansını izlemek için kullanılacak moddur, ancak kullanıcı akışları aynı zamanda yeni içgörüler olasılığını da açar.
Bir sayfa yüklemesini yakalayan Lighthouse komut dosyası için:
- Tarayıcıyı açmak için kuklacıyı kullanın.
- Bir Lighthouse kullanıcı akışı başlatın.
- Hedef URL’ye gidin.
import fs from 'fs';
import open from 'open';
import puppeteer from 'puppeteer';
import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';async function captureReport() {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
const flow = await startFlow(page, {name: 'Single Navigation'});
await flow.navigate('https://web.dev/performance-scoring/');
await browser.close();
const report = await flow.generateReport();
fs.writeFileSync('flow.report.html', report);
open('flow.report.html', {wait: false});
}
captureReport();
Bu en basit akıştır. Rapor açıldığında, yalnızca tek adımlı bir özet görünümü gösterir. Bu adıma tıklamak, o navigasyon için geleneksel bir Deniz Feneri raporunu ortaya çıkaracaktır.
Lighthouse’da tipik bir şekilde olduğu gibi, bu sayfa önce herhangi bir önbellek veya yerel depolama temizlenmiş olarak yüklenir, ancak bir siteyi ziyaret eden gerçek kullanıcılar, soğuk ve sıcak önbellek ziyaretlerinin bir karışımına sahip olur ve soğuk yükleme arasında büyük bir performans farkı olabilir. bu ve sayfaya hala sıcak bir önbellekle dönen bir kullanıcı.
Sıcak bir yük yakalama #
Bu komut dosyasına ikinci bir gezinme de ekleyebilirsiniz, bu kez Lighthouse’un gezinmelerde varsayılan olarak yaptığı önbellek ve depolamanın temizlenmesini devre dışı bırakabilirsiniz. Bu sonraki örnek, önbelleğe almanın ne kadar fayda sağladığını görmek için web.dev’in kendisinde bir makale yüklüyor:
async function captureReport() {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();const testUrl = 'https://web.dev/performance-scoring/';
const flow = await startFlow(page, {name: 'Cold and warm navigations'});
await flow.navigate(testUrl, {
stepName: 'Cold navigation'
});
await flow.navigate(testUrl, {
stepName: 'Warm navigation',
configContext: {
settingsOverrides: {disableStorageReset: true},
},
});
await browser.close();
const report = await flow.generateReport();
fs.writeFileSync('flow.report.html', report);
open('flow.report.html', {wait: false});
}
captureReport();
Ortaya çıkan akış raporu şuna benzer:
Soğuk ve sıcak yüklerin birleşimi, gerçek kullanıcıların yaşadıklarının daha eksiksiz bir resmini sunar. Kullanıcıların aynı ziyarette birçok sayfa yüklediği bir siteniz varsa bu, sahada yaşadıklarına daha gerçekçi bir bakış sunabilir.
anlık görüntüler #
Anlık görüntüler, Lighthouse denetimlerini tek bir zamanda çalıştıran yeni bir moddur. Normal bir Lighthouse çalışmasının aksine, sayfa yeniden yüklenmez. Bu, bir sayfa oluşturma ve onu tam durumunda test etme yeteneğinin kilidini açar: örneğin, bir açılır menü veya kısmen doldurulmuş bir form ile.
Bu örnek için, içinde Gelişmiş Ayarlar için bazı yeni kullanıcı arabirimlerinin olup olmadığını kontrol etmek istediğinizi varsayalım. Squoosh otomatik Lighthouse kontrollerinden geçer. Bu ayarlar yalnızca bir görüntü yüklendiğinde ve seçenekler menüsü gelişmiş ayarları gösterecek şekilde genişletildiğinde görünür.
Bu işlem, Puppeteer ile yazılabilir ve aslında her adımda bir Deniz Feneri anlık görüntüsü alabilirsiniz:
async function captureReport() {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();const flow = await startFlow(page, {name: 'Squoosh snapshots'});
await page.goto('https://squoosh.app/', {waitUntil: 'networkidle0'});
// Wait for first demo-image button, then open it.
const demoImageSelector = 'ul[class*="demos"] button';
await page.waitForSelector(demoImageSelector);
await flow.snapshot({stepName: 'Page loaded'});
await page.click(demoImageSelector);
// Wait for advanced settings button in UI, then open them.
const advancedSettingsSelector = 'form label[class*="option-reveal"]';
await page.waitForSelector(advancedSettingsSelector);
await flow.snapshot({stepName: 'Demo loaded'});
await page.click(advancedSettingsSelector);
await flow.snapshot({stepName: 'Advanced settings opened'});
browser.close();
const report = await flow.generateReport();
fs.writeFileSync('flow.report.html', report);
open('flow.report.html', {wait: false});
}
captureReport();
Ortaya çıkan rapor, sonuçların genel olarak iyi olduğunu gösteriyor ancak manuel olarak kontrol edilmesi gereken bazı erişilebilirlik kriterleri olabilir:
Zaman aralıkları #
Sahadaki (CrUX gibi) ve laboratuvardaki (Lighthouse gibi) performans sonuçları arasındaki en büyük farklardan biri, kullanıcı girdisinin olmamasıdır. Bu, bir zaman aralığının (son kullanıcı akış modu) yardımcı olabileceği yerdir.
Bir zaman aralığı, bir gezinmeyi içerebilecek veya içermeyebilecek, belirli bir süre boyunca Lighthouse denetimlerini çalıştırır. Bu, etkileşimler sırasında bir sayfada neler olup bittiğini yakalamanın harika bir yoludur. Örneğin, Lighthouse varsayılan olarak CLS’yi sayfa yükleme sırasında ölçer, ancak sahada CLS ilk gezinmeden sayfa kapatılana kadar ölçülür. Kullanıcı etkileşimleri CLS’nin tetikleyicisiyse, bu, Lighthouse’un önceden yakalayamayacağı ve düzeltmeye yardımcı olamayacağı bir şeydi.
Bunu göstermek için, burada bir deneme sitesi kaydırma sırasında bir makaleye, onlar için yer ayrılmadan enjekte edilen reklamları simüle eder. Uzun bir kart serisinde, yuvası görünüme girdiğinde ara sıra bir kırmızı kare eklenir. Bu kırmızı kareler için yer ayrılmadığından, altlarındaki kartlar yoldan çekilerek düzen kaymalarına neden olur.
Normal bir Lighthouse navigasyonunun CLS’si 0 olacaktır. Ancak, bir kez kaydırıldığında, sayfa sorunlu düzen kaymalarına sahip olacak ve CLS değeri yükselecektir.
Aşağıdaki komut dosyası, farkı göstermek için her iki eylemi içeren bir kullanıcı akış raporu üretecektir.
async function captureReport() {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
// Get a session handle to be able to send protocol commands to the page.
const session = await page.target().createCDPSession();const testUrl = 'https://pie-charmed-treatment.glitch.me/';
const flow = await startFlow(page, {name: 'CLS during navigation and on scroll'});
// Regular Lighthouse navigation.
await flow.navigate(testUrl, {stepName: 'Navigate only'});
// Navigate and scroll timespan.
await flow.startTimespan({stepName: 'Navigate and scroll'});
await page.goto(testUrl, {waitUntil: 'networkidle0'});
// We need the ability to scroll like a user. There's not a direct puppeteer function for this, but we can use the DevTools Protocol and issue a Input.synthesizeScrollGesture event, which has convenient parameters like repetitions and delay to somewhat simulate a more natural scrolling gesture.
// https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-synthesizeScrollGesture
await session.send('Input.synthesizeScrollGesture', {
x: 100,
y: 0,
yDistance: -2500,
speed: 1000,
repeatCount: 2,
repeatDelayMs: 250,
});
await flow.endTimespan();
await browser.close();
const report = await flow.generateReport();
fs.writeFileSync('flow.report.html', report);
open('flow.report.html', {wait: false});
}
captureReport();
Bu, normal gezinmeyi hem gezinmeyi hem de sonrasında kaydırmayı içeren bir zaman aralığıyla karşılaştıran bir rapor oluşturur:
Her adıma bakıldığında, yalnızca gezinme adımı 0’lık bir CLS gösterir. Harika site!
Ancak “Git ve kaydır” adımı farklı bir hikaye anlatıyor. Şu anda yalnızca Toplam Engelleme Süresi ve Kümülatif Düzen Kayması, zaman aralıklarında mevcuttur, ancak bu sayfadaki geç yüklenen içerik, site için CLS’yi açık bir şekilde bozar.
Daha önce, Lighthouse bu sorunlu CLS davranışını belirleyemezdi, ancak gerçek kullanıcıların deneyimlerinde neredeyse kesinlikle ortaya çıkacaktı. Komut dizili etkileşimler üzerinden performans testi, laboratuvar doğruluğunu önemli ölçüde artırır.
geri bildirim arıyorum #
Lighthouse’daki yeni kullanıcı akışı API’leri pek çok yeni şey yapabilir, ancak kullanıcılarınızın karşılaştığı senaryo türlerini ölçmek yine de karmaşık olabilir.
Lütfen Deniz Feneri’ndeki herhangi bir sorunuzla iletişime geçin. tartışma forumlarıve herhangi bir hatayı veya öneriyi sorun izleyici.