Alur penggunaan Lighthouse

Coba Lighthouse API baru untuk mengukur performa dan praktik terbaik di seluruh alur penggunaan.

Brendan Kenny

Lighthouse adalah alat yang luar biasa untuk menguji performa dan praktik terbaik selama pemuatan halaman awal. Namun, biasanya sulit menggunakan Lighthouse untuk menganalisis aspek lain dari siklus proses halaman, seperti:

• Halaman dimuat dengan cache yang hangat
• Halaman dengan Pekerja Layanan yang diaktifkan
• Memperhitungkan potensi interaksi pengguna

Artinya, Lighthouse dapat melewatkan informasi penting. Data Web Inti didasarkan pada semua pemuatan halaman, bukan hanya halaman dengan cache kosong. Selain itu, metrik seperti Pergeseran Tata Letak Kumulatif (CLS) dapat diukur selama halaman dibuka.

Lighthouse memiliki API alur pengguna 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 dalam beberapa cara untuk mendapatkan insight utama 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 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 kapan saja untuk mengukur performa dan praktik terbaik di seluruh alur. Tutorial ini akan menjelaskan mode Lighthouse baru yang dapat mengukur berbagai bagian alur penggunaan: navigasi, snapshot, dan rentang waktu.

Penyiapan

API alur penggunaan masih dalam 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 lalu jalankan:

# 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 cold load halaman. Ini adalah mode yang digunakan untuk memantau performa pemuatan halaman, tetapi alur penggunaan juga membuka kemungkinan insight baru.

Untuk membuat skrip Lighthouse yang merekam pemuatan halaman:

1. Gunakan puppeteer untuk membuka browser.
2. Memulai alur penggunaan Lighthouse.
3. 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 menunjukkan tampilan ringkasan hanya dengan satu langkah. Mengklik langkah tersebut akan menampilkan laporan Lighthouse tradisional untuk navigasi tersebut.

Seperti halnya Lighthouse, halaman ini dimuat dengan cache atau penyimpanan lokal yang dihapus terlebih dahulu, tetapi pengguna sebenarnya yang mengunjungi situs akan memiliki campuran kunjungan dengan cache dingin dan hangat, dan mungkin ada perbedaan performa yang besar antara pemuatan dingin seperti ini dan pengguna yang kembali ke halaman dengan cache yang masih hangat.

Merekam pemuatan warm

Anda juga dapat menambahkan navigasi kedua ke skrip ini, kali ini menonaktifkan pembersihan 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 penyimpanan dalam cache:

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 dingin dan hangat memberikan gambaran yang lebih lengkap tentang pengalaman pengguna sebenarnya. Jika Anda memiliki situs tempat pengguna memuat banyak halaman dalam kunjungan yang sama, hal ini dapat memberi Anda gambaran yang lebih realistis tentang pengalaman mereka di lapangan.

Snapshot

Snapshot adalah mode baru yang menjalankan audit Lighthouse pada satu titik waktu. Tidak seperti operasi Lighthouse biasa, 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 terisi 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 dibuat skripnya 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 kurangnya input pengguna. Di sinilah rentang waktu—mode alur pengguna terakhir—dapat membantu.

Rentang waktu menjalankan audit Lighthouse selama jangka waktu tertentu, yang mungkin menyertakan atau tidak menyertakan navigasi. Ini adalah cara yang bagus untuk mencatat hal-hal yang terjadi di halaman selama interaksi. Misalnya, secara default Lighthouse mengukur CLS selama pemuatan halaman, tetapi di kolom, CLS diukur dari navigasi awal hingga halaman ditutup. Jika interaksi pengguna adalah pemicu CLS, ini adalah sesuatu yang sebelumnya tidak dapat ditangkap dan diperbaiki oleh Lighthouse.

Untuk mendemonstrasikan hal ini, berikut adalah situs pengujian yang menyimulasikan iklan yang dimasukkan ke dalam artikel saat di-scroll tanpa ruang yang direservasi untuk iklan tersebut. Dalam rangkaian kartu yang panjang, kotak merah terkadang ditambahkan saat slotnya memasuki area pandang. Karena tidak ada ruang untuk kotak merah ini, kartu di bawahnya digeser ke luar, menyebabkan pergeseran tata letak.

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 penggunaan dengan kedua tindakan tersebut, 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.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();

Tindakan ini akan menghasilkan laporan yang membandingkan navigasi reguler dengan jangka waktu yang berisi navigasi dan scroll setelahnya:

Secara mendalam setiap langkah, langkah khusus navigasi akan menampilkan CLS 0. Situs yang bagus!

Namun, langkah "Menavigasi dan men-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 dapat mengidentifikasi perilaku CLS yang bermasalah ini, meskipun hampir pasti akan muncul dalam pengalaman pengguna sebenarnya. Pengujian performa terhadap interaksi dengan skrip meningkatkan fidelitas lab secara signifikan.

Mencari masukan

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

Hubungi kami jika ada pertanyaan di forum diskusi Lighthouse, dan laporkan bug atau saran di issue tracker.