Core Web Vitals

Core Web Vitals là gì?

Core Web Vitals là các chỉ số do Google tạo ra để cải thiện trải nghiệm người dùng trên website. Sự đa dạng lớn của các công cụ có sẵn để phân tích tốc độ tải là một trong những yếu tố Google xem xét trong việc thống nhất tất cả các chỉ số này, để đơn giản hóa phần nào sự phức tạp liên quan đến tối ưu thời gian tải. Sáng kiến này nhằm làm cho ta tập trung vào các "tín hiệu chất lượng" rất quan trọng để đạt trải nghiệm người dùng tối ưu.

Google tóm tắt trong vài từ điều mà Core Web Vitals tập trung vào:

• ›

  Trải nghiệm tải

• ›

  Tính tương tác

• ›

  Sự ổn định trực quan của nội dung trang

Largest Contentful Paint hay LCP

LCP hay Largest Contentful Paint là chỉ số cho ta biết thời gian tải để phần nội dung "lớn nhất" hiển thị với người dùng có thể được dùng và hữu ích. Nói cách khác, Google đang nói rằng các yếu tố đặt trong cái ta biết là "Above the Fold" phải tải nhanh và đọc được, và do đó có sẵn cho người dùng để họ có thể tương tác với chúng.

Cần làm rõ rằng các yếu tố xuất hiện khi người dùng nhấp lên màn hình hoặc cuộn không ảnh hưởng đến LCP. Nội dung lớn nhất có thể là một khối văn bản, video, hình ảnh, v.v.

Phân loại trạng thái LCP theo thời gian. Hình © web.dev

Google coi thời gian nào là tối ưu?

Như ta thấy trong biểu đồ, Google coi thời gian tối đa để tải LCP và mang lại trải nghiệm người dùng tốt là dưới 2,5 giây. Quan trọng cần lưu ý là trong khi tải, yếu tố LCP có thể thay đổi.

Làm sao tôi biết LCP của một URL?

Trong chính trình duyệt Chrome, qua việc chạy kiểm tra Lighthouse, ta có tùy chọn tìm ra cái Google coi là nội dung lớn nhất để tải. Đây là cách:

Yếu tố nào có thể ảnh hưởng đến việc tải LCP?

Một số hành động ảnh hưởng đến thời gian tải LCP cao hơn dự kiến. Các yếu tố hoặc hành động này là:

• ›

  Phản hồi từ server

• ›

  Truy vấn cơ sở dữ liệu

• ›

  Phản hồi API mất thời gian giải quyết

• ›

  CSS hoặc JS chặn render

• ›

  Sự chậm trễ trong tải các tài nguyên khác

• ›

  Hình ảnh không được tối ưu

• ›

  V.v.

First Input Delay hay FID

FID hay First Input Delay là chỉ số cho biết trang mất bao lâu để phản ứng khi người dùng tương tác với bất kỳ yếu tố nào.

Chỉ số lấy từ Pagespeed

Trong công cụ Pagespeed, mà Google đã cung cấp cho mọi người một thời gian, ta có thể thấy tham chiếu đến chỉ số này. Giá trị được coi là tốt phải dưới 100 ms.

Phân loại trạng thái First Input Delay (FID) theo thời gian. Hình © web.dev

Các nguyên nhân chính của vấn đề với chỉ số này (FID) đến từ việc thực thi JavaScript, vậy nên ta cần xác định phần nào của mã đang khiến trang mất thời gian phản ứng với tương tác. Cá nhân tôi đã trải qua vấn đề này với việc tải JS quảng cáo.

Cumulative Layout Shift hay CLS

Cumulative Layout Shift là chỉ số đặt giới hạn cho việc tải các yếu tố thay đổi hiển thị khi chúng tải. Ta đang nói về việc cung cấp sự ổn định cho các yếu tố trên màn hình để chế độ xem không thay đổi khi các tài nguyên khác tải.

Google coi (à, Google và mọi người dùng) rằng rất khó chịu khi, khi ta đã bắt đầu tương tác với một trang (dù đọc, cuộn, v.v.), một yếu tố tải sau làm thay đổi vị trí của người dùng so với nội dung, buộc họ phải sửa lỗi bằng cách cuộn.

Ví dụ này giúp ta giải thích rõ hơn cách chỉ số này hoạt động. Ban đầu ta thấy nội dung được tải bên trái. Khi Google nói về sự ổn định, nó đề cập đến việc tải yếu tố thứ ba không làm thay đổi những cái đã tải trước đó. Như ta thấy trong hình bên phải, việc tải video YouTube đã làm thay đổi hai khối được tải ban đầu.

Tại sao Core Web Vitals quan trọng?

Kể từ khi ta cùng tồn tại với các công cụ tìm kiếm, và cụ thể hơn với Google, nó đã đưa vào các nghĩa vụ cho bất kỳ ai có website và muốn nó là một trong các tùy chọn trong kết quả tìm kiếm.

Cải thiện khả năng truy cập từ tất cả các thiết bị, thuận lợi cho việc duyệt an toàn theo giao thức bảo mật, hay phạt các website dùng quảng cáo xâm phạm (interstitial), là một số trận chiến của gã khổng lồ công nghệ.

Các chỉ số này là chỉ báo Google đưa cho ta để chỉ ra phần nào của website có thể là vấn đề cho người dùng nhưng... Điều đó có nghĩa là chúng quan trọng?

Dù ta hiểu website từ góc nhìn "robot" hay từ góc nhìn "người dùng", các chỉ số này là chỉ báo rằng website của ta không hoạt động tốt như nên có. Ta đã thấy trong nhiều nghiên cứu thời gian tải có ảnh hưởng thế nào đến chuyển đổi và đến sự kiên nhẫn của người dùng. Hiện tại chúng không ảnh hưởng đến xếp hạng, nhưng ta sẽ bỏ qua các chỉ số này sao?

Về phần ta, ta chắc chắn sẽ tính đến chúng.

Core Web Vitals có ảnh hưởng đến xếp hạng không?

Tính đến hôm nay, tất cả ta biết là các chỉ số để cải thiện trải nghiệm người dùng đang ngày càng quan trọng hơn, và một số trong số đó đã được tính đến trong kết quả tìm kiếm. Trong bài viết ngày 28/5 trên blog Google, đã thông báo rằng vào 2021 nó dự kiến triển khai một bản Update mới để đưa vào nhiều chỉ số liên quan đến trải nghiệm người dùng.

Ta chỉ cần nhớ cách nó xử lý Mobile First Index và các thông báo trước. Trong trường hợp này, đề cập lại đến bài viết tháng Năm, nó cảnh báo sẽ có thông báo trước ít nhất 6 tháng, vậy nên... Sẽ có cập nhật vào cuối năm sau không?

Công cụ tối ưu Core Web Vitals

Giờ ta đã nói về Core Web Vitals là gì và tầm quan trọng chúng sẽ có trong các tháng tới, đã đến lúc bắt đầu làm việc về tối ưu các chỉ số này. Qua các công cụ khác nhau, ta sẽ có thể giải quyết các vấn đề được phát hiện và đạt cải tiến hiệu suất.

Lighthouse

Lighthouse là công cụ mã nguồn mở mạnh mẽ ta tìm thấy trong Chrome. Qua Lighthouse, ta có thể kiểm tra website, chạy các test khác nhau để có kết quả về thiếu sót hoặc các phần của trang cần được tối ưu. Trong số các phần này có chỉ số Core Web Vitals.

Hình lấy từ kết quả của một kiểm tra Lighthouse

Page Speed Insights

Page Speed Insights là tùy chọn khác Google cung cấp cho ta để có dữ liệu hiệu suất của website. Công cụ này thậm chí cho ta thấy biểu đồ các chỉ số quan trọng nhất và trạng thái của chúng. Page Speed Insights dựa trên báo cáo trải nghiệm người dùng có mục tiêu lấy dữ liệu so sánh với các website khác.

Chỉ số do Page Speed Insights cung cấp

Chrome UX

Chrome User Experience Report là tập hợp dữ liệu Google cung cấp về hành vi của người dùng trên toàn thế giới qua Chrome. Để truy cập dữ liệu này, bạn phải dùng Big Query, cũng như có tài khoản Google Cloud.

Qua Google Data Studio, họ đã làm việc truy cập dễ hơn và có mọi thứ sẵn sàng nửa chừng cho ta trong Dashboard này

Chrome Dev Tools

Ta có thể phân tích chỉ số Core Web Vitals không chỉ với Lighthouse; nếu ta đào vào công cụ nhà phát triển của Chrome, ta có thể đi đến cùng kết luận. Ví dụ, trong tab "Performance", nếu ta thực hiện ghi hoặc tải mới, ta có thể có thông tin giá trị về cách URL đang hoạt động.

Ảnh chụp màn hình lấy trong tùy chọn Performance của Chrome Dev Tools

Web.Dev

Luôn có cách dễ hơn để làm mọi thứ, ít nhất khi nói đến biết Core Web Vitals của ta. Trên website chính thức, ta có một trang chi tiết từng chỉ số và đưa cho ta giải thích về nó là gì và các thực hành để cải thiện nó.

Hơn nữa, trong Chrome Store ta có một extension cho ta thông tin này khi vào từng URL:

Với chỉ báo đỏ hoặc xanh ta có thể thấy trạng thái URL của ta về các chỉ số này:

Ảnh chụp màn hình các kết quả do extension Web Vitals đưa ra

Search Console

Search Console là công cụ không thể thiếu cho bất kỳ webmaster nào. Một tính năng đã được thêm giúp ta thấy URL nào có vấn đề với 3 chỉ số này (LCP, FID và CLS). Trong menu bên trái, ta có tùy chọn "Core Web Vitals". Khi ta chọn tùy chọn này, hai biểu đồ sẽ xuất hiện cho thấy kết quả của URL theo thiết bị. Nếu ta chọn thiết bị (desktop hoặc di động), ta sẽ thấy chi tiết URL nào có vấn đề.

Đừng hoảng nếu thấy số URL cao bên phải; điều này khá bình thường, vì các vấn đề thường xảy ra theo loại trang (ví dụ bài blog) và làm việc trên một trong số chúng sẽ cho ta cải tiến trên tất cả.

Kết luận

Chuyến đi qua Core Web Vitals này nhằm giới thiệu cho ta các chỉ số sẽ ngày càng nổi bật, và ta, dù là dân SEO hay Webmaster, sẽ sống chung với chúng. Từ SEO Alive, ta muốn khuyến nghị bạn tận dụng tất cả các công cụ ta đã cung cấp, sẽ chắc chắn giúp bạn cải thiện hiệu suất WPO của website.

*Bạn có chấp nhận thách thức cải thiện tốc độ site? Chạy test với bất kỳ công cụ nào ta đã đề cập và gửi cho ta tin nhắn với ảnh chụp màn hình. Ta sẽ cho bạn một mẹo để cải thiện hoàn toàn miễn phí! *