Halaman ini diterjemahkan oleh Cloud Translation API.

Alur penggunaan Lighthouse

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

Brendan Kenny

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

Pemuatan halaman dengan warm cache
Halaman dengan Service Worker aktif
Memperhitungkan interaksi pengguna yang potensial

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

Lighthouse memiliki API alur pengguna baru yang memungkinkan pengujian lab kapan saja dalam masa aktif halaman. Puppeteer digunakan untuk membuat skrip pemuatan halaman dan memicu interaksi pengguna yang sintetis, dan Lighthouse dapat dipanggil dalam beberapa cara untuk menangkap 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 bagian dalam alur checkout untuk memastikan tidak ada yang mengalami 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 secara keseluruhan. Tutorial ini akan menjelaskan mode Lighthouse baru yang dapat mengukur berbagai bagian alur pengguna: navigasi, snapshot, dan rentang waktu.

Penyiapan

API alur penggunaan masih dalam versi pratinjau, tetapi tersedia di Lighthouse saat ini. Untuk mencoba demo di bawah ini, Anda memerlukan Node versi 14 atau yang lebih baru. Buat direktori kosong dan 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

Tanpa baris {"type": "module"}, npm init -y akan ditetapkan secara default ke CommonJS, bukan modul. Kode berikut masih dapat digunakan, tetapi Anda harus beralih ke require(), bukan import, untuk menyertakan dependensi.

Navigasi

Mode "navigasi" Lighthouse yang baru sebenarnya memberikan nama untuk perilaku Lighthouse standar (hingga saat ini): menganalisis cold load suatu 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:

Gunakan puppeteer untuk membuka browser.
Mulai alur pengguna 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 dengan satu langkah saja. Mengklik langkah tersebut akan menampilkan laporan Lighthouse biasa untuk navigasi tersebut.

Laporan alur Lighthouse yang menampilkan satu navigasi — Lihat laporan secara langsung

Seperti yang biasanya pada Lighthouse, halaman ini dimuat dengan cache atau penyimpanan lokal yang dihapus terlebih dahulu, tetapi pengguna nyata yang mengunjungi situs akan memiliki campuran kunjungan dengan cache cold dan warm, dan mungkin ada perbedaan performa yang besar antara cold load seperti ini dan pengguna yang kembali ke halaman dengan cache yang masih hangat.

Menangkap beban hangat

Anda juga dapat menambahkan navigasi kedua ke skrip ini, kali ini menonaktifkan penghapusan cache dan penyimpanan yang dilakukan Lighthouse secara default di navigasi. Contoh berikutnya ini memuat artikel di web.dev 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:

Laporan alur Lighthouse menampilkan dua navigasi, satu dingin dan satu hangat, yang memiliki skor performa lebih tinggi — Lihat laporan secara langsung

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

Snapshot

Snapshot adalah mode baru yang menjalankan audit Lighthouse pada satu titik waktu. Tidak seperti proses Lighthouse biasa, halaman tidak dimuat ulang. Hal ini membuka kemampuan untuk menyiapkan halaman dan mengujinya dalam status persisnya: dengan membuka drop-down atau formulir yang terisi sebagian, misalnya.

Untuk contoh ini, misalkan Anda ingin memeriksa bahwa beberapa UI baru untuk Setelan Lanjutan dalam Squoosh lulus pemeriksaan Lighthouse otomatis. Setelan ini hanya dapat dilihat jika gambar telah dimuat dan menu opsi diluaskan untuk menampilkan setelan lanjutan.

Proses ini dapat dibuatkan skrip dengan Puppeteer dan Anda sebenarnya 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 bagus, tetapi mungkin ada beberapa kriteria aksesibilitas yang perlu diperiksa secara manual:

Laporan alur Lighthouse yang menampilkan kumpulan snapshot yang diambil — Lihat laporan secara langsung

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 beberapa jangka waktu, yang mungkin menyertakan atau 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 kolom, CLS diukur dari navigasi awal hingga halaman ditutup. Jika interaksi pengguna adalah pemicu CLS, hal ini adalah sesuatu yang sebelumnya tidak dapat ditangkap dan diperbaiki oleh Lighthouse.

Untuk mendemonstrasikannya, berikut situs uji coba yang menyimulasikan iklan yang dimasukkan ke dalam artikel selama scroll tanpa ada ruang yang disiapkan untuknya. Dalam serangkaian kartu yang panjang, sesekali kotak merah akan ditambahkan ketika slotnya memasuki area pandang. Karena ruang tidak dicadangkan untuk kotak merah ini, kartu-kartu di bawahnya bergeser keluar, sehingga 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 naik.

Coba situs demo

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 rentang waktu yang berisi navigasi dan scroll setelahnya:

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

Laporan Lighthouse hanya mencakup navigasi halaman dengan semua metrik ramah lingkungan

Namun, langkah "Navigasi dan scroll" menunjukkan cerita yang berbeda. Saat ini, hanya Total Waktu Pemblokiran dan Pergeseran Tata Letak Kumulatif yang tersedia dalam rentang waktu, tetapi konten yang lambat dimuat di halaman ini secara jelas mencantumkan CLS untuk situs tersebut.

Laporan Lighthouse yang mencakup navigasi dan scroll halaman dengan CLS yang gagal

Sebelumnya, Lighthouse tidak akan dapat mengidentifikasi perilaku CLS yang bermasalah ini, meskipun hampir pasti akan muncul dalam pengalaman pengguna nyata. Pengujian performa melalui interaksi dengan skrip meningkatkan fidelitas lab secara signifikan.

Meminta masukan

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

Jika ada pertanyaan, hubungi forum diskusi Lighthouse, dan laporkan bug atau saran di issue tracker.