Coba Lighthouse API baru untuk mengukur performa dan praktik terbaik di seluruh alur penggunaan.
Lighthouse adalah alat yang luar biasa untuk menguji performa dan praktik terbaik selama pemuatan halaman awal. Namun, Lighthouse biasanya sulit digunakan untuk menganalisis aspek lain dari siklus proses halaman, seperti:
- Pemuatan halaman dengan cache hangat
- Halaman dengan Service Worker yang diaktifkan
- Memperhitungkan potensi interaksi pengguna
Artinya, Lighthouse dapat melewatkan informasi penting. Core Web Vitals didasarkan pada semua pemuatan halaman, bukan hanya pemuatan halaman dengan cache kosong. Selain itu, metrik seperti Cumulative Layout Shift (CLS) dapat diukur selama halaman dibuka.
Lighthouse memiliki API alur penggunaan baru yang memungkinkan pengujian lab di titik mana pun dalam masa aktif halaman. Puppeteer digunakan untuk membuat skrip pemuatan halaman dan memicu interaksi pengguna sintetis, dan Lighthouse dapat dipanggil dengan berbagai cara untuk mendapatkan insight penting selama interaksi tersebut. Artinya, performa dapat diukur selama pemuatan halaman dan selama interaksi dengan halaman. Pemeriksaan aksesibilitas dapat dijalankan di CI, tidak hanya pada tampilan awal, tetapi juga jauh di dalam alur checkout untuk memastikan tidak ada regresi.
Hampir semua skrip Puppeteer yang ditulis untuk memastikan alur penggunaan yang berfungsi kini dapat menyisipkan Lighthouse di titik mana pun untuk mengukur performa dan praktik terbaik secara keseluruhan. Tutorial ini akan membahas mode Lighthouse baru yang dapat mengukur berbagai bagian alur pengguna: navigasi, snapshot, dan rentang waktu.
Penyiapan
API alur penggunaan masih dalam versi pratinjau, tetapi sudah tersedia di Lighthouse saat ini. Untuk mencoba demo di bawah, Anda memerlukan Node versi 14 atau yang lebih baru. Buat direktori kosong dan jalankan perintah berikut di dalamnya:
# 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
Navigasi
Mode "navigasi" Lighthouse yang baru sebenarnya memberi nama pada perilaku Lighthouse standar (hingga saat ini): menganalisis pemuatan cold halaman. Ini adalah mode yang digunakan untuk memantau performa pemuatan halaman, tetapi alur pengguna juga membuka kemungkinan insight baru.
Untuk membuat skrip Lighthouse yang merekam pemuatan halaman:
- Gunakan puppeteer untuk membuka browser.
- Memulai alur penggunaan Lighthouse.
- Buka URL target.
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();
Ini adalah alur yang paling sederhana. Saat dibuka, laporan akan menampilkan tampilan ringkasan yang hanya berisi satu langkah. Mengklik langkah tersebut akan menampilkan laporan Lighthouse tradisional untuk navigasi tersebut.
Seperti biasa dengan Lighthouse, halaman ini dimuat dengan cache atau penyimpanan lokal yang dihapus terlebih dahulu, tetapi pengguna sungguhan yang mengunjungi situs akan memiliki campuran kunjungan dengan cache cold dan warm, dan mungkin ada perbedaan performa yang besar antara pemuatan cold seperti ini dan pengguna yang kembali ke halaman dengan cache yang masih warm.
Merekam pemuatan hangat
Anda juga dapat menambahkan navigasi kedua ke skrip ini, kali ini dengan menonaktifkan penghapusan cache dan penyimpanan yang dilakukan Lighthouse secara default dalam navigasi. Contoh berikutnya memuat artikel di web.dev itu sendiri untuk melihat seberapa besar manfaatnya dari caching:
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();
Laporan alur yang dihasilkan akan terlihat seperti ini:
Kombinasi pemuatan cold dan warm memberikan gambaran yang lebih lengkap tentang pengalaman pengguna yang sebenarnya. Jika Anda memiliki situs tempat pengguna memuat banyak halaman dalam kunjungan yang sama, hal ini dapat memberi Anda gambaran yang lebih realistis tentang apa yang mereka alami di lapangan.
Snapshot
Snapshot adalah mode baru yang menjalankan audit Lighthouse pada satu waktu. Tidak seperti operasi Lighthouse normal, halaman tidak dimuat ulang. Hal ini memungkinkan Anda menyiapkan halaman dan mengujinya dalam status yang tepat: misalnya, dengan menu drop-down terbuka atau formulir yang diisi sebagian.
Untuk contoh ini, misalkan Anda ingin memeriksa apakah beberapa UI baru untuk Setelan Lanjutan dalam Squoosh lulus pemeriksaan Lighthouse otomatis. Setelan ini hanya terlihat jika gambar telah dimuat dan menu opsi diperluas untuk menampilkan setelan lanjutan.
Proses ini dapat ditulis dalam skrip dengan Puppeteer dan Anda dapat mengambil snapshot Lighthouse di setiap langkah:
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();
Laporan yang dihasilkan menunjukkan bahwa hasilnya umumnya baik, tetapi mungkin ada beberapa kriteria aksesibilitas yang perlu diperiksa secara manual:
Rentang waktu
Salah satu perbedaan terbesar antara hasil performa di lapangan (seperti dari CrUX) dan di lab (seperti dari Lighthouse) adalah tidak adanya input pengguna. Di sinilah rentang waktu—mode alur penggunaan terakhir—dapat membantu.
Timespan menjalankan audit Lighthouse selama jangka waktu tertentu, yang mungkin menyertakan atau tidak menyertakan navigasi. Ini adalah cara yang bagus untuk mengetahui apa yang terjadi pada halaman selama interaksi. Misalnya, secara default, Lighthouse mengukur CLS selama pemuatan halaman, tetapi di lapangan, CLS diukur dari navigasi awal hingga halaman ditutup. Jika interaksi pengguna adalah pemicu CLS, ini adalah sesuatu yang sebelumnya tidak dapat dideteksi dan diperbaiki oleh Lighthouse.
Navigasi Lighthouse reguler akan memiliki CLS 0. Namun, setelah di-scroll, halaman akan mengalami pergeseran tata letak yang bermasalah dan nilai CLS akan meningkat.
Skrip berikut akan menghasilkan laporan alur pengguna dengan kedua tindakan, untuk menunjukkan perbedaannya.
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();
Tindakan ini akan menghasilkan laporan yang membandingkan navigasi reguler dengan rentang waktu yang berisi navigasi dan scroll setelahnya:
Jika kita lihat setiap langkahnya, langkah khusus navigasi menunjukkan CLS 0. Situs yang bagus.
Namun, langkah "Navigate and scroll" menunjukkan hal yang berbeda. Saat ini, hanya Total Blocking Time dan Cumulative Layout Shift yang tersedia dalam rentang waktu, tetapi konten yang dimuat lambat di halaman ini jelas menurunkan CLS untuk situs.
Sebelumnya, Lighthouse tidak akan dapat mengidentifikasi perilaku CLS yang bermasalah ini, meskipun hampir pasti akan muncul dalam pengalaman pengguna sungguhan. Pengujian performa melalui interaksi yang ditulis dalam skrip akan meningkatkan fidelitas lab secara signifikan.
Mencari masukan
API alur penggunaan baru di Lighthouse dapat melakukan banyak hal baru, tetapi mungkin masih rumit untuk mengukur jenis skenario yang dihadapi pengguna Anda.
Jika ada pertanyaan, hubungi kami di forum diskusi Lighthouse, dan laporkan bug atau saran di issue tracker.