Hướng dẫn kỹ thuật SEO cho các chỉ số hiệu suất của Lighthouse

Tìm hiểu sâu về các chỉ số hiệu suất của Lighthouse với các chuyên gia SEO kỹ thuật Jamie Indigo và Rachel Anderson.

Có thể bạn ở đây vì bạn là một người rất yêu thích các chỉ số hiệu suất. Hoặc có thể bạn không biết Lighthouse là gì và quá ngại hỏi.

Hoặc là một lựa chọn tuyệt vời. Chào mừng!

Cùng nhau, chúng tôi hy vọng sẽ thực hiện các nỗ lực cải thiện hiệu suất của bạn từ “làm cho tất cả các con số trở nên xanh” sang một số mục hành động rõ ràng và có ý nghĩa.

Lưu ý: Bài viết này đã được cập nhật để làm mới vào tháng 1 năm 2022 để đại diện cho các phiên bản 8 và 9.

Kỹ thuật SEO và người yêu thích Google Data Studio, Rachel Anderson đã tham gia cùng tôi trong cuộc phiêu lưu thú vị này để làm sáng tỏ tài liệu dành cho nhà phát triển.

Chúng tôi sẽ trả lời:

Ngọn hải đăng là gì?
Lighthouse khác với Core Web Vitals như thế nào?
Tại sao Lighthouse không khớp với báo cáo Search Console / Crux?
Điểm Hiệu suất được tính như thế nào?
Tại sao điểm của tôi mỗi lần kiểm tra lại khác nhau?
Giải thích các chỉ số Hiệu suất của Lighthouse
Cách kiểm tra hiệu suất bằng Lighthouse

Ngọn hải đăng là gì?

Hiệu suất là đo lường tốc độ trình duyệt có thể lắp ráp một trang web.

Lighthouse sử dụng trình duyệt web có tên Chromium để tạo trang và chạy thử nghiệm trên các trang khi chúng được tạo. Công cụ này là mã nguồn mở (có nghĩa là nó được cộng đồng duy trì và sử dụng miễn phí).

Mỗi cuộc kiểm toán thuộc một trong năm loại:

Màn biểu diễn.
Khả năng tiếp cận.
Thực hành tốt nhất.
SEO.
Ứng dụng web tiến bộ.

Với mục đích của bài viết này, chúng tôi sẽ sử dụng tên Lighthouse để chỉ chuỗi thử nghiệm được thực hiện bởi repo Github được chia sẻ, bất kể phương pháp thực thi là gì.

Phiên bản 9 hiện đã ra mắt trên Github và dự kiến sẽ phát hành trên quy mô lớn với bản phát hành Chrome 98 ổn định vào tháng 2 năm 2022.

Lighthouse và Web Core Vitals

Vào ngày 5 tháng 5 năm 2020, dự án Chromium đã công bố bộ ba chỉ số mà trình duyệt nguồn mở do Google hậu thuẫn sẽ đo lường hiệu suất.

Các chỉ số, được gọi là Web Vitals, là một phần của sáng kiến của Google được thiết kế để cung cấp hướng dẫn thống nhất cho các tín hiệu chất lượng.

Mục tiêu của các chỉ số này là đo lường hiệu suất web theo cách lấy người dùng làm trung tâm.

Trong vòng hai tuần, Lighthouse v6 đã ra mắt với phiên bản sửa đổi của Web Core Vitals ở trung tâm của bản cập nhật.

Tháng 7 năm 2020 chứng kiến các chỉ số thống nhất của Lighthouse v6 được áp dụng trên các sản phẩm của Google với việc phát hành Chrome 84.

Bảng điều khiển Kiểm tra Chrome DevTools đã được đổi tên thành Lighthouse. Thông tin chi tiết về tốc độ trang và Google Search Console cũng tham khảo các chỉ số thống nhất này.

Sự thay đổi về trọng tâm này đặt ra những mục tiêu mới, tinh tế hơn.

Lighthouse khác với Core Web Vitals như thế nào?

Ba chỉ số được Core Web Vital đại diện là một phần của điểm hiệu suất Lighthouse.

Sơn có nội dung lớn nhất, Tổng thời gian chặn và Dịch chuyển bố cục tích lũy chiếm 70% điểm hiệu suất có trọng số của Lighthouse.

Điểm số bạn sẽ thấy cho CWV trong Lighthouse là kết quả của các bài kiểm tra giả lập.

Đó là cùng một chỉ số nhưng được đo lường trên một lần tải trang chứ không phải được tính toán từ các lần tải trang trên khắp thế giới.

Tại sao Lighthouse không khớp với các báo cáo của Search Console / Crux?

Đối với người dùng thực, tốc độ tổng hợp trang dựa trên các yếu tố như kết nối mạng của họ, khả năng xử lý mạng của thiết bị và thậm chí là khoảng cách vật lý của người dùng đến các máy chủ của trang web.

Dữ liệu hiệu suất của ngọn hải đăng không tính đến tất cả các yếu tố này.

Thay vào đó, công cụ mô phỏng một thiết bị tầm trung và điều chỉnh CPU để mô phỏng người dùng bình thường.

Đây là các bài kiểm tra trong phòng thí nghiệm được thu thập trong một môi trường được kiểm soát với cài đặt mạng và thiết bị được xác định trước.

Dữ liệu phòng thí nghiệm rất hữu ích để gỡ lỗi các vấn đề về hiệu suất.

Điều đó không có nghĩa là trải nghiệm trên máy cục bộ của bạn trong môi trường được kiểm soát đại diện cho trải nghiệm của con người thực trong môi trường hoang dã.

Tin tốt là bạn không phải chọn giữa Lighthouse và Core Web Vitals. Chúng được thiết kế để trở thành một phần của cùng một quy trình làm việc.

Luôn bắt đầu với dữ liệu thực địa từ Báo cáo trải nghiệm người dùng Chrome để xác định các vấn đề ảnh hưởng đến việc sử dụng thực tế.

Sau đó, tận dụng khả năng thử nghiệm mở rộng của Lighthouse để xác định mã gây ra sự cố.

Nếu bạn đang làm việc trên trang web trước khi ra mắt hoặc thay đổi QAing trong môi trường không công khai, Lighthouse sẽ là người bạn #webperf tốt nhất mới của bạn.

Số liệu Hiệu suất Lighthouse được Tính như thế nào?

Trong các phiên bản 8 và 9, điểm hiệu suất của Lighthouse được tạo thành từ bảy chỉ số với mỗi chỉ số đóng góp một tỷ lệ phần trăm trong tổng điểm hiệu suất.

Tại sao điểm của tôi lại khác nhau mỗi lần tôi kiểm tra?

Điểm của bạn có thể thay đổi mỗi khi bạn kiểm tra.

Tiện ích mở rộng trình duyệt, kết nối internet, thử nghiệm A / B hoặc thậm chí quảng cáo được hiển thị trên lần tải trang cụ thể đó đều có tác động.

Nếu bạn tò mò / muốn biết thêm, hãy xem tài liệu về khả năng thay đổi của thử nghiệm hiệu suất.

Giải thích các chỉ số về hiệu suất của Lighthouse

Sơn có nội dung lớn nhất (LCP)

Nội dung thể hiện: Nhận thức của người dùng về trải nghiệm tải.
Trọng số điểm của Lighthouse Performance: 25%
Phương pháp đo lường: Điểm trong dòng thời gian tải trang khi hình ảnh hoặc khối văn bản lớn nhất của trang hiển thị trong chế độ xem.
Cách đo lường: Lighthouse trích xuất dữ liệu LCP từ công cụ theo dõi của Chrome.
Sơn có nội dung lớn nhất có phải là cốt lõi web không? Vâng!
Chấm điểm LCP
Mục tiêu: Đạt được LCP trong <2,5 giây.

Những yếu tố nào có thể là một phần của LCP?

Bản văn.
Hình ảnh.
Các video.
Hinh nên.

Điều gì được tính là LCP trên trang của bạn?

Nó phụ thuộc! LCP thường thay đổi theo mẫu trang.

Điều này có nghĩa là bạn có thể đo lường một số trang sử dụng cùng một mẫu và xác định LCP.

Lighthouse sẽ cung cấp cho bạn HTML chính xác của phần tử LCP, nhưng có thể hữu ích nếu bạn biết về nút đó khi giao tiếp với các nhà phát triển.

Tên nút sẽ nhất quán trong khi hình ảnh hoặc văn bản chính xác trên trang có thể thay đổi tùy thuộc vào nội dung được hiển thị bởi mẫu.

Cách xác định LCP bằng Chrome Devtools

Mở trang trong Chrome.
Điều hướng đến bảng Hiệu suất của Công cụ Dev (Command + Option + I trên Mac hoặc Control + Shift + I trên Windows và Linux).
Di chuột qua điểm đánh dấu LCP trong phần Thời gian.
(Các) phần tử tương ứng với LCP được nêu chi tiết trong trường Nút liên quan.

Nguyên nhân nào gây ra LCP kém?

LCP kém thường xuất phát từ bốn vấn đề:

Thời gian phản hồi của máy chủ chậm.
JavaScript và CSS chặn hiển thị.
Thời gian tải tài nguyên.
Kết xuất phía máy khách.
Cách khắc phục LCP kém

Nếu nguyên nhân là do thời gian phản hồi của máy chủ chậm:

Tối ưu hóa máy chủ của bạn.
Hướng người dùng đến một CDN gần đó.
Nội dung bộ nhớ đệm.
Phân phát các trang HTML-trước tiên.
Thiết lập kết nối bên thứ ba sớm.

Nếu nguyên nhân là do JavaScript và CSS chặn hiển thị:

Giảm thiểu CSS.
Trì hoãn CSS không quan trọng.
Nội tuyến CSS quan trọng.
Giảm thiểu và nén các tệp JavaScript.
Trì hoãn JavaScript không sử dụng.
Giảm thiểu các polyfills không sử dụng.

Nếu nguyên nhân là do thời gian tải tài nguyên:

Tối ưu hóa và nén hình ảnh.
Tải trước các tài nguyên quan trọng.
Nén tệp văn bản.
Phân phối các nội dung khác nhau dựa trên kết nối mạng (phân phát thích ứng).
Lưu trữ nội dung vào bộ nhớ cache bằng service worker.

Nếu nguyên nhân là do hiển thị phía máy khách:

Giảm thiểu JavaScript quan trọng.
Sử dụng một chiến lược kết xuất khác.

Tài nguyên để cải thiện LCP

Sơn có nội dung lớn nhất (LCP) web.dev
Tối ưu hóa Nội dung Lớn nhất Paint web.dev
Ngọn hải đăng Lớn nhất có Nội dung Sơn web.dev

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

Nó thể hiện điều gì: Khả năng đáp ứng với đầu vào của người dùng.
Trọng số điểm của Lighthouse Performance: 30%
Phương pháp đo lường: TBT đo thời gian giữa Bức tranh có nội dung đầu tiên và Thời gian để tương tác. TBT tương đương với phòng thí nghiệm của Độ trễ nhập liệu đầu tiên (FID) – dữ liệu trường được sử dụng trong Báo cáo trải nghiệm người dùng Chrome và tín hiệu xếp hạng Trải nghiệm trang sắp tới của Google.
Cách đo lường: Tổng thời gian mà luồng chính bị chiếm bởi các tác vụ mất hơn 50 mili giây để hoàn thành. Nếu một nhiệm vụ cần 80 mili giây để chạy, thì 30 mili giây thời gian đó sẽ được tính vào TBT. Nếu một nhiệm vụ mất 45ms để chạy, 0ms sẽ được thêm vào TBT.
Tổng thời gian chặn có phải là điều quan trọng nhất của Web Core không? Vâng! Đây là dữ liệu phòng thí nghiệm tương đương với Độ trễ nhập liệu đầu tiên (FID).

Chấm điểm TBT

Mục tiêu: Đạt được điểm TBT dưới 300 mili giây.

Độ trễ đầu vào đầu tiên, dữ liệu trường tương đương với TBT, có các ngưỡng khác nhau.

Nhiệm vụ dài và tổng thời gian chặn

TBT đo các tác vụ dài – những tác vụ lâu hơn 50ms.

Khi một trình duyệt tải trang web của bạn, về cơ bản sẽ có một hàng đợi tập lệnh duy nhất đang chờ được thực thi.

Bất kỳ đầu vào nào từ người dùng phải đi vào cùng một hàng đợi.

Khi trình duyệt không thể phản hồi thông tin nhập của người dùng vì các tác vụ khác đang thực thi, người dùng sẽ coi đây là độ trễ.

Về cơ bản, các nhiệm vụ dài giống như một người ở quán cà phê yêu thích của bạn, người mất quá nhiều thời gian để gọi đồ uống.

Giống như ai đó đặt mua vani 4 bơm 2% venti, mocha 5 bơm nguyên chất béo, các nhiệm vụ kéo dài là một nguồn chính của trải nghiệm tồi tệ.

Nguyên nhân nào khiến TBT cao trên trang của bạn?

JavaScript nặng.

Đó là nó.

Cách xem TBT bằng Chrome Devtools

Cách khắc phục TBT kém

Chia tay Nhiệm vụ Dài hạn.
Tối ưu hóa trang của bạn để sẵn sàng tương tác.
Sử dụng nhân viên web.
Giảm thời gian thực thi JavaScript.

Các nguồn lực để cải thiện TBT

Độ trễ đầu vào đầu tiên (FID) web.dev
Tổng thời gian chặn (TBT) web.dev
Tối ưu hóa độ trễ đầu vào web.dev
Lighthouse: Tổng thời gian chặn web.dev

Bức tranh có nội dung đầu tiên (FCP)

Nó thể hiện điều gì: FCP đánh dấu thời gian mà văn bản hoặc hình ảnh đầu tiên được vẽ (hiển thị).
Trọng số điểm Hiệu suất của Lighthouse: 10%
Nó đo lường những gì: Thời gian mà tôi có thể thấy trang mà tôi yêu cầu đang phản hồi. Ngón tay cái của tôi có thể ngừng di chuột qua nút quay lại.
Cách đo lường: Điểm FCP của bạn trong Lighthouse được đo bằng cách so sánh FCP của trang với thời gian FCP của dữ liệu trang web thực được Lưu trữ HTTP lưu trữ.
FCP của bạn tăng lên nếu nó nhanh hơn các trang khác trong HTTP Archive.
First Contentful Paint có phải là Web Core Vital? Không

Chấm điểm FCP

Mục tiêu: Đạt được FCP trong <2 giây.

Những yếu tố nào có thể là một phần của FCP?

Thời gian cần thiết để hiển thị phần tử hiển thị đầu tiên cho DOM là FCP.

Bất kỳ điều gì xảy ra trước một phần tử hiển thị nội dung không phải màu trắng cho trang (không bao gồm iframe) đều được tính vào FCP.

Vì iframe không được coi là một phần của FCP, nếu chúng là nội dung đầu tiên hiển thị, FCP sẽ tiếp tục tính cho đến khi tải nội dung không phải iframe đầu tiên, nhưng thời gian tải iframe không được tính vào FCP.

Tài liệu xung quanh FCP cũng chỉ ra rằng thường bị ảnh hưởng bởi thời gian tải phông chữ và có các mẹo để cải thiện tải phông chữ.

FCP sử dụng Chrome Devtools

Mở trang trong Chrome.
Điều hướng đến bảng Hiệu suất của Công cụ Dev (Command + Option + I trên Mac hoặc Control + Shift + I trên Windows và Linux).
Nhấp vào điểm đánh dấu FCP trong phần Thời gian.
Tab tóm tắt có dấu thời gian với FCP tính bằng mili giây.

Cách cải thiện FCP

Để nội dung được hiển thị cho người dùng, trước tiên trình duyệt phải tải xuống, phân tích cú pháp và xử lý tất cả các biểu định kiểu bên ngoài mà nó gặp phải trước khi có thể hiển thị hoặc hiển thị bất kỳ nội dung nào lên màn hình của người dùng.

Cách nhanh nhất để bỏ qua sự chậm trễ của tài nguyên bên ngoài là sử dụng các kiểu nội dòng cho nội dung trong màn hình đầu tiên.

Để giữ cho trang web của bạn có thể mở rộng một cách bền vững, hãy sử dụng một công cụ tự động như penthouse và mod_pagespeed của Apache.

Các giải pháp này sẽ đi kèm với một số hạn chế đối với các chức năng, yêu cầu thử nghiệm và có thể không dành cho tất cả mọi người.

Nói chung, tất cả chúng ta đều có thể cải thiện thời gian của trang web của mình lên First Contentful Paint bằng cách giảm phạm vi và độ phức tạp của các phép tính kiểu.

Nếu một kiểu không được sử dụng, hãy xóa kiểu đó.

Bạn có thể xác định CSS không sử dụng bằng chức năng Bảo hiểm mã tích hợp của Chrome Dev Tool.

Sử dụng dữ liệu tốt hơn để đưa ra quyết định tốt hơn.

Tương tự như TTI, bạn có thể nắm bắt số liệu người dùng thực cho FCP bằng cách sử dụng Google Analytics để cải thiện tương quan với KPI.

Tài nguyên để cải thiện FCP

Sơn có nội dung đầu tiên, web.dev

Chỉ số tốc độ

Nó thể hiện điều gì: Số lượng hiển thị tại một thời điểm trong quá trình tải.
Trọng số điểm Hiệu suất của Lighthouse: 10%
Nó đo lường những gì: Chỉ số Tốc độ là thời gian trung bình mà tại đó các phần có thể nhìn thấy của trang được hiển thị.
Cách đo lường: Đo lường Chỉ số tốc độ của Lighthouse đến từ một mô-đun nút có tên là Đường tốc độ.

Bạn sẽ phải hỏi các pháp sư tử tế tại webpagetest.org để biết các chi tiết cụ thể nhưng đại khái, điểm Tốc độ thay đổi tùy theo kích thước của chế độ xem (đọc là màn hình thiết bị) và có một thuật toán để tính toán mức độ hoàn chỉnh của từng khung hình.

Speed Index có phải là Web Core Vital không? Không.

Cách cải thiện SI

Điểm tốc độ phản ánh Đường dẫn hiển thị quan trọng của trang web của bạn.

Tài nguyên “quan trọng” có nghĩa là tài nguyên đó được yêu cầu cho lớp sơn đầu tiên hoặc rất quan trọng đối với chức năng cốt lõi của trang.

Đường dẫn càng dài và dày đặc, trang web của bạn cung cấp trang trực quan càng chậm.

Nếu đường dẫn của bạn được tối ưu hóa, bạn sẽ cung cấp cho người dùng nội dung nhanh hơn và đạt điểm cao hơn trên Chỉ mục tốc độ.

Cách đường dẫn tới hạn ảnh hưởng đến kết xuất

Các đề xuất về Lighthouse thường được kết hợp với Đường dẫn hiển thị quan trọng chậm bao gồm:

Giảm thiểu công việc của chuỗi chính.
Giảm thời gian thực thi JavaScript.
Giảm thiểu độ sâu của các yêu cầu quan trọng.
Loại bỏ tài nguyên chặn kết xuất.
Trì hoãn hình ảnh ngoài màn hình.
Các nguồn lực để cải thiện SI

Chỉ số tốc độ, web.dev

Thời gian để tương tác
Những gì nó thể hiện: Khả năng đáp ứng tải; xác định vị trí một trang trông có vẻ phản hồi nhưng vẫn chưa đáp ứng.
Trọng số điểm Hiệu suất của Lighthouse: 10%
Nó đo lường những gì: Thời gian từ khi trang bắt đầu tải đến khi các tài nguyên chính của nó đã tải xong và có thể phản hồi thông tin nhập của người dùng.

Cách đo lường: TTI đo lường thời gian một trang trở nên tương tác hoàn toàn. Một trang được coi là tương tác hoàn toàn khi:

1. Trang hiển thị nội dung hữu ích, được đo lường bằng Sơn nội dung đầu tiên.

2. Trình xử lý sự kiện được đăng ký cho hầu hết các phần tử trang hiển thị.

3. Trang phản hồi các tương tác của người dùng trong vòng 50 mili giây.

Thời gian tương tác có phải là điều quan trọng nhất của Web Core không? Không

Chấm điểm TTI

Mục tiêu: đạt được điểm TTI dưới 3,8 giây.

Tài nguyên để cải thiện TTI

Thời gian để Tương tác, web.dev

Dịch chuyển bố cục tích lũy (CLS)

Nội dung thể hiện: Nhận thức của người dùng về độ ổn định hình ảnh của trang.
Trọng số điểm của Lighthouse Performance: 15%
Nó đo lường những gì: Nó định lượng các phần tử trang chuyển dịch thông qua việc tải trang cuối cùng.
Cách đo lường: Không giống như các chỉ số khác, CLS không được đo lường theo thời gian. Thay vào đó, nó là một chỉ số được tính toán dựa trên số khung hình mà các phần tử di chuyển và tổng khoảng cách tính bằng pixel mà các phần tử đã di chuyển.

Phần kết luận

Sự phức tạp của số liệu hiệu suất phản ánh những thách thức mà tất cả các trang web phải đối mặt.

Chúng tôi sử dụng các chỉ số hiệu suất làm proxy cho trải nghiệm người dùng – điều đó có nghĩa là bao thanh toán trong một số kỳ lân.

Các công cụ như Kiểm tra trang web của tôi của Google và Chi phí trang web của tôi là gì? có thể giúp bạn đưa ra các lập luận chuyển đổi và tập trung vào khách hàng để biết lý do tại sao hiệu suất lại quan trọng.

Hy vọng rằng khi dự án của bạn có sức hút, những định nghĩa này sẽ giúp bạn chuyển chỉ số hiệu suất đơn lẻ của Lighthouse thành vé hành động cho một nhóm kỹ sư có kỹ năng và cộng tác.

Theo dõi dữ liệu của bạn và truyền dữ liệu đó từ các mái nhà.

Khi Google đấu tranh để định lượng trải nghiệm định tính, các chuyên gia SEO và nhà phát triển phải giải mã cách chuyển một khái niệm thành mã.

Kiểm tra, lặp lại và chia sẻ những gì bạn học được! Tôi rất mong được thấy khả năng của bạn, bạn kỳ lân xinh đẹp.

Tối ưu Website