Core Web Vitals thực chiến: sửa LCP, CLS, INP trên site thật

Bạn đã thấy điểm Core Web Vitals đỏ trong Search Console nhưng không biết bắt đầu từ đâu. Bài viết này đo trước, sửa sau bằng số liệu thật: đọc báo cáo CrUX, xác định nguyên nhân từng chỉ số LCP, CLS, INP rồi áp dụng đúng sửa đổi cho ảnh, font và JavaScript.

Core Web Vitals là gì: ba chỉ số và ngưỡng hiện tại

Core Web Vitals là ba chỉ số đo trải nghiệm ngườì dùng mà Google dùng làm tín hiệu page experience trong thuật toán xếp hạng. Chúng đo tốc độ tải nội dung, độ ổn định bố cục và tốc độ phản hồi tương tác.

Ba chỉ số đo gì và ngưỡng xanh, vàng, đỏ

LCP (Largest Contentful Paint) đo thời điểm phần tử nội dung lớn nhất xuất hiện trong khung nhìn. Ngưỡng xanh dưới 2,5 giây, vàng từ 2,5 đến 4 giây, đỏ trên 4 giây. CLS (Cumulative Layout Shift) đo tổng dịch chuyển bố cục bất ngờ: xanh dưới 0,1, vàng từ 0,1 đến 0,25, đỏ trên 0,25. INP (Interaction to Next Paint) đo độ trễ từ lúc ngườì dùng tương tác đến khi trình duyệt vẽ lại khung hình: xanh dưới 200 mili-giây, vàng từ 200 đến 500 mili-giây, đỏ trên 500 mili-giây. INP chính thức thay FID từ tháng 3/2024.

Đọc báo cáo CrUX và PageSpeed: dữ liệu nào đáng tin hơn

Core Web Vitals trong Search Console lấy từ CrUX (Chrome User Experience Report) — dữ liệu thật từ ngườì dùng Chrome trong 28 ngày gần nhất. Đây là dữ liệu Google dùng để xếp hạng, nên đây mới là con số quyết định pass hay fail.

CrUX: dữ liệu thật của ngườì dùng

CrUX chỉ có dữ liệu khi trang của bạn đủ lượt truy cập từ ngườì dùng Chrome. Site nhỏ hoặc trang mới có thể hiện “The Chrome User Experience Report does not have sufficient real-world speed data for this page”. Lúc đó hãy dựa vào dữ liệu lab của Lighthouse để đoán xu hướng, đồng thời tự đo bằng Web Vitals Extension.

PageSpeed Insights: dữ liệu lab để tìm nguyên nhân

PageSpeed Insights (PSI) hiển thị cả hai: phần “Discover what your real users are experiencing” là dữ liệu CrUX, còn phần “Diagnose performance issues” là dữ liệu lab từ Lighthouse — trang được tải lại bằng thiết bị mô phỏng, mạng ảo. Dữ liệu lab tốt để gỡ lỗi vì bạn thấy nguyên nhân cụ thể, nhưng nó không phải con số Google dùng xếp hạng.

Sửa Core Web Vitals: LCP, CLS, INP theo đúng nguyên nhân

Core Web Vitals được sửa theo đúng nguyên nhân đo được, không phải theo cảm tính. Mỗi bước gồm hành động cụ thể và cách kiểm tra sau khi làm xong.

Bước 1 — LCP: ảnh chặn render

Khi điểm số vitals LCP đỏ, nguyên nhân phổ biến nhất là ảnh lớn ở đầu trang được tải chậm hoặc không được ưu tiên. Sửa bằng cách thêm fetchpriority="high" vào thẻ ảnh chính, đặt loading="eager" thay vì lazy, và preload ảnh đó bằng thẻ <link rel="preload" as="image"> trong phần head. Nén ảnh sang WebP hoặc AVIF cũng giảm kích thước tải đáng kể. Kiểm tra: mở DevTools, tab Performance, reload và xem mốc LCP có dưới 2,5 giây không.

Bước 2 — LCP: phản hồi chậm của server và font

Nếu ảnh đã tối ưu mà LCP vẫn đỏ, nguyên nhân thường nằm ở TTFB (Time to First Byte) — server phản hồi chậm. Kiểm tra bằng cách mở DevTools, tab Network, reload và xem thời gian của request HTML đầu tiên. TTFB dưới 800 mili-giây là mục tiêu hợp lý. Cách sửa gồm bật cache trình duyệt, dùng CDN và giảm tính toán phía server — nếu bạn chạy Nginx, bài tinh chỉnh hiệu năng Nginx: cache, gzip, HTTP/2 hướng dẫn chi tiết phần này. Font cũng gây chậm vẽ chữ: thêm font-display: swap vào @font-face, preload font chính, và giảm số lượng font weight không thiết yếu.

Khi chỉ số vitals CLS đỏ, nguyên nhân hầu như luôn bắt nguồn từ các phần tử “nhảy” khi tải xong. Tội phạm số một là ảnh không khai báo kích thước: trình duyệt không biết trước khung chứa bao nhiêu, nên khi ảnh về, toàn bộ nội dung bên dưới bị đẩy xuống. Sửa bằng cách luôn đặt width và height cho mọi thẻ ảnh, hoặc dùng CSS aspect-ratio. Nguyên nhân thứ hai là quảng cáo, iframe và widget bên ngoài xuất hiện muộn và đẩy nội dung đi — hãy dự trữ không gian bằng min-height hoặc đặt widget ở vị trí cố định (fixed). Với Astro, bài kiến trúc Islands trong Astro v5 tối ưu Core Web Vitals giải thích cách nhúng widget mà không làm nhảy layout.

Bước 4 — INP: tác vụ chặn main thread

Khi chỉ số vitals INP đỏ, nghĩa là trình duyệt mất nhiều thời gian để phản hồi tương tác. Nguyên nhân gốc là tác vụ dài (long task) chặn main thread — thường từ JavaScript nặng: xử lý mảng lớn, render danh sách dài, hoặc thư viện analytics tính toán liên tục. Cách sửa: đánh dấu script không quan trọng bằng defer hoặc async, chỉ khởi tạo widget nặng khi ngườì dùng cuộn tới (lazy init), và dùng content-visibility: auto cho các khối nội dung nằm ngoài khung nhìn. Nếu một tác vụ buộc phải chạy ngay, hãy chia nhỏ nó thành nhiều phần và nhường main thread giữa các phần bằng scheduler.yield() hoặc setTimeout(…, 0). Kiểm tra: ghi lại bằng Performance panel và xác nhận không còn long task nào vượt 200 mili-giây.

Cách kiểm tra Core Web Vitals đã làm đúng

Core Web Vitals không sửa một lần rồi xong — nó là vòng lặp đo, sửa, đo lại. Quy trình chuẩn gồm bốn bước: đo baseline trước khi động vào bất cứ thứ gì, sửa một nguyên nhân một, đo lại bằng cùng một công cụ, rồi ghi lại kết quả để so sánh.

Quy trình đo, sửa, đo lại

Cụ thể: (1) chạy PSI, chụp màn hình ba chỉ số và danh sách Opportunities; (2) chọn đúng một nguyên nhân đỏ hoặc vàng; (3) áp dụng sửa đổi theo các bước ở trên; (4) triển khai lên production; (5) chạy lại PSI trên cùng URL để xác nhận cải thiện; (6) chờ 28 ngày rồi kiểm tra lại trong Search Console. Ghi lại mỗi vòng vào một bảng tính nhỏ để thấy xu hướng.

Core Web Vitals trong thực tế: 3 tình huống thường gặp

Đây là ba tình huống thực tế gặp nhiều nhất khi làm Core Web Vitals cho site thật. Cách tiếp cận giống nhau: đo trước, sửa đúng nguyên nhân, đo lại, ghi lại.

Blog tĩnh Astro

Blog tĩnh bằng Astro thường có LCP tốt sẵn vì HTML được render từ server, nhưng ảnh bìa lớn và font Google Fonts là hai thứ kéo LCP xuống. Sửa: nén ảnh bìa sang WebP, thêm fetchpriority="high", preload font, và dùng font-display: swap.

WordPress

WordPress có thêm vấn đề render-blocking: plugin chèn CSS và JS vào <head> làm chặn render. Sửa: dùng plugin cache để gộp và hoãn JS, tắt plugin không thiết yếu, và kiểm tra từng plugin quảng cáo xem có dự trữ không gian không. Bài bảo mật WordPress: 12 việc làm trong 30 phút có phần dọn dẹp script thừa áp dụng luôn cho mục đích này.

Landing page thường chứa nhiều widget: chat, popup, form đăng ký, video nhúng — mỗi widget là một nguyên cơ CLS và INP. Sửa: dự trữ không gian cho mọi widget từ đầu, chỉ khởi tạo widget khi ngườì dùng cuộn tới (IntersectionObserver), và ưu tiên widget theo thứ tự quan trọng.

Câu hỏi thường gặp về Core Web Vitals

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

Có, nhưng đây là tín hiệu yếu hơn nội dung chất lượng. Google xác nhận page experience (trong đó có Core Web Vitals) là một trong nhiều tín hiệu xếp hạng. Sửa xanh giúp bạn không bị phạt, nhưng không đảm bảo top 1.

CrUX cập nhật dữ liệu khi nào?

CrUX tổng hợp dữ liệu theo chu kỳ 28 ngày. Trong lúc chờ, hãy dùng PSI và Web Vitals Extension để tự đo trên trang thật của mình, đừng vội kết luận sửa không hiệu quả chỉ vì Search Console chưa đổi màu.

INP thay FID khi nào?

INP chính thức thay thế FID (First Input Delay) như một Core Web Vitals từ ngày 12 tháng 3 năm 2024. INP đo toàn bộ độ trễ tương tác, nghiêm ngặt hơn FID chỉ đo phần đầu tiên.

Cần xanh cả ba chỉ số mới tốt?

Đúng vậy. Một trang được đánh giá “pass” khi 75% lượt tải đạt xanh cả ba chỉ số vitals cùng lúc. Hãy luôn kiểm tra cả ba trong PSI và Search Console, đừng dừng lại khi một chỉ số đã xanh.

Kết luận

Core Web Vitals là hành trình liên tục, không phải sự kiện một lần. Bằng cách đo trước, sửa đúng nguyên nhân, đo lại và ghi lại kết quả, bạn sẽ từng bước đưa trang của mình vào nhóm xanh.

Đo baseline: chạy PSI, ghi lại ba chỉ số vitals trước khi sửa
Sửa một nguyên nhân một: ảnh cho LCP, kích thước cho CLS, chia nhỏ tác vụ cho INP
Đo lại bằng cùng công cụ: PSI cho lab, Search Console cho dữ liệu thật
Chờ 28 ngày: CrUX cập nhật dữ liệu thật, kiểm tra lại trong Search Console

Ba chỉ số này quyết định người đọc ở lại hay thoát. Nếu bạn đang có website riêng và muốn đo thật rồi sửa, đó là việc tôi làm thường xuyên — dịch vụ web và tối ưu tốc độ.

Nếu bạn đang dùng Astro, bài kiến trúc Islands trong Astro v5 tối ưu Core Web Vitals là bổ sung tuyệt vời. Để hiểu rõ hơn về cách đo lường, hãy đọc tài liệu Lighthouse của Chrome. Bắt đầu với một trang có điểm đỏ nhất trong Search Console ngay hôm nay.