Lighthouse là một công cụ kiểm tra trang web 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ọ.
Lighthouse 10 có sẵn ngay trên dòng lệnh thông qua npm và trong Chrome Canary. Công cụ này sẽ xuất hiện trong Chrome phiên bản ổn định trên Chrome 112 và trong PageSpeed Insights trong vài tuần tới.
Thay đổi về cách tính điểm
Chỉ số Time To Interactive (TTI) đáng tin cậy sẽ bị xoá trong Lighthouse 10, kết thúc quá trình ngừng sử dụng đã bắt đầu trong Lighthouse 8. Trọng số 10% điểm số của TTI sẽ chuyển sang Điểm số tổng hợp về mức thay đổi bố cục (CLS), hiện chiếm 25% điểm hiệu suất tổng thể.
TTI đánh dấu một thời điểm, nhưng cách chỉ số này được xác định khiến chỉ số này quá nhạy cảm với các yêu cầu mạng bên ngoài và các tác vụ dài. Thời gian hiển thị nội dung lớn nhất (LCP) và Chỉ số tốc độ thường là các phương pháp phỏng đoán hiệu quả hơn về cảm giác tải nội dung của một trang so với số lượng yêu cầu mạng đang hoạt động. Trong khi đó, Tổng thời gian chặn (TBT) xử lý các tác vụ dài và khả năng sử dụng của luồng chính một cách hiệu quả hơn (mặc dù không phải là proxy trực tiếp) có xu hướng tương quan tốt hơn với Các chỉ số quan trọng về trang web được đo lường trong thực tế.
Việc CLS tăng trọng số là yếu tố ngẫu nhiên khiến TTI bị loại bỏ, nhưng phản ánh rõ hơn tầm quan trọng của CLS dưới dạng Chỉ số quan trọng chính của trang web và lý tưởng nhất là sẽ tăng cường sự tập trung cho những trang web vẫn điều chỉnh bố cục một cách không cần thiết.
Chúng tôi hy vọng điều này sẽ giúp cải thiện điểm hiệu suất của hầu hết các trang, vì hầu hết các trang có xu hướng đạt điểm CLS cao hơn TTI. Khi phân tích 13 triệu lượt tải trang trong lần chạy Kho lưu trữ HTTP gần đây nhất, 90% trong số các trang đó sẽ nhận thấy điểm hiệu suất Lighthouse cải thiện, 50% trong số đó nhận thấy hiệu suất cải thiện hơn 5 điểm.
Nếu vì lý do nào đó bạn vẫn cần giá trị Lighthouse TTI (ví dụ: trong câu nhận định CI), giá trị này vẫn có sẵn trong đầu ra JSON của Lighthouse, chỉ với trọng số điểm là 0 và bị ẩn trong báo cáo HTML. Mọi hoạt động truy cập theo tập lệnh đối với giá trị JSON sẽ tiếp tục hoạt động mà không cần thay đổi.
Lần kiểm tra mới
Lighthouse 10 mang đến quy trình kiểm tra hiệu suất hoàn toàn mới và thay đổi đáng kể so với một tính năng khác.
Bộ nhớ đệm cho thao tác tiến/lùi
Bộ nhớ đệm cho thao tác tiến/lùi (bfcache) là một trong những công cụ mạnh nhất dùng để cải thiện hiệu suất của trang cho người dùng thực. Ngoài bộ nhớ đệm của trình duyệt thông thường, một trang được tải từ bfcache sẽ khôi phục bố cục trang và trạng thái thực thi gần như ngay lập tức, chủ yếu bỏ qua tất cả hoạt động tải trang và hiển thị trang của bạn cho người dùng ngay lập tức khi họ điều hướng tiến và lùi trong lịch sử của mình.
Tuy nhiên, có một số cách mà một trang có thể ngăn trình duyệt khôi phục trang từ bfcache. Bài kiểm tra Lighthouse mới này thực sự điều hướng ra khỏi trang thử nghiệm và quay lại để kiểm tra xem nó có thể lưu vào bộ nhớ đệm hay không và liệt kê lý do nếu nó không thành công.
Hãy xem tài liệu về kiểm tra bfcache để biết thêm thông tin.
Dữ liệu đầu vào ngăn dán
Giờ đây, công cụ kiểm tra Các phương pháp hay nhất cũ "Cho phép người dùng dán vào các trường mật khẩu" đã được mở rộng để kiểm tra xem thao tác dán vào bất kỳ trường nhập dữ liệu nào (không chỉ có thể đọc) có hoạt động hay không. Đối với hầu hết các trang web, việc ngăn dán là một trải nghiệm người dùng tiêu cực và ngăn cản quy trình hỗ trợ tiếp cận và an toàn chính đáng.
Quy trình kiểm tra mới hiện là "Cho phép người dùng dán vào các trường nhập dữ liệu" (paste-preventing-inputs).
Người dùng nút
Nếu bạn sử dụng Lighthouse làm thư viện Nút, thì có thể bạn cần lưu ý đến một số thay đổi có thể gây lỗi có lập trình trong bản phát hành này. Xem nhật ký thay đổi phiên bản 10.0 để biết toàn bộ thông tin chi tiết.
Lighthouse 10 cũng đi kèm với phần khai báo loại TypeScript đầy đủ! Bây giờ, bạn nên nhập mọi nội dung được nhập từ lighthouse, điều này sẽ đặc biệt hữu ích nếu bạn đang viết tập lệnh luồng người dùng Lighthouse.
Hãy thử các loại báo cáo và cho chúng tôi biết nếu bạn gặp phải vấn đề khi sử dụng.
Ngọn hải đăng đang chạy
Lighthouse 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à công cụ CLI) và dưới dạng tiện ích của trình duyệt (trong Chrome và Firefox). Công cụ này cũng hỗ trợ một số dịch vụ của Google, bao gồm cả PageSpeed Insights.
Để 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
Hãy 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 bản phát hành Lighthouse 10 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 trong công cụ theo dõi lỗi GitHub GitHub.
- Đặt câu hỏi trong diễn đàn thảo luận về Lighthouse trên GitHub.
- Hãy liên hệ với nhóm Lighthouse trên Twitter @____lighthouse.