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 sırasında performansı ve en iyi uygulamaları test etmek için harika bir araçtır. Ancak Lighthouse'u kullanarak bir sayfanın ömrünün diğer yönlerini analiz etmek her zaman zor olmuştur. Örneğin:
- Sıcak önbellekle sayfa yükleme
- Etkinleştirilmiş hizmet çalışanına sahip sayfalar
- Olası kullanıcı etkileşimlerini hesaba katma
Bu, Lighthouse'un önemli bilgileri kaçırabileceği anlamına gelir. Core Web Vitals, yalnızca boş önbelleğe sahip olanları değil, tüm sayfa yüklemelerini temel alır. Ayrıca, Kümülatif Düzen Kayması (CLS) gibi metrikler, bir sayfanın açık olduğu süre boyunca ölçülebilir.
Lighthouse, bir sayfanın yaşam döngüsünün herhangi bir noktasında laboratuvar testine olanak tanıyan yeni bir kullanıcı işlemleri akışı API'sine sahiptir. Puppeteer, sayfa yüklemelerini komut dosyası haline getirmek ve yapay 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, ödeme adımlarınızın derinliklerinde de CI'da çalıştırılarak hiçbir şeyin gerilemediğinden emin olunabilir.
Kullanıcı işlemleri akışının sorunsuz şekilde çalışmasını sağlamak için yazılan neredeyse tüm Puppeteer komut dosyalarına artık herhangi bir noktada Lighthouse eklenerek performans ve en iyi uygulamalar ölçülebilir. Bu eğitici içerik, kullanıcı işlemleri akışlarının farklı bölümlerini ölçebilen yeni Lighthouse modları (gezinmeler, anlık görüntüler ve zaman aralıkları) ele alınacaktır.
Kurulum
Kullanıcı işlemleri akışı API'leri hâlâ önizleme aşamasında olsa da şu anda Lighthouse'da kullanılabilir. Aşağıdaki demoları denemek için Node'un 14 veya sonraki bir sürümünü kullanmanız gerekir. 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 "gezinme" modu, aslında şimdiye kadarki standart Lighthouse davranışına bir ad veriyor: sayfanın sıfırdan yüklenmesini analiz etme. Sayfa yükleme performansını izlemek için bu modu kullanabilirsiniz. Ancak kullanıcı işlemleri akışları da yeni analizler elde etmenizi sağlayabilir.
Lighthouse'un sayfa yüklemeyi yakalamasını komut dosyasıyla ayarlamak için:
- Tarayıcıyı açmak için Puppeteer'ı 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ın yer aldığı bir özet görünüm gösterilir. Bu adımı tıkladığınızda, söz konusu gezinme için geleneksel bir Lighthouse raporu gösterilir.
Lighthouse'da her zaman olduğu gibi bu sayfa, önbellek veya yerel depolama alanı temizlenmiş olarak yüklenir. Ancak bir siteyi ziyaret eden gerçek kullanıcılar, soğuk ve sıcak önbelleklerle yapılan ziyaretlerin bir karışımını görür. Bu şekilde sıfırdan yükleme ile önbelleği hâlâ sıcak olan sayfaya geri dönen bir kullanıcı arasında büyük bir performans farkı olabilir.
Sıcak yük yakalama
Bu komut dosyasına ikinci bir gezinme de ekleyebilirsiniz. Bu kez Lighthouse'un gezinmelerde varsayılan olarak yaptığı önbellek ve depolama alanı temizleme işlemini devre dışı bırakabilirsiniz. Bir sonraki örnekte, önbelleğe almadan ne kadar yararlandığını görmek için web.dev'deki bir makale yüklenmektedir:
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 şuna benzer:
Soğuk ve sıcak yüklemelerin kombinasyonu, gerçek kullanıcıların ne yaşadığına dair daha kapsamlı bir tablo sunar. Kullanıcıların aynı ziyarette birçok sayfa yüklediği bir siteniz varsa bu, kullanıcıların sahada yaşadıkları deneyime daha gerçekçi bir bakış açısı sunabilir.
Anlık Görüntüler
Anlık görüntüler, Lighthouse denetimlerini tek bir zaman noktasında çalıştıran yeni bir moddur. Normal bir Lighthouse çalıştırmasından farklı olarak sayfa yeniden yüklenmez. Bu sayede bir sayfa oluşturabilir ve sayfayı tam olarak bulunduğu durumda (ör. açılır menü açıkken veya form kısmen doldurulmuşken) test edebilirsiniz.
Bu örnekte, Squoosh'taki Gelişmiş Ayarlar için yeni bir kullanıcı arayüzünün otomatik Lighthouse kontrollerini geçtiğ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şletildiyse görünür.
Bu işlem Puppeteer ile komut dosyası haline getirilebilir ve 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 ancak manuel olarak kontrol edilmesi gereken bazı erişilebilirlik ölçütleri olabileceğini gösterir:
Zaman aralıkları
Saha (ör. CrUX'ten) ve laboratuvar (ör. Lighthouse'tan) performans sonuçları arasındaki en büyük farklardan biri, kullanıcı girişinin olmamasıdır. Bu noktada, son kullanıcı işlemleri akışı modu olan zaman aralığı yardımcı olabilir.
Zaman aralığı, Lighthouse denetimlerini belirli bir süre boyunca çalıştırır. Bu süre, gezinme içerebilir veya içermeyebilir. Bu, etkileşimler sırasında sayfada neler olduğunu yakalamanın harika bir yoludur. Örneğin, Lighthouse varsayılan olarak sayfa yükleme sırasında CLS'yi ölçer ancak sahada CLS, ilk gezinmeden sayfa kapatılana kadar ölçülür. Kullanıcı etkileşimleri CLS'yi tetikliyorsa Lighthouse daha önce bunu yakalayamaz ve düzeltmeye yardımcı olamazdı.
Normal bir Lighthouse gezinmesinde CLS 0 olur. Ancak sayfa kaydırıldığında sorunlu düzen kaymaları 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ş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.example.com/';
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 bir gezinmeyi hem gezinme hem de sonrasında kaydırma içeren bir zaman aralığıyla karşılaştıran bir rapor oluşturur:
Her adımı incelediğimizde, yalnızca gezinme adımının CLS'sinin 0 olduğunu görürüz. Harika bir site!
Ancak "Gezinme ve kaydırma" adımında farklı bir durum söz konusu. Şu anda zaman aralıklarında yalnızca Total Blocking Time ve Cumulative Layout Shift kullanılabilir ancak bu sayfadaki geç yüklenen içerik, sitenin CLS'sini açıkça düşürür.
Eskiden Lighthouse, bu sorunlu CLS davranışını tespit edemezdi ancak bu davranış neredeyse kesinlikle gerçek kullanıcıların deneyiminde ortaya çıkardı. Senaryolu etkileşimler üzerinden performans testi yapmak, laboratuvar doğruluğunu önemli ölçüde artırır.
Geri bildirimlerinizi bekliyoruz
Lighthouse'daki yeni kullanıcı işlemleri akışı API'leri birçok yeni işlem yapabilir ancak kullanıcılarınızın karşılaştığı senaryoları ölçmek yine de karmaşık olabilir.
Sorularınız için Lighthouse tartışma forumlarından bize ulaşabilir, hataları veya önerileri Issue Tracker'da bildirebilirsiniz.