Lighthouse 8.4 hiện đã có trên dòng lệnh và trong Chrome Canary. Tính năng này sẽ ra mắt trong Chrome phiên bản ổn định 95 và có trong PageSpeed Insights trong vòng một tuần.
Để dùng thử Lighthouse Node CLI, hãy sử dụng các lệnh sau:
npm install -g lighthouse
lighthouse https://www.example.com --view
Xem danh sách đầy đủ các thay đổi trong nhật ký thay đổi 8.4.
Quy trình kiểm tra mới
Không tải từng phần hình ảnh có Thời gian hiển thị nội dung lớn nhất
Tải hình ảnh từng phần có thể là một cách hiệu quả để trì hoãn tải hình ảnh ngoài màn hình để không ảnh hưởng đến việc tải nội dung ở đầu trang.
Tuy nhiên, nếu phần tử LCP của trang là hình ảnh, thì việc tải lười hình ảnh đó có thể ảnh hưởng tiêu cực đáng kể đến LCP. Trình duyệt có thể đưa hình ảnh vào hàng đợi và tìm nạp các tài nguyên khác trước, thay vì ưu tiên hình ảnh để tải xuống ngay lập tức. Một nghiên cứu gần đây về tính năng tải lười trong WordPress cho thấy rằng LCP có thể cải thiện tới 15% đối với một số trang web nếu hình ảnh trong khung nhìn ban đầu không được tải lười.
Giờ đây, Lighthouse sẽ phát hiện xem phần tử LCP có phải là hình ảnh tải từng phần hay không và đề xuất xoá thuộc tính loading khỏi phần tử đó.
Để biết thêm thông tin, hãy xem đề xuất ban đầu và yêu cầu kéo triển khai.
Đặt khung nhìn trên thiết bị di động để giảm độ trễ đầu vào
Quy trình kiểm tra viewport đã nằm trong danh mục Các phương pháp hay nhất trong nhiều năm, nhưng từ phiên bản 8.4, chúng tôi cũng đưa lời khuyên này vào danh mục Hiệu suất.
Nhiều trình duyệt dành cho thiết bị di động hỗ trợ tính năng "nhấn đúp để thu phóng" để cho phép người dùng dễ dàng phóng to nội dung không được thiết kế cho màn hình thiết bị di động, tức là nội dung không có <meta name="viewport"> dành cho thiết bị di động rõ ràng. Trong thực tế, điều này có nghĩa là trình duyệt cần chờ đến 300 ms sau khi người dùng nhấn để xem liệu có lượt nhấn thứ hai hay không và trong thời gian đó, trang không thể phản hồi lượt nhấn ban đầu. Điều này dẫn đến FID không thành công trong vài trăm mili giây.
Trong một nghiên cứu gần đây về dữ liệu của Bộ lưu trữ HTTP, hơn một nửa số trang web nhận được điểm từ 90 trở lên trong Lighthouse nhưng không đạt ít nhất một Chỉ số quan trọng chính của trang web, không thiết lập khung nhìn dành cho thiết bị di động và không đạt FID. Do đó, phần hiệu suất của Lighthouse hiện sẽ đề xuất thêm một khung nhìn như sau nếu không tìm thấy khung nhìn nào:
<meta name="viewport" content="width=device-width">
Để biết thêm thông tin, hãy xem vấn đề về đề xuất và yêu cầu kéo triển khai.
Liên hệ với nhóm Lighthouse
Để thảo luận về các tính năng mới, thay đổi trong phiên bản 8.4 hoặc bất kỳ nội dung nào khác liên quan đến Lighthouse:
- Báo cáo vấn đề hoặc gửi ý kiến phản hồi thông qua kho lưu trữ GitHub của Lighthouse.
- Hãy liên hệ với nhóm Lighthouse trên Twitter @____lighthouse.