Wypróbuj nowy interfejs Lighthouse API, aby mierzyć wydajność i sprawdzone metody na całym wzorcu przeglądania.
Lighthouse to fantastyczne narzędzie do testowania wydajności i sprawdzonych metod podczas początkowego wczytywania strony. Tradycyjnie trudno było jednak używać Lighthouse do analizowania innych aspektów cyklu życia strony, takich jak:
- Wczytywanie strony z częściowo zapełnionej pamięci podręcznej
- Strony z aktywowanym skryptem service worker
- Uwzględnianie potencjalnych interakcji użytkowników
Oznacza to, że Lighthouse może pominąć ważne informacje. Core Web Vitals są oparte na wszystkich wczytaniach strony, a nie tylko tych z pustą pamięcią podręczną. Dodatkowo dane takie jak skumulowane przesunięcie układu (CLS) można mierzyć przez cały czas, gdy strona jest otwarta.
Lighthouse ma nowy interfejs API wzorca przeglądania, który umożliwia testowanie laboratoryjne w dowolnym momencie cyklu życia strony. Puppeteer służy do tworzenia skryptów wczytywania stron i wywoływania syntetycznych interakcji użytkowników, a Lighthouse można wywoływać na wiele sposobów, aby podczas tych interakcji uzyskiwać kluczowe statystyki. Oznacza to, że wydajność można mierzyć podczas wczytywania strony oraz podczas interakcji ze stroną. Kontrole ułatwień dostępu można przeprowadzać w CI nie tylko w widoku początkowym, ale też na dalszych etapach procesu płatności, aby upewnić się, że nie wystąpiły żadne problemy.
W niemal każdym skrypcie Puppeteer napisanym w celu zapewnienia prawidłowego wzorca przeglądania można teraz w dowolnym momencie wstawić Lighthouse, aby mierzyć wydajność i sprawdzone metody. W tym samouczku omówimy nowe tryby Lighthouse, które mogą mierzyć różne części wzorców przeglądania: nawigacje, migawki i przedziały czasu.
Konfiguracja
Interfejsy API wzorców przeglądania są nadal w wersji testowej, ale są już dostępne w Lighthouse. Aby wypróbować poniższe wersje demonstracyjne, musisz mieć Node w wersji 14 lub nowszej. Utwórz pusty katalog i uruchom w nim polecenie:
# 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
Nawigacje
Nowy tryb „nawigacji” w Lighthouse to w rzeczywistości nazwa standardowego (do tej pory) zachowania Lighthouse: analizowania wczytywania strony „na zimno”. Ten tryb służy do monitorowania skuteczności wczytywania strony, ale wzorce przeglądania dają też możliwość uzyskania nowych statystyk.
Aby utworzyć skrypt Lighthouse rejestrujący wczytywanie strony:
- Użyj Puppeteer, aby otworzyć przeglądarkę.
- Rozpocznij wzorzec przeglądania Lighthouse.
- Otwórz docelowy adres URL.
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();
To najprostszy proces. Po otwarciu raportu wyświetla się widok podsumowania zawierający tylko jeden krok. Kliknięcie tego kroku spowoduje wyświetlenie tradycyjnego raportu Lighthouse dotyczącego tej nawigacji.
Jak zwykle w przypadku Lighthouse, ta strona jest wczytywana po wyczyszczeniu pamięci podręcznej i pamięci lokalnej. Jednak prawdziwi użytkownicy odwiedzający witrynę będą mieli różne wizyty z pustą i zapełnioną pamięcią podręczną. Może wystąpić duża różnica w wydajności między wczytywaniem „na zimno” a powrotem użytkownika na stronę z zapełnioną pamięcią podręczną.
Przechwytywanie ciepłego obciążenia
Możesz też dodać do tego skryptu drugą nawigację, tym razem wyłączając czyszczenie pamięci podręcznej i pamięci masowej, które Lighthouse wykonuje domyślnie podczas nawigacji. W następnym przykładzie wczytujemy artykuł na stronie web.dev, aby sprawdzić, jak bardzo korzysta on z buforowania:
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();
Wynikowy raport przepływu wygląda mniej więcej tak:
Połączenie wczytywania na zimno i na ciepło daje pełniejszy obraz tego, co widzą prawdziwi użytkownicy. Jeśli masz witrynę, w której użytkownicy wczytują wiele stron podczas tej samej wizyty, może to dać Ci bardziej realistyczny obraz tego, co widzą użytkownicy.
Zrzuty
Migawki to nowy tryb, który uruchamia audyty Lighthouse w jednym momencie. W przeciwieństwie do zwykłego uruchomienia Lighthouse strona nie jest ponownie wczytywana. Dzięki temu możesz skonfigurować stronę i przetestować ją w dokładnie takim stanie, w jakim się znajduje, np. z otwartym menu lub częściowo wypełnionym formularzem.
W tym przykładzie załóżmy, że chcesz sprawdzić, czy nowy interfejs ustawień zaawansowanych w Squoosh przechodzi automatyczne testy Lighthouse. Te ustawienia są widoczne tylko wtedy, gdy obraz został wczytany, a menu opcji zostało rozwinięte, aby wyświetlić ustawienia zaawansowane.
Ten proces można zapisać w skrypcie za pomocą Puppeteer i na każdym etapie można zrobić zrzut Lighthouse:
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();
Wygenerowany raport pokazuje, że wyniki są ogólnie dobre, ale mogą występować pewne kryteria ułatwień dostępu, które należy sprawdzić ręcznie:
Okresy
Jedną z największych różnic między wynikami skuteczności w terenie (np. z CrUX) a wynikami w laboratorium (np. z Lighthouse) jest brak danych wejściowych użytkownika. W takiej sytuacji może pomóc przedział czasu – ostatni tryb wzorca przeglądania.
Przedział czasu obejmuje audyty Lighthouse w określonym czasie, które mogą, ale nie muszą, obejmować nawigację. To świetny sposób na sprawdzenie, co dzieje się na stronie podczas interakcji. Na przykład Lighthouse domyślnie mierzy CLS podczas wczytywania strony, ale w terenie CLS jest mierzony od początkowej nawigacji do zamknięcia strony. Jeśli CLS jest wywoływany przez interakcje użytkownika, Lighthouse nie był wcześniej w stanie tego wykryć i pomóc w rozwiązaniu problemu.
Zwykła nawigacja Lighthouse będzie miała CLS równy 0. Jednak po przewinięciu na stronie pojawią się problematyczne przesunięcia układu, a wartość CLS wzrośnie.
Poniższy skrypt wygeneruje raport dotyczący wzorca przeglądania z obydwoma działaniami, aby pokazać różnicę.
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();
Spowoduje to wygenerowanie raportu porównującego zwykłą nawigację z przedziałem czasu, który obejmuje zarówno nawigację, jak i późniejsze przewijanie:
Jeśli przyjrzymy się poszczególnym krokom, krok obejmujący tylko nawigację ma CLS równy 0. Świetna witryna!
Jednak krok „Nawigowanie i przewijanie” pokazuje coś innego. Obecnie w przedziałach czasowych dostępne są tylko łączny czas blokowania i skumulowane przesunięcie układu, ale leniwie ładowane treści na tej stronie wyraźnie obniżają CLS witryny.
Wcześniej Lighthouse nie był w stanie zidentyfikować tego problematycznego zachowania CLS, chociaż prawie na pewno pojawiałoby się ono w przypadku rzeczywistych użytkowników. Testowanie wydajności na podstawie interakcji ze skryptami znacznie zwiększa dokładność testów laboratoryjnych.
Prośba o opinię
Nowe interfejsy API wzorca przeglądania w Lighthouse mogą wykonywać wiele nowych zadań, ale pomiar scenariuszy, z którymi spotykają się użytkownicy, może być nadal skomplikowany.
Jeśli masz pytania, zadaj je na forach dyskusyjnych Lighthouse. Błędy i sugestie możesz zgłaszać w narzędziu do śledzenia problemów.