Wypróbuj nowy interfejs Lighthouse API, aby mierzyć wydajność i korzystać ze sprawdzonych metod w całym procesie użytkownika.
Lighthouse to świetne narzędzie do testowania wydajności i sprawdzonych metod podczas wstępnego wczytywania strony. Tradycyjnie korzystanie z Lighthouse było zwykle trudne do przeanalizowania innych aspektów życia strony, takich jak:
- Strona wczytuje się z pamięcią podręczną z pamięci podręcznej
- Strony z aktywowanym mechanizmem Service Worker
- Uwzględnianie potencjalnych interakcji użytkowników
Oznacza to, że narzędzie Lighthouse może przegapić ważne informacje. Podstawowe wskaźniki internetowe zależą od wszystkich wczytań stron, a nie tylko tych z pustą pamięcią podręczną. Poza tym dane takie jak skumulowane przesunięcie układu (CLS) są mierzalne dla całego czasu, gdy strona jest otwarta.
Lighthouse ma nowy interfejs API przepływu użytkownika, który umożliwia testowanie laboratoryjne w dowolnym momencie trwania strony. Komponent Puppeteer służy do tworzenia skryptów wczytywania strony i wywoływania syntetycznych interakcji użytkowników. Narzędzie Lighthouse można wywoływać na wiele sposobów, aby rejestrować kluczowe statystyki w trakcie tych interakcji. Oznacza to, że wydajność można mierzyć podczas wczytywania strony oraz podczas interakcji z nią. Testy ułatwień dostępu można przeprowadzać w CI, nie tylko w pierwszym widoku danych, ale też dokładnie w trakcie procesu płatności, aby uniknąć problemów.
Niemal każdy skrypt Puppeteer napisany w celu zapewnienia sprawnego przepływu użytkowników można teraz w każdej chwili wstawić narzędzie Lighthouse, aby mierzyć skuteczność i korzystać ze sprawdzonych metod. W tym samouczku omawiamy nowe tryby Lighthouse, które mogą mierzyć różne elementy przepływu użytkowników: nawigację, zrzuty i okresy.
Konfiguracja
Interfejsy API przepływu użytkowników są nadal w wersji testowej, ale obecnie są dostępne w Lighthouse. Aby wypróbować poniższe wersje demonstracyjne, musisz mieć węzeł w wersji 14 lub nowszej. Utwórz pusty katalog i uruchom go:
# 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 nadaje nazwę (do tej pory) standardowym działaniu Lighthouse: analizowanie zimnego wczytywania strony. To ten tryb, którego należy używać do monitorowania szybkości wczytywania stron. Jednak przepływy użytkowników stwarzają też możliwość uzyskania nowych statystyk.
Aby utworzyć skrypt Lighthouse, który przechwytuje wczytanie strony:
- Otwórz przeglądarkę w aplikacji Lamppeteer.
- Rozpocznij proces korzystania z Lighthouse.
- Przejdź do docelowego adresu 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 raport zawiera widok podsumowania z tylko jednym krokiem. Kliknięcie tego kroku spowoduje wyświetlenie tradycyjnego raportu Lighthouse dotyczącego danej nawigacji.
Tak jak w przypadku Lighthouse, strona jest wczytywana najpierw z pamięci podręcznej lub pamięci lokalnej, ale w przypadku rzeczywistych użytkowników odwiedzających witrynę występuje mieszanina wizyt z pamięcią podręczną „zimno” i „z pamięci podręcznej”. Może występować duża różnica w wydajności między takim obciążeniem „na zimno” a użytkownikiem powracającym na stronę z nieruchomą pamięcią podręczną.
Przechwytywanie obciążenia „na ciepło”
Do tego skryptu możesz też dodać 2 elementy nawigacyjne, tym razem wyłączając czyszczenie pamięci podręcznej i pamięci podręcznej, które Lighthouse domyślnie wykonuje w nawigacjach. Następny przykład pozwala załadować artykuł na web.dev, aby zobaczyć, jakie korzyści niesie z pamięci podręcznej:
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 procesu będzie wyglądał mniej więcej tak:
Połączenie wczytywania „na zimno” i „na ciepło” daje pełniejszy obraz sytuacji rzeczywistych użytkowników. Jeśli w Twojej witrynie użytkownicy wczytują wiele stron podczas jednej wizyty, dzięki temu uzyskasz bardziej realistyczny obraz sytuacji w terenie.
Zrzuty
Zrzuty to nowy tryb, w którym możesz uruchomić audyty Lighthouse w 1 miejscu w określonym czasie. W przeciwieństwie do normalnego działania Lighthouse strona nie zostanie wczytana ponownie. Pozwala to skonfigurować stronę i przetestować ją dokładnie w jej stanie, np. z otwartym menu lub częściowo wypełnionym formularzem.
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 jest rozwinięte i widać ustawienia zaawansowane.
Ten proces można zrealizować w języku Puppeteer, dzięki czemu możesz zrobić zrzut ekranu w Lighthouse na każdym etapie:
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();
Wynikowy raport pokazuje, że wyniki są zwykle prawidłowe, ale niektóre kryteria dotyczące ułatwień dostępu wymagają ręcznego sprawdzenia:
Okresy
Jedną z największych różnic między wynikami w zakresie wydajności w terenie (np. na podstawie raportu CrUX) a w laboratorium (np. w Lighthouse) jest brak danych wejściowych użytkownika. W takim przypadku pomocne może być przedział czasu, czyli ostatni tryb przeglądania.
W określonym przedziale czasu audyty Lighthouse mogą obejmować okres, który może obejmować nawigację, ale nie jest to wymagane. Jest to świetny sposób na rejestrowanie tego, co dzieje się na stronie podczas interakcji. Na przykład narzędzie Lighthouse domyślnie mierzy wskaźnik CLS podczas wczytywania strony, ale w polu ten wskaźnik jest mierzony od pierwszej nawigacji do zamknięcia strony. Jeśli za CLS wpływają interakcje użytkowników, rozwiązanie to nie jest w stanie wcześniej wykryć i rozwiązać problemu.
Aby to zademonstrować, podajemy witrynę testową, która symuluje wyświetlanie reklam wstrzykiwanych w artykule podczas przewijania strony bez zarezerwowania dla nich miejsca. W długiej serii kart, gdy gniazdo znajduje się w widocznym obszarze, co jakiś czas dodajemy czerwony kwadrat. Ponieważ dla tych czerwonych kwadratów nie było zarezerwowanej przestrzeni, karty znajdujące się pod nimi są przesunięte, co powoduje przesunięcie układu.
Standardowa nawigacja w Lighthouse ma wartość CLS równą 0. Jednak po przewinięciu strony mogą wystąpić problemy z przesunięciem układu, a wartość CLS będzie rosnąć.
Poniższy skrypt wygeneruje raport przepływu użytkowników z oboma 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.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();
W ten sposób wygeneruje się raport porównujący standardową nawigację z okresem obejmującym zarówno nawigację, jak i przewijanie następujące po jej zakończeniu:
Po przeanalizowaniu każdego kroku w kroku dotyczącym tylko nawigacji wartość CLS wynosi 0. Świetna witryna!
Jednak opcja „Nawigacja i przewijanie” przedstawia inną historię. Obecnie w przedziałach czasu dostępne są tylko opcje Całkowity czas blokowania i skumulowane przesunięcie układu, ale leniwe ładowanie treści na tej stronie wyraźnie odpowiada CLS witryny.
Wcześniej narzędzie Lighthouse nie było w stanie zidentyfikować tego problematycznego zachowania CLS, chociaż prawie na pewno występowało to u prawdziwych użytkowników. Testowanie wydajności w ramach interakcji opartych na skryptach znacznie poprawia wierność laboratorium.
Czekam na opinie
Nowe interfejsy API przepływu użytkowników w Lighthouse oferują wiele nowych możliwości, ale mierzenie sytuacji, z jakimi mają do czynienia użytkownicy, nadal może być trudne.
Jeśli masz pytania, skontaktuj się z nami na forach dyskusyjnych dotyczących Lighthouse, a wszelkie błędy lub sugestie zgłoś w narzędziu do śledzenia problemów.