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