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 thông tin đầu vào của người dùng và độ ổn định của bố cục.
Trong hướng dẫn này, chúng ta sẽ tìm hiểu một quy trình cải thiện Chỉ số quan trọng chính của trang web cho trang web của bạn. Tuy nhiên, đ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 tế của riêng mình hay không. Điểm dừng có thể tuỳ 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.
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à những công cụ chẩn đoán giúp làm nổi 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 được 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 phép đo Chỉ số quan trọng chính của trang web mà người dùng của bạn trải nghiệm trong thực tế.
Ví dụ: Lighthouse là một công cụ dựa trên phòng thí nghiệm, chạy các thử nghiệm có tính năng đ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ù những hoạt động mô phỏng như vậy về điều kiện mạng và thiết bị chậm hơn sẽ hữu ích khi bạn cố gắng chẩn đoán các vấn đề về hiệu suất, nhưng đây chỉ là một phần nhỏ trong số rất nhiều điều kiện mạng và khả năng của thiết bị. Do đó, những hoạt động mô phỏng này có thể không phản ánh những gì người dùng đang trải nghiệm 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 lạnh" một trang web với tư cách là 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 trên thực tế, khách truy cập có thể có một số tài sản được lưu vào bộ nhớ đệm nếu họ đã từng truy cập hoặc khi họ đang duyệt xem 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 khi biểu ngữ cookie hoặc nội dung khác xuất hiện với họ.
Nói 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 chúng có thể không thể hiện 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 tế để đ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 về trang web thông qua Báo cáo trải nghiệm người dùng trên Chrome (CrUX). Đây là một 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ì công cụ này có thể cho bạn biết khi nào có vấn đề, nhưng thường không có đủ dữ liệu để cho bạn biết lý do.
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 tại chỗ là tập dữ liệu mà 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 thực hiện việc này tuỳ thuộc vào quy mô của tổ chức và việc bạn muốn trả tiền cho một giải pháp của bên thứ ba hay tự tạo giải pháp.
Các giải pháp có tính phí chắc chắn sẽ đo lường Các chỉ số quan trọng về 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 sâu về dữ liệu thu được. Đây có thể là phương thức được ưu tiên ở những tổ chức lớn có nguồn lực đáng kể.
Tuy nhiên, có thể bạn không thuộc một tổ chức lớn hoặc thậm chí là một tổ chức có đủ khả năng chi 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ả Web Vitals. 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 bạn đang sử dụng Google Analytics nhưng chưa bắt đầu thu thập dữ liệu thực tế của riêng mình, thì 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 tế đến Google Analytics và sử dụng dữ liệu 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 hay không, vẫn có một số công cụ của Google có thể hữu ích trong việc phân tích Các 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 có thể xem thông tin tổng quan cấp cao về từng công cụ để biết công cụ nào phù hợp nhất (hoặc không phù hợp) 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 về dữ liệu thực tế được thu thập từ một nhóm người dùng Google Chrome thực tế trên hàng triệu trang web. Báo cáo này bao gồm các chỉ số quan trọng chính của trang web và các chỉ số khác cho 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 nguồn gốc, miễn là một URL hoặc nguồn gốc có đủ mẫu trong tập dữ liệu CrUX. Dữ liệu CrUX có trong nhiều công cụ CrUX cho cả quyền truy cập theo chương trình và các công cụ trực quan để người dùng sử dụng.
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 nên so sánh dữ liệu thực tế của trang web để xem dữ liệu đó có phù hợp với dữ liệu CrUX hay không. Mỗi phương pháp đều có ưu điểm và nhược điểm riêng, 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ị trong việc 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 CrUX.
Bạn có thể sử dụng CrUX trực tiếp hoặc thông qua 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 (bằng BigQuery hoặc API) rất hữu ích để hiển thị 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 (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à ngay cả khi đó, chỉ một nhóm nhỏ người dùng Chrome. Một giải pháp RUM toàn diện 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ố quan trọng của trang web.
Những trang web không nhận được đủ lưu lượng truy cập sẽ không được thể hiện trong tập dữ liệu CrUX. Nếu rơi vào trường hợp này, bạn sẽ cần thu thập dữ liệu thực tế của riêng mình để biết hiệu suất trang web của bạn trong thực tế, vì CrUX sẽ 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 trong phòng thí nghiệm, nhưng có thể dữ liệu này không mang tính đại diện như mô tả trước đó.
Vì dữ liệu mà CrUX cung cấp là mức trung bình luân phiê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 đáng kể để các điểm cải tiến được phản ánh trong tập dữ liệu CrUX.
Cuối cùng, vì là một tập dữ liệu công khai, nên CrUX bị giới hạn về lượng thông tin mà CrUX 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 Chỉ số quan trọng chính của trang web tốt hơn hay kém hơn so với người dùng chưa đăng nhập? Người dùng có LCP chậm có một phần tử LCP cụ thể không? Những lượt tương tác nào đang gây ra giá trị FID và INP cao?
PageSpeed Insights (PSI)
PSI là một công cụ báo cáo dữ liệu thực tế từ CrUX và dữ liệu trong 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 sử dụng PSI
PSI rất phù hợp để đánh giá hiệu suất CrUX ở cấp trang hoặc cấp nguồn, 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ề Các chỉ số quan trọng chính của trang web cho một trang hoặc trang web. Tiện ích 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 những trang web khác, chẳng hạn như trang web của đối thủ cạnh tranh.
PSI cũng cung cấp dữ liệu Lighthouse, đư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 những thông tin này không khớp, thì các đề xuất của Lighthouse có thể sẽ ít phù hợp hơn.
Vì Lighthouse chạy từ máy chủ, nên công cụ này có thể tạo ra một đường cơ sở nhất quán hơn so với việc chạy Lighthouse từ Công cụ cho nhà phát triển.
Những trường hợp không nên sử dụng PSI
PSI chỉ dùng được cho các URL công khai. Bạn không thể dùng PSI trên các trang web đang phát triển mà 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í nhất định, bao gồm cả ngưỡng mức độ phổ biến của trang web. PSI sẽ í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ể cho thấy dữ liệu phòng thí nghiệm 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ế khả năng hữu ích của việc tương quan dữ liệu thực tế ở cấp nguồn gốc với thông tin chẩn đoán trong phòng thí nghiệm ở cấp trang. Việc có 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 hoạt động 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 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 sau khi tải và đối với các chỉ số Core Web Vitals về khả năng tương tác (FID và INP) khi các hoạt động kiểm tra dựa trên phòng thí nghiệm ít 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 chính của trang web. Tính năng này chỉ dành cho những chủ sở hữu trang web đã xác nhận quyền sở hữu trang web.
Một tính năng hữu ích của Search Console là tính năng nhóm các trang tương tự (ví dụ: các trang sử dụng cùng một mẫu) thành một nhóm đánh giá duy nhất. Search Console cũng có 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.
Khi nào 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á hiệu suất tìm kiếm và hiệu suất trang theo cách mà các công cụ khác của Google không làm được. Việc trình bày dữ liệu CrUX và nhóm các trang theo mức độ tương đồng mang đến thông tin chi tiết mới về cách các điểm cải thiện hiệu suất ảnh hưởng đến toàn bộ danh mục trang.
Khi nào không nên sử dụng Search Console
Search Console có thể không phù hợp với những dự án sử dụng các công cụ bên thứ ba khác nhau để nhóm các trang theo mức độ tương đồng, hoặc nếu một trang web không có trong tập dữ liệu CrUX.
Việc nhóm 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 phần còn lại của 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 nói chung, nhưng tất cả các trang mẫu đều có vẻ đạ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 có đuôi dài hoặc ít được truy cập và 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 những trang này trong phần đ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ụ phòng 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 kịch bản cho các luồng tương tác để kiểm thử hiệu suất ngoài quá trình tải trang.
Lighthouse-CI là một công cụ liên quan, chạy Lighthouse trong quá trình tạo và triển khai dự án để hỗ trợ kiểm thử hồi quy hiệu suất. Nó 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.
Trường hợp nên dùng Lighthouse
Lighthouse là một công cụ tuyệt vời để 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 dàn dựng. Lighthouse CI cũng hữu ích tương tự trong các giai đoạn xây dựng và triển khai cho môi trường dàn dựng và sản xuất, nơi cần kiểm thử hồi quy hiệu suất để duy trì trải nghiệm tốt cho người dùng.
Những trường hợp không nên sử dụng Lighthouse
Lighthouse (hoặc Lighthouse CI) khôngphải là một giải pháp thay thế cho dữ liệu thực tế. 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ần tải trang được xác định trước. Các đề xuất mà công cụ này đưa ra có 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 gặp phải.
Mặc dù bạn có thể dùng Lighthouse để chẩn đoán các trang web đang hoạt động thông qua những 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 chúng ảnh hưởng đến trang web đang hoạt động.
Các quy trình kiểm tra mà Lighthouse cung cấp cũng có trong phần "thông tin chi tiết" trong bảng điều khiển Hiệu suất của Công cụ cho nhà phát triển của Chrome. Phần này cung cấp thông tin phân tích chuyên sâu hơn về hiệu suất của một trang.
Bảng điều khiển Hiệu suất trong Công cụ cho nhà phát triển của Chrome
Công cụ của Chrome cho nhà phát triển là một bộ 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ụ phòng thí nghiệm bao gồm 2 "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ố hiện tại của Các chỉ số quan trọng về trang web, cùng với khả năng nhập dữ liệu thực tế từ CrUX. Đây là chế độ xem "trực tiếp" về hiệu suất hữu ích 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à đối với 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 quá trình tải trang hoặc trong một khoảng thời gian được ghi lại. Chế độ xem này cung cấp thông tin chi tiết về mọi thứ mà chế độ xem này quan sát được trên các phương diện như hoạt động mạng, kết xuất, vẽ và tập lệnh, cũng như Core Web Vitals của một trang. Công cụ này cũng cung cấp thông tin chi tiết, tương tự như thông tin do Lighthouse cung cấp.
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 để hiểu rõ 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.
Khung hiển thị dấu vết đặ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 được một tương tác phản hồi kém và có thể lặp lại, 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 rõ vấn đề, từ việc chặn luồng chính, đến ngăn xếp lệnh gọi JavaScript, cho đến hoạt động 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 trong phòng thí nghiệm – mặc dù có một số bối cảnh thực tế từ CrUX. Đây không phải là dữ liệu thay thế cho dữ liệu thực địa.
Chế độ xem dấu vết chứa nhiều thông tin gỡ lỗi, nhưng do đó, các nhà phát triển mới vào nghề hoặc những người không phải là nhà phát triển có thể khó hiểu được. 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 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ố gắng cải thiện trải nghiệm người dùng, tốt nhất là bạn nên coi quy trình này là một chu kỳ liên tục. Để cải thiện Các chỉ số quan trọng chính của trang web và các chỉ số hiệu suất khác, bạn có thể áp dụng một phương pháp như 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 hiện tượng hồi quy.
Bước 1: Đánh giá tình trạng 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 của trang web.
- Sử dụng PageSpeed Insights để xem các chỉ số tổng thể về trải nghiệm Các chỉ số quan trọng chính về 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 có dữ liệu RUM, thì đó thường là lựa chọn tốt nhất để có thể xác định các trang hoặc phân khúc lưu lượng truy cập cụ thể có vấn đề.
Cho dù bạn phân tích dữ liệu thực tế mà bạn tự thu thập hay dữ liệu CrUX, thì bước đầu tiên này là rất quan trọng. Nếu bạn không thu thập dữ liệu thực tế, thì dữ liệu CrUX có thể đủ để hướng dẫn bạn (miễn là trang web của bạn có 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 gần nhất về 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 quan về một trang web khi mới bắt đầu tối ưu hoá, bạn có thể 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.
Ban đầu, hãy tập trung vào phần những gì người dùng thực tế của bạn đang trải nghiệm trong PSI. 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 những điểm này và xem chúng khác nhau như thế nào. Thiết bị di động thường có hiệu suất thấp hơn máy tính vì đây là thiết bị có nhiều hạn chế về tài nguyên và có thể hoạt động trong điều kiện mạng kém ổn định hơn. Nếu URL và dữ liệu nguồn 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) nên có thể chậm hơn so với nguồn gốc mà người dùng phải chịu toàn bộ ảnh hưởng của bộ nhớ đệm trình duyệt chưa được chuẩn bị. Các trang tiếp theo có thể sẽ tải nhanh hơn vì mọi thành phần dùng chung sẽ được lưu vào bộ nhớ đệm, giúp giảm dữ liệu tổng hợp ở cấp nguồn.
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 yêu cầu và mức độ là bao nhiêu? Điều này sẽ cho biết bạn nên tập trung vào những điểm nào.
Hiểu rõ mối quan hệ giữa các con số này, đặc biệt là đối với LCP. Nếu LCP chậm (như trong ví dụ này), hãy xem TTFB và FCP. Cả hai chỉ số này đều là các cột mốc của chỉ số LCP. 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ó đáp ứng ngưỡng được đề xuất là 2,5 giây cho LCP tốt. Điều này cho thấy có thể là do phần phụ trợ chậm (vấn đề về máy chủ hoặc thiếu CDN), mạng chậm hơn hoặc cá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ó 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. CrUX hiện cũng cho thấy nhiều thông tin chẩn đoán hơn về các loại tài nguyên và phần phụ, điều này cũng giúp bạn chẩn đoán các vấn đề về LCP.
Đố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 (Lighthouse sẽ phát hiện và tư vấn) hay 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 khả năng phản hồi, hãy xem điểm INP. Xem các hoạt động kiểm tra TBT trong Lighthouse để biết liệu có nhiều hoạt động xử lý JavaScript diễn ra trong lần tải trang ban đầu 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 những trang hoạt động kém hiệu quả trong Search Console
Mặc dù PSI hữu ích khi bạn có một URL cụ thể muốn kiểm tra hoặc toàn bộ trang web, nhưng Search Console có thể giúp bạn nhắm đến những loại trang cụ thể. Điều này đặc biệt hữu ích nếu nhiều trang có chung các chủ đề hoặc công nghệ và Search Console có thể xác định thành công các trang này.
Báo cáo Chỉ số quan trọng chính của trang web trong Search Console cho thấy bức tranh tổng thể về hiệu suất của trang web, nhưng bạn vẫn có thể đi sâu vào những trang cụ thể cần được chú ý. Với Search Console, bạn cũng có thể:
- Xác định những nhóm trang riêng lẻ cần cải thiện và những nhóm trang mang lại 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 một trang web thương mại điện tử).
- Nhận báo cáo chi tiết phân loại URL theo từng danh mục chất lượng trải nghiệm người dùng cho cả thiết bị di động và máy tính.
Sau khi có một số trang cụ thể cần xem xét, 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 phải xác định được những trang cần cải thiện hiệu suất, cũng như chỉ số nào trong số 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ác 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ễ và xác định vấn đề.
- Xem các bài kiểm tra Lighthouse để nhận được hướng dẫn tổng quan cho trang
- Sử dụng chế độ xem chỉ số trực tiếp của Bảng điều khiển hiệu suất để phân tích Các chỉ số quan trọng chính của trang web theo thời gian thực.
- Sử dụng tính năng theo dõi của 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 về mã.
Để biết hướng dẫn chi tiết hơn, hãy xem các hướng dẫn sau:
Khám phá cơ hội bằng Lighthouse
PageSpeed Insights chạy Lighthouse cho bạn. Bạn cũng có thể chạy Lighthouse từ Chrome DevTools. Điều này rất hữu ích để xác thực các bản sửa lỗi cục bộ, mặc dù Bảng điều khiển hiệu suất (sẽ được đề cập tiếp theo) là một công cụ toàn diện hơn để xác định và khắc phục các vấn đề về hiệu suất cục bộ.
Điểm mấu chốt là xác thực rằng quy trình kiểm tra Lighthouse sao chép 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 khi xuất xưởng, Lighthouse chỉ đánh giá trải nghiệm người dùng trong quá trình tải trang. Vì là một công cụ phòng 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ố của Lighthouse cho thấy một vấn đề tương tự như vấn đề mà bạn đang cố gắng giải quyết, thì lượng thông tin phong phú trong các hoạt động 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 hoạt động kiểm tra chỉ theo Các 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 hoạt động kiểm tra TBT để xác định những vấn đề có thể ảnh hưởng đến các chỉ số đó, nhưng hãy lưu ý rằng nếu không có hoạt động tương tác, Lighthouse sẽ bị hạn chế về khả năng 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 một trang. Do đó, nó 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ố:
Khung hiển thị 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, thậm chí có thể lấy thông tin về trường từ CrUX. Để biết thêm thông tin, bạn có thể đi sâu vào chi tiết bằng một dấu vết.
Xem thông tin 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 Chrome DevTools cho phép bạn ghi lại hồ sơ (hoặc dấu vết) của mọi hành vi trên trang trong một khoảng thời gian được ghi lại.
Thông tin chi tiết về hiệu suất có trong bảng điều khiển bên Thông tin chi tiết. Thao tác này cũng cho thấy các chỉ số Core Web Vitals cùng với các giá trị trường của những chỉ số đó (nếu có).
Mục Layout Shifts (Sự thay đổi về bố cục) theo dõi và làm nổi bật những thay đổi về bố cục. Khi nhấp vào những 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 thời điểm chính (chẳng hạn như LCP) sẽ xuất hiện trong Thời gian ở cuối dấu vết. Nhấp vào những mục này để biết thêm thông tin chi tiết.
Các Tác vụ dài (có thể dẫn đến vấn đề về INP) cũng được đánh dấu bằng các hình tam giác màu đỏ trong biểu đồ ngọn lửa.
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 điều khiển 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 đến Core Web Vitals của một trang hay không.
Gỡ lỗi Các chỉ số quan trọng về trang web trong trường
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 đề về Chỉ số quan trọng chính của trang web ảnh hưởng đến người dùng. Đây là một lý do khiến việc thu thập dữ liệu thực tế của riêng bạn trở nên quan trọng, vì dữ liệu này có tính đến những yếu tố mà dữ liệu trong phòng thí nghiệm không thể có.
Hãy xem bài viết gỡ lỗi hiệu suất tại hiện 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 rằng các vấn đề đó có tác động cần thiết 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 phải giám sát 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 cho sản xuất và thường xuyên giám sát dữ liệu trường để đảm bảo điều này xảy ra.
Giám sát 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 các quy trình kiểm tra Lighthouse trên các cam kết mã để ngăn chặn hiện tượng hồi quy hiệu suất xâm nhập vào mã. Điều này có thể kiểm tra thời gian hiệu suất (có thể thay đổi) hoặc chỉ các hoạt động kiểm tra hiệu suất, dưới dạng một công cụ kiểm tra để ngăn chặn các phương pháp không phù hợp 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 tất cả các vấn đề về hiệu suất trước khi chúng xuất hiện trong bản phát hành chính thức, nhưng việc giám sát dữ liệu thực tế bằng RUM là điều cần thiết để tìm ra mọi vấn đề còn sót lại. Có nhiều sản phẩm RUM thương mại có thể giúp bạn thực hiện việc này. Thư viện JavaScript web-vitals có thể tự động hoá quy trình thu thập dữ liệu trường của một trang web và tuỳ ý sử dụng dữ liệu này để hỗ trợ các 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 nhiều công cụ CrUX để phân tích xu hướng cơ bản về dữ liệu thực tế.
Kết luận
Để đảm bảo mang lại trải nghiệm nhanh chóng và thú vị cho người dùng, bạn cần có tư duy ưu tiên hiệu suất và áp dụng một quy trình làm việc để đảm bảo tiến độ. Với các công cụ và quy trình phù hợp để kiểm tra, gỡ lỗi và giám sát, bạn có thể tạo ra trải nghiệm tuyệt vời cho người dùng và duy trì trong ngưỡng được xác định cho Các chỉ số quan trọng chính của trang web.