Sử dụng Benchmark HUD trên Google Chrome để đo hiệu suất của Website

Google Core Web Vitals là một tập hợp các chỉ số hiệu suất trang web. Dựa vào các chỉ số này để đánh giá tầm quan trọng của website. Bài viết này, Môi Trường Số hướng dẫn sử dụng Benchmark HUD để đo hiệu suất của Website.

Google Core Web Vitals là gì?

Google Core Web Vitals là một tập hợp các chỉ số hiệu suất trang web. Những điểm số quan trọng trên web này sẽ là một phần trong điểm số trải nghiệm trang tổng thể của Google sẽ ảnh hưởng đến thứ hạng SEO.

Để làm được điều đó, Google sử dụng ba bài kiểm tra chất lượng (Web Vitals).

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Sử dụng Benchmark HUD đo hiệu suất trên Chrome

Ví dụ chúng ta có kết quả đo lường một website như hình sau:

Ý nghĩa các chỉ số của benchmark HUD

– Largest Contentful Paint (LCP): Xác định lượng thời gian tối thiểu để hình ảnh có kích thước lớn và khối văn bản lớn được hiển thị. Theo như Google, các trang web được khuyến khích nên dùng LCP trong 2,5 giây để đạt được chất lượng tốt hơn.Với mức độ trung bình, LCP sẽ giao động từ 2,5 giây đến 4 giây. Nếu thời gian vượt mức cho phép thì UX sẽ thấp.

– First Input Delay (FID): Biểu thị thời gian phản hồi của trang Web tình từ thời điểm nhận tương tác tới lúc bắt đầu xử lý, không bao gồm giai đoạn xử lý tổng thể. Giá trị lý tưởng của FID sẽ là dưới 100 mili giây, trên 300 mili giây sẽ hoạt động kém.

– Cumulative Layout Shift (CLS): Bất kỳ sự thay đổi không báo trước nào của nội dung web sẽ được biểu thị tại đây. Nói một cách đơn giản, CLS cho người dùng biết liệu web có đang hoạt động ổn định hay không.

– Average Dropped Frame (ADF): Đo phần trăm giảm của khung hình khi có tương tác từ người dùng. Chỉ số càng thấp thì hiệu suất sẽ càng cao.

Hướng dẫn bật Benchmark HUD trên Google Chrome

Benchmark HUD là tính năng mới của Google Chrome. Để sử dụng tính năng này, có thể áp dụng trên nền tảng Chrome của MacOs, Windows, Linux, Chrome OS và cả Android.

Bước 1: Mở tính năng Show performance metrics in HUD

Nhập chrome://flags lên thanh địa chỉ của Google Chrome > Nhập Show performance metrics in HUD vào ô tìm kiếm.

Bước 2: Kích hoạt Benchmark HUD để thực hiện đo hiệu suất

Tại dòng chữ Show performance metrics in HUD nhấn dấu mũi bên phải > Chọn Enabled.

Sau khi kích hoạt tính năng này, mỗi lần mở một website sẽ xuất hiện bảng thông tin đo lường như hình dưới đây:

Cách tắt tính năng Benchmark HUD

Để tắt tính năng Benchmark HUD (tắt hiển thị thông tin đo lường hiệu suất). Các bạn chỉ việc làm như các bước trên, và tiến hành Disable là được.

Đến đây, chúng tôi đã hướng dẫn các bạn sử dụng tính năng Benchmark HUD để đo lường Web Vitals của Website. Hi vọng qua đó giúp bạn có những điều chỉnh để cải thiện hiệu suất cho trang web của mình.