Có gì mới trong Lighthouse 8.4

Brendan Kenny
Brendan Kenny
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 ChromeFirefox). Công cụ này hỗ trợ nhiều dịch vụ của Google, trong đó có web.dev/measurePageSpeed 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.

Kiểm tra LCP tải từng phần trong một báo cáo Lighthouse

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 đầuyê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.

Kiểm tra khung nhìn của thiết bị di động trong báo cáo Lighthouse

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ấtviệ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: