Kết hợp các công cụ của Google để kiểm tra, cải thiện và theo dõi trang web của bạn một cách hiệu quả.
Ngày xuất bản: 28/5/2020
Các chỉ số quan trọng về trang web là một nhóm chỉ số đánh giá trải nghiệm người dùng dựa trên các tiêu chí như hiệu suất tải, khả năng phản hồi đối với hoạt động đầu vào của người dùng và độ ổn định của bố cục.
Hướng dẫn này sẽ khám phá quy trình làm việc để cải thiện Chỉ số quan trọng chính của trang web, nhưng điểm bắt đầu của quy trình đó phụ thuộc vào việc bạn có đang thu thập dữ liệu thực địa của riêng mình hay không. Kết quả có thể phụ thuộc vào công cụ nào của Google mà bạn thấy hữu ích trong việc chẩn đoán và khắc phục các vấn đề về trải nghiệm người dùng.
Tốt nhất là bạn nên đo lường các chỉ số quan trọng chính của trang web trong thực tế
Các chỉ số quan trọng về trang web được thiết kế riêng để đo lường trải nghiệm của người dùng trên trang web của bạn. Đây là các chỉ số tập trung vào người dùng. Các công cụ dựa trên phòng thí nghiệm như Lighthouse là công cụ chẩn đoán để nêu bật các vấn đề tiềm ẩn về hiệu suất và các phương pháp hay nhất. Các công cụ dựa trên phòng thí nghiệm chạy trong một số điều kiện nhất định, được xác định trước và có thể không phản ánh các kết quả đo lường Core Web Vitals thực tế mà người dùng trải nghiệm.
Ví dụ: Lighthouse là một công cụ dựa trên phòng thí nghiệm, chạy các bài kiểm thử với chế độ điều tiết mô phỏng trong môi trường máy tính hoặc thiết bị di động mô phỏng. Mặc dù việc mô phỏng các điều kiện mạng và thiết bị chậm hơn như vậy rất hữu ích khi cố gắng chẩn đoán các vấn đề về hiệu suất, nhưng đó chỉ là một lát cắt trong số rất nhiều điều kiện mạng và chức năng thiết bị, do đó có thể không phản ánh trải nghiệm của người dùng trên trang web của bạn.
Các công cụ dựa trên phòng thí nghiệm như Lighthouse cũng thường thực hiện "tải nguội" trang web dưới dạng một khách truy cập hoàn toàn mới. Đây thường là lần tải chậm nhất, nhưng trong thực tế, khách truy cập có thể lưu một số thành phần vào bộ nhớ đệm nếu họ đã truy cập trước đó hoặc khi họ duyệt qua trang web. Khách truy cập mới và các công cụ cũng có thể trải nghiệm trang web theo cách khác với biểu ngữ cookie hoặc nội dung khác hiển thị cho họ.
Tóm lại, mặc dù các công cụ dựa trên phòng thí nghiệm có thể cho biết các vấn đề tiềm ẩn về hiệu suất và giúp bạn gỡ lỗi cũng như lặp lại, nhưng các công cụ đó có thể không thể hiện được số lượng khách truy cập thực sự trải nghiệm trang web của bạn. Sử dụng dữ liệu thực địa để đo lường hiệu suất thực tế và các công cụ dựa trên phòng thí nghiệm như Lighthouse để chẩn đoán cách cải thiện hiệu suất. Xem thêm phần Khi nào nên sử dụng Lighthouse.
Google đo lường các chỉ số quan trọng chính của trang web thông qua Báo cáo trải nghiệm người dùng trên Chrome (CrUX). Đây là tập dữ liệu công khai được thu thập từ người dùng Chrome thực tế. Đây là nền tảng của nhiều công cụ của Google và bên thứ ba báo cáo Chỉ số quan trọng chính của trang web.
Tuy nhiên, CrUX cũng có những hạn chế. Thường thì hệ thống có thể cho bạn biết thời điểm xảy ra sự cố, nhưng thường không có đủ dữ liệu để cho bạn biết nguyên nhân.
Thu thập dữ liệu thực địa của riêng bạn nếu có thể
Tập dữ liệu tốt nhất để cải thiện hiệu suất trang web trong thực tế là tập dữ liệu do bạn tạo. Điều này bắt đầu bằng việc thu thập dữ liệu trường từ khách truy cập trang web của bạn. Cách bạn thực hiện việc này tuỳ thuộc vào quy mô của tổ chức và liệu bạn muốn trả phí cho giải pháp của bên thứ ba hay tự tạo giải pháp của riêng mình.
Các giải pháp có tính phí gần như chắc chắn sẽ đo lường Chỉ số quan trọng chính của trang web (và các chỉ số hiệu suất khác) và thường cung cấp nhiều công cụ để tìm hiểu dữ liệu thu được. Trong các tổ chức lớn có nhiều tài nguyên, đây có thể là phương pháp ưu tiên.
Tuy nhiên, bạn có thể không phải là thành viên của một tổ chức lớn hoặc thậm chí là một tổ chức có đủ khả năng tài trợ cho giải pháp của bên thứ ba. Trong những trường hợp này, thư viện web-vitals của Google sẽ giúp bạn thu thập tất cả chỉ số về Vitals trên web. Tuy nhiên, bạn sẽ chịu trách nhiệm về cách báo cáo, lưu trữ và phân tích dữ liệu đó.
Nếu đang sử dụng Google Analytics nhưng chưa bắt đầu thu thập dữ liệu thực địa của riêng mình, bạn có thể sử dụng thư viện web-vitals để gửi Các chỉ số quan trọng về trang được thu thập trong thực địa đến Google Analytics và sử dụng tính năng xuất BigQuery của GA4 để báo cáo về dữ liệu đó.
Tìm hiểu về các công cụ của Google
Bất kể bạn có đang thu thập dữ liệu thực tế tại trang của mình hay không, có một số công cụ của Google có thể hữu ích trong việc phân tích Chỉ số quan trọng chính của trang web. Trước khi thiết lập quy trình làm việc, bạn nên xem thông tin tổng quan chung về từng công cụ để biết công cụ nào phù hợp nhất với bạn.
Báo cáo trải nghiệm người dùng trên Chrome (CrUX)
Như đã đề cập trước đó, CrUX là một tập dữ liệu công khai gồm dữ liệu tại chỗ được thu thập từ một phân khúc người dùng Google Chrome thực tế từ hàng triệu trang web. Báo cáo này bao gồm các chỉ số Core Web Vitals và các chỉ số khác đối với những trang web có đủ lưu lượng truy cập.
CrUX có sẵn dưới dạng tập dữ liệu BigQuery hằng tháng ở cấp nguồn gốc hoặc dưới dạng API hằng ngày ở cấp URL hoặc cấp nguồn gốc, miễn là URL hoặc nguồn gốc đó có đủ mẫu trong tập dữ liệu CrUX. Bạn cũng có thể xem dữ liệu BigQuery trong Bảng điều khiển CrUX để xem các xu hướng trước đây của trang web.
Trường hợp sử dụng CrUX
Ngay cả khi bạn thu thập dữ liệu thực tế của riêng mình, CrUX vẫn hữu ích. Mặc dù CrUX chỉ đại diện cho một nhóm nhỏ người dùng Chrome, nhưng bạn vẫn nên so sánh dữ liệu thực tế của trang web để xem dữ liệu đó phù hợp như thế nào với dữ liệu CrUX. Mỗi phương thức đều có những ưu điểm và nhược điểm riêng nên có thể dẫn đến sự khác biệt. Nếu bạn không thu thập bất kỳ dữ liệu trường nào cho trang web của mình, thì CrUX đặc biệt có giá trị để cung cấp thông tin tổng quan cấp cao, miễn là trang web của bạn được thể hiện trong tập dữ liệu của báo cáo này.
Bạn có thể trực tiếp dùng CrUX hoặc sử dụng một công cụ khác (kể cả những công cụ được đề cập bên dưới). Việc sử dụng trực tiếp tập dữ liệu CrUX thông qua BigQuery hoặc API sẽ rất hữu ích để hiển thị những dữ liệu không xuất hiện trong các công cụ khác (ví dụ: dữ liệu cấp quốc gia thường không có trên các công cụ khác hoặc để xem các chỉ số bổ sung trong CrUX mà thường không xuất hiện trong các công cụ khác).
Những trường hợp không nên sử dụng CrUX
CrUX chỉ đại diện cho người dùng Chrome và thậm chí chỉ một nhóm nhỏ người dùng Chrome. Một giải pháp rum đầy đủ có thể bao gồm nhiều trải nghiệm hơn trên Chrome và các trình duyệt khác có hỗ trợ chỉ số Chỉ số quan trọng của web.
Những trang web không nhận được đủ lưu lượng truy cập sẽ không được trình bày trong tập dữ liệu CrUX. Trong trường hợp này, bạn sẽ cần thu thập dữ liệu trường của riêng mình để hiểu hiệu suất của trang web trong trường hợp này, vì CrUX không phải là một lựa chọn. Ngoài ra, bạn sẽ cần dựa vào dữ liệu thử nghiệm, nhưng với những hạn chế là dữ liệu này có thể không đại diện như mô tả trước đó.
Vì dữ liệu mà CrUX cung cấp là giá trị trung bình lăn trong 28 ngày trước, nên đây không phải là công cụ lý tưởng trong quá trình phát triển, vì sẽ mất một khoảng thời gian hợp lý để các điểm cải tiến được phản ánh trong tập dữ liệu CrUX.
Cuối cùng, là một tập dữ liệu công khai, CrUX bị giới hạn về lượng thông tin có thể cung cấp và cách truy vấn dữ liệu này. Việc thu thập dữ liệu RUM của riêng bạn cho phép bạn thu thập thêm thông tin chi tiết (ví dụ: phần tử LCP) và phân đoạn dữ liệu nhiều hơn để xác định vấn đề. Người dùng đã đăng nhập có trải nghiệm tốt hơn hay tệ hơn so với người dùng không đăng nhập? Người dùng có LCP chậm có một thành phần LCP cụ thể không? Tương tác nào đang khiến giá trị FID và INP cao?
Thông tin chi tiết về tốc độ trang (PSI)
PSI là một công cụ báo cáo dữ liệu thực tế từ CrUX và dữ liệu của phòng thí nghiệm từ Lighthouse cho một trang nhất định. Hãy xem từng phần đó để biết thêm chi tiết.
Trường hợp nên sử dụng PSI
PSI rất hữu ích để đánh giá hiệu suất CrUX ở cấp trang hoặc cấp nguồn gốc, cho cả người dùng thiết bị di động và máy tính. Đây là lựa chọn phù hợp để xem thông tin tổng quan ban đầu về Chỉ số quan trọng chính của trang web cho một trang hoặc trang web. Báo cáo này cũng cho phép bạn xem dữ liệu về Các chỉ số quan trọng về trang web cho các trang web khác như đối thủ cạnh tranh.
PSI cũng cung cấp dữ liệu Lighthouse, trong đó đưa ra các đề xuất hữu ích để cải thiện Các chỉ số quan trọng về trang web (nếu các chỉ số này phù hợp). Nếu các mục này không khớp với nhau, thì các đề xuất của Lighthouse có thể ít phù hợp hơn.
Vì Lighthouse chạy từ máy chủ nên có thể tạo ra đường cơ sở nhất quán hơn so với khi chạy Lighthouse từ DevTools.
Trường hợp không nên sử dụng PSI
PSI chỉ dùng được cho URL công khai. Bạn không thể sử dụng PSI trên các trang web phát triển không thể truy cập công khai.
Dữ liệu CrUX chỉ có khi các trang web đáp ứng một số tiêu chí đủ điều kiện, bao gồm cả ngưỡng về mức độ phổ biến của trang web. PSI ít hữu ích hơn khi không có dữ liệu CrUX cho một trang hoặc nguồn gốc vì trong những trường hợp này, PSI chỉ có thể hiển thị dữ liệu thử nghiệm của Lighthouse.
Tương tự, nếu bạn chỉ có dữ liệu CrUX cấp nguồn gốc thay vì URL cụ thể đang được kiểm thử, thì điều này cũng hạn chế tính hữu ích của việc liên kết dữ liệu trường cấp nguồn gốc với chẩn đoán trong phòng thí nghiệm cấp trang. Dữ liệu trường cấp nguồn gốc vẫn là thông tin rất hữu ích để tóm tắt hiệu suất của trang web và các quy trình kiểm tra của Lighthouse có thể giúp ích, nhưng bạn cần phải thận trọng hơn trong trường hợp này.
Cuối cùng, khi dữ liệu cấp trang có trong CrUX nhưng khác với dữ liệu trong phòng thí nghiệm Lighthouse, các đề xuất của Lighthouse có thể có giá trị hạn chế. Điều này có thể xảy ra đặc biệt đối với các vấn đề về CLS (Mức thay đổi bố cục tích luỹ) sau khi tải và các Chỉ số quan trọng chính của trang web về tính tương tác (FID và INP) khi việc kiểm tra trong phòng thí nghiệm kém hữu ích hơn.
Search Console
Search Console đo lường hiệu suất và lưu lượng truy cập từ kết quả tìm kiếm của trang web, bao gồm cả các chỉ số quan trọng về trang web. Tính năng này chỉ được cung cấp cho những chủ sở hữu trang web đã xác nhận quyền sở hữu đối với trang web đó.
Một tính năng có giá trị của Search Console là nhóm các trang tương tự nhau (ví dụ: các trang sử dụng cùng một mẫu) vào một nhóm đánh giá duy nhất. Search Console cũng cung cấp báo cáo Chỉ số quan trọng chính của trang web dựa trên dữ liệu thực tế từ CrUX.
Trường hợp nên sử dụng Search Console
Search Console phù hợp với cả nhà phát triển và những người không phải là nhà phát triển để đánh giá cả hiệu suất tìm kiếm và hiệu suất trang theo những cách mà các công cụ khác của Google không làm được. Cách trình bày dữ liệu CrUX và nhóm các trang theo mức độ tương đồng cung cấp thông tin chi tiết mới mẻ về mức độ tác động của việc cải thiện hiệu suất đối với toàn bộ danh mục trang.
Những trường hợp không nên sử dụng Search Console
Search Console có thể không phù hợp với các dự án sử dụng nhiều công cụ của bên thứ ba để nhóm các trang theo mức độ tương đồng hoặc nếu một trang web không được thể hiện trong tập dữ liệu CrUX.
Việc nhóm các trang cũng có thể gây nhầm lẫn khi các trang mẫu trong một nhóm có đặc điểm khác với các trang còn lại trong nhóm. Ví dụ: nếu nhóm không đạt được một số Chỉ số quan trọng chính của trang web cụ thể, nhưng các trang mẫu đều có vẻ như đạt được các Chỉ số quan trọng chính của trang web đó. Điều này có thể xảy ra khi một nhóm chứa các trang đuôi dài hoặc ít được truy cập có thể tải chậm hơn vì ít có khả năng được lưu vào bộ nhớ đệm. Khi có đủ số lượng trang này trong đuôi dài, chúng có thể ảnh hưởng đến tỷ lệ vượt qua tổng thể của nhóm.
Ngọn hải đăng
Lighthouse là một công cụ thử nghiệm cung cấp các cơ hội cụ thể để cải thiện hiệu suất trang. Luồng người dùng Lighthouse cũng cho phép nhà phát triển viết tập lệnh cho quy trình tương tác để kiểm tra hiệu suất ngoài tải trang.
Lighthouse-CI là một công cụ liên quan chạy Lighthouse trong quá trình xây dựng và triển khai dự án để hỗ trợ kiểm thử hồi quy hiệu suất. Công cụ này trình bày báo cáo Lighthouse cùng với các yêu cầu kéo và theo dõi các chỉ số hiệu suất theo thời gian.
Các trường hợp nên sử dụng Lighthouse
Lighthouse rất hữu ích trong việc tìm ra các cơ hội cải thiện hiệu suất trong quá trình phát triển ở cả môi trường cục bộ và môi trường thử nghiệm. Lighthouse CI cũng hữu ích tương tự trong các giai đoạn xây dựng và triển khai đến môi trường thử nghiệm và môi trường phát hành chính thức, nơi cần kiểm thử hồi quy hiệu suất để duy trì trải nghiệm người dùng tốt.
Những trường hợp không nên sử dụng Lighthouse
Lighthouse (hay Lighthouse CI) không thay thế cho dữ liệu thực địa. Lighthouse chủ yếu là một công cụ chẩn đoán liệt kê các vấn đề tiềm ẩn và các phương pháp hay nhất từ một lượt tải trang được xác định trước. Các đề xuất mà công cụ này hiển thị không phải lúc nào cũng phù hợp với hiệu suất mà người dùng của bạn trải nghiệm.
Mặc dù bạn có thể dùng Lighthouse để chẩn đoán các trang web chính thức thông qua các công cụ như PageSpeed Insights, nhưng tốt nhất là bạn nên dùng Lighthouse trong môi trường phát triển và tích hợp liên tục để giải quyết các vấn đề về hiệu suất trước khi phát hành công khai.
Bảng điều khiển Hiệu suất trong Công cụ của Chrome cho nhà phát triển
Công cụ của Chrome cho nhà phát triển là một tập hợp các công cụ phát triển trong trình duyệt, bao gồm cả bảng điều khiển Hiệu suất. Bảng điều khiển Hiệu suất là một công cụ trong phòng thí nghiệm bao gồm hai "chế độ":
Khi bảng điều khiển Hiệu suất được mở lần đầu tiên, màn hình Chỉ số trực tiếp sẽ cung cấp chỉ số Chỉ số quan trọng chính của trang web hiện tại cùng với khả năng nhập dữ liệu trường từ CrUX. Tính năng này rất hữu ích khi xem hiệu suất "trực tiếp" khi bạn tương tác với trang để cố gắng phát hiện các vấn đề về hiệu suất, đặc biệt là các vấn đề sau khi tải mà bạn có thể thấy với các chỉ số CLS và INP.
Thứ hai, bảng điều khiển Hiệu suất cho phép nhà phát triển ghi lại hồ sơ (hoặc dấu vết) của tất cả hoạt động trên trang trong khi tải trang hoặc trong một khoảng thời gian đã ghi lại. Chế độ xem này cung cấp thông tin chi tiết chuyên sâu về mọi thứ mà nó quan sát được trên các phương diện như mạng, kết xuất, vẽ và hoạt động tập lệnh, cũng như các Chỉ số quan trọng chính của trang web.
Trường hợp sử dụng bảng điều khiển Hiệu suất
Nhà phát triển nên sử dụng bảng điều khiển Hiệu suất để thu thập thông tin chi tiết chuyên sâu về hiệu suất của một trang cụ thể.
Bạn có thể sử dụng chế độ xem chỉ số trực tiếp để nhanh chóng nắm được các đặc điểm hiệu suất hiện tại của trang, đồng thời phát hiện các vấn đề tiềm ẩn khi người dùng tương tác với trang.
Chế độ xem theo dõi đặc biệt hữu ích để gỡ lỗi các vấn đề về khả năng phản hồi ảnh hưởng đến INP. Sau khi xác định và lặp lại một lượt tương tác phản hồi kém, bảng điều khiển Hiệu suất có thể cung cấp nhiều dữ liệu về những gì đang diễn ra trong trình duyệt để giúp bạn hiểu được vấn đề, từ việc chặn luồng chính, đến ngăn xếp lệnh gọi JavaScript, cho đến công việc kết xuất.
Những trường hợp không nên sử dụng bảng điều khiển Hiệu suất
Bảng điều khiển Hiệu suất là một công cụ dành cho nhà phát triển, chủ yếu cung cấp dữ liệu của phòng thí nghiệm, mặc dù có một số ngữ cảnh từ CrUX. Dữ liệu này không thay thế cho dữ liệu trường.
Chế độ xem theo dõi chứa nhiều thông tin gỡ lỗi, nhưng do đó, những nhà phát triển mới hoặc những người không phải là nhà phát triển có thể khó hiểu. Tuy nhiên, chế độ xem chỉ số trực tiếp mà bảng điều khiển mở ra sẽ giải quyết vấn đề này bằng cách cung cấp một giao diện dễ sử dụng hơn cho những người không cần thông tin chi tiết đầy đủ.
Quy trình làm việc gồm 3 bước để đảm bảo Các chỉ số quan trọng về trang web của bạn luôn ở trạng thái tốt
Khi cải thiện trải nghiệm người dùng, tốt nhất bạn nên coi quá trình này là một vòng lặp liên tục. Để cải thiện Các chỉ số quan trọng về trang web và các chỉ số hiệu suất khác, bạn có thể áp dụng một trong những phương pháp sau:
- Đánh giá tình trạng trang web và xác định các vấn đề.
- Gỡ lỗi và tối ưu hoá.
- Theo dõi bằng các công cụ tích hợp liên tục để phát hiện và ngăn chặn sự hồi quy.
Bước 1: Đánh giá tình trạng của trang web và xác định các cơ hội cải thiện
Tốt nhất là bạn nên bắt đầu bằng dữ liệu thực địa để đánh giá tình trạng trang web.
- Sử dụng PageSpeed Insights để xem các chỉ số trải nghiệm tổng thể về Chỉ số quan trọng chính của trang web trên nguồn gốc và thông tin cụ thể về một URL riêng lẻ.
- Search Console có thể hữu ích trong việc xác định những trang cần cải thiện khi tính năng nhóm trang hoạt động hiệu quả cho trang web của bạn.
- Nếu bạn có dữ liệu RUM, thì đó thường là lựa chọn tốt nhất để xác định các trang hoặc phân khúc lưu lượng truy cập cụ thể gặp vấn đề.
Cho dù bạn phân tích dữ liệu trường bạn tự thu thập hay dữ liệu CrUX, bước đầu tiên này vẫn rất quan trọng. Nếu bạn không thu thập dữ liệu thực địa, thì dữ liệu CrUX có thể là đủ để hướng dẫn bạn, miễn là trang web của bạn được thể hiện trong tập dữ liệu.
Phân tích hiệu suất trang web bằng PageSpeed Insights
PageSpeed Insights hiển thị dữ liệu CrUX trong 28 ngày qua của dữ liệu trải nghiệm người dùng ở phân vị thứ 75. Điều này có nghĩa là nếu 75% trải nghiệm người dùng đáp ứng ngưỡng được đặt cho một chỉ số nhất định, thì trải nghiệm đó được coi là "tốt".
Nếu bạn muốn xem hiệu suất của một trang cụ thể, hãy sử dụng trang đó. Để có cái nhìn tổng thể về trang web khi bắt đầu tối ưu hoá lần đầu tiên, bạn nên bắt đầu với trang chủ, vì đây thường là một trong những trang phổ biến nhất trên nhiều trang web.
Tập trung vào phần những trải nghiệm mà người dùng thực tế của bạn đang trải nghiệm trong PSI ban đầu. Bạn sẽ thấy tối đa 4 chế độ xem dữ liệu: thiết bị di động và máy tính cho URL đã nhập và toàn bộ nguồn gốc. Hãy so sánh các giá trị này và xem sự khác biệt giữa chúng. Thiết bị di động thường có hiệu suất thấp hơn so với máy tính vì đây là thiết bị bị hạn chế tài nguyên hơn và hoạt động trong điều kiện mạng có thể kém ổn định hơn. Nếu URL và dữ liệu gốc khác nhau đáng kể, hãy cố gắng tìm hiểu lý do: trang chủ thường là trang đầu tiên được truy cập (tức là trang đích), vì vậy có thể chậm hơn so với trang gốc vì người dùng phải chịu toàn bộ tác động của bộ nhớ đệm trình duyệt chưa được khởi động. Các trang sau này có thể sẽ tải nhanh hơn vì mọi nội dung dùng chung sẽ được lưu vào bộ nhớ đệm, khiến dữ liệu tổng hợp cấp độ gốc giảm xuống.
PSI cũng cho thấy cả 3 chỉ số quan trọng chính của trang web (LCP, CLS và INP) cùng với các chỉ số chẩn đoán TTFB và FCP. Có chỉ số quan trọng chính nào của trang web không đạt không và mức độ không đạt là bao nhiêu? Điều này sẽ cho bạn biết nên tập trung vào đâu.
Tìm hiểu mối quan hệ giữa các chỉ số này, đặc biệt là LCP. Nếu LCP chậm, như trong ví dụ này, hãy xem xét TTFB và FCP. Đây đều là các mốc quan trọng đối với chỉ số đó. Trong ví dụ này, chúng ta có TTFB là 1,8 giây, điều này sẽ khiến bạn rất khó đạt được ngưỡng đề xuất là 2,5 giây để có LCP tốt. Điều này cho thấy phần phụ trợ bị chậm (lỗi máy chủ hoặc thiếu CDN), mạng chậm hơn hoặc lệnh chuyển hướng làm chậm các byte HTML đầu tiên. Hãy xem Hướng dẫn tối ưu hoá TTFB để biết thêm thông tin. FCP mất thêm một giây nữa, điều này cũng có thể cho thấy mạng chậm hơn. LCP không lâu sau FCP trong ví dụ này cho thấy tài nguyên LCP được tối ưu hoá tốt sau khi trang tự tải.
Đối với CLS, hãy xem điểm CLS của CrUX và điểm CLS của Lighthouse để biết đây có phải là vấn đề về CLS khi tải (mà Lighthouse sẽ phát hiện và đưa ra lời khuyên) hay là vấn đề về CLS sau khi tải mà Lighthouse sẽ không phát hiện được. Để biết thêm thông tin, hãy xem hướng dẫn Tối ưu hoá CLS.
Để biết tốc độ phản hồi, hãy xem điểm INP. Hãy xem xét quy trình kiểm tra TBT trong Lighthouse để biết liệu có nhiều hoạt động xử lý JavaScript đang diễn ra trong lần tải trang đầu tiên hay không. Điều này có thể ảnh hưởng đến INP. INP có thể là một chỉ số khó cải thiện, vì vậy hãy tham khảo hướng dẫn Tối ưu hoá INP để biết thêm thông tin.
Xác định các trang hoạt động kém trong Search Console
Mặc dù PSI rất hữu ích khi bạn muốn kiểm tra một URL cụ thể hoặc toàn bộ trang web, nhưng Search Console có thể giúp bạn tập trung vào một số loại trang cụ thể. Điều này đặc biệt hữu ích nếu nhiều trang có cùng chủ đề hoặc công nghệ và Search Console có thể xác định thành công những trang đó.
Báo cáo Chỉ số quan trọng chính của trang web trong Search Console cho thấy thông tin tổng quan về hiệu suất của trang web, nhưng bạn vẫn có thể xem chi tiết những trang cụ thể cần chú ý. Thông qua Search Console, bạn cũng có thể:
- Xác định từng nhóm trang cần cải thiện và những nhóm trang cung cấp trải nghiệm tốt cho người dùng.
- Nhận dữ liệu chi tiết về hiệu suất theo URL được nhóm theo trạng thái, chỉ số và nhóm các trang web tương tự (chẳng hạn như trang chi tiết sản phẩm trên trang web thương mại điện tử).
- Nhận báo cáo chi tiết về việc nhóm các URL vào từng danh mục chất lượng trải nghiệm người dùng trên cả thiết bị di động và máy tính.
Sau khi xem xét một số trang cụ thể, bạn có thể sử dụng PSI như đã giải thích trước đó để hiểu rõ hơn về các vấn đề đối với những trang đó.
Bước 2: Gỡ lỗi và tối ưu hoá
Ở bước 1, bạn đã xác định được những trang cần cải thiện hiệu suất, cũng như những chỉ số trong Các chỉ số quan trọng về trang web mà bạn muốn cải thiện. Bạn có thể sử dụng công cụ của Google để biết thêm thông tin nhằm tìm hiểu nguyên nhân gốc rễ của vấn đề.
- Chạy quy trình kiểm tra Lighthouse để nhận hướng dẫn ở cấp trang
- Sử dụng chế độ xem chỉ số trực tiếp của bảng Hiệu suất để phân tích Các chỉ số quan trọng về trang web theo thời gian thực.
- Sử dụng tính năng Theo dõi bảng điều khiển Hiệu suất để gỡ lỗi các vấn đề về hiệu suất và kiểm thử các thay đổi đối với mã.
Để biết hướng dẫn chi tiết hơn, hãy tham khảo những hướng dẫn sau:
Khám phá các cơ hội với Lighthouse
PageSpeed Insights sẽ chạy Lighthouse cho bạn, nhưng đối với hoạt động phát triển cục bộ, bạn cũng có thể chạy Lighthouse từ Công cụ dành cho nhà phát triển Chrome. Điều này rất hữu ích để xác thực các bản sửa lỗi cục bộ.
Điểm chính là xác thực rằng quy trình kiểm tra Lighthouse tái hiện các vấn đề mà bạn đang cố gắng giải quyết (ví dụ: LCP chậm hoặc các vấn đề về CLS). Ngay từ đầu, Lighthouse chỉ đánh giá trải nghiệm người dùng trong quá trình tải trang. Vì là công cụ thử nghiệm nên công cụ này cũng loại trừ INP để ưu tiên TBT.
Khi các chỉ số Lighthouse cho thấy một vấn đề tương tự như vấn đề bạn đang cố gắng giải quyết, thì thông tin phong phú trong quy trình kiểm tra của Lighthouse có thể giúp xác định vấn đề và đề xuất giải pháp.
Bạn có thể lọc các quy trình kiểm tra chỉ để xem những Chỉ số quan trọng chính của trang web mà bạn quan tâm để tập trung vào việc khắc phục các vấn đề liên quan đến một chỉ số cụ thể:
Đối với INP, hãy sử dụng các bài kiểm tra TBT để xác định các vấn đề có thể ảnh hưởng đến các chỉ số đó. Tuy nhiên, xin lưu ý rằng nếu không có tương tác, Lighthouse bị giới hạn ở mức độ có thể chẩn đoán.
Phân tích theo thời gian thực bằng màn hình chỉ số trực tiếp của Công cụ của Chrome cho nhà phát triển
Màn hình chỉ số trực tiếp của Chrome DevTools trong bảng điều khiển Hiệu suất cho thấy các chỉ số quan trọng về trang web theo thời gian thực trong quá trình tải trang và trong khi duyệt xem trang. Do đó, tính năng này có thể ghi lại INP cũng như các thay đổi về bố cục xảy ra sau khi tải. Bạn cũng có thể xem thông tin chi tiết hơn về từng chỉ số:
Mặc dù chế độ xem này cung cấp nhiều thông tin hữu ích để giúp xác định các vấn đề về hiệu suất, nhưng để biết thêm thông tin, bạn có thể xem chi tiết bằng một dấu vết.
Xem chi tiết bằng bảng điều khiển Hiệu suất
Bảng điều khiển Hiệu suất trong Công cụ của Chrome cho nhà phát triển cho phép bạn ghi lại hồ sơ (hoặc dấu vết) của tất cả hành vi trên trang trong một khoảng thời gian được ghi lại.
Các thông tin về thời gian chính (chẳng hạn như LCP) sẽ xuất hiện trong kênh Thời gian. Nhấp vào các thông tin này để biết thêm chi tiết.
Kênh Sự thay đổi bố cục làm nổi bật các sự thay đổi bố cục và khi nhấp vào các sự thay đổi này, bạn sẽ thấy thêm thông tin chi tiết về các phần tử đã thay đổi để gỡ lỗi CLS.
Các Tác vụ dài (có thể dẫn đến vấn đề INP) cũng được làm nổi bật bằng tam giác màu đỏ.
Những tính năng này (cũng như thông tin trong các phần khác của Bảng hiệu suất) có thể giúp bạn xác định xem các bản sửa lỗi có ảnh hưởng gì đến các chỉ số quan trọng về trang web của một trang hay không.
Gỡ lỗi Các chỉ số quan trọng về trang web trong trường hợp thực tế
Các công cụ trong phòng thí nghiệm không phải lúc nào cũng xác định được nguyên nhân của tất cả các vấn đề Core Web Vitals ảnh hưởng đến người dùng của bạn. Đây là một lý do quan trọng khiến bạn cần phải thu thập dữ liệu thực địa của riêng mình, vì dữ liệu này tính đến các yếu tố mà dữ liệu trong phòng thí nghiệm không thể tính đến.
Xem hiệu suất gỡ lỗi trong trường để biết thêm thông tin.
Bước 3: Theo dõi các thay đổi
Sau khi khắc phục mọi vấn đề, bạn cần đảm bảo các biện pháp khắc phục đó có hiệu quả như mong muốn và các vấn đề mới không làm gián đoạn Các chỉ số quan trọng về trang web. Điều này đòi hỏi bạn phải theo dõi các vấn đề về hiệu suất trong quy trình làm việc của nhà phát triển để ngăn các vấn đề về hiệu suất được phát hành công khai, đồng thời thường xuyên theo dõi dữ liệu thực địa để đảm bảo điều này.
Theo dõi các yêu cầu về hiệu suất trong môi trường Tích hợp liên tục (CI)
Lighthouse-CI cho phép bạn tự động chạy quy trình kiểm tra Lighthouse trên các thay đổi mã để ngăn chặn việc hiệu suất hồi quy vào mã. Thao tác này có thể kiểm tra thời gian hiệu suất (những có thể thay đổi) hoặc chỉ dùng để kiểm tra hiệu suất, dưới dạng một công cụ tìm lỗi mã nguồn (linting) nhằm ngăn chặn các hành vi xấu trong mã.
Xem xu hướng về tình trạng trang web bằng dữ liệu trường
Mặc dù bạn nên cố gắng phát hiện và khắc phục mọi vấn đề về hiệu suất trước khi bắt đầu phát hành công khai, nhưng để tìm ra những vấn đề không thành công, bạn nên theo dõi dữ liệu thực địa bằng công cụ rum. Có nhiều sản phẩm RUM thương mại có thể giúp bạn giải quyết vấn đề này. Thư viện JavaScript web-vitals có thể tự động hoá việc thu thập dữ liệu trường của trang web và tuỳ ý sử dụng dữ liệu này để hỗ trợ trang tổng quan tuỳ chỉnh và hệ thống cảnh báo.
Đối với những trang web không có giải pháp RUM, bạn có thể sử dụng Trang tổng quan CrUX để phân tích xu hướng cơ bản về dữ liệu trường. Báo cáo này báo cáo những thông tin sau đây cho các trang web trong CrUX:
- Tổng quan về trang web, phân chia các chỉ số Core Web Vitals theo loại thiết bị máy tính và thiết bị di động.
- Xu hướng trước đây theo loại chỉ số: biểu đồ này phân bổ các chỉ số theo thời gian cho mỗi bản phát hành dữ liệu báo cáo CrUX hiện có hằng tháng.
- Thông tin nhân khẩu học của người dùng, minh hoạ mức phân phối số lượt xem trang trên toàn bộ nguồn gốc cho người dùng trong từng nhóm nhân khẩu học, bao gồm cả thiết bị và loại kết nối hiệu quả.
Trang tổng quan CrUX dựa trên Tập dữ liệu BigQuery CrUX, được cập nhật một lần mỗi tháng. Đây có thể là lời nhắc bạn nên thường xuyên kiểm tra Chỉ số quan trọng chính của trang web.
Kết luận
Để đảm bảo trải nghiệm người dùng nhanh chóng và thú vị, bạn cần có tư duy ưu tiên hiệu suất và áp dụng quy trình làm việc để đảm bảo tiến trình. Với các công cụ và quy trình phù hợp để kiểm tra, gỡ lỗi và theo dõi, bạn có thể tạo ra trải nghiệm chất lượng cao cho người dùng và duy trì các chỉ số Core Web Vitals ở mức tốt trong ngưỡng được xác định.