Cách tối ưu Largest Contentful Paint cho video

[Nhật Quang]

Video thường là nguyên nhân làm chậm Largest Contentful Paint (LCP) do kích thước lớn và thời gian tải lâu. Bài viết này trình bày các bước thực tế để tối ưu LCP cho phần tử video, giúp cải thiện trải nghiệm người dùng và SEO.

LCP cho video là gì và nó được đo như thế nào?​

Largest Contentful Paint (LCP) là mốc hiển thị khi người dùng thấy phần tử lớn nhất trên trang. Với video, LCP được ghi nhận khi khung hình đầu tiên của video xuất hiện hoặc khi ảnh poster (poster image) hiển thị thay cho video.

Trước Chrome 116 (tháng 8/2023), video không có poster thường không đóng góp vào LCP. Vì video tải chậm hơn nhiều so với ảnh, nếu không tối ưu, video dễ khiến LCP kém (thường > 2.5s theo tiêu chuẩn của Google).

Vì sao nên dùng ảnh poster cho video​

Ảnh poster là hình thay thế hiển thị trước khi khung video đầu tiên render. Một ảnh poster nhẹ sẽ tải nhanh hơn video, do đó thường trở thành phần tử LCP và giúp cải thiện điểm số LCP ngay lập tức.

Ví dụ đơn giản trong HTML:

Các bước tối ưu cho phần tử video​

• Đặt ảnh poster rõ ràng bằng thuộc tính poster trên thẻ <video> để ảnh được coi là LCP thay vì chính file video.
• Tối ưu ảnh poster: nén, chọn định dạng phù hợp (WebP/AVIF nếu hỗ trợ), đặt đúng kích thước hiển thị để tránh reflow.
• Tiền tải ảnh poster (preload) và báo ưu tiên cao: dùng <link rel="preload" as="image" href="poster.jpg" fetchpriority="high"> để trình duyệt ưu tiên tải ảnh này sớm hơn.
• Đảm bảo ảnh poster có kích thước và tỉ lệ phù hợp với vùng hiển thị để không gây re-render khi video bắt đầu.
• Không dựa vào preload cho file video — Chrome hiện không hỗ trợ preload làm render video sớm hơn; tập trung tối ưu ảnh poster thay vì preload video.

Vấn đề ưu tiên tài nguyên (priority)​

Trình duyệt ban đầu có logic tự động phân loại độ ưu tiên cho tài nguyên. Ảnh thường được coi là ưu tiên thấp nhưng có thể tăng lên khi cần. Nếu ảnh poster được load muộn do ưu tiên thấp, LCP sẽ bị ảnh hưởng. Việc preload kèm fetchpriority="high" sẽ giúp ảnh nhận ưu tiên ngay từ đầu và tránh thay đổi priority giữa chừng.

Kết quả thực tế và lưu ý​

Trên ví dụ thí nghiệm, sau khi thêm poster, LCP cải thiện từ khoảng 1.55s xuống 1.23s; tiếp tục preload ảnh poster có fetchpriority cao giúp giảm thêm về ~1.2s. Trên trang thực tế với nhiều tài nguyên, tác động thường lớn hơn.

Lưu ý: nếu video là LCP nhưng không có poster thì video sẽ kéo điểm LCP xuống vì tải chậm. Do đó, bước đơn giản nhất và hiệu quả nhất là luôn đặt ảnh poster tối ưu và preload nó khi cần.

Dùng công cụ để kiểm tra và tối ưu​

Các công cụ như DebugBear (hoặc bất cứ công cụ đo Web Vitals nào) giúp phát hiện phần tử LCP, kiểm tra xem poster có hoạt động đúng hay không, và đưa ra khuyến nghị tự động (ví dụ: preload ảnh LCP). Bạn có thể dùng tính năng phân tích để xem liệu video có gây re-render và kiểm tra thời gian/ kích thước của LCP.

Đăng ký dùng thử để theo dõi và tối ưu LCP cho trang của bạn nếu cần.

Nguồn: https://www.debugbear.com/blog/optimize-video-lcp