Core Web Vitals là gì? Làm thế nào để tối ưu chúng [NEW]

Nếu bạn đang vào Google Search Console và thấy phía bên trái xuất hiện Core Web Vitals

Tiếp theo là một loạt các biểu đồ cảnh báo trên Mobile và Desktop.

Bạn có đột nhiên ngạc nhiên rằng Core Web Vital có bất kỳ tác động nào đến trang web không?

Thì trong bài viết này Hawk sẽ giải thích Core Web Vitals là gì và cách khắc phục lỗi này.

Core Web Vitals là gì?

Core Web Vitals là một tập hợp các yếu tố cụ thể do Google đưa ra để đánh giá trải nghiệm người dùng tổng thể trên một trang web.

Có ba phép tính đo tốc độ mà người dùng tương tác với một trang: sơn có nội dung lớn nhất, độ trễ đầu vào đầu tiên và sự thay đổi bố cục tích lũy.

Nói ngắn gọn Core Web Vitals là một tập hợp con của các yếu tố được bao gồm trong điểm Trải nghiệm Trang Google. Đây sẽ là cách để GG xác định trải nghiệm của người dùng trên trang web.

CORE-WEB-VITAL

Bạn có thể tìm thông tin về Core Web Vital trên Google Search Console dưới Trải qua.

Ngay bên phải bạn sẽ thấy bảng thống kê phần trăm URL mà bạn đạt điểm cao.

trải nghiệm trang

Ngoài ra bên dưới là số lượng URL chưa đáp ứng và các tiêu chí khác.

trang-trải nghiệm-tín hiệu

Tại sao Core Web Vital lại quan trọng?

Google đã lên kế hoạch biến trải nghiệm trang trở thành yếu tố xếp hạng chính thức kể từ năm ngoái.

giới thiệu-cốt lõi-web-quan trọng

Đến nay, điều đó đã trở thành sự thật và có thể thấy ngay trên GG Search Console.

Trải nghiệm trang hoặc trải nghiệm trang sẽ là một tập hợp các yếu tố mà Google đánh giá là quan trọng đối với trải nghiệm người dùng, bao gồm:

  • HTTPS – Yêu cầu SSL
  • Thân thiện với thiết bị di động – thân thiện với các thiết bị di động.
  • Thiếu cửa sổ bật lên xen kẽ – ít cửa sổ bật lên hơn.
  • “Duyệt web an toàn” – không có mã độc hại trên trang web.

Dựa trên các yếu tố trên, có thể thấy Core Web Vitals rất quan trọng trong Trải nghiệm trang.

Nhưng điều đó không có nghĩa là bạn sẽ nằm trên Top 1 GG với 100% trải nghiệm trang tốt.

Google nói rằng đó là một trong (khoảng 200) yếu tố để họ xếp hạng các trang web trên các công cụ tìm kiếm.

giới thiệu-core-web-important1

GG cũng thông báo rằng vào năm 2021 bản cập nhật này sẽ chính thức được áp dụng.

Nếu bạn vẫn không biết nó là gì hoặc không quan tâm, bây giờ là lúc để thay đổi nó ngay lập tức.

Trong bài viết này, tôi sẽ phân tích 3 yếu tố Core Web Vitals và cách tối ưu hóa chúng.

Sơn có nội dung lớn nhất (LCP)

LCP là thời gian cần thiết để tải một trang từ quan điểm của người dùng thực tế.

Nói cách khác: đó là khoảng thời gian từ khi người dùng nhấp vào một liên kết để xem hầu hết nội dung trên màn hình.

LCP hoàn toàn khác với các phép đo tốc độ trang khác, nhiều phép đo tốc độ trang khác (như TTFB và First Contextual Paint) không thực sự đại diện cho cách người dùng mở một trang web.

Mặt khác, LCP tập trung vào những gì thực sự quan trọng khi nói đến tốc độ trang: (khả năng xem và tương tác của người dùng với trang).

Bạn có thể kiểm tra điểm LCP của mình bằng Google PageSpeed ​​Insights.

Google-PageSpeed-Insight

Phần màu xanh có nghĩa là vượt qua, màu vàng và đỏ là những điểm cần cải thiện.

Điều thú vị khi sử dụng Google Pagespeed Insights là bạn có thể xem trang của mình hoạt động như thế nào trong thế giới thực (dựa trên dữ liệu từ Chrome).

Bạn có thể tìm thấy thông tin chi tiết về những trang nào cần cải thiện trên Google Search Console.

core-web-vitals-mobile-details

Cũng giống như Google PageSpeed ​​Insights, dữ liệu trong Search Console đến từ Báo cáo trải nghiệm người dùng Chrome.

Nhưng không giống như PageSpeed ​​Insights, bạn có thể xem dữ liệu LCP trên toàn bộ trang web của mình.

Vì vậy, thay vì phân tích từng trang một cách ngẫu nhiên, bạn sẽ có được danh sách các URL tốt, xấu… hoặc cần cải thiện.

Về tiêu chí này, Google có các hướng dẫn cụ thể về LCP. Họ chia tốc độ LCP thành ba nhóm: Tốt, Cần cải thiện và Kém.

  • màu xanh lá 2 giây đi xuống
  • Màu vàng4 giây đi xuống
  • Màu đỏ6 giây

Tóm lại, nếu bạn muốn toàn màu xanh, mọi trang trên trang web của bạn phải có LCP dưới 2,5.

Đây có thể là một thách thức thực sự đối với các trang web lớn hoặc các trang web có nhiều tính năng.

Ví dụ, Hawk có rất nhiều hình ảnh và đồ họa thông tin, vì vậy không dễ để đạt được dưới 2,5.

LCP-sự cố

Tuy nhiên, chúng tôi vẫn có thể cải thiện LCP theo một số cách dưới đây:

  • Xóa các tập lệnh bên thứ ba không cần thiết: Các script của bên thứ 3 là thứ làm chậm website khá nhiều, vì vậy tốt nhất bạn nên xóa những script không thực sự cần thiết.

gỡ bỏ javascript

  • Bật tải chậm: Tải chậm sẽ giúp hình ảnh chỉ tải khi cuộn, có nghĩa là LCP sẽ nhanh hơn đáng kể.
  • Loại bỏ các phần tử lớn trên trang: Google PageSpeed ​​Insights sẽ cảnh báo bạn yếu tố nào đang làm chậm trang web của bạn.

LCP-GG-pagespeed-insight

  • Loại bỏ CSS không cần thiết: Quá nhiều hiệu ứng có thể ảnh hưởng đến tốc độ -> Hướng dẫn gỡ bỏ CSS không sử dụng.
  • Nâng cấp gói lưu trữ: Cuối cùng, nếu bạn đã hoàn thành mọi thứ thì việc nâng cấp hosting là điều bạn nên cân nhắc.

Độ trễ đầu vào đầu tiên (FID)

Tiếp theo, đến phần tử thứ hai trên Core Web Vital Độ trễ đầu vào đầu tiên.

Chỉ số này đo thời gian thực tế mà người dùng dành cho trang của bạn.

Một số ví dụ về tương tác của người dùng:

  • Nhấp và chọn từ menu.
  • Nhấp vào một liên kết trong bất kỳ trang web nào.
  • Nhập email của bạn vào trường hoặc biểu mẫu đăng ký.
  • Mở văn bản “đàn accordion” trên thiết bị di động

Google coi FID là quan trọng vì nó tính đến cách người dùng thực tế tương tác với các trang web.

Và giống như FCP, họ có các tiêu chí cụ thể để đánh giá điều gì là tốt, có thể chấp nhận được và điều gì là xấu.

  • màu xanh lá 100ms đi xuống
  • Màu vàng300ms đi xuống
  • Màu đỏ500 giây

Nếu đó là sét về mặt kỹ thuật, FID sẽ đo thời gian một sự kiện xảy ra trên trang.

Vì vậy, theo nghĩa đó, đó là điểm tốc độ trang nhưng chính xác và thực tế hơn.

Đối với trang web có 100% nội dung là văn bản thuần túy như blog cá nhân, trang tin tức, báo điện tử.

Điểm FID này có lẽ không quan trọng lắm vì thao tác được sử dụng nhiều nhất chỉ là “cuộn” (scroll).

Ví dụ, trong Google Search Console của Hawk cũng không có báo cáo về bất kỳ FID nào.

core-web-vitals-mobile-details

Điều này cũng rất dễ hiểu vì Hawk chỉ là một trang blog và tin tức cơ bản, không có quá nhiều thứ để người dùng tương tác.

Nhưng vẫn có một số điều bạn có thể cải thiện FID như:

  • Giảm thiểu (hoặc trì hoãn) JavaScript: Người dùng gần như không thể tương tác với một trang trong khi trình duyệt đang tải JS. Vì vậy, giảm thiểu hoặc trì hoãn JS trên trang là chìa khóa cho FID.
  • Xóa javascript của bên thứ ba không quan trọng: Cũng như FCP, các tập lệnh của bên thứ ba (như Google Analytics, bản đồ nhiệt, v.v.) có thể tác động tiêu cực đến FID.
  • Sử dụng bộ nhớ cache của trình duyệt: Điều này giúp tải nội dung trên trang của bạn nhanh hơn.

Dịch chuyển bố cục tích lũy (CLS)

Tích lũy Layout Shift là mức độ ổn định của một trang khi tải (hay còn gọi là “độ ổn định của hình ảnh”).

Nói cách đơn giản hơn: nếu các yếu tố trên trang của bạn thay đổi liên tục trong khi trang đang tải -> sẽ dẫn đến CLS cao.

Ví dụ về các thay đổi bố cục tích lũy

Vì vậy, bạn nên hạn chế để bố cục trang thay đổi liên tục trong khi trang web đang tải.

Bằng cách đó, người dùng không phải tìm hiểu lại vị trí của các liên kết, hình ảnh và trường khi trang được tải đầy đủ. Hoặc bấm nhầm vào một cái gì đó.

Dưới đây là các tiêu chí cụ thể mà Google đưa ra cho CLS.

  • màu xanh lá 0,1 đi xuống
  • Màu vàng0,25 đi xuống
  • Màu đỏ0,3

Có một số bước bạn có thể thực hiện để giảm CLS.

  • Sử dụng kích thước thuộc tính kích thước cho các tệp phương tiện (video, hình ảnh, GIF, đồ họa thông tin, v.v.): Bằng cách đó, trình duyệt của người dùng biết chính xác phần tử sẽ chiếm bao nhiêu dung lượng trên trang đó. Và sẽ không thay đổi nó ngay lập tức khi trang tải hoàn toàn.
  • Đảm bảo các yếu tố quảng cáo có đủ không gian: Nếu không, chúng có thể đột ngột xuất hiện trên trang, đẩy nội dung xuống dưới, lên hoặc sang một bên.
  • Đặt các phần tử dưới màn hình đầu tiên: Nếu bạn có một yếu tố thay đổi liên tục hoặc giữ nó dưới màn hình đầu tiên, chúng sẽ không đẩy nội dung xuống mà người dùng “mong đợi” sẽ ở nguyên vị trí của nó.

Bản tóm tắt

Mỗi trang web sẽ có UX và UI khác nhau nên không có hướng dẫn cụ thể về Core Web Vitals cho bạn.

Hãy kiên nhẫn và áp dụng các bước trên một cách từ từ để tìm ra phương pháp phù hợp.

Bạn có thể tìm hiểu thêm về Basic of UX tại đây là tài liệu được cung cấp từ Google (rất tốt cho việc học và nghiên cứu).

Ngoài ra, bạn cũng có thể tham khảo thêm cách tăng tốc WordPress, để cải thiện trải nghiệm người dùng.

Nếu có ý kiến ​​đóng góp, các bạn vui lòng comment bên dưới để cùng thảo luận.