Lighthouse là một công cụ kiểm tra trang web tự động giúp nhà phát triển đưa ra các cơ hội và thông tin chẩn đoán để cải thiện trải nghiệm người dùng trên trang web của họ. Công cụ của Chrome có sẵn trong Công cụ của Chrome cho nhà phát triển, npm (dưới dạng mô-đun nút và CLI) hoặc dưới dạng tiện ích của trình duyệt (trong Chrome và Firefox). Công cụ này hỗ trợ nhiều dịch vụ của Google, trong đó có web.dev/measure và PageSpeed Insights.
Lighthouse 8.4 có sẵn ngay trên dòng lệnh và trong Chrome Canary. Trang này sẽ xuất hiện trong Bản ổn định của Chrome trên Chrome 95 và xuất hiện trong PageSpeed Insights trong vòng một tuần.
Để dùng thử CLI nút Lighthouse, 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 phiên bản 8.4.
Lần kiểm tra mới
Không tải từng phần hình ảnh Thời gian hiển thị nội dung lớn nhất
Tải từng phần hình ảnh có thể là một cách hiệu quả để trì hoãn hình ảnh ngoài màn hình nhằm không ảnh hưởng đến việc tải nội dung trong màn hình đầu tiên.
Tuy nhiên, nếu phần tử LCP của một trang là hình ảnh, thì việc tải từng phần 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. Một nghiên cứu gần đây về tính năng tải từng phần trong WordPress cho thấy 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 từng phần.
Lighthouse giờ đây sẽ phát hiện xem phần tử LCP có phải là hình ảnh tải từng phần không và đề xuất xoá thuộc tính loading
khỏi hình ảnh đó.
Để biết thêm thông tin, hãy xem đề xuất ban đầu và yêu cầu lấy dữ liệu triển khai.
Thiết lập khung nhìn trên thiết bị di động để có Độ trễ đầu vào đầu tiên tốt hơn
Bài kiểm tra viewport
đã nằm trong danh mục Phương pháp hay nhất trong nhiều năm, nhưng phiên bản 8.4 cũng hoan nghênh lời khuyên này dành cho danh mục Hiệu suất.
Nhiều trình duyệt 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">
rõ ràng cho thiết bị di động. Trong thực tế, điều này có nghĩa là trình duyệt cần đợi tối đa 300 mili giây sau khi người dùng nhấn để xem liệu lần nhấn thứ hai có tiếp theo hay không và trong thời gian đó, trang không thể phản hồi với lần nhấn đầu tiên. Việc này sẽ dẫn đến FID không đạt là vài trăm mili giây.
Trong một nghiên cứu gần đây về dữ liệu từ Kho lưu trữ HTTP, hơn một nửa trang web có điểm số 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 chế độ xem trên thiết bị di động và không đạt FID. Do đó, giờ đây, phần hiệu suất Lighthouse 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 chi tiết, hãy xem vấn đề về đề xuất và việc triển khai yêu cầu lấy dữ liệu.
Liên hệ với nhóm Lighthouse
Để thảo luận về các tính năng mới, những thay đổi trong phiên bản 8.4 hoặc bất cứ điều gì khác liên quan đến Lighthouse:
- Báo cáo sự cố hoặc gửi phản hồi qua kho lưu trữ GitHub về Lighthouse.
- Hãy liên hệ với nhóm Lighthouse trên Twitter @____lighthouse.