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 theo nhiều tiêu chí như hiệu suất tải, khả năng phản hồi hoạt động đầu vào của người dùng và độ ổn định của bố cục.
Bạn sẽ tìm hiểu quy trình làm việc để cải thiện Chỉ số quan trọng chính của trang web cho trang web trong hướng dẫn này. Tuy nhiên, điểm bắt đầu quy trình công việc phụ thuộc vào việc bạn có thu thập dữ liệu trường của riêng mình hay không. Điểm kết thúc 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 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 hiệu quả nhất trong 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. Các chỉ số này là những chỉ số lấy người dùng làm trung tâm. Các công cụ dựa trên phòng thí nghiệm như Lighthouse là công cụ chẩn đoán để 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 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. Tuy những mô phỏng như vậy về tình trạng mạng và thiết bị chậm hơn sẽ giúp ích khi bạn 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 số rất nhiều điều kiện mạng và khả năng của thiết bị, do đó 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 qua.
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" của 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ọ đang duyệt xung quanh 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 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ể 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 trường để đ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. Hãy xem thêm 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ừ những người dùng Chrome thực tế. Đây là trọng tâm của nhiều công cụ của Google và bên thứ ba nhằm báo cáo Chỉ số quan trọng chính của trang web.
Tuy nhiên, CrUX có một số hạn chế riêng. Hệ thống 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 trường 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 hợp này là tập dữ liệu mà bạn tạo. Bắt đầu bằng việc thu thập dữ liệu thực địa từ khách truy cập trang web của bạn. Cách thanh toán phụ thuộc vào quy mô tổ chức của bạn và việc bạn muốn thanh toán cho giải pháp của bên thứ ba hay 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 Các chỉ số quan trọng về trang web (và các chỉ số khác về hiệu suất), đồng thời thường cung cấp nhiều công cụ để phân tích dữ liệu thu được. Trong các tổ chức lớn có tài nguyên đáng kể, đâ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 như vậy, thư viện web-vitals của Google sẽ giúp bạn thu thập tất cả Chỉ số quan trọng của trang web. Tuy nhiên, bạn sẽ chịu trách nhiệm về cách dữ liệu đó được báo cáo, lưu trữ và phân tích.
Nếu đã 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, thì bạn có thể dùng thư viện web-vitals để gửi Các chỉ số quan trọng về trang web được thu thập tại trường cho Google Analytics và dùng dữ liệu xuất sang BigQuery của GA4 để báo cáo dữ liệu.
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, 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ố 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 độ gốc hoặc dưới dạng API hằng ngày ở cấp URL hoặc cấp độ gốc, miễn là một 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. Trang tổng quan này cho phép các trang web xem lại các xu hướng trước đây cho trang web của họ.
Trường hợp nên sử dụng CrUX
Ngay cả khi bạn thu thập dữ liệu tại trường 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 bạn nên so sánh dữ liệu trong trường của trang web để xem mức độ phù hợp của dữ liệu này 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ị trong việc cung cấp thông tin tổng quan cấp cao, miễn là trang web đó được thể hiện trong tập dữ liệu.
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, nhưng kể cả khi đó thì 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 đủ 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 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 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 là dữ liệu đó có thể không mang tính đại diện như đã mô tả trước đó.
Vì dữ liệu mà CrUX cung cấp chỉ là giá trị trung bình luân phiên trong 28 ngày qua, 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ý để hệ thống phản ánh những điểm cải tiến 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 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 tốt hơn hay tệ hơn so với người dùng không đăng nhập? Những người dùng có LCP chậm có một phần tử 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 trường từ CrUX và phòng thí nghiệm từ Lighthouse cho một trang nhất định. Hãy xem các phần riêng lẻ đó để biết thêm chi tiết.
Trường hợp sử dụng PSI
PSI là công cụ lý tưởng để đánh giá hiệu suất CrUX ở cấp trang hoặc cấp máy chủ gốc, cho cả người dùng thiết bị di động và máy tính. Đây là một lựa chọn hay để cung cấp 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. Công cụ này cũng cho phép bạn xem dữ liệu Core Web Vitals của các trang web khác như đối thủ cạnh tranh.
PSI cũng cung cấp dữ liệu của Lighthouse, từ đó đưa ra các đề xuất hữu ích để cải thiện Chỉ số quan trọng chính của trang web – nếu các chỉ số này phù hợp với nhau. Khi những đề xuất này không phù hợp với nhau, 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 đườ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 được sử dụng ứng dụng này trên các trang web phát triển không được truy cập công khai.
Bạn chỉ có thể xem dữ liệu CrUX khi các trang web đáp ứng một số tiêu chí nhất định, bao gồm cả ngưỡng về mức độ phổ biến của trang web. PSI 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ì ứng dụng này chỉ có thể hiển thị dữ liệu của Lab 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ì việc này cũng giới hạn 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ấp trang trong phòng thí nghiệm. Việc có dữ liệu trường cấp độ gốc vẫn rất hữu ích cần có để làm bản 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, khi dữ liệu cấp trang có trong CrUX, nhưng khác với dữ liệu của phòng thí nghiệm Lighthouse, các đề xuất từ Lighthouse có thể có giá trị hạn chế. Điều này có thể đặc biệt xảy ra đối với các vấn đề về CLS (Mức thay đổi bố cục tích luỹ) sau khi tải, cũng như các Chỉ số quan trọng về trang web (FID và INP) về tính tương tác, tức là những vấn đề không hữu ích khi kiểm tra trong phòng thí nghiệm.
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ả Chỉ số quan trọng chính của 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 có một báo cáo Core Web Vitals dựa trên dữ liệu thực địa của CrUX.
Trường hợp sử dụng Search Console
Search Console rất phù hợp cho cả nhà phát triển và những người không phải nhà phát triển trong việc đá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à việc nhóm các trang theo mức độ tương tự cung cấp thông tin chi tiết mới về tác động của các biện pháp 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
Có thể Search Console 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 mức độ tương tự nhau, 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 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 có nhiều nội dung hoặc các trang ít khi được truy cập. Những 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 các trang này ở đ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ụ trong 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 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ụ có liên quan, chạy Lighthouse trong quá trình tạo dự án và triển khai để 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 của 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 là lựa chọn tuyệt vời để tìm 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 quá trình xây dựng và triển khai các giai đoạn cho môi trường thử nghiệm và môi trường phát hành chính thức, trong đó 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 thực địa. Lighthouse về cơ bản 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 định sẵn. 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ù Lighthouse có thể dùng để 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 lý tưởng nhất là Lighthouse được sử dụng trong các môi trường tích hợp liên tục và đang phát triển để giải quyết các vấn đề về hiệu suất trước khi phát hành công khai.
Tiện ích Chỉ số quan trọng của trang web
Tiện ích Chỉ số quan trọng chính của trang web của Chrome là một công cụ chẩn đoán hiển thị các chỉ số Core Web Vitals khi bạn duyệt web. Ngoài ra, báo cáo này cũng bao gồm dữ liệu CrUX cho trang hiện tại nếu trang đó được thể hiện 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 của Chỉ số quan trọng chính của trang web.
Trường hợp nên sử dụng tiện ích Chỉ số quan trọng của trang web
Bất cứ ai ở mọi vai trò đều có thể sử dụng tiện ích Chỉ số quan trọng chính của trang web để đánh giá Chỉ số quan trọng chính của trang web tại mọi thời điểm trong vòng đời của trang. Công cụ này hữu ích như một "sự kiện phát trực tiếp" chế độ xem hiệu suất 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ụ thể là đối với các vấn đề sau khi tải mà bạn có thể nhận thấy với các chỉ số CLS (Mức thay đổi bố cục tích luỹ) và INP (Lượt tương tác đến nội dung hiển thị tiếp theo).
Những trường hợp không nên sử dụng tiện ích Chỉ số quan trọng về trang web
Tiện ích Chỉ số quan trọng của trang web không đánh giá toàn diện hiệu suất của trang. Ngoài ra, các chỉ số mà phần mềm này báo cáo phụ thuộc rất lớn vào môi trường mà ứng dụng chạy và nhà phát triển thường có 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 giúp 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ứ mà công cụ này quan sát được theo nhiều phương diện như mạng, kết xuất, vẽ và hoạt động viết tập lệnh, cũng như 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
Trong quá trình phát triển, 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 trang. Điều này đặc biệt hữu ích để gỡ lỗi các vấn đề về tốc độ 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 có phản hồi kém, bảng Hiệu suất có thể cung cấp nhiều dữ liệu về những gì đang diễn ra trên trình duyệt để giúp bạn tìm hiểu vấn đề, từ việc 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. Trang này chứa nhiều thông tin gỡ lỗi, nhưng do đó, có thể khó hiểu đối với các nhà phát triển chưa có kinh nghiệm hoặc những người không phải là nhà phát triển.
Quy trình công việc 3 bước để đảm bảo Chỉ số quan trọng chính của trang web luôn ở trạng thái 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 xem quy 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 phương pháp như:
- Đá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 của trang web.
- Sử dụng PageSpeed Insights để xem các chỉ số tổng thể về trải nghiệm Core Web Vitals trên nguồn gốc và thông tin cụ thể trên một URL riêng lẻ.
- Search Console có thể hữu ích khi 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à cách tốt nhất để có thể xác định các 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 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 trường, 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 của trang web bằng PageSpeed Insights
PageSpeed Insights hiển thị dữ liệu CrUX ở phân vị thứ 75 của dữ liệu trải nghiệm người dùng trong 28 ngày qua. Tức là nếu 75% trải nghiệm người dùng đạt đến ngưỡng đặt ra cho một chỉ số cụ thể, thì trải nghiệm đó sẽ được coi là "tốt".
Nếu bạn muốn xem hiệu suất trên 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 mới bắt đầu tối ưu hoá, bạn nên bắt đầu từ 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 đối với URL được nhập và toàn bộ nguồn gốc. Hãy so sánh các báo cáo này và xem chúng khác nhau như thế nào. Thiết bị di động thường hoạt động kém hiệu quả hơn máy tính vì đây là thiết bị hạn chế về 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 dữ liệu nguồn và URL có sự khác biệt đáng kể, hãy cố gắng tìm hiểu lý do: trang chủ thường là các 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 người dùng gốc tận dụng toàn bộ bộ nhớ đệm của trình duyệt chưa được kiểm soát. 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à 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 đạt được và mức độ sụt giảm như thế nào? Biểu đồ này sẽ cho biết nơi bạn cần tập trung nỗ lực.
Tìm hiểu mối quan hệ giữa các chỉ số này, đặc biệt là LCP. Nếu LCP bị chậm, như trong ví dụ này, hãy xem 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ẽ khiến rất khó để đáp ứng ngưỡng được đề xuất 2,5 giây cho LCP tốt. Điều này cho thấy 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 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 một lần nữa có thể cho biết mạng chậm hơn. LCP không dài sau FCP trong ví dụ này, điều này cho thấy rằng tài nguyên LCP được tối ưu hoá hiệu quả sau khi chính trang tải.
Đối với CLS, hãy xem điểm CrUX CLS và điểm CLS của Lighthouse để xem đây có phải là vấn đề CLS về tải không (Lighthouse sẽ phát hiện và tư vấn ) hay vấn đề CLS sau khi tải mà Lighthouse không phát hiện được. Để biết thêm thông tin, hãy xem hướng dẫn về Optimize CLS.
Để biết tốc độ phản hồi, hãy xem điểm FID và INP. Xem các bài kiểm tra TBT trong Lighthouse để xem có nhiều quá trình xử lý JavaScript đang diễn ra trong 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ố 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 có hiệu suất 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 cho 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 bạn 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 những trang cụ thể mà bạn cần chú ý. Thông qua Search Console, bạn còn 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à các nhóm trang web tương tự nhau (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 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 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 đây để thu thập thêm thông tin về các vấn đề trên các trang đó.
Bước 2: Gỡ lỗi và tối ưu hoá
Ở bước 1, bạn chắc hẳ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ố quan trọng chính của 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ễ nhằm xác định vấn đề.
- Chạy quy trình kiểm tra Lighthouse để nhận hướng dẫn ở cấp trang
- Sử dụng tiện ích Chỉ số quan trọng chính của trang web để phân tích Chỉ số quan trọng chính của 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 thử các thay đổi về 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 chạy Lighthouse cho bạn. Tuy nhiên, đố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ụ 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 bản sửa lỗi cục bộ.
Một điểm quan trọng là xác thực rằng quy trình kiểm tra Lighthouse tái tạo các vấn đề bạn đang cố gắng giải quyết (ví dụ: các vấn đề LCP hoặc CLS bị chậm). Ngay từ đầu, 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ụ trong phòng thí nghiệm nên công cụ này cũng loại trừ FID và INP để thay thế TBT.
Khi các chỉ số của Lighthouse đề xuất một vấn đề tương tự như vấn đề bạn đang cố gắng giải quyết, thì lượng thông tin phong phú trong các lần 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 Chỉ số quan trọng chính của trang web mà bạn quan tâm để tập trung vào bản sửa lỗi cho các 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ó tương tác, Lighthouse bị giới hạn mức độ chẩn đoán.
Phân tích theo thời gian thực bằng tiện ích Chỉ số quan trọng của trang web
Tiện ích Chỉ số quan trọng của trang web của Chrome hiển thị Chỉ số quan trọng chính của trang web theo thời gian thực trong khi tải trang và khi duyệt xem một trang. Do đó, nó có thể ghi lại FID và INP cũng như sự 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ố:
Bạn nên coi tiện ích Chỉ số quan trọng về trang web là một công cụ kiểm tra tại chỗ để phát hiện các 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. Đó 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 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 sẽ phân tích mọi hành vi trên trang trong một khoảng thời gian đã ghi lại.
Thời gian chính (chẳng hạn như LCP) sẽ xuất hiện trên 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 Layout Shifts (Thay đổi bố cục) sẽ làm nổi bật những thay đổi về bố cục và bạn có thể nhấp vào những yếu tố này để cung cấp thêm thông tin chi tiết về những yếu tố đã thay đổi để gỡ lỗi CLS (Mức thay đổi bố cục tích luỹ).
Những việc cần làm dài (có thể dẫn đến vấn đề về FID và INP) cũng được đánh dấu bằng 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 trong 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 gì đến Chỉ số quan trọng chính của trang web hay không.
Gỡ lỗi Chỉ số quan trọng chính của 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 đề Core Web Vitals ảnh hưởng đến người dùng của bạn. Đây là một lý do khiến việc thu thập dữ liệu thực địa của riêng bạn lại quan trọng đến vậy, vì việc này có tính đến những 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 xong mọi vấn đề, bạn cần đảm bảo rằng các vấn đề đó hoạt động theo đúng yêu cầu 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 việc 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 nhằm ngăn chặn 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.
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 quy trình kiểm tra Lighthouse trên các cam kết mã để ngăn việc hồi quy hiệu suất nhập mã. Việc này có thể giúp bạn kiểm tra dấu thời gian hiệu suất (có thể thay đổi) hoặc chỉ kiểm tra hiệu suất trong phần kiểm tra hiệu suất. Đây là một công cụ tìm lỗi mã nguồn để ngăn chặn các hành vi xấu trong mã.
Xem xu hướng tình trạng của trang web qua dữ liệu thực địa
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ó rất 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 thu thập dữ liệu trường của trang web và có thể 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 (không bắt buộc).
Đố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 cho dữ liệu thực địa. Báo cáo này báo cáo những nội dung sau đây cho các trang web trong CrUX:
- Tổng quan về trang web: Phân đoạn Chỉ số quan trọng chính của 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ố: 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 người dùng: minh hoạ việc phân bổ lượt xem trang trên toàn bộ một nguồn gốc của người dùng thuộc từng loại thông tin nhân khẩu học, bao gồm cả loại 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 CrUX BigQuery được cập nhật mỗi tháng một lần. Đâ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
Để có được trải nghiệm người dùng nhanh chóng và thú vị, người dùng phải 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 độ. Nhờ có những 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ể xây dựng được trải nghiệm tuyệt vời cho người dùng cũng như không vượt quá ngưỡng được xác định cho các Chỉ số quan trọng chính của trang web.