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