Google Search Console

LCP (Largest Contentful Paint)

Chỉ số đo thời gian tải phần nội dung lớn nhất trong khung nhìn ban đầu, phản ánh tốc độ hiển thị chính.

2 lượt xem Cập nhật: 27/05/2026

LCP (Largest Contentful Paint) là gì?

LCP (Largest Contentful Paint) là chỉ số đo thời gian từ lúc người dùng bắt đầu truy cập trang cho đến khi phần nội dung lớn nhất trong khung nhìn ban đầu (viewport) được hiển thị đầy đủ. Đây là một trong ba chỉ số Core Web Vitals do Google xác định, phản ánh tốc độ tải và khả năng hiển thị nội dung chính của trang — ví dụ như ảnh lớn, video, tiêu đề có font lớn hoặc khối văn bản nổi bật.

Giá trị LCP được tính bằng mili giây (ms). Theo tiêu chuẩn của Google, một trang đạt chất lượng tốt cần có LCP ≤ 2,5 giây. Trang ở mức chấp nhận được là từ 2,6–4,0 giây; còn trên 4,0 giây được coi là kém.

Tại sao quan trọng trong SEO?

LCP trực tiếp ảnh hưởng đến trải nghiệm người dùng và là yếu tố xếp hạng được Google sử dụng trong thuật toán tìm kiếm từ tháng 5/2021. Trang có LCP chậm thường bị giảm thứ hạng trên kết quả tìm kiếm, đặc biệt với các truy vấn nhạy cảm về tốc độ như 'mua online', 'đặt hàng nhanh', hay tìm kiếm trên thiết bị di động.

Ngoài ra, LCP chậm làm tăng tỷ lệ thoát (bounce rate), giảm thời gian tương tác và làm suy giảm hiệu quả chuyển đổi — điều mà cả công cụ tìm kiếm lẫn chủ website đều quan tâm.

Cách hoạt động

LCP theo dõi tất cả các phần tử có thể hiển thị trong viewport ban đầu và chọn phần tử có diện tích chiếm nhiều nhất (tính theo pixel) để đo thời điểm nó được vẽ xong. Các phần tử được xét bao gồm:

  • Ảnh (<img>)
  • Ảnh nền CSS (nếu được khai báo qua background-image và có kích thước rõ ràng)
  • Video (<video>, lấy khung hình đầu tiên làm nội dung)
  • Khối văn bản lớn nhất (ví dụ: thẻ <h1>, <p>, <div> chứa ít nhất 128 ký tự và có font size ≥ 16px)

LCP không tính các phần tử ẩn (display: none), các phần tử nằm ngoài viewport, hoặc nội dung được thêm sau qua JavaScript mà không thuộc khung nhìn ban đầu.

Hướng dẫn thực hiện

Để cải thiện LCP, bạn cần tập trung vào ba nhóm nguyên nhân chính: tải tài nguyên, xử lý render và hiển thị nội dung. Dưới đây là các bước cụ thể:

  1. Tối ưu ảnh và video: Dùng định dạng hiện đại (WebP/AVIF), nén không mất dữ liệu, áp dụng lazy loading có tham số loading="eager" cho ảnh đầu trang, và đặt kích thước cố định (width/height) để tránh layout shift.
  2. Giảm thời gian phản hồi máy chủ (TTFB): Dùng CDN, bật cache server-side, tối ưu cơ sở dữ liệu và giảm số lần gọi API không cần thiết.
  3. Tối ưu CSS & JavaScript: Loại bỏ CSS không dùng (unused CSS), trì hoãn script không cần thiết (defer), và loại bỏ render-blocking resources bằng cách inline CSS quan trọng.
  4. Sử dụng preconnect và preload: Thêm <link rel="preconnect" href="https://fonts.googleapis.com"> hoặc <link rel="preload" as="image" href="/hero.jpg"> cho tài nguyên quan trọng.
  5. Kiểm tra lại font chữ: Tránh FOIT/FOUT bằng cách dùng font-display: swap và tải font từ CDN đáng tin cậy.

Lỗi thường gặp

Dưới đây là những sai lầm phổ biến khiến LCP bị chậm và cách khắc phục:

Lỗi Dấu hiệu Cách khắc phục
Ảnh chưa được tối ưu Ảnh có kích thước file > 500 KB, chưa nén, thiếu kích thước HTML Dùng công cụ như Squoosh hoặc ImageOptim; khai báo width/height; chuyển sang WebP
JavaScript chặn render Trang trắng trong vài giây trước khi hiện nội dung Thay script bằng defer hoặc async; tách logic khởi tạo ra ngoài critical path
TTFB cao (> 600ms) Google Search Console báo 'LCP chậm' dù ảnh đã tối ưu Kiểm tra hosting, bật OPcache, dùng Cloudflare hoặc Cloud CDN
Font tải chậm Chữ tiêu đề xuất hiện muộn, gây flash khi render Dùng font-display: swap; preload font quan trọng; hạn chế số họ font

Ví dụ thực tế

Một trang bán hàng điện máy có LCP ban đầu là 5,2 giây do ảnh hero kích thước 3 MB và font Google Fonts tải đồng bộ. Sau khi thực hiện các bước sau:

  • Chuyển ảnh sang WebP (giảm còn 320 KB), thêm loading="eager" và khai báo kích thước
  • Thay <link href="https://fonts.googleapis.com/css2?family=Roboto"> bằng <link rel="preload" as="font" crossorigin href="..."> và font-display: swap
  • Đưa CSS quan trọng vào <head> dưới dạng inline, còn lại defer

→ LCP giảm còn 1,9 giây. Trong vòng 4 tuần, tỷ lệ thoát giảm 22%, thời gian xem trang tăng 35%, và vị trí trung bình trên Google Search cải thiện từ #7 lên #3 với từ khóa 'máy lạnh inverter giá rẻ'.

Câu hỏi thường gặp

LCP có khác gì so với First Contentful Paint (FCP)?

FCP đo thời điểm phần tử đầu tiên (như tiêu đề nhỏ hoặc đoạn văn ngắn) xuất hiện trên màn hình. Còn LCP đo thời điểm phần tử lớn nhất trong viewport được hiển thị đầy đủ — nên LCP phản ánh trải nghiệm ‘đã thấy nội dung chính’ rõ hơn.

Có thể kiểm tra LCP ở đâu?

Bạn có thể xem LCP qua Google Search Console (danh mục 'Hiệu suất' → 'Core Web Vitals'), PageSpeed Insights, Chrome DevTools (tab Performance/Lighthouse), hoặc công cụ lập trình như Web Vitals Extension. Lưu ý: dữ liệu trong Search Console là dữ liệu thực (field data), còn PageSpeed Insights là lab data — hai nguồn có thể chênh lệch tùy điều kiện mạng và thiết bị.

LCP có phụ thuộc vào thiết bị không?

Có. LCP thường chậm hơn trên thiết bị di động do băng thông hạn chế, CPU yếu hơn và mạng không ổn định. Google đánh giá riêng biệt cho desktop và mobile trong Search Console. Một trang đạt LCP tốt trên máy tính chưa chắc đạt trên điện thoại — cần kiểm tra cả hai.