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