Arus pengguna mercusuar

Lighthouse adalah alat yang fantastis untuk menguji kinerja dan praktik terbaik selama pemuatan halaman awal. Namun, biasanya sulit menggunakan Lighthouse untuk menganalisis aspek lain dari kehidupan halaman, seperti:

• Halaman dimuat dengan cache hangat
• Halaman dengan Service Worker yang diaktifkan
• Akuntansi untuk interaksi pengguna potensial

Ini berarti Mercusuar dapat melewatkan informasi penting. Itu Vital Web Inti berdasarkan pada semua memuat halaman, bukan hanya yang memiliki cache kosong. Selain itu, metrik seperti Pergeseran Tata Letak Kumulatif (CLS) terukur untuk seluruh waktu halaman terbuka.

Lighthouse memiliki API aliran pengguna baru yang memungkinkan pengujian lab di titik mana pun dalam umur halaman. Dalang digunakan untuk memuat skrip halaman dan memicu interaksi pengguna sintetis, dan Lighthouse dapat dipanggil dengan berbagai cara untuk menangkap wawasan utama selama interaksi tersebut. Ini berarti kinerja dapat diukur selama pemuatan halaman dan selama interaksi dengan halaman. Pemeriksaan aksesibilitas dapat dijalankan di CI, tidak hanya pada tampilan awal tetapi jauh di dalam alur checkout Anda untuk memastikan tidak ada yang mundur.

Hampir semua skrip Dalang yang ditulis untuk memastikan alur pengguna yang berfungsi sekarang dapat memasukkan Lighthouse di titik mana pun untuk mengukur kinerja dan praktik terbaik secara keseluruhan. Tutorial ini akan membahas mode Lighthouse baru yang dapat mengukur berbagai bagian aliran pengguna: navigasi, snapshot, dan rentang waktu.

Mempersiapkan #

API alur pengguna masih dalam pratinjau, tetapi tersedia di Lighthouse hari ini. Untuk mencoba demo di bawah ini, Anda memerlukan Node versi 14 atau yang lebih baru. Buat direktori kosong dan jalankan di dalamnya:

echo '{"type": "module"}' > package.json

npm init -y

npm install lighthouse puppeteer membuka

Navigasi #

Mode "navigasi" Lighthouse yang baru sebenarnya memberi nama pada perilaku Lighthouse standar (hingga sekarang): menganalisis pemuatan halaman yang dingin. Ini adalah mode yang digunakan untuk memantau kinerja pemuatan halaman, tetapi alur pengguna juga membuka kemungkinan wawasan baru.

Untuk skrip Lighthouse yang menangkap pemuatan halaman:

1. Gunakan dalang untuk membuka browser.
2. Mulai alur pengguna Lighthouse.
3. Arahkan ke URL target.

impor fs from 'fs';
impor membuka from 'open';
impor puppeteer from 'puppeteer';
impor {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';
async fungsi captureReport() {
konstan browser = await puppeteer.launch({headless: Salah});
konstan page = await browser.newPage();
konstan flow = await startFlow(page, {name: 'Single Navigation'});
await flow.navigasikan('https://web.dev/performance-scoring/');
await browser.menutup();
konstan laporan = flow.generateReport();
fs.writeFileSync('flow.report.html', laporan);
membuka('flow.report.html', {wait: Salah});
}
captureReport();

Ini adalah aliran paling sederhana. Saat dibuka, laporan menunjukkan tampilan ringkasan hanya dengan satu langkah. Mengklik langkah itu akan menampilkan laporan Lighthouse tradisional untuk navigasi itu.

Seperti biasanya dengan Lighthouse, halaman ini dimuat dengan cache atau penyimpanan lokal apa pun yang dibersihkan terlebih dahulu, tetapi pengguna nyata yang mengunjungi situs akan memiliki campuran kunjungan dengan cache dingin dan hangat, dan mungkin ada perbedaan kinerja yang besar antara pemuatan dingin seperti ini dan pengguna kembali ke halaman dengan cache yang masih hangat.

Menangkap beban hangat #

Anda juga dapat menambahkan navigasi kedua ke skrip ini, kali ini menonaktifkan pembersihan cache dan penyimpanan yang dilakukan Lighthouse secara default di navigasi. Contoh berikut ini memuat artikel di web.dev sendiri untuk melihat seberapa besar manfaat dari caching:

async fungsi captureReport() {
konstan browser = await puppeteer.launch({headless: Salah});
konstan page = await browser.newPage();
konstan testUrl = 'https://web.dev/performance-scoring/';
konstan flow = await startFlow(page, {name: 'Cold and warm navigations'});
await flow.navigasikan(testUrl, {
stepName: 'Cold navigation'
});
await flow.navigasikan(testUrl, {
stepName: 'Warm navigation',
configContext: {
settingsOverrides: {disableStorageReset: benar},
},
});
await browser.menutup();
konstan laporan = flow.generateReport();
fs.writeFileSync('flow.report.html', laporan);
membuka('flow.report.html', {wait: Salah});
}
captureReport();

Laporan aliran yang dihasilkan terlihat seperti ini:

Kombinasi beban dingin dan hangat menawarkan gambaran yang lebih lengkap tentang apa yang dialami pengguna sebenarnya. Jika Anda memiliki situs di mana pengguna memuat banyak halaman dalam kunjungan yang sama, ini mungkin dapat memberi Anda gambaran yang lebih realistis tentang apa yang mereka alami di lapangan.

Snapshot #

Snapshots adalah mode baru yang menjalankan audit Lighthouse pada satu titik waktu. Tidak seperti Lighthouse run normal, halaman tidak dimuat ulang. Ini membuka kunci kemampuan untuk menyiapkan halaman dan mengujinya dalam keadaan yang tepat: dengan drop-down terbuka atau formulir yang terisi sebagian, misalnya.

Untuk contoh ini, misalkan Anda ingin memeriksa bahwa beberapa UI baru untuk Pengaturan Lanjutan di dalam Squoosh melewati pemeriksaan Lighthouse otomatis. Pengaturan ini hanya terlihat jika gambar telah dimuat dan menu opsi diperluas untuk menampilkan pengaturan lanjutan.

Proses ini dapat dituliskan dengan Puppeteer dan Anda benar-benar dapat mengambil snapshot Lighthouse di setiap langkah:

async fungsi captureReport() {
konstan browser = await puppeteer.launch({headless: Salah});
konstan page = await browser.newPage();
konstan flow = await startFlow(page, {name: 'Squoosh snapshots'});
await page.goto('https://squoosh.app/', {waitUntil: 'networkidle0'});

konstan demoImageSelector = 'ul[class*="demos"] button';
await page.waitForSelector(demoImageSelector);
await flow.snapshot({stepName: 'Page loaded'});
await page.click(demoImageSelector);

konstan 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.menutup();
konstan laporan = flow.generateReport();
fs.writeFileSync('flow.report.html', laporan);
membuka('flow.report.html', {wait: Salah});
}
captureReport();

Laporan yang dihasilkan menunjukkan bahwa hasil umumnya baik, tetapi mungkin ada beberapa kriteria aksesibilitas yang perlu diperiksa secara manual:

rentang waktu #

Salah satu perbedaan terbesar antara hasil kinerja di lapangan (seperti dari CrUX) dan di laboratorium (seperti dari Lighthouse) adalah kurangnya input pengguna. Di sinilah rentang waktu—mode aliran pengguna terakhir—dapat membantu.

Rentang waktu menjalankan audit Lighthouse selama beberapa periode waktu, yang mungkin atau mungkin tidak menyertakan navigasi. Ini adalah cara yang bagus untuk menangkap apa yang terjadi dengan 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 Lighthouse sebelumnya tidak dapat menangkap dan membantu memperbaikinya.

Untuk menunjukkan ini, berikut adalah situs uji yang mensimulasikan iklan yang disuntikkan ke dalam artikel selama pengguliran tanpa disediakan ruang untuk iklan tersebut. Dalam rangkaian kartu yang panjang, kotak merah sesekali ditambahkan saat slotnya memasuki area pandang. Karena ruang tidak disediakan untuk kotak merah ini, kartu di bawahnya digeser, menyebabkan pergeseran tata letak.

Navigasi Lighthouse biasa akan memiliki CLS 0. Namun, setelah digulir, halaman akan mengalami pergeseran tata letak yang bermasalah dan nilai CLS akan naik.

Skrip berikut akan menghasilkan laporan alur pengguna dengan kedua tindakan, untuk menunjukkan perbedaannya.

async fungsi captureReport() {
konstan browser = await puppeteer.launch({headless: Salah});
konstan page = await browser.newPage();
konstan session = await page.target().createCDPSession();
konstan testUrl = 'https://pie-charmed-treatment.glitch.me/';
konstan flow = await startFlow(page, {name: 'CLS during navigation and on scroll'});

await flow.navigasikan(testUrl, {stepName: 'Navigate only'});

await flow.startTimespan({stepName: 'Navigate and scroll'});
await page.goto(testUrl, {waitUntil: 'networkidle0'});
await session.send('Input.synthesizeScrollGesture', {
x: 100,
y: ,
yDistance: -2500,
speed: 1000,
repeatCount: 2,
repeatDelayMs: 250,
});
await flow.endTimespan();
await browser.menutup();
konstan laporan = flow.generateReport();
fs.writeFileSync('flow.report.html', laporan);
membuka('flow.report.html', {wait: Salah});
}
captureReport();

Ini menghasilkan laporan yang membandingkan navigasi biasa dengan rentang waktu yang berisi navigasi dan pengguliran sesudahnya:

Menggali setiap langkah, langkah navigasi saja menunjukkan CLS 0. Situs hebat!

Namun langkah "Navigasi dan gulir" menceritakan kisah yang berbeda. Saat ini hanya Waktu Pemblokiran Total dan Pergeseran Tata Letak Kumulatif yang tersedia dalam rentang waktu, tetapi konten yang dimuat lambat di halaman ini jelas-jelas menahan CLS untuk situs tersebut.

Sebelumnya, Lighthouse tidak akan dapat mengidentifikasi perilaku CLS yang bermasalah ini, meskipun hampir pasti akan muncul dalam pengalaman pengguna nyata. Pengujian kinerja atas interaksi yang dituliskan meningkatkan kesetiaan lab secara signifikan.

Mencari umpan balik #

API aliran pengguna baru di Lighthouse dapat melakukan banyak hal baru, tetapi mungkin masih rumit untuk mengukur jenis skenario yang dihadapi pengguna Anda.

Silakan hubungi jika ada pertanyaan di Mercusuar Forum Diskusi, dan ajukan bug atau saran apa pun di pelacak masalah.