DigitalStar

Demo

Core Web Vitals

Core Web Vitals là gì?

Core Web Vitals là một tập hợp các chỉ số được chuẩn hóa từ Google giúp các nhà phát triển hiểu cách người dùng trải nghiệm một trang web. Mặc dù Core Web Vitals được tạo ra cho các nhà phát triển, những công cụ này có thể được sử dụng bởi tất cả các chủ sở hữu trang web vì chúng phá vỡ trải nghiệm thế giới thực của người dùng trên một trang.

Core Web Vitals xác định các vấn đề về trải nghiệm người dùng bằng cách tạo số liệu cho ba lĩnh vực chính của trải nghiệm người dùng, bao gồm:

  • Hiệu suất tải trang

  • Dễ tương tác

  • Tính ổn định trực quan của một trang từ góc nhìn của người dùng

Mỗi chỉ số này cung cấp quan điểm riêng của họ về các yếu tố khác nhau ảnh hưởng đến cách người dùng tương tác và tương tác với trang web. Trong khi các nhà phát triển cần suy nghĩ về “trải nghiệm người dùng” từ góc độ tổng thể, các chỉ số độc lập này giúp chia nhỏ các biến khác nhau thành các phần nhỏ hơn để chủ sở hữu trang web có thể xác định và khắc phục các vấn đề kỹ thuật trên trang web của họ.

Điều quan trọng cần nhớ là các chỉ số này không kể toàn bộ câu chuyện về trải nghiệm người dùng trên một trang web, nhưng mỗi chỉ số có thể được ghép lại với nhau để giúp các nhà phát triển khắc phục sự cố một cách hiệu quả và có phương pháp.

LCP

LCP đo thời gian tải các khối nội dung khác nhau trong chế độ xem của người dùng (màn hình hiện tại). Chỉ số này chỉ cho bạn biết các phần nội dung hiển thị nhanh như thế nào trên màn hình hiển thị và không có nội dung nào dưới màn hình đầu tiên được xem xét.

  • Hình ảnh

  • Hình ảnh áp phích video

  • Hinh nên

  • Văn bản cấp khối

CLS

Các phần tử thay đổi vị trí có thể khiến người dùng trở nên nhầm lẫn và cản trở trải nghiệm của họ trên một trang, vì vậy, điều quan trọng là đảm bảo tất cả nội dung ở đúng vị trí sau khi tải trang trên thiết bị của người dùng. CLS xem xét các chỉ số cốt lõi để xác định tính ổn định trực quan của trang từ góc độ người dùng bằng cách xem xét một số yếu tố:

  • Thay đổi bố cục

  • Phần tác động

  • Phần khoảng cách

FID

FID đo lường mức độ phản hồi của trang khi tải đầu vào phần tử từ người dùng. Điều này có nghĩa là FID chỉ ghi lại các sự kiện như nhấp chuột và nhấn phím.

Chủ sở hữu trang web nên hướng tới việc cung cấp trải nghiệm người dùng tốt với FID dưới 100 mili giây.

Cần lưu ý rằng FID rất khó đo lường vì dữ liệu này chỉ có thể được đo lường tại hiện trường. Điều này có nghĩa là điểm số của bạn sẽ phụ thuộc vào các biến ngoài tầm kiểm soát của bạn, như khả năng thiết bị của người dùng và tốc độ Internet mà đối tượng của bạn trải nghiệm.

Tổng kết

1. Hiển thị đầu tiên

First Contentful Paint (FCP) đo thời gian trình duyệt của người dùng hiển thị các phần tử DOM (hình ảnh, phần tử <canvas> không phải màu trắng và SVG). Chỉ số này xác định các tài nguyên chặn hiển thị và được đo bằng giây, với một loạt điểm FCP:

  • 0–2 giây: Xanh lục (nhanh)

  • 2–4 giây: Màu cam (vừa phải)

  • 4+ giây: Đỏ (chậm)

2. Chỉ số tốc độ

Các trang web nhanh nhẹn cung cấp trải nghiệm trực tuyến nâng cao và Chỉ số tốc độ (SI) cho bạn biết thời gian trung bình mà nội dung trên trang web của bạn cần để hiển thị cho người dùng. Chỉ số này sẽ xác định JavaScript thừa trên một trang và được đo bằng mili giây, với một loạt điểm SI:

  • 0–4,3 giây: Xanh lục (nhanh)

  • 4,4–5,8 giây: Màu cam (vừa phải)

  • 5,8 giây trở lên: Đỏ (chậm)

3. Thời gian tương tác

Thời gian tương tác (TTI) là khoảng thời gian cần thiết để nội dung trên một trang hoạt động để có thể tương tác hoàn toàn. TTI giúp bạn xác định các trang có JavaScript không cần thiết và được đo bằng giây, với một loạt điểm TTI:

  • 0–3,8 giây: Xanh lục (nhanh)

  • 3,9–7,3 giây: Màu cam (vừa phải)

  • 7,3+ giây: Đỏ (chậm)

4. Tổng thời gian chặn

Tổng thời gian chặn (TBT) giúp chủ sở hữu trang web đánh giá thời gian một trang web phản hồi với đầu vào của người dùng cụ thể. Số liệu này sẽ xác định các trang có JavaScript không cần thiết và được đo bằng mili giây với một loạt điểm TBT:

  • 0–300 ms: Xanh lục (nhanh)

  • 300–600 ms: Màu cam (vừa phải)

  • 600+ ms: Đỏ (chậm)

5. Điểm Hiệu suất Trang

Điểm hiệu suất trang là một số liệu duy nhất xem xét tất cả các chỉ số trải nghiệm người dùng quan trọng trong Core Web Vitals. Điểm số này sử dụng hệ thống tính điểm tổng hợp trên tất cả các lượt truy cập trên thiết bị di động và máy tính để bàn. Phải lấy trung bình có trọng số để cung cấp một điểm duy nhất để hiểu các trang cần kiểm tra kỹ hơn một cách nhanh chóng.

Mặc dù các chỉ số này được đơn giản hóa trong chỉ số Điểm hiệu suất trang, nhưng các nhà phát triển có thể tham khảo điểm trong từng danh mục dựa trên điểm cụ thể là 90 (tốt), 50–90 (cần cải thiện) và dưới 50 (kém).

Các câu hỏi thường gặp

1. Cách cải thiện Core Web Vitals cho SEO

Để cải thiện Core Web Vitals cho SEO, tối ưu hóa tốc độ tải trang, cải thiện trải nghiệm người dùng và tối giản hóa các phần tử gây chậm trang web.

2. Cách cải thiện Largest Contentful Paint trong Core Web Vitals

Để cải thiện Largest Contentful Paint, tối ưu hóa hình ảnh và video, tối thiểu hóa tải tài nguyên và sử dụng kỹ thuật caching.

3. Cách giảm Cumulative Layout Shift trong Core Web Vitals

Để giảm Cumulative Layout Shift, đảm bảo các phần tử trên trang web có kích thước cố định, tránh thay đổi bất ngờ và sử dụng thuộc tính CSS để giữ các phần tử ở vị trí chính xác.

4. Cách tối ưu hóa First Input Delay trong Core Web Vitals

Để tối ưu hóa First Input Delay, tối ưu hóa mã JavaScript, trì hoãn tác vụ không cần thiết và sử dụng phương pháp tải nền và xử lý bất đồng bộ.

5. Công cụ kiểm tra Core Web Vitals

Công cụ kiểm tra Core Web Vitals phổ biến bao gồm Google PageSpeed Insights, Google Search Console và Web.dev.