Kullanıcı işlemleri akışı boyunca performansı ve en iyi uygulamaları ölçmek için yeni bir Lighthouse API'yi deneyin.
Lighthouse, ilk sayfa yükleme işlemi sırasında performansı ve en iyi uygulamaları test etmek için mükemmel bir araçtır. Ancak Lighthouse'u bir sayfanın hayatıyla ilgili diğer yönlerini analiz etmek için kullanmak geleneksel olarak zor bir işti. Örneğin:
- Sayfa, sıcak bir önbellekle yükleniyor
- Etkin bir Service Worker'a sahip sayfalar
- Potansiyel kullanıcı etkileşimlerini hesaba katma
Bu, Lighthouse'un önemli bilgileri kaçırabileceği anlamına gelir. Core Web Vitals, yalnızca önbelleği boş olanlara değil, tüm sayfa yüklemelerine dayanır. Ayrıca, Cumulative Layout Shift (CLS) gibi metrikler bir sayfanın açık olduğu süre boyunca ölçülebilir.
Lighthouse, bir sayfanın kullanım süresinin herhangi bir noktasında 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 önemli analizleri yakalamak için birden fazla şekilde çağrılabilir. Bu, performansın sayfa yükleme sırasında ve sayfayla etkileşimler sırasında ölçülebileceği anlamına gelir. Erişilebilirlik kontrolleri yalnızca ilk görünümde değil, aynı zamanda ödeme akışınızın derinliklerinde, gerileme olmaması için CI'da çalıştırılabilir.
Sorunsuz bir kullanıcı akışı sağlamak için yazılan Puppeteer komut dosyalarına artık performans ve en iyi uygulamaları ölçmek için istediğiniz herhangi bir noktada Lighthouse eklenebilir. Bu eğiticide, kullanıcı akışlarının farklı bölümlerini (gezinmeler, anlık görüntüler ve zaman aralıkları) ölçebilen yeni Lighthouse modları adım adım açıklanmıştır.
Kurulum
Kullanıcı akışı API'leri hâlâ önizlemededir ancak bugün Lighthouse'ta kullanılabilir. Aşağıdaki demoları denemek için Node 14 veya sonraki bir sürüme ihtiyacınız vardır. Boş bir dizin oluşturun ve bu dizinde aşağıdaki komutu ç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 "navigasyon" modu, aslında (şimdiye kadar) standart Lighthouse davranışına bir ad veriyor: sayfaların soğuk yüklenmesini analiz ediyor. Bu mod, sayfa yükleme performansını izlemek için kullanılır ancak kullanıcı akışları yeni analiz imkanı da sunar.
Sayfa yüklemesini yakalayan Lighthouse komut dosyasını çalıştırmak 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 bir adımı içeren bir özet görünümü gösterilir. Bu adımı tıkladığınızda, ilgili gezinmeyle ilgili geleneksel bir Lighthouse raporu açılır.
Lighthouse'ta olduğu gibi, bu sayfa önce tüm önbellek veya yerel depolama alanı temizlenerek yüklenir. Ancak, bir siteyi ziyaret eden gerçek kullanıcılar soğuk ve sıcak önbelleklerle karışık bir ziyaret gerçekleştirir ve bunun gibi bir soğuk yükleme ile kullanıcının henüz önbelleğe alınmış bir önbelleği kullanarak sayfaya geri dönmesi arasında büyük bir performans farkı olabilir.
Hazır durumda yükleme kaydetme
Ayrıca, bu komut dosyasına ikinci bir gezinme ekleyebilirsiniz. Bu kez Lighthouse'un gezinmelerde varsayılan olarak yaptığı önbellek ve depolama alanı temizleme işlemi devre dışı bırakılır. Aşağıdaki örnek, önbelleğe alma özelliğinden ne kadar fayda sağladığını görmek için web.dev'de bir makale yükler:
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 neler yaşadığını daha iyi gösterir. Kullanıcıların aynı ziyarette çok sayıda sayfa yüklediği bir siteniz varsa, bu, kullanıcıların alanda yaşadıkları durumlara daha gerçekçi bir bakış sağlayabilir.
Anlık Görüntüler
Anlık görüntüler, tek bir noktada Lighthouse denetlemeleri yapan yeni bir moddur. Normal Lighthouse çalıştırmasından farklı olarak, sayfa yeniden yüklenmez. Bu, bir sayfayı ayarlama ve tam durumunda (örneğin, bir açılır menü açıkken veya kısmen doldurulmuş bir formla) test etme olanağı sağlar.
Bu örnekte, Squoosh içindeki Gelişmiş Ayarlar için bazı yeni kullanıcı arayüzlerinin otomatik Lighthouse kontrollerinden geçip geçmediğini kontrol etmek istediğinizi varsayalım. Bu ayarlar yalnızca bir resim yüklendiyse 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ı oluşturulabilir 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 raporda sonuçların genel olarak iyi olduğu gösterilir, ancak manuel olarak kontrol edilmesi gereken bazı erişilebilirlik ölçütleri olabilir:
Zaman aralıkları
Sahadaki (CrUX'te olduğu gibi) ve laboratuvardaki (Lighthouse'ta olduğu gibi) performans sonuçları arasındaki en büyük farklardan biri kullanıcı girişi eksikliğidir. Bu noktada zaman aralığı (son kullanıcı akış modu) yardımcı olabilir.
Zaman aralığı, Lighthouse denetimlerini belirli bir süre boyunca çalıştırır. Bu denetimler, gezinmeyi içerebilir veya içermeyebilir. Bu, etkileşimler sırasında sayfada neler olduğunu yakalamanın harika bir yoludur. Örneğin, varsayılan olarak Lighthouse, sayfa yükleme sırasında CLS'yi ölçer, ancak alanda, ilk gezinmeden sayfa kapatılana kadar CLS ölçülür. CLS'yi tetikleyen kullanıcı etkileşimleri ise Lighthouse'un daha önce yakalayıp düzeltmeye yardımcı olamayacağı bir şeydi.
Bunu göstermek için aşağıda, kaydırma sırasında bir makaleye yerleştirilen reklamlar için yer ayrılmaması gerektiğini simüle eden bir test sitesi verilmiştir. Uzun kart serisinde, yuvası görüntü alanına girdiğinde ara sıra kırmızı bir kare eklenir. Bu kırmızı kareler için alan ayrılmadığından, altlarındaki kartlar görünümün dışına kaydırılarak düzen kaymalarına neden olur.
Normal Lighthouse gezinmelerinin CLS'si 0 olur. Bununla birlikte, sayfayı kaydırdıktan sonra sayfada sorunlu düzen kaymaları olur ve CLS değeri yükselir.
Aşağıdaki komut dosyası, farkı göstermek için her iki işlemi içeren bir kullanıcı akışı raporu oluşturur.
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 işlem, normal gezinmeyi hem gezinme hem de sonrasında kaydırma içeren bir zaman aralığıyla karşılaştıran bir rapor oluşturur:
Her bir adımı ayrıntılı olarak incelediğimizde yalnızca gezinmeyi içeren adımda 0 değerinde bir CLS değeri gösterilir. Harika bir site!
Ancak "Gezinme ve kaydırma" farklı bir hikaye anlatır. Zaman aralıkları için şu anda yalnızca Toplam Engelleme Süresi ve Toplu Düzen Kayması kullanılabilir ancak bu sayfadaki geç yüklenen içerik, sitenin CLS'sini açık bir şekilde azaltır.
Önceden Lighthouse bu sorunlu CLS davranışını tanımlayamaz ancak gerçek kullanıcıların deneyiminde görünmesi neredeyse kesindir. Komut dosyası kullanılan etkileşimlerde performans testleri, laboratuvar kalitesini önemli ölçüde artırır.
Geri bildirim aranıyor
Lighthouse'daki yeni kullanıcı akışı API'leri birçok yeni şey yapabilir ancak kullanıcılarınızın karşılaştığı senaryo türlerini ölçmek yine de karmaşık olabilir.
Sorularınızı lütfen Lighthouse tartışma forumlarından iletin ve sorun izleyicide hataları veya önerileri bildirin.