ลองใช้ Lighthouse API ใหม่เพื่อวัดประสิทธิภาพและแนวทางปฏิบัติแนะนำตลอดการไหลเวียนของผู้ใช้
Lighthouse เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการทดสอบประสิทธิภาพและแนวทางปฏิบัติแนะนำระหว่างการโหลดหน้าเว็บเริ่มต้น อย่างไรก็ตาม ปกติแล้วการใช้ Lighthouse จะวิเคราะห์ด้านอื่นๆ ของหน้าเว็บ เช่น
- การโหลดหน้าเว็บด้วยแคชที่อุ่นขึ้น
- หน้าเว็บที่มี Service Worker ที่เปิดใช้งานแล้ว
- การพิจารณาการโต้ตอบของผู้ใช้ที่อาจเกิดขึ้น
ซึ่งหมายความว่า Lighthouse อาจพลาดข้อมูลที่สำคัญ Core Web Vitals อิงตามการโหลดหน้าเว็บทั้งหมด ไม่ใช่แค่รายการที่มีแคชว่าง นอกจากนี้ ยังสามารถวัดเมตริกต่างๆ เช่น Cumulative Layout Shift (CLS) ได้ตลอดช่วงเวลาที่หน้าเว็บเปิดขึ้น
Lighthouse มี API การไหลเวียนของผู้ใช้แบบใหม่ที่อนุญาตให้ทำการทดสอบในห้องทดลองเมื่อใดก็ได้ภายในอายุการใช้งานของหน้าเว็บ Puppeteer ใช้เพื่อเขียนสคริปต์การโหลดหน้าเว็บและทริกเกอร์การโต้ตอบของผู้ใช้แบบสังเคราะห์ รวมถึงสามารถเรียกใช้ Lighthouse ได้หลายวิธีเพื่อบันทึกข้อมูลเชิงลึกที่สำคัญระหว่างการโต้ตอบดังกล่าว ซึ่งหมายความว่าระบบจะวัดประสิทธิภาพในระหว่างการโหลดหน้าเว็บและระหว่างการโต้ตอบกับหน้าเว็บได้ การตรวจสอบการช่วยเหลือพิเศษสามารถดำเนินการใน CI ได้ ไม่ใช่เฉพาะในมุมมองเริ่มต้น แต่เจาะลึกในขั้นตอนการชำระเงินเพื่อไม่ให้เกิดปัญหาซ้ำ
สคริปต์ Puppeteer เกือบทุกรายการที่เขียนขึ้นเพื่อให้มั่นใจว่าโฟลว์ผู้ใช้ที่ใช้งานได้สามารถแทรก Lighthouse ได้ทุกเมื่อเพื่อวัดประสิทธิภาพและแนวทางปฏิบัติแนะนำในทุกๆ ด้าน บทแนะนำนี้จะแนะนำโหมด Lighthouse ใหม่ที่สามารถวัดการไหลเวียนของผู้ใช้ในส่วนต่างๆ ได้แก่ การนำทาง สแนปชอต และช่วงเวลา
ตั้งค่า
API การไหลเวียนของผู้ใช้ยังอยู่ระหว่างการแสดงตัวอย่าง แต่ขณะนี้มีอยู่ใน Lighthouse หากต้องการลองใช้การสาธิตด้านล่าง คุณจะต้องใช้โหนดเวอร์ชัน 14 ขึ้นไป สร้างไดเรกทอรีเปล่าและเรียกใช้ดังนี้
# 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
การนำทาง
"การนำทาง" ใหม่ของ Lighthouse จะตั้งชื่อตามลักษณะการทำงานมาตรฐานของ Lighthouse (จนถึงปัจจุบัน) ซึ่งก็คือการวิเคราะห์ Cold Load ของหน้าเว็บ นี่คือโหมดที่ใช้ตรวจสอบประสิทธิภาพการโหลดหน้าเว็บ แต่การไหลเวียนของผู้ใช้ยังเปิดโอกาสให้มีข้อมูลเชิงลึกใหม่ๆ อีกด้วย
วิธีเขียนสคริปต์ Lighthouse เพื่อจับภาพการโหลดหน้าเว็บ
- ใช้ puppeteer เพื่อเปิดเบราว์เซอร์
- เริ่มโฟลว์ผู้ใช้ Lighthouse
- ไปยัง 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();
นี่คือขั้นตอนที่ง่ายที่สุด เมื่อเปิด รายงานจะแสดงมุมมองสรุปที่มีเพียงขั้นตอนเดียว การคลิกที่ขั้นตอนดังกล่าวจะแสดงรายงาน Lighthouse แบบเดิมสำหรับการนำทางนั้น
ใน Lighthouse ตามปกติ หน้านี้จะโหลดโดยล้างแคชหรือพื้นที่เก็บข้อมูลในเครื่องก่อน แต่ผู้ใช้จริงที่เข้าชมเว็บไซต์จะมีการเข้าชมโดยใช้แคชแบบเย็นและอบอุ่นปนกัน และอาจมีความแตกต่างด้านประสิทธิภาพอย่างมากระหว่าง Cold Load เช่นนี้กับผู้ใช้ที่กลับมาที่หน้าซึ่งมีแคชที่ยังคงความอบอุ่น
การถ่ายภาพ Warm Load
นอกจากนี้ คุณยังเพิ่มการนำทางที่ 2 ลงในสคริปต์นี้ได้ โดยครั้งนี้จะเป็นการปิดใช้การล้างแคชและพื้นที่เก็บข้อมูลที่ Lighthouse ทำโดยค่าเริ่มต้นในการนำทาง ตัวอย่างถัดไปนี้จะโหลดบทความใน web.dev เพื่อดูประโยชน์จากการแคช
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();
รายงานขั้นตอนที่ได้จะมีลักษณะดังนี้
การผสมผสานระหว่าง Cold Load และ Warm Load จะให้ภาพรวมที่สมบูรณ์ยิ่งขึ้นเกี่ยวกับประสบการณ์ของผู้ใช้จริง หากคุณมีเว็บไซต์ที่ผู้ใช้โหลดหน้าเว็บหลายหน้าในการเข้าชมครั้งเดียวกัน ก็อาจทำให้คุณเห็นประสบการณ์ที่ผู้เข้าชมอยู่ในพื้นที่นั้นได้อย่างสมเหตุสมผลมากขึ้น
สแนปชอต
สแนปชอตเป็นโหมดใหม่ที่เรียกใช้การตรวจสอบ Lighthouse ในช่วงเวลาหนึ่งๆ หน้าเว็บไม่ได้รับการโหลดซ้ำ ซึ่งต่างจากการเรียกใช้ Lighthouse ปกติ ซึ่งจะปลดล็อกความสามารถในการตั้งค่าหน้าเว็บและทดสอบในสถานะที่แน่นอน เช่น การเปิดเมนูแบบเลื่อนลงหรือแบบฟอร์มที่กรอกข้อมูลลงไปบางส่วน เป็นต้น
ในตัวอย่างนี้ สมมติว่าคุณต้องการตรวจสอบว่า UI ใหม่บางรายการสำหรับการตั้งค่าขั้นสูงภายใน Squoosh ผ่านการตรวจสอบอัตโนมัติของ Lighthouse แล้ว การตั้งค่าเหล่านี้จะแสดงเฉพาะเมื่อรูปภาพถูกโหลดและขยายเมนูตัวเลือกเพื่อแสดงการตั้งค่าขั้นสูง
กระบวนการนี้สามารถเขียนสคริปต์ได้ด้วย Puppeteer และคุณสามารถถ่ายสแนปชอต Lighthouse ได้ในแต่ละขั้นตอน
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();
รายงานที่ได้แสดงให้เห็นว่าผลลัพธ์โดยทั่วไปดี แต่อาจมีเกณฑ์การช่วยเหลือพิเศษบางอย่างที่ต้องตรวจสอบด้วยตนเอง ดังนี้
ช่วงเวลา
ความแตกต่างที่สำคัญที่สุดอย่างหนึ่งระหว่างผลลัพธ์ด้านประสิทธิภาพในภาคสนาม (เช่น จาก CrUX) และในห้องทดลอง (เช่นเดียวกับจาก Lighthouse) คือการที่ผู้ใช้ขาดข้อมูล นี่คือจุดที่ช่วงเวลาซึ่งเป็นโหมดการไหลเวียนของผู้ใช้ล่าสุดช่วยได้
ระยะเวลาหนึ่งๆ จะทำการตรวจสอบของ Lighthouse ในช่วงระยะเวลาหนึ่ง ซึ่งอาจรวมหรือไม่รวมการนำทางใดๆ ก็ได้ นี่เป็นวิธีที่ยอดเยี่ยมในการบันทึกสิ่งที่เกิดขึ้นกับหน้าเว็บระหว่างการโต้ตอบ เช่น โดยค่าเริ่มต้น Lighthouse จะวัด CLS ระหว่างการโหลดหน้าเว็บ แต่ในช่อง ระบบจะวัด CLS จากการนําทางเริ่มต้นจนกระทั่งหน้าเว็บปิด หากการโต้ตอบของผู้ใช้เป็นทริกเกอร์ของ CLS ปัญหานี้อาจเป็นสิ่งที่ Lighthouse ตรวจไม่พบและช่วยแก้ปัญหาก่อนหน้านี้
เพื่อสาธิตเรื่องนี้ โปรดดูเว็บไซต์ทดสอบที่จำลองโฆษณาถูกแทรกลงในบทความระหว่างการเลื่อนโดยไม่มีการสำรองพื้นที่ไว้สำหรับโฆษณา เป็นชุดการ์ดขนาดยาว จะมีสี่เหลี่ยมจัตุรัสสีแดงเพิ่มมาเป็นครั้งคราวเมื่อช่องเข้าสู่วิวพอร์ต เนื่องจากไม่ได้สำรองพื้นที่ไว้สำหรับสี่เหลี่ยมสีแดงเหล่านี้ การ์ดที่อยู่ด้านล่างจึงถูกเลื่อนออกไป ทำให้เกิดการเปลี่ยนเลย์เอาต์
การไปยังส่วนต่างๆ ของ Lighthouse แบบปกติจะมี CLS เป็น 0 อย่างไรก็ตาม เมื่อเลื่อนหน้าเว็บแล้ว เลย์เอาต์ที่เป็นปัญหาจะมีการเปลี่ยนเลย์เอาต์และค่า CLS จะสูงขึ้น
สคริปต์ต่อไปนี้จะสร้างรายงานโฟลว์ผู้ใช้ที่มีการดำเนินการทั้ง 2 แบบ เพื่อแสดงความแตกต่าง
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();
วิธีนี้จะสร้างรายงานที่เปรียบเทียบการนําทางปกติกับช่วงเวลาซึ่งมีทั้งการนําทางและการเลื่อนหลังจากนั้น
เมื่อเจาะลึกในแต่ละขั้นตอน ขั้นตอนสำหรับการนำทางเท่านั้นจะแสดง CLS เป็น 0 ไซต์ที่ยอดเยี่ยม
แต่การตั้งค่า "นำทางและเลื่อน" จะบอกเรื่องราวที่แตกต่าง ปัจจุบันมีเฉพาะเวลาทั้งหมดในการบล็อกและการเปลี่ยนเลย์เอาต์สะสมเท่านั้นที่มีให้ใช้งานในช่วงเวลาต่างๆ แต่เนื้อหาที่โหลดแบบ Lazy Loading ในหน้านี้จะใส่ CLS ของเว็บไซต์อย่างชัดเจน
ก่อนหน้านี้ Lighthouse ระบุลักษณะการทำงานของ CLS ที่เป็นปัญหาไม่ได้ แต่จะแสดงในประสบการณ์การใช้งานของผู้ใช้จริงเกือบทั้งหมด การทดสอบประสิทธิภาพผ่านการโต้ตอบที่มีสคริปต์จะช่วยเพิ่มความแม่นยำของห้องปฏิบัติการได้อย่างมาก
กำลังมองหาความคิดเห็น
API การไหลเวียนของผู้ใช้ใหม่ใน Lighthouse ทำสิ่งใหม่ๆ ได้หลายอย่าง แต่การวัดประเภทสถานการณ์ที่ผู้ใช้พบอาจซับซ้อน
หากมีคำถาม โปรดติดต่อฟอรัมสนทนาของ Lighthouse และรายงานข้อบกพร่องหรือคำแนะนำในเครื่องมือติดตามปัญหา