Cloudflare công bố BEACON: Kho dữ liệu hiệu năng web từ hàng tỷ người dùng thực

Nếu bạn làm việc trong ngành công nghệ, có lẽ bạn đang đọc bài viết này trên một chiếc laptop mạnh mẽ hoặc điện thoại flagship với kết nối Wi-Fi ổn định, tốc độ cao. Điều này rất tuyệt vời để xây dựng phần mềm, nhưng thường khác xa với thực tế mà nhiều người đang phải đối mặt khi sử dụng chính phần mềm đó.

Người dùng cuối có thể đang dùng một chiếc điện thoại giá rẻ đã bốn năm tuổi, pin yếu, gói cước dữ liệu bị bóp băng thông sau 2 GB, sống trong điều kiện hạ tầng công cộng thiếu đầu tư, hoặc đơn giản là đang đi vào góc phòng tập gym nơi Wi-Fi dường như chẳng bao giờ hoạt động. Hãy nhân con số này với hàng tỷ người trên khắp thế giới, khoảng cách giữa "chạy tốt trên máy tôi" và "chạy tốt cho mọi người" bắt đầu nới rộng, làm sai lệch các quyết định quan trọng liên quan đến lựa chọn và ưu tiên công nghệ của chúng ta.

Thu hẹp khoảng cách nhận thức bằng dữ liệu khách quan là trọng tâm trong sứ mệnh của chúng tôi nhằm giúp xây dựng một Internet tốt hơn, một Internet nhanh và dễ tiếp cận với tất cả mọi người, chứ không chỉ riêng những người đang sử dụng phần cứng tốt nhất.

Đó là lý do tại sao hôm nay, chúng tôi chia sẻ một góc nhìn mang lại thông tin chi tiết về cách người dùng thực tế trải nghiệm web, bằng cách công bố tập dữ liệu Cloudflare BEACON — Browser Experience Across Cloudflare's Observed Network (Trải nghiệm trình duyệt trên mạng lưới được Cloudflare quan sát). Cloudflare đã thu thập loại dữ liệu đo lường từ xa này trong nhiều năm thay mặt cho khách hàng, giúp họ hiểu chi tiết và cụ thể về cách người dùng thực tế trải nghiệm trang web của họ. Hôm nay, chúng tôi mở rộng góc nhìn đó cho tất cả mọi người.

BEACON là một tập dữ liệu ẩn danh được xây dựng từ hàng tỷ phép đo hiệu năng thực tế trên 10.000 trang web lớn nhất trong mạng lưới của chúng tôi. Nó bao phủ mọi engine trình duyệt chính, được cập nhật hàng ngày trên Google BigQuery và sử dụng các tiêu chuẩn được định nghĩa bởi RUM Archive, một cơ sở dữ liệu Real User Monitoring (RUM) công khai do cộng đồng dẫn dắt. Bằng cách mở rộng quy mô của dự án đó lên gấp 100 lần, BEACON mang đến cho các nhà nghiên cứu một cái nhìn chưa từng có về hiệu năng web trên các trình duyệt, thiết bị và quốc gia khác nhau.

Những gì BEACON tiết lộ

Core Web Vitals từ lâu đã trở thành tiêu chuẩn thực tế để đo lường hiệu năng cảm nhận trên web, và BEACON báo cáo cả ba chỉ số:

• Largest Contentful Paint (LCP): thời gian tải
• Cumulative Layout Shift (CLS): độ ổn định hình ảnh
• Interaction to Next Paint (INP): khả năng phản hồi tương tác

Vì chúng tôi công bố các dữ liệu này dưới dạng biểu đồ tần suất (histogram) đầy đủ thay vì một giá trị trung bình duy nhất, bạn có thể suy ra bất kỳ phân vị (percentile) nào mình muốn. Thay vì chỉ dừng lại ở P75 (phân vị thứ 75), bạn có thể kiểm tra phần đuôi dài (long tail) và thấy được nơi mà ngành công nghiệp vẫn đang chật vật để mang lại trải nghiệm nhanh chóng cho mọi người.

Ai đang trải nghiệm web chậm hơn?

WebKit, hiện là engine trình duyệt duy nhất trên iOS, có hiệu năng tốt nhất trên các chỉ số này xét về tổng thể, nhưng lợi thế đó không phổ biến ở mọi nơi. Tại 46 quốc gia nơi WebKit chiếm hơn 10% lưu lượng truy cập, chỉ số LCP, INP hoặc cả hai của nó kém hơn ít nhất 10% so với các trình duyệt dựa trên Blink như Chrome, Edge và Opera. Ví dụ, tại Campuchia, WebKit chiếm 17,5% lượt xem trang, nhưng LCP của nó kém hơn 50% so với Blink.

BEACON cũng bao gồm phân loại ngành của tên miền từ Intel API của chúng tôi. Các danh mục Chính phủ và Chính trị, Y tế, và An toàn cho trẻ em nổi bật là những danh mục có hiệu năng cao, trong khi Quảng cáo, Tôn giáo và Thời tiết thường có hiệu năng kém nhất:

Các phân vị bổ sung phơi bày những khác biệt bị che giấu bởi kết quả P75 đơn lẻ. Ở một số ngành, trải nghiệm chậm nhất rơi mạnh vào phần đuôi dài, đặc biệt là đối với độ ổn định hình ảnh được đo bằng Cumulative Layout Shift.

Điều gì khiến các trang web trở nên chậm chạp?

BEACON mở rộng tiêu chuẩn RUM Archive với các phần phụ của LCP và INP, giúp tách biệt các giai đoạn tải và phản hồi tương tác. Chúng tôi cũng sẽ thêm các chỉ số này vào bảng điều khiển Real User Monitoring (RUM) trong những tuần tới. Việc tổng hợp chúng vào các ngưỡng gợi ý 'Tốt', 'Cần cải thiện' và 'Kém' giúp thu hẹp phạm vi cần tối ưu hóa:

Truy vấn cho bảng trên và các bảng khác cho mọi dữ liệu được lưu trữ trong BigQuery cùng với tập dữ liệu dưới tên ‘Global LCP Sub-parts’ để bạn có thể tùy chỉnh theo ý muốn.

Kết quả thách thức một giả định phổ biến: việc tải xuống chính tài nguyên đó, chẳng hạn như hình ảnh, phông chữ hoặc video, thường đóng góp ít nhất vào thời gian tải cảm nhận. Đối với hầu hết các lượt xem trang vượt ngưỡng 'Tốt', cơ hội lớn hơn nằm ở việc khám phá ứng viên LCP (thời gian tải) và bỏ chặn quá trình hiển thị của nó. Khách hàng của Cloudflare có thể giải quyết một số độ trễ trong việc khám phá tài nguyên với Smart Hints.

Quy trình tương tự phân tích Interaction to Next Paint (INP), thước đo khả năng phản hồi của chúng tôi, thành độ trễ đầu vào, thời gian xử lý và độ trễ hiển thị:

Truy vấn cho bảng trên được lưu trữ dưới tên ‘Global INP Sub-parts’ trong BigQuery

Đối với các tương tác chậm nhất, thời gian thực thi JavaScript chiếm khoảng thời gian dài nhất nhưng chúng tôi cũng thấy sự gia tăng đáng kể về thời gian hiển thị, vốn thường bị chi phối bởi các tính toán lại bố cục CSS phức tạp. Khách hàng của Cloudflare có thể sử dụng các công cụ như Zaraz để giảm tác động hiệu năng của JavaScript từ bên thứ ba.

Kiến trúc ứng dụng thay đổi bức tranh như thế nào

Nói về JavaScript, gần đây chúng tôi đã thêm hỗ trợ cho Soft Navigations API mới của Google Chrome, cung cấp báo cáo LCP chính xác cho các điều hướng phía client thường được sử dụng trong các ứng dụng trang đơn (single-page applications) được xây dựng với các framework như React, Vue, Angular và Svelte.

Truy vấn cho bảng trên được lưu dưới tên ‘Blink - Hard vs Soft Navigations’ trong BigQuery

Soft navigations hiển thị nhanh hơn từ hai đến ba lần so với hard navigations ở mọi phân vị. Tuy nhiên, chúng không loại bỏ được chi phí của trang đích ban đầu, vốn thường nặng hơn đáng kể:

Truy vấn cho bảng trên được lưu dưới tên ‘Blink - Landing Pages’ trong BigQuery

Đối với các đội ngũ lựa chọn kiến trúc này, điều quan trọng là phải lưu tâm đến các sự đánh đổi: các điều hướng tiếp theo nhanh hơn phải bù đắp được trải nghiệm đầu tiên chậm hơn. Nếu người dùng hiếm khi truy cập xa hơn trang đích, thì việc tải trang ban đầu nặng hơn có thể sẽ không bao giờ mang lại hiệu quả.

Các nhà nghiên cứu có thể khám phá được gì bằng cách kết hợp dữ liệu?

Vì BEACON là một tập dữ liệu mở, giá trị của nó không bị giới hạn trong các trường dữ liệu mà nó chứa. Các nhà nghiên cứu có thể kết hợp nó với các nguồn khác để khám phá những câu hỏi mới. Ví dụ, việc kết hợp BEACON với thước đo GDP bình quân đầu người của Nhóm Ngân hàng Thế giới cho thấy điều kiện kinh tế tương quan như thế nào với hiệu suất web theo từng quốc gia:

Cloudflare Radar, nền tảng trực quan hóa và thông tin dữ liệu công khai của chúng tôi, sẽ bắt đầu sử dụng phương pháp này trong phần Hiệu suất Web mới trên Radar, với các tương quan giữa dữ liệu Chỉ số Chất lượng Internet (IQI) của họ và dữ liệu BEACON. IQI là sự tổng hợp của các dữ liệu đo lường hiệu suất làm nền tảng cho các bản cập nhật hiệu suất mạng định kỳ hai năm một lần của chúng tôi.

Việc kết hợp BEACON và IQI đặc biệt hấp dẫn vì nó chia trải nghiệm người dùng thành hai thành phần có ảnh hưởng nhất: hiệu suất của trang web mà người dùng đang truy cập và hiệu suất của mạng lưới người dùng (eyeball network) đưa họ đến đó. Cả hai đều ảnh hưởng đến tốc độ tải trang và cùng nhau, chúng quyết định liệu việc truy cập một trang web mang lại cảm giác khó chịu hay mượt mà.

Bài gốc còn tiếp — xem tiếp tại bài gốc ↗