Đo lường và tối ưu Largest Contentful Paint (LCP)

Nhật Quang · 06/11/2025

Largest Contentful Paint (LCP) đo thời gian nội dung chính trên trang hiển thị với người dùng. Bài viết giải thích cách đo LCP, các nguyên nhân phổ biến gây chậm và các bước tối ưu để cải thiện trải nghiệm và thứ hạng tìm kiếm.

LCP là gì và vì sao quan trọng

Largest Contentful Paint (LCP) là chỉ số hiệu năng web đo thời gian phần nội dung lớn nhất trên trang được hiển thị cho người dùng. Đây là một trong ba Core Web Vitals của Google, cùng với Cumulative Layout Shift (CLS) và Interaction to Next Paint (INP)/First Input Delay (FID) cũ hơn.

LCP cho biết khi nào khách truy cập có thể thấy phần tử lớn nhất (văn bản lớn, ảnh hero, video, v.v.). Mục tiêu trải nghiệm tốt là LCP ≤ 2,5 giây; 4 giây trở lên bị Google coi là kém và có thể ảnh hưởng tiêu cực đến thứ hạng tìm kiếm.

Cách đo LCP

Bạn có thể xác định LCP bằng các công cụ như PageSpeed Insights, Lighthouse, Chrome DevTools hoặc các dịch vụ kiểm tra tốc độ như DebugBear. Các công cụ này sẽ cho biết phần tử nào gây LCP và thời điểm nó xuất hiện trong filmstrip hoặc request waterfall.

Phân tích chuỗi yêu cầu (request chain)

Để tối ưu LCP, trước hết cần tìm chính xác phần tử gây LCP và chuỗi các yêu cầu dẫn đến việc render phần tử đó. Một số yếu tố chung ảnh hưởng đến LCP:

Thời gian phản hồi server (Time to First Byte – TTFB)
Tài nguyên chặn render (render-blocking resources) như CSS và JavaScript
Kích thước và cách tải ảnh hoặc media lớn (hero image, video)
Thứ tự ưu tiên tải tài nguyên (resource priority)

Giảm thời gian phản hồi server

Kiểm tra TTFB; nên nhỏ hơn ~800ms. Nếu TTFB cao, xem xét tối ưu server, cache, CDN, hoặc dùng plugin cache cho WordPress (ví dụ WP Rocket) để trả về nội dung đã cache thay vì tái sinh trang cho mỗi lượt truy cập.

Loại bỏ tài nguyên chặn render

CSS thường chặn render để tránh FOUC (flash of unstyled content) — tránh dùng @import trong CSS vì nó tạo chuỗi yêu cầu tuần tự. JavaScript có thể chặn render nếu không dùng async/defer hoặc đặt ở cuối trang. Xác định và giảm các script cần thiết cho lần render đầu tiên.

Tối ưu ảnh và media gây LCP

Ảnh hero hoặc ảnh lớn thường là nguyên nhân chính. Các bước tối ưu:

Nén và điều chỉnh kích thước ảnh phù hợp với màn hình (không để ảnh 4K cho mọi thiết bị)
Sử dụng định dạng hiện đại (WebP/AVIF) nếu thích hợp
Đặt ảnh trong thẻ khi có thể, thay vì background-image trong CSS, để trình duyệt phát hiện sớm và ưu tiên tải
Sử dụng preload và thêm fetchpriority="high" cho tài nguyên LCP quan trọng
Sử dụng resource hints như preconnect khi tài nguyên ở domain khác để giảm chi phí kết nối

Ưu tiên tải tài nguyên LCP

Kiểm tra request waterfall để biết khi nào trình duyệt bắt đầu tải ảnh LCP. Nếu ảnh được khai báo qua CSS, trình duyệt phải tải CSS trước khi biết đến ảnh — điều này làm chậm. Hãy cân nhắc preload ảnh trực tiếp trong HTML và đặt thuộc tính ưu tiên để tăng tốc độ tải.

Giảm số lượng yêu cầu và tải đồng thời

Nếu trình duyệt đang tải hàng trăm tài nguyên cùng lúc, các request quan trọng có thể bị trì hoãn. Giảm số lượng tài nguyên đồng thời bằng cách gộp, lazy-load các phần không cần thiết, và trì hoãn/async hoá script không quan trọng cho lần render đầu.

Kết luận: quy trình tối ưu LCP

Xác định phần tử LCP bằng công cụ (Lighthouse, PageSpeed Insights, DebugBear)
Kiểm tra TTFB và tối ưu server/caching
Loại bỏ hoặc giảm tài nguyên chặn render (CSS/JS)
Tối ưu hình ảnh: kích thước, định dạng, preload, fetchpriority
Sử dụng resource hints (preconnect) cho domain bên ngoài nếu cần
Giảm tổng tải tài nguyên và ưu tiên những thứ cần cho lần render đầu

Thực hiện tuần tự các bước trên sẽ giúp giảm LCP, cải thiện trải nghiệm người dùng và có thể nâng cao thứ hạng tìm kiếm.

Nguồn: https://www.debugbear.com/docs/metrics/largest-contentful-paint