Tính năng mới trong Lighthouse 6.0

Các chỉ số mới, nội dung cập nhật về Điểm hiệu suất, quy trình kiểm tra mới và nhiều tính năng khác.

Hôm nay, chúng tôi phát hành Lighthouse 6.0!

Lighthouse là một công cụ kiểm tra trang web tự động, giúp nhà phát triển nắm bắt 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ụ này có trong Công cụ của Chrome cho nhà phát triển, npm (dưới dạng mô-đun Node và CLI) hoặc dưới dạng tiện ích trình duyệt (trong Chrome và Firefox). Công cụ này hỗ trợ nhiều dịch vụ của Google, bao gồm cả PageSpeed Insights.

Lighthouse 6.0 hiện đã có trên npm và trong Chrome Canary. Các dịch vụ khác của Google sử dụng Lighthouse sẽ nhận được bản cập nhật này vào cuối tháng. Tính năng này sẽ ra mắt trong Chrome phiên bản ổn định 84 (giữa tháng 7).

Để dùng thử Lighthouse Node CLI, hãy sử dụng các lệnh sau: bash npm install -g lighthouse lighthouse https://www.example.com --view

Phiên bản Lighthouse này có rất nhiều thay đổi được liệt kê trong nhật ký thay đổi của phiên bản 6.0. Chúng tôi sẽ đề cập đến các điểm nổi bật trong bài viết này.

• Chỉ số mới
• Cập nhật điểm hiệu suất
• Kiểm tra mới
• Lighthouse CI
• Đổi tên bảng điều khiển Chrome DevTools
• Tính năng mô phỏng trên thiết bị di động
• Tiện ích trình duyệt
• Ngân sách
• Đường liên kết đến vị trí nguồn
• Trên đường chân trời
• Xin cảm ơn!

Các chỉ số mới

Lighthouse 6.0 giới thiệu 3 chỉ số mới cho báo cáo. Hai trong số các chỉ số mới này – Nội dung lớn nhất hiển thị (LCP) và Mức thay đổi bố cục tích luỹ (CLS) – là các phương pháp triển khai trong phòng thí nghiệm của Chỉ số quan trọng chính của trang web.

Thời gian hiển thị nội dung lớn nhất (LCP)

Thời gian hiển thị nội dung lớn nhất (LCP) là chỉ số đo lường trải nghiệm tải trang. Chỉ báo này đánh dấu thời điểm trong quá trình tải trang khi nội dung chính (hoặc "lớn nhất") đã tải và người dùng có thể nhìn thấy. LCP là một chỉ số bổ sung quan trọng cho Hiển thị nội dung đầu tiên (FCP) chỉ ghi lại thời điểm bắt đầu trải nghiệm tải. LCP cung cấp cho nhà phát triển một tín hiệu về tốc độ người dùng thực sự có thể xem nội dung của một trang. Điểm LCP dưới 2,5 giây được coi là "Tốt".

Để biết thêm thông tin, hãy xem video chuyên sâu này của Paul Irish về LCP.

Điểm số tổng hợp về mức thay đổi bố cục (CLS)

Mức thay đổi bố cục tích luỹ (CLS) là chỉ số đo lường độ ổn định của hình ảnh. Chỉ số này đo lường mức độ thay đổi về mặt hình ảnh của nội dung trên trang. Điểm CLS thấp là tín hiệu cho nhà phát triển biết rằng người dùng của họ không gặp phải sự thay đổi nội dung quá mức; điểm CLS dưới 0,10 được coi là "Tốt".

CLS trong môi trường phòng thí nghiệm được đo lường cho đến khi kết thúc quá trình tải trang. Trong khi đó, trong thực tế, bạn có thể đo lường CLS cho đến lượt tương tác đầu tiên của người dùng hoặc bao gồm tất cả hoạt động đầu vào của người dùng.

Để biết thêm thông tin, hãy xem video chuyên sâu này về CLS của Annie Sullivan.

Tổng thời gian chặn (TBT)

Tổng thời gian chặn (TBT) định lượng khả năng phản hồi tải, đo lường tổng thời gian mà luồng chính bị chặn đủ lâu để ngăn khả năng phản hồi hoạt động đầu vào. TBT đo lường tổng thời gian từ thời điểm Hiển thị nội dung đầu tiên (FCP) đến Thời điểm tương tác (TTI). Đây là chỉ số đồng hành với TTI và giúp đo lường chính xác hơn hoạt động của luồng chính chặn khả năng người dùng tương tác với trang của bạn.

Ngoài ra, TBT có mối tương quan tốt với chỉ số thực địa Độ trễ đầu vào đầu tiên (FID), một trong các Chỉ số quan trọng chính của trang web.

Cập nhật điểm hiệu suất

Điểm hiệu suất trong Lighthouse được tính toán từ một tổ hợp trọng số của nhiều chỉ số để tóm tắt tốc độ của trang. Sau đây là công thức tính điểm hiệu suất phiên bản 6.0.

Giai đoạn	Tên chỉ số	Trọng số của chỉ số
Sớm (15%)	First Contentful Paint (FCP)	15%
Trung bình (40%)	Chỉ số tốc độ (SI)	15%
	Thời gian hiển thị nội dung lớn nhất (LCP)	25%
Muộn (15%)	Thời gian tương tác (TTI)	15%
Luồng chính (25%)	Tổng thời gian chặn (TBT)	25%
Khả năng dự đoán (5%)	Điểm số tổng hợp về mức thay đổi bố cục (CLS)	(5%)

Mặc dù đã thêm 3 chỉ số mới, nhưng 3 chỉ số cũ đã bị xoá: Lần vẽ đầu tiên có ý nghĩa, Lần CPU ở trạng thái rảnh đầu tiên và FID tiềm năng tối đa. Chúng tôi đã sửa đổi trọng số của các chỉ số còn lại để nhấn mạnh khả năng tương tác của luồng chính và khả năng dự đoán bố cục.

Để so sánh, dưới đây là điểm số của phiên bản 5:

Giai đoạn	Tên chỉ số	Weight
Sớm (23%)	First Contentful Paint (FCP)	23%
Trung bình (34%)	Chỉ số tốc độ (SI)	27%
	Hiển thị nội dung có ý nghĩa đầu tiên (FMP)	7%
Đã hoàn tất (46%)	Thời gian tương tác (TTI)	33%
	Thời điểm người dùng có thể bắt đầu tương tác (FCI)	13%
Luồng chính	FID tối đa có thể có	0%

Một số điểm nổi bật về các thay đổi đối với điểm số giữa Lighthouse phiên bản 5 và 6:

• Trọng số của TTI đã giảm từ 33% xuống 15%. Điều này là để trực tiếp phản hồi ý kiến phản hồi của người dùng về sự biến động của TTI, cũng như sự không nhất quán trong việc tối ưu hoá chỉ số dẫn đến việc cải thiện trải nghiệm người dùng. TTI vẫn là một tín hiệu hữu ích cho thời điểm một trang hoàn toàn tương tác, tuy nhiên, với TBT làm bổ sung – mức độ biến thiên sẽ giảm. Với thay đổi về điểm số này, chúng tôi hy vọng có thể khuyến khích nhà phát triển tối ưu hoá hiệu quả hơn để tăng khả năng tương tác của người dùng.
• Tỷ lệ đóng góp của FCP đã giảm từ 23% xuống còn 15%. Việc chỉ đo lường khi vẽ pixel đầu tiên (FCP) không cho chúng ta thấy toàn bộ bức tranh. Việc kết hợp chỉ số này với chỉ số đo lường thời điểm người dùng có thể thấy nội dung mà họ quan tâm nhất (LCP) sẽ phản ánh trải nghiệm tải một cách chính xác hơn.
• FID tối đa có thể có không còn được dùng nữa. Thuộc tính này không còn xuất hiện trong báo cáo nhưng vẫn có trong tệp JSON. Giờ đây, bạn nên xem xét TBT để định lượng mức độ tương tác thay vì mpFID.
• Chúng tôi đã ngừng sử dụng chỉ số Hiển thị nội dung đầu tiên. Chỉ số này quá biến thiên và không có đường dẫn khả thi để chuẩn hoá vì cách triển khai chỉ dành riêng cho nội bộ kết xuất của Chrome. Mặc dù một số nhóm nhận thấy thời gian FMP là đáng giá trên trang web của họ, nhưng chỉ số này sẽ không được cải thiện thêm.
• Chỉ số CPU nhàn rỗi đầu tiên không còn được dùng nữa vì chỉ số này không đủ khác biệt so với TTI. TBT và TTI hiện là các chỉ số chính về khả năng tương tác.
• Trọng số của CLS tương đối thấp, mặc dù chúng tôi dự kiến sẽ tăng trọng số này trong một phiên bản chính trong tương lai.

Sự thay đổi về điểm số

Những thay đổi này ảnh hưởng như thế nào đến điểm số của các trang web thực tế? Chúng tôi đã xuất bản một bài phân tích về những thay đổi về điểm số bằng cách sử dụng hai tập dữ liệu: một nhóm trang web chung và một nhóm trang web tĩnh được tạo bằng Eleventy. Tóm lại, khoảng 20% trang web có điểm số cao hơn đáng kể, khoảng 30% trang web hầu như không thay đổi và khoảng 50% trang web giảm ít nhất 5 điểm.

Những thay đổi về điểm số có thể được chia thành 3 thành phần chính:

• thay đổi trọng số điểm
• bản sửa lỗi cho các hoạt động triển khai chỉ số cơ bản
• thay đổi về đường cong điểm số riêng lẻ

Các thay đổi về trọng số điểm và việc ra mắt 3 chỉ số mới đã thúc đẩy phần lớn các thay đổi về tổng điểm. Các chỉ số mới mà nhà phát triển chưa tối ưu hoá sẽ có trọng số đáng kể trong điểm hiệu suất phiên bản 6. Mặc dù điểm hiệu suất trung bình của tập hợp kiểm thử trong phiên bản 5 là khoảng 50, nhưng điểm trung bình của các chỉ số Thời gian chặn tổng thể và Thời gian hiển thị nội dung lớn nhất mới là khoảng 30. Hai chỉ số này chiếm 50% trọng số trong điểm hiệu suất của Lighthouse phiên bản 6, vì vậy, tỷ lệ phần trăm lớn các trang web đã giảm điểm.

Các bản sửa lỗi cho phép tính toán chỉ số cơ bản có thể dẫn đến điểm số khác nhau. Điều này ảnh hưởng đến tương đối ít trang web nhưng có thể gây ra tác động lớn trong một số trường hợp. Nhìn chung, khoảng 8% trang web có điểm số cải thiện do những thay đổi trong việc triển khai chỉ số và khoảng 4% trang web có điểm số giảm do những thay đổi trong việc triển khai chỉ số. Khoảng 88% trang web không bị ảnh hưởng bởi các bản sửa lỗi này.

Các thay đổi riêng lẻ về đường cong điểm số cũng ảnh hưởng đến sự thay đổi tổng thể về điểm số, mặc dù rất nhỏ. Chúng tôi thường xuyên đảm bảo rằng đường cong điểm số phù hợp với các chỉ số được quan sát trong tập dữ liệu HTTPArchive. Nếu loại trừ những trang web chịu ảnh hưởng của các thay đổi lớn về cách triển khai, thì những điều chỉnh nhỏ đối với đường cong điểm số cho từng chỉ số đã giúp cải thiện điểm số của khoảng 3% trang web và giảm điểm số của khoảng 4% trang web. Khoảng 93% trang web không bị thay đổi.

Máy tính điểm số

Chúng tôi đã phát hành một máy tính tính điểm để giúp bạn khám phá cách tính điểm hiệu suất. Công cụ tính này cũng cung cấp cho bạn thông tin so sánh giữa điểm số của Lighthouse phiên bản 5 và phiên bản 6. Khi bạn chạy quy trình kiểm tra bằng Lighthouse 6.0, báo cáo sẽ có đường liên kết đến công cụ tính toán với kết quả của bạn được điền sẵn.

Quy trình kiểm tra mới

JavaScript không dùng đến

Chúng tôi đang tận dụng mức độ sử dụng mã trong Công cụ cho nhà phát triển trong một quy trình kiểm tra mới: JavaScript không dùng đến.

Bài kiểm tra này không hoàn toàn mới: bài kiểm tra này được thêm vào giữa năm 2017, nhưng do hao tổn hiệu suất nên bài kiểm tra này bị tắt theo mặc định để giữ cho Lighthouse hoạt động nhanh nhất có thể. Giờ đây, việc thu thập dữ liệu về mức độ sử dụng này hiệu quả hơn nhiều, vì vậy, chúng tôi cảm thấy thoải mái khi bật tính năng này theo mặc định.

Kiểm tra khả năng hỗ trợ tiếp cận

Lighthouse sử dụng thư viện axe-core tuyệt vời để hỗ trợ danh mục hỗ trợ tiếp cận. Trong Lighthouse 6.0, chúng tôi đã thêm các quy trình kiểm tra sau:

• aria-hidden-body
• aria-hidden-focus
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• heading-order
• duplicate-id-active
• duplicate-id-aria

Biểu tượng có thể che mờ

Biểu tượng có thể che là một định dạng biểu tượng mới giúp biểu tượng cho PWA của bạn trông đẹp trên tất cả các loại thiết bị. Để giúp PWA của bạn trông đẹp nhất có thể, chúng tôi đã ra mắt một quy trình kiểm tra mới để kiểm tra xem manifest.json có hỗ trợ định dạng mới này hay không.

Khai báo bộ ký tự

Phần tử meta charset khai báo cách mã hoá ký tự sẽ được sử dụng để diễn giải tài liệu HTML. Nếu thiếu phần tử này hoặc nếu phần tử này được khai báo muộn trong tài liệu, trình duyệt sẽ sử dụng một số phương pháp phỏng đoán để đoán xem nên sử dụng phương thức mã hoá nào. Nếu trình duyệt đoán không chính xác và tìm thấy phần tử meta charset muộn, thì trình phân tích cú pháp thường sẽ loại bỏ tất cả công việc đã thực hiện cho đến thời điểm đó và bắt đầu lại, dẫn đến trải nghiệm không tốt cho người dùng. Quy trình kiểm tra mới này xác minh rằng trang có bộ mã hoá ký tự hợp lệ và được xác định sớm.

CI Lighthouse

Tại CDS vào tháng 11 năm ngoái, chúng tôi đã công bố Lighthouse CI, một máy chủ và CLI nguồn mở của Node theo dõi kết quả của Lighthouse trên mọi thay đổi trong quy trình tích hợp liên tục. Chúng tôi đã đi được một chặng đường dài kể từ bản phát hành alpha. Lighthouse CI hiện hỗ trợ nhiều nhà cung cấp CI, bao gồm cả Travis, Circle, GitLab và GitHub Actions. Hình ảnh Docker sẵn sàng triển khai giúp bạn thiết lập một cách dễ dàng. Ngoài ra, trang tổng quan được thiết kế lại toàn diện hiện cho thấy các xu hướng trên mọi danh mục và chỉ số trong Lighthouse để bạn có thể phân tích chi tiết.

Hãy bắt đầu sử dụng Lighthouse CI trên dự án của bạn ngay hôm nay bằng cách làm theo hướng dẫn bắt đầu của chúng tôi.

Đổi tên bảng điều khiển Công cụ của Chrome cho nhà phát triển

Chúng tôi đã đổi tên bảng điều khiển Kiểm tra thành bảng điều khiển Lighthouse. Nói đến đây là đủ!

Tuỳ thuộc vào kích thước cửa sổ DevTools, bảng điều khiển có thể nằm sau nút ». Bạn có thể kéo thẻ để thay đổi thứ tự.

Cách nhanh chóng hiển thị bảng điều khiển bằng trình đơn Command (Lệnh):

1. Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
2. Nhấn Control+Shift+P (hoặc Command+Shift+P trên máy Mac) để mở trình đơn Command (Lệnh).
3. Bắt đầu nhập "Lighthouse".
4. Nhấn Enter.

Mô phỏng thiết bị di động

Lighthouse tuân theo tư duy ưu tiên thiết bị di động. Các vấn đề về hiệu suất rõ ràng hơn trong các điều kiện thông thường trên thiết bị di động, nhưng nhà phát triển thường không kiểm thử trong những điều kiện này. Đó là lý do cấu hình mặc định trong Lighthouse áp dụng tính năng mô phỏng thiết bị di động. Quá trình mô phỏng bao gồm:

• Mô phỏng tình trạng mạng và CPU chậm (thông qua công cụ mô phỏng có tên Lantern).
• Mô phỏng màn hình thiết bị (tương tự như trong Chrome DevTools).

Ngay từ đầu, Lighthouse đã sử dụng Nexus 5X làm thiết bị tham chiếu. Trong những năm gần đây, hầu hết các kỹ sư hiệu suất đều sử dụng Moto G4 cho mục đích kiểm thử. Giờ đây, Lighthouse cũng làm theo và đã thay đổi thiết bị tham chiếu thành Moto G4. Trong thực tế, thay đổi này không đáng kể, nhưng sau đây là tất cả thay đổi mà trang web có thể phát hiện:

• Kích thước màn hình thay đổi từ 412x660 px thành 360x640 px.
• Chuỗi tác nhân người dùng thay đổi một chút, phần thiết bị trước đây là Nexus 5 Build/MRA58N giờ sẽ là Moto G (4).

Kể từ Chrome 81, Moto G4 cũng có trong danh sách mô phỏng thiết bị của Công cụ của Chrome cho nhà phát triển.

Tiện ích trên trình duyệt

Tiện ích Chrome cho Lighthouse là một cách thuận tiện để chạy Lighthouse trên máy. Rất tiếc, việc hỗ trợ trường hợp này khá phức tạp. Chúng tôi nhận thấy rằng bảng điều khiển Lighthouse của Công cụ của Chrome cho nhà phát triển mang lại trải nghiệm tốt hơn (báo cáo tích hợp với các bảng điều khiển khác), nên chúng tôi có thể giảm chi phí kỹ thuật bằng cách đơn giản hoá tiện ích Chrome.

Thay vì chạy Lighthouse cục bộ, tiện ích này hiện sử dụng API PageSpeed Insights. Chúng tôi hiểu rằng một số người dùng sẽ không hài lòng với giải pháp này. Sau đây là những điểm khác biệt chính:

• PageSpeed Insights không thể kiểm tra các trang web không công khai vì công cụ này chạy qua một máy chủ từ xa chứ không phải phiên bản Chrome cục bộ của bạn. Nếu bạn cần kiểm tra một trang web không công khai, hãy sử dụng bảng điều khiển Lighthouse trong Công cụ dành cho nhà phát triển hoặc CLI của Node.
• PageSpeed Insights không được đảm bảo sẽ sử dụng bản phát hành Lighthouse mới nhất. Nếu bạn muốn sử dụng bản phát hành mới nhất, hãy sử dụng Node CLI. Tiện ích trình duyệt sẽ nhận được bản cập nhật khoảng 1-2 tuần sau khi phát hành.
• PageSpeed Insights là một API của Google. Việc sử dụng API này đồng nghĩa với việc chấp nhận Điều khoản dịch vụ của API Google. Nếu bạn không muốn hoặc không thể chấp nhận điều khoản dịch vụ, hãy sử dụng bảng điều khiển Lighthouse của DevTools hoặc CLI của Node.

Tin vui là việc đơn giản hoá câu chuyện sản phẩm đã giúp chúng tôi tập trung vào các vấn đề kỹ thuật khác. Do đó, chúng tôi đã phát hành tiện ích Lighthouse Firefox!

Ngân sách

Lighthouse 5.0 đã ra mắt ngân sách hiệu suất. Tính năng này hỗ trợ việc thêm ngưỡng cho lượng tài nguyên của mỗi loại (chẳng hạn như tập lệnh, hình ảnh hoặc css) mà một trang có thể phân phát.

Lighthouse 6.0 bổ sung tính năng hỗ trợ các chỉ số lập ngân sách, nhờ đó, bạn hiện có thể đặt ngưỡng cho các chỉ số cụ thể như FCP. Hiện tại, ngân sách chỉ có sẵn cho Node CLI và Lighthouse CI.

Đường liên kết đến vị trí nguồn

Một số vấn đề mà Lighthouse phát hiện trên một trang có thể được truy xuất về một dòng mã nguồn cụ thể và báo cáo sẽ nêu rõ tệp và dòng liên quan chính xác. Để dễ dàng khám phá vấn đề này trong DevTools, hãy nhấp vào các vị trí được chỉ định trong báo cáo để mở các tệp có liên quan trong bảng điều khiển Nguồn.

Sắp ra mắt

Lighthouse đã bắt đầu thử nghiệm việc thu thập bản đồ nguồn để hỗ trợ các tính năng mới, chẳng hạn như:

• Phát hiện các mô-đun trùng lặp trong gói JavaScript.
• Phát hiện quá nhiều polyfill hoặc phép biến đổi trong mã được gửi đến trình duyệt hiện đại.
• Tăng cường quy trình kiểm tra JavaScript không dùng đến để cung cấp thông tin chi tiết ở cấp mô-đun.
• Hình ảnh hoá bản đồ cây làm nổi bật các mô-đun cần xử lý.
• Hiển thị mã nguồn gốc cho các mục báo cáo có "vị trí nguồn".

Các tính năng này sẽ được bật theo mặc định trong một phiên bản Lighthouse trong tương lai. Hiện tại, bạn có thể xem các quy trình kiểm tra thử nghiệm của Lighthouse bằng cờ CLI sau:

lighthouse https://web.dev --view --preset experimental

Xin cảm ơn!

Cảm ơn bạn đã sử dụng Lighthouse và gửi ý kiến phản hồi. Ý kiến phản hồi của bạn giúp chúng tôi cải thiện Lighthouse. Chúng tôi hy vọng Lighthouse 6.0 sẽ giúp bạn dễ dàng cải thiện hiệu suất của trang web.

Bạn có thể làm gì tiếp theo?

• Mở Chrome Canary và thử dùng bảng điều khiển Lighthouse.
• Sử dụng CLI của Node: npm install -g lighthouse && lighthouse https://yoursite.com --view.
• Chạy Lighthouse CI với dự án của bạn.
• Xem tài liệu về quy trình kiểm tra Lighthouse.
• Chúc bạn có nhiều niềm vui khi góp phần cải thiện web!

Chúng tôi đam mê web và rất thích làm việc với cộng đồng nhà phát triển để xây dựng công cụ giúp cải thiện web. Lighthouse là một dự án nguồn mở và chúng tôi vô cùng cảm ơn tất cả những người đóng góp đã giúp đỡ chúng tôi trong mọi việc, từ việc sửa lỗi chính tả đến tái cấu trúc tài liệu cho đến các quy trình kiểm tra hoàn toàn mới. Bạn muốn đóng góp? Hãy ghé thăm kho lưu trữ Lighthouse trên GitHub.