Hãy thử dùng Lighthouse API mới để đo lường hiệu suất và các phương pháp hay nhất trong suốt luồng người dùng.
Lighthouse là một công cụ tuyệt vời để kiểm tra hiệu suất và các phương pháp hay nhất trong quá trình tải trang ban đầu. Tuy nhiên, trước đây, việc sử dụng Lighthouse để phân tích các khía cạnh khác trong vòng đời của một trang thường gặp khó khăn, chẳng hạn như:
- Lượt tải trang có bộ nhớ đệm ấm
- Trang có Trình chạy dịch vụ đã kích hoạt
- Tính đến các hoạt động tương tác có thể có của người dùng
Điều này có nghĩa là Lighthouse có thể bỏ lỡ thông tin quan trọng. Core Web Vitals dựa trên tất cả lượt tải trang, chứ không chỉ những lượt tải có bộ nhớ đệm trống. Ngoài ra, bạn có thể đo lường các chỉ số như Mức thay đổi bố cục tích luỹ (CLS) trong toàn bộ thời gian một trang mở.
Lighthouse có một API luồng người dùng mới cho phép kiểm thử trong phòng thí nghiệm tại bất kỳ thời điểm nào trong vòng đời của trang. Puppeteer được dùng để tải trang theo tập lệnh và kích hoạt các hoạt động tương tác tổng hợp của người dùng. Bạn có thể gọi Lighthouse theo nhiều cách để thu thập thông tin chi tiết quan trọng trong các hoạt động tương tác đó. Điều này có nghĩa là bạn có thể đo lường hiệu suất trong quá trình tải trang và trong quá trình tương tác với trang. Bạn có thể chạy quy trình kiểm tra khả năng hỗ trợ tiếp cận trong CI, không chỉ ở chế độ xem ban đầu mà còn ở sâu trong quy trình thanh toán để đảm bảo không có gì bị hồi quy.
Giờ đây, hầu hết mọi tập lệnh Puppeteer được viết để đảm bảo luồng người dùng hoạt động đều có thể chèn Lighthouse vào bất kỳ thời điểm nào để đo lường hiệu suất và các phương pháp hay nhất trong suốt quá trình. Hướng dẫn này sẽ trình bày các chế độ Lighthouse mới có thể đo lường các phần khác nhau của luồng người dùng: điều hướng, ảnh chụp nhanh và khoảng thời gian.
Thiết lập
Các API luồng người dùng vẫn đang trong giai đoạn xem trước, nhưng hiện đã có trong Lighthouse. Để dùng thử các bản minh hoạ bên dưới, bạn cần có Node phiên bản 14 trở lên. Tạo một thư mục trống và chạy lệnh sau trong thư mục đó:
# 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
Thao tác điều hướng
Chế độ "điều hướng" mới của Lighthouse thực sự đặt tên cho hành vi chuẩn của Lighthouse (cho đến nay): phân tích lượt tải nguội của một trang. Đây là chế độ dùng để theo dõi hiệu suất tải trang, nhưng luồng người dùng cũng mở ra khả năng có thông tin chi tiết mới.
Cách viết tập lệnh cho Lighthouse để ghi lại quá trình tải trang:
- Sử dụng puppeteer để mở trình duyệt.
- Bắt đầu một luồng người dùng Lighthouse.
- Chuyển đến URL mục tiêu.
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();
Đây là quy trình đơn giản nhất. Khi mở, báo cáo sẽ cho thấy một chế độ xem tóm tắt chỉ có một bước. Khi nhấp vào bước đó, bạn sẽ thấy báo cáo Lighthouse truyền thống cho hoạt động điều hướng đó.
Như thường lệ với Lighthouse, trang này được tải khi mọi bộ nhớ đệm hoặc bộ nhớ cục bộ đã được xoá trước, nhưng người dùng thực tế truy cập vào một trang web sẽ có cả lượt truy cập có bộ nhớ đệm nguội và bộ nhớ đệm ấm, đồng thời có thể có sự khác biệt lớn về hiệu suất giữa lượt tải nguội như thế này và người dùng quay lại trang có bộ nhớ đệm vẫn còn ấm.
Ghi lại quá trình tải ấm
Bạn cũng có thể thêm một thao tác điều hướng thứ hai vào tập lệnh này, lần này tắt tính năng xoá bộ nhớ đệm và bộ nhớ mà Lighthouse thực hiện theo mặc định trong các thao tác điều hướng. Ví dụ tiếp theo này tải một bài viết trên chính web.dev để xem lợi ích của việc lưu vào bộ nhớ đệm:
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();
Báo cáo luồng thu được sẽ có dạng như sau:
Sự kết hợp giữa tải nguội và tải ấm mang lại bức tranh toàn cảnh hơn về những gì người dùng thực tế đang trải nghiệm. Nếu bạn có một trang web mà người dùng tải nhiều trang trong cùng một lượt truy cập, thì chỉ số này có thể giúp bạn có cái nhìn thực tế hơn về trải nghiệm của họ trong thực tế.
Tổng quan nhanh
Ảnh chụp nhanh là một chế độ mới chạy quy trình kiểm tra Lighthouse tại một thời điểm duy nhất. Không giống như một lần chạy Lighthouse thông thường, trang này không được tải lại. Điều này giúp bạn có thể thiết lập một trang và kiểm thử trang đó ở trạng thái chính xác: ví dụ: khi trình đơn thả xuống đang mở hoặc biểu mẫu được điền một phần.
Trong ví dụ này, giả sử bạn muốn kiểm tra xem một số giao diện người dùng mới cho phần Cài đặt nâng cao trong Squoosh có vượt qua quy trình kiểm tra tự động của Lighthouse hay không. Các chế độ cài đặt này chỉ hiển thị nếu hình ảnh đã được tải và trình đơn tùy chọn được mở rộng để hiển thị các chế độ cài đặt nâng cao.
Quá trình này có thể được viết bằng Puppeteer và bạn thực sự có thể chụp nhanh Lighthouse ở mỗi bước:
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();
Báo cáo kết quả cho thấy kết quả nhìn chung là tốt, nhưng có thể có một số tiêu chí hỗ trợ tiếp cận cần được kiểm tra theo cách thủ công:
Khoảng thời gian
Một trong những điểm khác biệt lớn nhất giữa kết quả hiệu suất trong thực tế (chẳng hạn như từ CrUX) và trong phòng thí nghiệm (chẳng hạn như từ Lighthouse) là thiếu hoạt động đầu vào của người dùng. Đây là lúc bạn có thể sử dụng khoảng thời gian (chế độ luồng người dùng cuối cùng).
Khoảng thời gian chạy quy trình kiểm tra Lighthouse trong một khoảng thời gian, có thể bao gồm hoặc không bao gồm thao tác điều hướng. Đây là một cách hay để ghi lại những gì đang diễn ra trên một trang trong quá trình tương tác. Ví dụ: theo mặc định, Lighthouse đo lường CLS trong quá trình tải trang, nhưng trong thực tế, CLS được đo lường từ lần điều hướng ban đầu cho đến khi trang đóng. Nếu hoạt động tương tác của người dùng là yếu tố kích hoạt CLS, thì đây là điều mà trước đây Lighthouse không thể phát hiện và giúp khắc phục.
Một thao tác điều hướng thông thường trong Lighthouse sẽ có CLS là 0. Tuy nhiên, khi người dùng cuộn, trang sẽ có các thay đổi bố cục gây vấn đề và giá trị CLS sẽ tăng lên.
Tập lệnh sau đây sẽ tạo báo cáo luồng người dùng với cả hai hành động để cho thấy sự khác biệt.
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();
Thao tác này sẽ tạo một báo cáo so sánh thao tác điều hướng thông thường với một khoảng thời gian chứa cả thao tác điều hướng và thao tác cuộn sau đó:
Khi tìm hiểu kỹ từng bước, bước chỉ điều hướng cho thấy CLS là 0. Trang web tuyệt vời!
Tuy nhiên, bước "Điều hướng và cuộn" lại cho thấy một câu chuyện khác. Hiện tại, chỉ có Tổng thời gian chặn và Mức thay đổi bố cục tích luỹ là có sẵn trong khoảng thời gian, nhưng nội dung tải chậm trên trang này rõ ràng là làm giảm CLS của trang web.
Trước đây, Lighthouse không thể xác định hành vi CLS có vấn đề này, mặc dù hành vi này gần như chắc chắn sẽ xuất hiện trong trải nghiệm của người dùng thực. Việc kiểm thử hiệu suất thông qua các hoạt động tương tác theo kịch bản giúp cải thiện đáng kể độ chân thực của phòng thí nghiệm.
Tìm ý kiến phản hồi
Các API luồng người dùng mới trong Lighthouse có thể làm được nhiều việc mới, nhưng việc đo lường các loại tình huống mà người dùng gặp phải vẫn có thể phức tạp.
Vui lòng liên hệ nếu bạn có thắc mắc trong diễn đàn thảo luận của Lighthouse và gửi mọi lỗi hoặc đề xuất trong trình theo dõi sự cố.