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