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

Các chỉ số mới, thông tin cập nhật về Điểm hiệu suất, các lượt kiểm tra mới và nhiều nội dung khác.

Connor Clark

Hôm nay, chúng tôi xin giới thiệu Lighthouse 6.0!

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ụ này 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 6.0 có sẵn ngay 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 muộn nhất vào cuối tháng. Bản cập nhật này sẽ có trong Bản ổn định của Chrome trong Chrome 84 (giữa tháng 7).

Để dùng thử CLI nút Lighthouse, hãy 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ó nhiều thay đổi được liệt kê trong nhật ký thay đổi 6.0. Chúng tôi sẽ đề cập đến những điểm nổi bật trong bài viết này.

• Các chỉ số mới
• Thông tin cập nhật về điểm hiệu suất
• Các lượt kiểm tra mới
• Lighthouse CI
• Đổi tên bảng điều khiển Công cụ của Chrome cho nhà phát triển
• Mô phỏng thiết bị di động
• Tiện ích của trình duyệt
• Ngân sách
• Đường liên kết đến vị trí nguồn
• Dựa trên 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 – Thời gian hiển thị nội dung lớn nhất (LCP) và Mức thay đổi bố cục tích luỹ (CLS) – là các hoạt động triển khai Chỉ số quan trọng chính của trang web trong phòng thí nghiệm.

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 cảm nhận được. Thuộc tính này đánh dấu thời điểm trong quá trình tải trang khi nội dung chính (hoặc nội dung lớn nhất) đã tải xong và người dùng có thể nhìn thấy nội dung đó. LCP là một phần bổ sung quan trọng cho Nội dung đầu tiên (FCP) để chỉ ghi lại điểm đầu của trải nghiệm tải. LCP cung cấp một tín hiệu cho nhà phát triển về tốc độ mà người dùng thực sự có thể xem được 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 bài viết tìm hiểu chuyên sâu này về LCP của Paul Ireland.

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

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

CLS (Điểm số tổng hợp về mức thay đổi bố cục) trong môi trường phòng thí nghiệm được đo lường thông qua việc kết thúc quá trình tải trang. Nhưng trong trường hợp thực tế, bạn có thể đo lường CLS cho đến lần 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 bài viết phân tích 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 của hoạt động tải, đo lường tổng thời gian khi luồng chính bị chặn đủ lâu để ngăn khả năng phản hồi của 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 gian tương tác (TTI). Đây là một chỉ số đi kèm với TTI và nó mang lại nhiều sắc thái hơn trong việc định lượng hoạt động của luồng chính khiến người dùng không thể tương tác với trang của bạn.

Ngoài ra, TBT tương quan tốt với chỉ số trường Thời gian phản hồi lần tương tác đầu tiên (FID). Đây là Chỉ số quan trọng chính của trang web.

Thông tin cập nhật về điểm hiệu suất

Điểm hiệu suất trong Lighthouse được tính từ cách kết hợp nhiều chỉ số theo trọng số để tóm tắt tốc độ của trang. Dưới đây là công thức tính điểm số hiệu suất 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%
Trễ (15%)	Thời gian tương tác (TTI)	15%
Chuỗi 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ù chúng tôi đã thêm 3 chỉ số mới, nhưng 3 chỉ số cũ đã bị xoá: Lần hiển thị có ý nghĩa đầu tiên, Thời gian không hoạt động của CPU đầ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 tính 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à cách tính điểm 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%
	Nội dung hiển thị có ý nghĩa đầu tiên (FMP)	7%
Đã hoàn tất (46%)	Thời gian tương tác (TTI)	33%
	CPU rảnh đầu tiên (FCI)	Giảm 13%
Chuỗi chính	FID tiềm năng tối đa	0%

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

• Trọng lượng của TTI đã giảm từ 33% xuống 15%. Thay đổi này là nhằm đáp ứng ý kiến phản hồi trực tiếp của người dùng về sự thay đổi của TTI, cũng như sự không nhất quán trong các cách tối ưu hoá chỉ số dẫn đến sự cải thiện trong trải nghiệm người dùng. TTI vẫn là một tín hiệu hữu ích khi một trang tương tác hoàn toàn, nhưng có TBT bổ sung – sự thay đổi sẽ giảm. Với thay đổi về cách tính điểm này, chúng tôi hy vọng khuyến khích các nhà phát triển tối ưu hoá mức độ tương tác của người dùng một cách hiệu quả hơn.
• Trọng lượng của FCP đã giảm từ 23% xuống 15%. Việc chỉ đo lường khi pixel đầu tiên được vẽ (FCP) không cung cấp cho chúng tôi hình ảnh đầy đủ. Việc kết hợp phương pháp này với việc đo lường thời điểm người dùng có thể thấy những điều họ có khả năng quan tâm nhất (LCP) sẽ phản ánh chính xác hơn trải nghiệm tải.
• FID tối đa tiềm năng đã ngừng hoạt động. Mã này không còn hiển thị trong báo cáo nhưng vẫn có trong JSON. Bây giờ, bạn nên xem xét TBT để định lượng mức độ tương tác của mình thay vì mpFID.
• Tính năng Nội dung có ý nghĩa đầu tiên không còn được dùng nữa. Chỉ số này quá biến thể và không có đường dẫn khả thi để chuẩn hoá vì cách triển khai chỉ dành riêng cho các nội bộ kết xuất nội bộ của Chrome. Mặc dù một số nhóm thấy rằng thời gian FMP là phù hợp trên trang web của họ, nhưng chỉ số này sẽ không được cải thiện thêm.
• Thời gian chờ CPU đầu tiên không được dùng nữa vì không đủ khác biệt với TTI. TBT và TTI hiện là các chỉ số đáng chú ý về mức độ 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 phiên bản lớn 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? Chúng tôi đã phát hành bản phân tích về sự thay đổi điểm số bằng hai tập dữ liệu: nhóm trang web chung và nhóm trang web tĩnh được tạo bằng Eleventy. Tóm lại, khoảng 20% số trang web nhận thấy điểm số cao hơn đáng kể, khoảng 30% hầu như không có bất kỳ thay đổi nào và khoảng 50% cho thấy điểm số giảm ít nhất 5 điểm.

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

• các thay đổi về trọng số điểm số
• sửa lỗi đối với việc triển khai chỉ số cơ bản
• thay đổi đường cong điểm riêng

Những thay đổi về trọng số điểm số và sự ra mắt của 3 chỉ số mới đã thúc đẩy phần lớn các thay đổi về điểm số tổng thể. Các chỉ số mới mà nhà phát triển chưa tối ưu hoá để mang lại trọng số đáng kể trong điểm hiệu suất phiên bản 6. Trong khi điểm số hiệu suất trung bình của tập hợp bài kiểm tra trong phiên bản 5 là khoảng 50, thì điểm trung bình cho các chỉ số Tổng thời gian chặn mới và Thời gian hiển thị nội dung lớn nhất là khoảng 30. Kết hợp hai chỉ số này lại chiếm 50% trọng số trong điểm hiệu suất của Lighthouse phiên bản 6, do đó, đương nhiên là tỷ lệ lớn các trang web bị giảm.

Các bản sửa lỗi liên quan đến cách tính 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 ảnh hưởng đáng kể trong một số trường hợp. Nhìn chung, khoảng 8% trang web đã cải thiện điểm số do các thay đổi trong cách triển khai chỉ số và khoảng 4% trang web bị giảm điểm số do các thay đổi trong cách triển khai chỉ số. Khoảng 88% trang web không bị ảnh hưởng bởi những bản sửa lỗi này.

Những thay đổi đối với đường cong điểm riêng lẻ cũng ảnh hưởng đến sự thay đổi về điểm số tổng thể, mặc dù rất nhỏ. Chúng tôi định kỳ đảm bảo rằng đường cong điểm phù hợp với các chỉ số quan sát được trong tập dữ liệu HTTPArchive. Không bao gồm các trang web bị ảnh hưởng bởi những thay đổi lớn về cách triển khai, những điều chỉnh nhỏ đối với đường cong điểm cho các chỉ số riêng lẻ đã 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 chịu ảnh hưởng của thay đổi này.

Công cụ tính điểm

Chúng tôi đã phát hành công cụ 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 toán cũng cung cấp cho bạn so sánh giữa điểm của Lighthouse phiên bản 5 và 6. Khi bạn chạy một quy trình kiểm tra bằng Lighthouse 6.0, báo cáo sẽ đi kèm với một đường liên kết đến công cụ tính đã điền sẵn kết quả.

Cảm ơn Ana Tudor đã nâng cấp hệ thống đo lường!

Lần 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ã DevTools trong một bài kiểm tra mới: JavaScript không sử dụng.

Quy trình kiểm tra này không hoàn toàn mới: được thêm vào giữa năm 2017, nhưng do hao tổn về hiệu suất nên theo mặc định, chúng tôi đã tắt quy trình kiểm tra này để giúp Lighthouse nhanh nhất có thể. Việc thu thập dữ liệu về mức độ sử dụng này hiện 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-ẩn-focus
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• heading-order
• doubleclick-id-active
• doubleclick-id-aria

Biểu tượng có thể tạo mặt nạ

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

Khai báo bộ ký tự

Phần tử bộ ký tự meta khai báo phương thức mã hoá ký tự sẽ được dùng để diễn giải tài liệu HTML. Nếu phần tử này bị thiếu hoặc được khai báo ở cuối tài liệu, thì trình duyệt sẽ sử dụng một số phương pháp phỏng đoán để đoán 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ử bộ ký tự meta trễ, thì trình phân tích cú pháp thường sẽ bỏ qua mọi tác vụ đã thực hiện cho đến thời điểm này và bắt đầu lại, dẫn đến trải nghiệm không tốt cho người dùng. Lần kiểm tra mới này xác minh trang có bộ mã hoá ký tự hợp lệ và nó được xác định từ sớm.

Lighthouse CI

Tại CDS tháng 11 năm ngoái, chúng tôi đã công bố Lighthouse CI, Node CLI và máy chủ nguồn mở theo dõi kết quả Lighthouse trong mọi lượt cam kết trong quy trình tích hợp liên tục của bạn và 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 quá trình thiết lập trở nên dễ dàng và thiết kế lại toàn diện của trang tổng quan giờ đây cho thấy các xu hướng trên mọi danh mục và chỉ số trong Lighthouse để bạn phân tích chi tiết.

Hãy bắt đầu sử dụng Lighthouse CI cho dự án của bạn ngay hôm nay bằng cách làm theo hướng dẫn bắt đầu sử dụng 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. Vậy là đủ rồi!

Tuỳ thuộc vào kích thước cửa sổ Công cụ cho nhà phát triển, 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:

1. Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
2. Nhấn Control+Shift+P (hoặc Command+Shift+P trên máy Mac) để mở trình đơn Command.
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 sẽ thể hiện rõ ràng hơn trong điều kiện di động thông thường, nhưng nhà phát triển thường không kiểm thử trong những điều kiện này. Đây là lý do cấu hình mặc định trong Lighthouse áp dụng quy trình mô phỏng trên thiết bị di động. Quá trình mô phỏng bao gồm:

• Các tình trạng CPU và mạng chậm được mô phỏng (thông qua một công cụ mô phỏng có tên là Lantern).
• Mô phỏng màn hình thiết bị (tương tự như trong Công cụ của Chrome cho nhà phát triển).

Kể 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ư về hiệu suất đều sử dụng Moto G4 cho mục đích thử nghiệm. Hiện Lighthouse đang làm theo yêu cầu và thay đổi thiết bị tham chiếu thành Moto G4. Trong thực tế, thay đổi này không đáng chú ý lắm, nhưng sau đây là tất cả những thay đổi mà một 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 có thay đổi một chút, phần thiết bị trước đây là Nexus 5 Build/MRA58N giờ đây 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ông cụ của Chrome cho nhà phát triển.

Tiện ích của trình duyệt

Tiện ích của Chrome cho Lighthouse là một cách thuận tiện để chạy Lighthouse cục bộ. Tiếc là việc hỗ trợ lại rất phức tạp. Chúng tôi thấy rằng vì bảng điều khiển Lighthouse cho Công cụ của Chrome mang đến 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 của Chrome.

Thay vì chạy Lighthouse cục bộ, giờ đây tiện ích này sử dụng PageSpeed Insights API. Chúng tôi nhận thấy rằng giải pháp này sẽ không thay thế đủ cho một số người dùng của chúng tôi. Dưới đâ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ì hoạt động này chạy qua 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 cho Công cụ cho nhà phát triển hoặc Node CLI.
• Chúng tôi không đảm bảo rằng PageSpeed Insights 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 đến 2 tuần sau khi phát hành.
• PageSpeed Insights là một API của Google và việc sử dụng API này sẽ cấu thành việc chấp nhận Điều khoản dịch vụ API của 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 cho Công cụ cho nhà phát triển hoặc Nút CLI.

Tin vui là việc đơn giản hoá câu chuyện về sản phẩm đã cho phé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, hỗ trợ việc thêm các ngưỡng cho lượng tài nguyên (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 khả năng hỗ trợ các chỉ số 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 tìm thấy về một trang có thể truy nguồn ngược trở lại dòng mã nguồn cụ thể và báo cáo sẽ nêu chính xác tệp và dòng có liên quan. Để giúp bạn dễ dàng khám phá điều này trong Công cụ cho nhà phát triển, khi nhấp vào các vị trí được chỉ định trong báo cáo, các tệp có liên quan trong bảng điều khiển Nguồn sẽ mở ra.

Công cụ cho nhà phát triển cho thấy chính xác dòng mã gây ra sự cố.

Trên đường chân trời

Lighthouse đã bắt đầu thử nghiệm với 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 đoạn mã polyfill hoặc biến đổi trong mã được gửi đến các trình duyệt hiện đại.
• Bổ sung bài 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 trực quan dạng sơ đồ cây làm nổi bật các mô-đun yêu cầu hành động.
• Hiển thị mã nguồn ban đầu cho các mục báo cáo có "vị trí nguồn".

Kiểm tra JavaScript không sử dụng bằng bản đồ nguồn để hiển thị mã không sử dụng trong các mô-đun cụ thể đi kèm.

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

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

Cảm ơn bạn.

Cảm ơn bạn đã sử dụng Lighthouse và đưa ra ý 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 và chúng tôi hy vọng Lighthouse 6.0 sẽ giúp bạn cải thiện hiệu suất trang web một cách dễ dàng hơn.

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

• Mở Chrome Canary và dùng thử bảng điều khiển Lighthouse.
• Sử dụng Nút CLI: npm install -g lighthouse && lighthouse https://yoursite.com --view.
• Chạy Lighthouse CI chạy với dự án của bạn.
• Xem tài liệu kiểm tra Lighthouse.
• Hãy thoả sức cải thiện trang web!

Chúng tôi đam mê web và thích hợp tác với cộng đồng nhà phát triển để xây dựng các công cụ giúp cải thiện web. Lighthouse là một dự án nguồn mở. Chúng tôi chân thành cảm ơn tất cả các cộng tác viên đã giúp chúng tôi trong mọi việc từ sửa lỗi chính tả cho đế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? Xoay theo kho lưu trữ GitHub Lighthouse.