Ngọc Thanh - 114
- 11/12/2024
Ngọc Thanh 
Core Web Vitals là gì? Đó là một tập hợp các chỉ số bao gồm: CLS, LCP, FID,... của Google nhằm giúp website có được trải nghiệm người dùng được tốt hơn, chi tiết như nào hãy cùng chúng tôi phân tích:
Core Web Vitals là gì? Các chỉ số của Core Web Vitals
Mục Lục [Ẩn]
Core Web Vitals là gì?
Core Web Vitals là một tập hợp các chỉ số bao gồm: CLS, LCP, FID,... của Google đưa ra nhằm giúp website có được trải nghiệm người dùng được tốt hơn, các chỉ số này rất quan trọng, thậm chí còn ngang bằng với chất lượng của nội dung bài viết, cần phải cải thiện các chỉ số này cho website để cải thiện vị trí website trên top Google.
Các chỉ số của Core Web Vitals
Chỉ số Largest Contentful Paint (LCP)
LCP chính là thời gian kể từ khi click vào liên kết cho tới khi nội dung được hiển thị hết cho người dùng xem. Thời gian load dưới 2.5s là trải nghiệm người dùng tốt (ở mức màu xanh), thời gian từ 2.4 đến 4s được cho là trải nghiệm cần cải thiện (ở mức màu vàng), trên 4s là trải nghiệm kém (ở mức màu đỏ), bạn nên cải thiện về mức màu xanh để có được trải nghiệm tốt cho người dùng.
Cách cải thiện chỉ số LCP:
Xóa các Script bên thứ 3: Các script được nhúng từ bên thứ 3 sẽ load rất chậm, khiến quá trình load trang chậm đáng kể, nên phải bỏ đi các script được nhúng từ bên thứ 3.
Dùng load lazy cho hình ảnh: Dùng load lazy cho tất cả hình ảnh có trên website để khi vào trang web chỉ có 1 số ít hình ảnh được load giúp tải trang nhanh hơn, khi cuộn chuột xuống thì hình ảnh ở dưới sẽ load từ từ cho người dùng xem.
Giảm thiểu code CSS, Javascript: Các đoạn code css, javascript nào không cần dùng đến thì bỏ đi hoặc trang nào dùng css, javascript nào thì nên phân chia rõ ràng để tránh load những thành phần không dùng đến.
Nén Css, Javascript: Các css, javascript không nên nhúng vào thẻ link hoặc thẻ script có thuộc tính src mà nên nén rồi bỏ trực tiếp và web, css thì nén xong bỏ vô thẻ <style>.... </style>, javascript thì nhúng trực tiếp và thẻ <script>..... </script>
Kiểm tra bằng Google Speed Insights: Xem Google Speed Insights thông báo những thành phần nào làm chậm trang web và bạn hãy cải thiện hoặc loại bỏ những thành phần đó.
Chỉ số Cumulate Layout Shift (CLS)
Đây là chỉ số đánh giá độ ổn định của bố cục web trong quá trình load trang, nếu trong quá trình load trang mà các phần tử hiển thị quá chậm thì ảnh hưởng tới người dùng khi nhìn giao diện và khi click vào các liên kết hoặc các nút, dễ nhấn nhầm liên kết hoặc các nút.
Chỉ số CLS dưới 0,1s là tốt (ở mức màu xanh), chỉ số CLS từ mức 0,1s đến 0,25s thì ở mức cần cải thiện (ở mức màu vàng), trên 0,25s là ở mức kém (ở mức màu đỏ), cần cải thiện tất cả về mức dưới 0,1s.
Cách cải thiện chỉ số CLS:
Dùng dns-prefetch: Dùng thẻ link dns-prefetch để giảm độ trể khi nhúng các thành phần từ bên thứ 3, ví dụ đoạn code dùng để xử lý trường hợp nhúng font chữ từ bên thứ 3 dưới đây:
<link rel="dns-prefetch" href="/fonts.googleapis.com" />
Dùng kích thước cho video, hình ảnh: Bạn hãy cấu hình kích thước, chiều rộng, chiều cao cho video, hình ảnh, GIF, đồ họa thông tin,...
Đảm bảo có khoảng trống cho các quảng cáo: Nếu không có khoảng trống cho các quảng cáo thì khi xuất hiện nó sẽ đẩy các phần tử xuống phía dưới, làm hỏng bố cục web.
Để phần tử hay thay đổi xuống dưới màn hình đầu tiên: Màn hình đầu tiên khi xuất hiện cho khách hàng xem không nên để các phần tử hay làm thay đổi bố cục.
Chỉ số First Input Delay (FID)
Đây là chỉ số nói đến thời gian phản hồi của trang web cho người dùng khi họ thực hiện một hành động đầu tiên khi vào trang web, hành động đó có thể là click vào menu, điền email trong form đăng ký, đặt hàng, tìm kiếm, cuộn trang,… Phần này lúc trước thấy trên google speed có hiện nhưng hiện giờ không thấy.
Chỉ số dưới 100ms thì tốt (ở mức màu xanh), chỉ số từ 100ms đến 300ms là cần cải thiện (ở mức màu vàng), chỉ số trên 300ms là kém (ở mức màu đỏ), cần cải thiện tất cả về mức dưới 100ms.
Cách cải thiện chỉ số FID:
Sử dụng bộ nhớ cache: Bạn hãy tại cache cho javascript, css, hình ảnh, html,... để cho quá trình load trang được nhanh hơn.
Chia JavaScript: Các JavaScript xử lý sự kiện ở trang nào thì nên để JavaScript ở trang đó, không nên để ở các trang khác.
Xóa JavaScript bên thứ 3: JavaScript bên thứ 3 nên xóa đi nếu không cần thiết.
Các công cụ kiểm tra các chỉ số của Core Web Vitals
PageSpeed Insights: Bạn vào trang chính của PageSpeed Insights rồi nhập URL trang web cần kiểm tra.
Google Search Console: Nếu các chỉ số của Core Web Vitals không tốt thì trong Google Search Console sẽ thống báo cho bạn ở trong mục Chỉ số quan trọng chính của trang web.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Core Web Vitals là gì?
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
