Ba Core Web Vitals Năm 2026

Google đo ba chỉ số thực địa chính cho trải nghiệm trang. Mỗi chỉ số có ngưỡng cho hiệu suất "Tốt":

• Largest Contentful Paint (LCP) — thời gian hiển thị phần tử hiển thị lớn nhất. Tốt: dưới 2,5 giây.
• Interaction to Next Paint (INP) — khả năng phản hồi với tất cả tương tác người dùng (thay thế FID vào tháng 3 năm 2024). Tốt: dưới 200ms.
• Cumulative Layout Shift (CLS) — ổn định hình ảnh trong khi tải. Tốt: dưới 0,1.

Banner đồng ý chặn kết xuất, chạy JavaScript nặng khi tải, hoặc chèn thay đổi bố cục muộn có thể đẩy bất kỳ chỉ số nào vào dải "Cần cải thiện" hoặc "Kém" — và Google sử dụng dữ liệu thực địa 28 ngày từ người dùng Chrome thực, vì vậy các vấn đề tạm thời trở thành tín hiệu xếp hạng dai dẳng.

Banner Đồng ý Gây Hại LCP như thế nào

Largest Contentful Paint thường kích hoạt trên hình ảnh hero hoặc tiêu đề. Một số mẫu đồng ý làm chậm nó một cách không cần thiết:

Tập Lệnh CMP Chặn Kết Xuất

Tải CMP đồng bộ từ phần đầu tài liệu sẽ dừng phân tích HTML cho đến khi tập lệnh được tải xuống và thực thi. Nếu CMP được lưu trữ trên CDN chậm hoặc có cache lạnh, bạn có thể thêm 200-800ms vào LCP trên toàn cầu.

Banner Che Phủ Phần Tử Hero

Nếu banner đồng ý được đặt như một lớp phủ modal che phủ phần tử LCP, trình duyệt vẫn sẽ đo LCP từ phần tử bị che. Tuy nhiên, nếu banner là phần tử được vẽ lớn nhất, nó trở thành ứng viên LCP — và nếu nó được kết xuất qua JavaScript sau khi tải trang, LCP sẽ cao một cách giả tạo.

Khắc Phục: Tải Không Đồng Bộ với Bootstrap Inline Nhỏ

Tải toàn bộ CMP không đồng bộ (`async` hoặc `defer`), chỉ với một tập lệnh inline nhỏ cho màn hình hiển thị banner ban đầu. Nhắm mục tiêu bootstrap nhỏ hơn 5KB đã nén. Logic hành vi đầy đủ, danh sách nhà cung cấp và UI chrome có thể tải chậm sau lần vẽ đầu tiên.

Banner Đồng ý Gây Hại INP như thế nào

Interaction to Next Paint đo thời gian phản hồi tệ nhất trên tất cả các lần nhấp, chạm và nhấn phím trong một phiên. Tương tác đồng ý cookie thường là tương tác đầu tiên người dùng thực hiện — vì vậy nút Chấp nhận chậm sẽ làm hỏng điểm số.

Công Việc Nặng Khi Chấp Nhận

Nhiều CMP thực hiện công việc đồng bộ khi Chấp nhận: tải 40+ tập lệnh nhà cung cấp, ghi vào localStorage, kích hoạt sự kiện dataLayer, kích hoạt cập nhật Google Consent Mode. Nếu điều này vượt quá 200ms, INP sẽ bị ảnh hưởng.

Khắc Phục: Xếp Hàng Công Việc Sau Khi Vẽ

Khi nhấp Chấp nhận, ẩn banner ngay lập tức và lên lịch công việc nặng với `requestIdleCallback` hoặc `setTimeout(0)`. Người dùng thấy banner biến mất ngay lập tức; các tập lệnh nhà cung cấp tải ở nền mà không chặn tương tác.

Banner Đồng ý Gây Hại CLS như thế nào

Cumulative Layout Shift theo dõi chuyển động hình ảnh không mong đợi. Banner là nguồn CLS cổ điển khi chúng được chèn vào DOM sau khi nội dung đã được vẽ.

Chèn Banner Muộn

Nếu banner xuất hiện 800ms sau LCP, nó sẽ đẩy nội dung xuống và tạo ra sự dịch chuyển bố cục. Ngay cả một banner nhỏ cũng có thể kích hoạt điểm CLS 0,1+ nếu nó ảnh hưởng đến một phần lớn của khung nhìn.

Kết Xuất Lại Widget Tùy Chọn Cookie

Các widget tùy chọn ở chân trang tải logo nhà cung cấp không đồng bộ có thể làm chảy lại toàn bộ chân trang nhiều lần, làm trầm trọng thêm CLS.

Khắc Phục: Dành Chỗ Trước

Sử dụng CSS để dành chỗ cho banner từ lần vẽ đầu tiên — placeholder chiều cao cố định, `min-height` ở chân trang, hoặc banner cố định phía dưới không đẩy nội dung. CMP hiện đại nên cung cấp cấu hình không CLS ngay từ hộp.

Google Consent Mode V2 và Hiệu Suất

Consent Mode V2 cho phép các thẻ Google chạy ở trạng thái không cookie trước khi đồng ý, truyền tín hiệu qua `gtag('consent', 'default', {...})`. Điều này tuyệt vời cho tính liên tục đo lường, nhưng thư viện gtag.js bản thân có kích thước 50-90KB. Tải nó không đồng bộ và đặt giá trị mặc định sớm nhất có thể để tránh điều kiện đua.

• Đặt giá trị mặc định trước khi gtag tải — đặt lệnh gọi mặc định đồng ý trong head, trước tập lệnh gtag.js.
• Sử dụng `analytics_storage: 'denied'` làm mặc định — giảm thiểu dữ liệu thu thập trước đồng ý.
• Cập nhật khi Chấp nhận qua requestIdleCallback — tránh chặn luồng chính.

Đo Lường Tác Động CMP lên Core Web Vitals

Đừng đoán — hãy đo. Sử dụng các công cụ này để định lượng tác động của banner của bạn:

• PageSpeed Insights — dữ liệu thực địa từ Chrome UX Report cộng với kiểm tra Lighthouse phòng thí nghiệm. So sánh điểm có và không có tập lệnh CMP.
• Web Vitals Chrome extension — lớp phủ LCP, INP, CLS theo thời gian thực trong quá trình thử nghiệm cục bộ.
• WebPageTest.org — chế độ xem dải phim và thác nước cho thấy chính xác khi nào banner kết xuất và nó chặn gì.
• Search Console Core Web Vitals report — dữ liệu thực địa 28 ngày được nhóm theo mẫu URL. Kiểm tra xem các trang đích có banner của bạn có điểm khác so với các trang không có không.

FlexyConsent Duy Trì Tốc Độ như thế nào