LCP là gì: Cách tối ưu LCP cho SEO

LCP là chỉ số trải nghiệm người dùng quan trọng và là yếu tố xếp hạng của Google. Khi người dùng mở trang của bạn, họ không quan tâm đến tổng thời gian tải trang. Họ quan tâm đến lúc họ thấy được nội dung chính và bắt đầu đọc hoặc tương tác. LCP đo chính xác thời điểm đó: khi phần tử nội dung lớn nhất trở nên nhìn thấy được. Nếu LCP tốt, trang của bạn có cảm giác nhanh. Nếu LCP kém, trang có cảm giác chậm, ngay cả khi các chỉ số khác vẫn ổn.

Tối ưu LCP cần một cách tiếp cận theo ba hướng: cải thiện thời gian phản hồi của máy chủ (TTFB), loại bỏ các tài nguyên chặn hiển thị và tối ưu hình ảnh. Mỗi hướng xử lý một điểm nghẽn LCP khác nhau. Khi kết hợp, chúng mang lại cải thiện rõ rệt.

LCP là gì và được đo như thế nào

Largest Contentful Paint (LCP) là thời điểm hiển thị của phần tử nội dung nhìn thấy được lớn nhất trên trang của bạn. Đó có thể là một hình ảnh lớn, video, tiêu đề hoặc khối văn bản. LCP đo từ lúc người dùng mở trang của bạn cho đến khi phần tử đó hiển thị. Tài liệu về LCP của Google cung cấp thông tin kỹ thuật chi tiết và các chiến lược tối ưu.

LCP không phải chỉ số đạt hoặc không đạt theo kiểu nhị phân. Đó là một thang điểm liên tục. Google xác định LCP dưới 2,5 giây là "tốt", LCP từ 2,5-4 giây cần cải thiện, còn LCP trên 4 giây là kém. Người dùng cảm nhận các trang có LCP dưới 2 giây là rất nhanh. Các trang có LCP 3-4 giây có cảm giác chậm hơn rõ rệt. Các trang có LCP trên 5 giây thường bị bỏ đi.

LCP thay đổi trong lúc trang tải, khi các phần tử nội dung lớn hơn xuất hiện. Nếu một ảnh rất lớn tải xong ở mốc 3 giây, LCP sẽ nhảy từ 1 giây lên 3 giây. Điều này quan trọng: bạn không thể chỉ tối ưu thời gian hiển thị ban đầu. Bạn phải đảm bảo mọi phần tử nội dung lớn đều tải nhanh.

Hiểu về Time to First Byte (TTFB)

Time to First Byte (TTFB) là khoảng thời gian từ lúc bắt đầu điều hướng cho đến khi máy chủ trả về byte đầu tiên của tài liệu HTML. TTFB quyết định mức sàn của LCP. Nếu TTFB là 2 giây, LCP không thể tốt hơn 2 giây vì trình duyệt còn chưa nhận được HTML. Giảm TTFB là điều kiện tiên quyết để giảm LCP.

TTFB tốt là dưới 600 mili giây. TTFB từ 600-1800ms cần cải thiện. TTFB trên 1800ms là kém. Nếu TTFB của bạn chậm, hãy tập trung tối ưu máy chủ trước. Không có tối ưu phía giao diện nào bù được một máy chủ chậm.

Các nguyên nhân thường gặp khiến TTFB chậm: mã phía máy chủ kém hiệu quả, truy vấn cơ sở dữ liệu hoặc máy chủ quá tải. Hosting chậm cũng gây TTFB cao. Hosting dùng chung thường cực kỳ chậm. Hãy nâng cấp lên VPS hoặc hosting đám mây để có hiệu năng tốt hơn. Dùng CDN để giảm TTFB bằng cách phục vụ nội dung từ các máy chủ gần người dùng.

PageSpeed Insights hiển thị TTFB của bạn trong mục "Thời gian phản hồi của máy chủ". Nếu TTFB là điểm nghẽn, nó sẽ được làm nổi bật như một ưu tiên.

Xác định phần tử nội dung lớn nhất

LCP phụ thuộc vào phần tử nội dung lớn nhất trên trang của bạn là gì. Trên một bài blog, phần tử lớn nhất có thể là một ảnh tiêu đề lớn. Trên trang sản phẩm, có thể là ảnh sản phẩm. Trên trang tin tức, có thể là tiêu đề bài viết. Xác định phần tử LCP là bước đầu tiên để tối ưu nó.

Dùng Chrome DevTools để xác định phần tử LCP. Mở DevTools, vào tab Performance, bắt đầu ghi và tải lại trang. Trong bản ghi Performance, tìm mốc "Largest Contentful Paint". Di chuột lên mốc đó để xem phần tử nào đã kích hoạt LCP. Khi đã biết phần tử, hãy tối ưu nó.

Phần tử LCP thường là một hình ảnh. Hình ảnh có dung lượng lớn và chỉ tải sau khi HTML được phân tích. Tối ưu cách tải hình ảnh có tác động lớn nhất đến LCP với hầu hết các website. Những hình ảnh nằm dưới màn hình đầu tiên có thể dùng tải lười, giúp nội dung phía trên màn hình hiển thị nhanh hơn.

Tải trước các tài nguyên quan trọng

Tải trước là cách bảo trình duyệt bắt đầu tải một tài nguyên sớm, trước khi nó cần để hiển thị. Hãy tải trước hình ảnh LCP hoặc các tài nguyên quan trọng khác bằng các thẻ `` trong phần đầu HTML. Điều này bảo trình duyệt "bắt đầu tải tài nguyên này ngay lập tức".

Ví dụ: `` bảo trình duyệt bắt đầu tải ảnh tiêu đề ngay lập tức, không chờ CSS được phân tích. Cách này có thể giảm LCP 100-500ms tùy dung lượng tài nguyên.

Hãy thận trọng khi tải trước. Tải trước quá nhiều tài nguyên sẽ lãng phí băng thông. Chỉ tải trước những tài nguyên thiết yếu nhất (ảnh tiêu đề, phông chữ quan trọng, CSS cần thiết). Hướng dẫn tối ưu Core Web Vitals của Google giải thích các thực hành tốt nhất về tải trước.

Tối ưu hình ảnh cho LCP

Nếu phần tử LCP của bạn là một hình ảnh, hãy tối ưu dung lượng tệp ảnh và cách tải. Ba cách làm:

Nén ảnh. Dùng các công cụ như TinyPNG, ImageOptim hoặc Squoosh để nén mà không làm mất chất lượng. Nén JPEG có thể giảm dung lượng tệp 10-40 lần. Cứ mỗi 100KB dung lượng ảnh sẽ thêm 100-200ms vào LCP trên mạng 4G. Nén là việc đem lại hiệu quả cao.

Dùng định dạng hiện đại. WebP nhỏ hơn JPEG 25-35%. AVIF còn nhỏ hơn nữa. Dùng phần tử HTML `` để phục vụ WebP cho trình duyệt hiện đại và JPEG cho trình duyệt cũ, đảm bảo tương thích ngược. Chỉ riêng việc chọn định dạng cũng có thể cải thiện LCP 200-400ms.

Khai báo kích thước ảnh. Thêm thuộc tính chiều rộng và chiều cao giúp ngăn dịch chuyển bố cục và cho phép trình duyệt giữ chỗ trước khi ảnh tải xong. Cách này không trực tiếp cải thiện LCP, nhưng nó cải thiện Cumulative Layout Shift (CLS), một chỉ số khác của Core Web Vitals.

CSS và JavaScript chặn hiển thị

CSS chặn hiển thị ngăn trình duyệt vẽ trang cho đến khi CSS được tải xuống và phân tích xong. Các tệp CSS lớn làm chậm việc hiển thị. Hãy giảm CSS chặn hiển thị bằng cách đưa CSS quan trọng vào trực tiếp trong HTML và trì hoãn phần còn lại.

CSS quan trọng là CSS cần thiết cho nội dung phía trên màn hình. Đưa CSS này vào trực tiếp trong `