Thu thập dữ liệu về Các chỉ số quan trọng của trang web trên trang web của bạn là bước đầu tiên để cải thiện các chỉ số này. Một quy trình phân tích toàn diện sẽ thu thập dữ liệu hiệu suất từ cả môi trường thực tế và môi trường phòng thí nghiệm. Bạn chỉ cần thực hiện một vài thay đổi nhỏ đối với mã để đo lường Các chỉ số quan trọng của trang web và có thể thực hiện việc này bằng cách sử dụng các công cụ miễn phí.
Đo lường Các chỉ số quan trọng về trang web bằng dữ liệu RUM
Dữ liệu Giám sát người dùng thực (RUM), còn được gọi là dữ liệu thực địa, ghi lại hiệu suất mà người dùng thực tế của một trang web trải nghiệm. Dữ liệu RUM là dữ liệu mà Google sử dụng để xác định xem một trang web có đáp ứng ngưỡng Các chỉ số quan trọng chính được đề xuất hay không.
Bắt đầu
Nếu bạn chưa thiết lập RUM, các công cụ sau đây sẽ nhanh chóng cung cấp cho bạn dữ liệu về hiệu suất thực tế của trang web. Tất cả các công cụ này đều dựa trên cùng một tập dữ liệu cơ bản (Báo cáo trải nghiệm người dùng trên Chrome), nhưng có các trường hợp sử dụng hơi khác nhau:
- Chrome DevTools tích hợp với tập dữ liệu CrUX trong chế độ xem chỉ số trực tiếp của bảng điều khiển Hiệu suất. Bằng cách so sánh trải nghiệm cục bộ của bạn với trải nghiệm của người dùng thực trên cùng một trang, bạn có thể đưa ra quyết định sáng suốt hơn về nơi cần tập trung gỡ lỗi. Nếu đang tìm một hành động duy nhất để bắt đầu đo lường và cải thiện Các chỉ số quan trọng về trang web của trang web, bạn nên sử dụng bảng điều khiển Hiệu suất của Chrome DevTools.
- PageSpeed Insights (PSI) báo cáo về hiệu suất tổng hợp ở cấp trang và cấp nguồn trong 28 ngày qua. Ngoài ra, tính năng này còn đưa ra các đề xuất về cách cải thiện hiệu suất. PSI có trên web và dưới dạng một API.
- Search Console báo cáo dữ liệu hiệu suất theo từng trang. Điều này giúp bạn xác định những trang cụ thể cần cải thiện. Không giống như PageSpeed Insights, báo cáo của Search Console có cả dữ liệu hiệu suất trong quá khứ. Bạn chỉ có thể sử dụng Search Console với những trang web mà bạn sở hữu và đã xác minh quyền sở hữu.
- CrUX Vis là một trang tổng quan được tạo sẵn, hiển thị dữ liệu nhật ký CrUX cho một URL hoặc nguồn gốc mà bạn chọn (nếu có trong tập dữ liệu CrUX). Công cụ này được xây dựng dựa trên CrUX History API và quy trình thiết lập mất khoảng một phút. So với PageSpeed Insights và Search Console, CrUX Vis có nhiều ví dụ về dữ liệu, các phần phụ của LCP, các loại điều hướng, v.v.
- CrUX Vis là một trang tổng quan theo thời gian, hiển thị dữ liệu CrUX cho một nguồn gốc hoặc URL mà bạn chọn. API này được xây dựng dựa trên CrUX History API. So với PageSpeed Insights và Search Console, báo cáo CrUX Vis có nhiều thông tin chi tiết hơn, chẳng hạn như các loại thao tác điều hướng và dữ liệu LCP và RTT có trong CrUX Vis.
Bạn nên lưu ý rằng mặc dù các công cụ được liệt kê trước đó rất phù hợp để "bắt đầu" đo lường Các chỉ số quan trọng về trang web, nhưng chúng cũng có thể hữu ích trong các bối cảnh khác. Cụ thể, cả CrUX và PSI đều có sẵn dưới dạng API và có thể dùng để tạo trang tổng quan cũng như các báo cáo khác.
Thu thập dữ liệu RUM
Mặc dù các công cụ dựa trên CrUX là một điểm khởi đầu tốt để tìm hiểu hiệu suất của Các chỉ số quan trọng về trang web, nhưng bạn nên bổ sung thông tin bằng RUM của riêng mình. Dữ liệu RUM mà bạn tự thu thập có thể cung cấp thông tin phản hồi chi tiết và tức thì hơn về hiệu suất của trang web. Nhờ đó, bạn có thể dễ dàng xác định vấn đề và kiểm thử các giải pháp có thể.
Bạn có thể thu thập dữ liệu RUM của riêng mình bằng cách sử dụng một nhà cung cấp RUM chuyên dụng hoặc bằng cách thiết lập công cụ của riêng bạn.
Các nhà cung cấp RUM chuyên dụng chuyên thu thập và báo cáo dữ liệu RUM. Để sử dụng Core Web Vitals với các dịch vụ này, hãy hỏi nhà cung cấp RUM của bạn về việc bật tính năng giám sát Core Web Vitals cho trang web của bạn.
Nếu không có nhà cung cấp RUM, bạn có thể tăng cường chế độ thiết lập số liệu phân tích hiện có để thu thập và báo cáo các chỉ số này bằng cách sử dụng thư viện JavaScript web-vitals. Phương thức này sẽ được giải thích chi tiết hơn ở phần tiếp theo.
Thư viện JavaScript web-vitals
Nếu bạn đang triển khai chế độ thiết lập RUM của riêng mình cho Các chỉ số quan trọng về trang web, thì cách dễ nhất để thu thập các chỉ số quan trọng về trang web là sử dụng thư viện JavaScript web-vitals. web-vitals là một thư viện nhỏ, theo mô-đun (~2 KB) cung cấp một API thuận tiện để thu thập và báo cáo từng chỉ số Web Vitals có thể đo lường trên thực tế.
Không phải tất cả các chỉ số tạo nên Các chỉ số quan trọng về trang web đều được API hiệu suất tích hợp của trình duyệt hiển thị trực tiếp, mà được xây dựng dựa trên các chỉ số đó. Ví dụ: Điểm số tổng hợp về mức thay đổi bố cục (CLS) được triển khai bằng API không ổn định của bố cục. Khi sử dụng web-vitals, bạn không cần lo lắng về việc tự triển khai các chỉ số này; điều này cũng đảm bảo rằng dữ liệu bạn thu thập phù hợp với phương pháp và các phương pháp hay nhất cho từng chỉ số.
Để biết thêm thông tin về cách triển khai web-vitals, hãy tham khảo tài liệu và hướng dẫn Các phương pháp hay nhất để đo lường Chỉ số quan trọng chính của trang web trong thực tế.
Tổng hợp dữ liệu
Bạn cần phải báo cáo các chỉ số do web-vitals thu thập. Nếu dữ liệu này được đo lường nhưng không được báo cáo, thì bạn sẽ không bao giờ thấy dữ liệu đó. Tài liệu web-vitals có các ví dụ minh hoạ cách gửi dữ liệu đến một điểm cuối API chung, Google Analytics hoặc Trình quản lý thẻ của Google.
Nếu bạn đã có một công cụ báo cáo yêu thích, hãy cân nhắc sử dụng công cụ đó. Nếu không, bạn có thể sử dụng Google Analytics miễn phí cho mục đích này.
Khi cân nhắc nên sử dụng công cụ nào, bạn nên nghĩ đến những người cần có quyền truy cập vào dữ liệu. Doanh nghiệp thường đạt được hiệu suất cao nhất khi toàn bộ công ty (thay vì một phòng ban duy nhất) quan tâm đến việc cải thiện hiệu suất. Xem bài viết Khắc phục tốc độ trang web trên nhiều chức năng để tìm hiểu cách nhận được sự đồng thuận của các phòng ban.
Diễn giải dữ liệu
Khi phân tích dữ liệu hiệu suất, bạn cần chú ý đến phần đuôi của phân phối. Dữ liệu RUM thường cho thấy hiệu suất có sự khác biệt lớn – một số người dùng có trải nghiệm nhanh, những người khác có trải nghiệm chậm. Tuy nhiên, việc sử dụng giá trị trung vị để tóm tắt dữ liệu có thể che giấu hành vi này.
Đối với Chỉ số quan trọng của trang web, Google sử dụng tỷ lệ phần trăm trải nghiệm "tốt" thay vì các số liệu thống kê như trung vị hoặc giá trị trung bình để xác định xem một trang web hoặc trang có đáp ứng các ngưỡng được đề xuất hay không. Cụ thể, để một trang web hoặc trang được coi là đáp ứng ngưỡng Các chỉ số quan trọng chính của trang web, 75% số lượt truy cập trang phải đáp ứng ngưỡng "tốt" cho từng chỉ số.
Đo lường Các chỉ số quan trọng về trang web bằng dữ liệu trong phòng thí nghiệm
Dữ liệu phòng thí nghiệm (còn gọi là dữ liệu tổng hợp) được thu thập từ một môi trường có kiểm soát, thay vì từ người dùng thực tế. Không giống như dữ liệu RUM, dữ liệu phòng thí nghiệm có thể được thu thập từ các môi trường tiền sản xuất và do đó được kết hợp vào quy trình làm việc của nhà phát triển và quy trình tích hợp liên tục. Lighthouse và WebPageTest là ví dụ về các công cụ thu thập dữ liệu tổng hợp.
Lưu ý
Luôn có sự khác biệt giữa dữ liệu RUM và dữ liệu thử nghiệm, đặc biệt là nếu điều kiện mạng, loại thiết bị hoặc vị trí của môi trường thử nghiệm khác biệt đáng kể so với người dùng. Tuy nhiên, khi thu thập dữ liệu trong phòng thí nghiệm về các chỉ số quan trọng về trang web, bạn cần lưu ý một số điểm cụ thể quan trọng sau:
- Thời gian hiển thị nội dung lớn nhất (LCP) được đo trong môi trường phòng thí nghiệm có thể khác với thời gian hiển thị được đo trên thực tế bằng dữ liệu RUM do độ trễ khi tải trang (thông qua lệnh chuyển hướng, độ trễ khi kết nối với máy chủ hoặc dữ liệu chưa lưu vào bộ nhớ đệm), nội dung khác nhau hiển thị cho người dùng tuỳ theo màn hình hoặc do các lý do khác (bao gồm cả biểu ngữ cookie, cá nhân hoá).
- Mức thay đổi bố cục tích luỹ (CLS) được đo lường trong môi trường phòng thí nghiệm có thể thấp hơn một cách giả tạo so với CLS quan sát được trong dữ liệu RUM. Nhiều công cụ thử nghiệm chỉ tải trang mà không tương tác với trang đó. Do đó, các chỉ số này chỉ ghi lại những thay đổi về bố cục xảy ra trong lần tải trang ban đầu. Ngược lại, CLS do các công cụ RUM đo lường sẽ ghi lại các thay đổi bố cục không mong muốn xảy ra trong toàn bộ thời gian hoạt động của trang.
- Lượt tương tác đến nội dung hiển thị tiếp theo (INP) không thể đo lường trong môi trường phòng thí nghiệm vì chỉ số này yêu cầu người dùng tương tác với trang. Do đó, Tổng thời gian chặn (TBT) là chỉ số proxy được đề xuất trong phòng thí nghiệm cho INP. TBT đo lường "tổng thời gian từ thời điểm Hiển thị nội dung đầu tiên đến Thời điểm tương tác, trong đó trang bị chặn phản hồi hoạt động đầu vào của người dùng". Mặc dù INP và TBT được tính theo cách khác nhau, nhưng cả hai đều phản ánh luồng chính bị chặn trong quá trình khởi động. Khi luồng chính bị chặn, trình duyệt sẽ phản hồi chậm hơn đối với các hoạt động tương tác của người dùng.
Công cụ
Bạn có thể sử dụng các công cụ này để thu thập số liệu đo lường trong phòng thí nghiệm về Các chỉ số quan trọng về trang web:
- Công cụ của Chrome cho nhà phát triển đo lường và báo cáo Các chỉ số quan trọng về trang web cho một trang nhất định trong chế độ xem chỉ số trực tiếp của bảng điều khiển Hiệu suất. Khung hiển thị này cung cấp cho nhà phát triển ý kiến phản hồi về hiệu suất theo thời gian thực khi họ thực hiện các thay đổi về mã.
- Lighthouse Lighthouse báo cáo về LCP, CLS và TBT, đồng thời nêu bật những điểm có thể cải thiện hiệu suất. Lighthouse có trong Công cụ dành cho nhà phát triển của Chrome, dưới dạng gói npm và cũng có thể được tích hợp vào quy trình làm việc tích hợp liên tục bằng Lighthouse CI.
- WebPageTest có Chỉ số quan trọng chính của trang web trong báo cáo tiêu chuẩn. WebPageTest rất hữu ích khi thu thập thông tin về Các chỉ số quan trọng về trang web trong các điều kiện cụ thể về thiết bị và mạng.