Kullanıcı işlemleri akışı boyunca performansı ve en iyi uygulamaları ölçmek için yeni Lighthouse API'yi deneyin.
Lighthouse, ilk sayfa yükleme sırasında performansı ve en iyi uygulamaları test etmek için harika bir araçtır. Bununla birlikte, Lighthouse'u, bir sayfa ömrünün diğer özelliklerini analiz etmek için kullanmak geleneksel olarak zor olmuştur. Örneğin:
- Sayfa hazır durumda önbellekle yükleniyor
- Etkin bir Service Worker bulunan sayfalar
- Potansiyel kullanıcı etkileşimlerini hesaba katma
Bu durum Lighthouse'un önemli bilgileri atlayabileceği anlamına gelir. Önemli Web Verileri, yalnızca önbelleği boş olan sayfa yüklemelerine değil, tüm sayfa yüklemelerine dayanır. Ayrıca Cumulative Layout Shift (CLS) gibi metrikler, sayfanın açık olduğu süre boyunca ölçülebilir.
Lighthouse, bir sayfanın kullanım ömrü içinde herhangi bir noktada laboratuvar testlerine olanak tanıyan yeni bir kullanıcı akışı API'sine sahiptir. Puppeteer, sayfa yüklemelerini komut dosyası haline getirmek ve sentetik kullanıcı etkileşimlerini tetiklemek için kullanılır. Lighthouse, bu etkileşimler sırasında temel bilgileri yakalamak için çeşitli şekillerde çağrılabilir. Bu, performansın sayfa yükleme ve sayfayla etkileşimler sırasında ölçülebileceği anlamına gelir. Erişilebilirlik kontrolleri, hiçbir şeyin gerilemediğinden emin olmak için yalnızca ilk görünümde değil, ödeme akışınızın derinliklerinde de CI'da çalıştırılabilir.
Çalışan bir kullanıcı akışı sağlamak için yazılan neredeyse tüm Puppeteer komut dosyalarında artık herhangi bir noktaya Lighthouse eklenerek performansı ve en iyi uygulamaları ölçebiliyorsunuz. Bu eğitimde, kullanıcı akışlarının farklı bölümlerini (gezinme, anlık görüntü ve zaman aralıkları) ölçebilen yeni Lighthouse modları ele alınacaktır.
Kurulum
Kullanıcı akışı API'leri hâlâ önizleme aşamasındadır ancak bugün Lighthouse'da kullanılabilirler. Aşağıdaki demoları denemek için Node 14 veya sonraki bir sürümü kullanmanız gerekir. Boş bir dizin oluşturup ç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
Gezinmeler
Yeni Lighthouse "gezinme" modu, (şimdiye kadar) standart Lighthouse davranışına aslında bir ad veriyor: bir sayfanın baştan yüklenmesini analiz etme. Bu, sayfa yükleme performansını izlemek için kullanılacak moddur, ancak kullanıcı akışları yeni analizler de ortaya çıkaracaktır.
Sayfa yüklemesini yakalayan Lighthouse komut dosyası için:
- Tarayıcıyı açmak için kuklacı kullanın.
- Lighthouse kullanıcı işlemleri 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ımı içeren bir özet görünüm gösterir. Bu adımı tıkladığınızda, ilgili navigasyon için geleneksel bir Lighthouse raporu görüntülenir.
Lighthouse'da olduğu gibi bu sayfa, önce herhangi bir önbellek veya yerel depolama alanı temizlenmiş olarak yüklenir ancak bir siteyi ziyaret eden gerçek kullanıcılar, hem soğuk hem de sıcak önbelleklere sahip ziyaretler gerçekleştirir ve bunun gibi bir soğuk yükleme ile sayfaya hâlâ sıcak bir önbelleğe sahip sayfaya geri dönen kullanıcı arasında büyük bir performans farkı olabilir.
Sıcak yükü yakalama
Ayrıca, bu komut dosyasına ikinci bir gezinme menüsü de ekleyebilirsiniz. Bu kez, Lighthouse'un gezinmelerde varsayılan olarak yaptığı önbellek ve depolama alanını temizleme işlemi devre dışı bırakılır. Sıradaki örnek, önbelleğe almanın ne kadar fayda sağladığını görmek için web.dev'deki bir makaleyi 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();
Elde edilen akış raporu aşağıdaki gibi görünür:
Soğuk ve sıcak yüklemelerin birlikte kullanılması, gerçek kullanıcıların yaşadıklarına dair daha kapsamlı bir resim sunar. Kullanıcıların aynı ziyarette birçok sayfa yüklediği bir siteniz varsa bu, kullanıcıların alanda nelerle karşılaştığına dair daha gerçekçi bir bakış açısı sağlayabilir.
Anlık Görüntüler
Anlık görüntüler, Lighthouse denetimlerini belirli bir noktada çalıştıran yeni bir moddur. Normal Lighthouse çalıştırmasından farklı olarak sayfa yeniden yüklenmez. Bu sayede, bir sayfa oluşturabilir ve sayfayı bir açılır liste açık veya kısmen doldurulmuş bir formla olduğu gibi tam olarak test edebilirsiniz.
Bu örnekte, Squoosh'taki Gelişmiş Ayarlar'a yönelik yeni kullanıcı arayüzlerinden bazılarının otomatik Lighthouse kontrollerini geçip geçmediğini kontrol etmek istediğinizi varsayalım. Bu ayarlar yalnızca bir resim yüklenmişse ve seçenekler menüsü gelişmiş ayarları gösterecek şekilde genişletildiğinde görünür.
Bu işlem Puppeteer ile komut dosyasıyla yapılabilir ve aslında her adımda bir Lighthouse 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();
Elde edilen rapor, sonuçların genel olarak iyi olduğunu gösterir ancak manuel olarak kontrol edilmesi gereken bazı erişilebilirlik ölçütleri olabilir:
Zaman aralıkları
Sahadaki (CrUX'teki gibi) ve laboratuvardaki (Lighthouse'taki gibi) performans sonuçları arasındaki en büyük farklardan biri kullanıcı girişinin olmamasıdır. Zaman aralığı (son kullanıcı akışı modu) bu noktada fayda sağlayabilir.
Bir zaman aralığı, Lighthouse denetimlerini belirli bir süre boyunca çalıştırır. Bu denetimler, gezinme içerebilir veya içermeyebilir. Bu, etkileşimler sırasında bir sayfada ne olup bittiğini yakalamanın harika bir yoludur. Örneğin, Lighthouse varsayılan olarak sayfa yükleme sırasında CLS'yi ölçer ancak alanda, CLS ilk gezinmeden sayfa kapatılana kadar ölçülür. CLS'nin tetikleyicisi kullanıcı etkileşimleriyse Lighthouse'un önceden yakalayamadığı ve düzeltemeyeceği bir durum buydu.
Bunu göstermek için test sitesini inceleyebilirsiniz. Bu sitede, kaydırma sırasında alan ayrılmamışken bir makaleye yerleştirilen reklamların simülasyonunu görebilirsiniz. Uzun bir kart serisinde, slot görüntü alanına girdiğinde ara sıra kırmızı bir kare eklenir. Bu kırmızı karelere alan ayrılmadığından, altlarındaki kartlar görünümün dışına kaydırılır ve düzende değişiklikler meydana gelir.
Normal Lighthouse navigasyonunun CLS değeri 0 olur. Bununla birlikte, kaydırıldığında sayfa düzeninde sorunlar yaşanır ve CLS değeri yükselir.
Aşağıdaki komut dosyası, farkı göstermek için her iki işlemi de içeren bir kullanıcı işlemleri akışı raporu oluşturacaktır.
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: 600,
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 komut, normal gezinmeyi hem gezinme hem de daha sonra kaydırma içeren bir zaman aralığıyla karşılaştıran bir rapor oluşturur:
Her bir adıma kısaca inildiğinde, yalnızca gezinmeyle ilgili adımın CLS değeri 0 olarak gösterilir. Harika site!
Ancak "Gezinme ve kaydırma" adımı farklı bir hikaye anlatır. Zaman aralıklarında şu anda yalnızca Toplam Engelleme Süresi ve Cumulative Layout Shift kullanılabilmektedir, ancak bu sayfadaki geç yüklenen içerik, açıkça sitenin CLS'sini depolamaktadır.
Daha önce, Lighthouse bu sorunlu CLS davranışını tanımlayamazdı, ancak bu davranış neredeyse kesinlikle gerçek kullanıcıların deneyiminde görünür. Komut dosyası kullanılan etkileşimler üzerinden yapılan performans testi, laboratuvar kalitesini önemli ölçüde iyileştirir.
Geri bildirim bekleniyor
Lighthouse'daki yeni kullanıcı akışı API'leri birçok yeni şey yapabilir ancak kullanıcılarınızın karşılaştığı senaryoların türünü ölçmek yine de karmaşık olabilir.
Sorunuz olursa lütfen Lighthouse tartışma forumlarında bize ulaşın ve hataları veya önerileri sorun izleyicide bildirin.