Tối ưu ảnh WordPress: danh sách kiểm tra LCP

Website WordPress của bạn đã nén ảnh, bật WebP, cài plugin tối ưu rồi nhưng PageSpeed Insights vẫn báo LCP chậm? Đây là tình huống rất thường gặp: ảnh nhẹ hơn chưa chắc LCP tốt hơn nếu ảnh quan trọng bị tải muộn, sai kích thước hoặc bị lazy load nhầm.

Trong bài này, mình sẽ đi theo checklist thực tế để tối ưu ảnh WordPress: bắt đầu từ việc xác định ảnh LCP, chọn WebP hoặc AVIF, xử lý responsive images, preload hero image và kiểm tra lại sau triển khai. Mục tiêu là cải thiện LCP mà không làm ảnh mờ, vỡ giao diện hoặc gây CLS. Cùng xem nhé!

Tối ưu ảnh WordPress là gì?

Tối ưu ảnh WordPress là quá trình giảm chi phí tải và hiển thị ảnh mà vẫn giữ ảnh đủ sắc nét cho thiết kế. Việc này gồm chọn định dạng phù hợp, tạo nhiều kích thước ảnh, khai báo responsive images, ưu tiên ảnh quan trọng và lazy load ảnh không quan trọng.

Điểm dễ nhầm là tối ưu ảnh không chỉ có nén file. Một ảnh hero 120 KB vẫn có thể làm LCP chậm nếu trình duyệt phát hiện nó quá muộn vì nằm trong CSS background, slider JavaScript hoặc bị plugin lazy load chuyển sang thuộc tính data-src. Mình khuyên bạn nhìn bài toán này theo thứ tự: đúng ảnh, đúng kích thước, đúng định dạng, đúng thời điểm tải.

LCP

Largest Contentful Paint là thời điểm phần nội dung lớn nhất trong vùng nhìn thấy ban đầu được render xong. Theo web.dev, ngưỡng tốt là 2.5 giây hoặc thấp hơn ở percentile 75, tách riêng mobile và desktop [1].

Vì sao ảnh thường làm LCP chậm?

Ảnh thường làm LCP chậm vì chúng vừa nặng, vừa dễ bị phát hiện muộn, vừa phụ thuộc vào nhiều lớp xử lý của theme, plugin và trình duyệt. Với WordPress, vấn đề hay nằm ở hero image, banner slider, ảnh sản phẩm đầu trang hoặc featured image đầu bài.

Theo web.dev, quá trình tối ưu LCP nên được tách thành các phần như TTFB, resource load delay, resource load duration và render delay [2]. Với ảnh, bạn cần hỏi bốn câu:

• Máy chủ có phản hồi chậm trước khi ảnh được yêu cầu không?
• Trình duyệt có phát hiện ảnh LCP sớm không?
• File ảnh có quá nặng so với kích thước hiển thị không?
• Ảnh có bị chờ CSS, JavaScript, font hoặc animation trước khi render không?

Bạn đang đọc bài viết thuộc chuyên mục Tăng tốc website của VietnamTutor — nơi mình chia sẻ cách đo, tối ưu và vận hành website theo dữ liệu thực tế thay vì cảm giác.

Nếu LCP chậm chủ yếu do TTFB, tối ưu ảnh chỉ giải quyết một phần. Khi đó bạn nên đọc thêm bài audit TTFB cho WordPress để xử lý cache, hosting và server response time trước.

Cách xác định ảnh nào cần tối ưu trước

Bạn nên tối ưu ảnh đang được PageSpeed Insights hoặc DevTools đánh dấu là LCP element trước, không nên tối ưu dàn trải toàn bộ Media Library ngay từ đầu. Cách này tiết kiệm thời gian và tránh làm hỏng chất lượng ảnh ở những vị trí không ảnh hưởng nhiều đến màn hình đầu.

1. Mở PageSpeed Insights và chạy URL cần kiểm tra trên mobile trước.
2. Xem mục “Largest Contentful Paint element” để biết phần tử nào là LCP.
3. Mở Chrome DevTools, tab Performance hoặc Network, reload trang bằng throttling phù hợp.
4. Kiểm tra thời điểm request, dung lượng tải về và dấu hiệu bị chuyển sang data-src.
5. So sánh kích thước hiển thị với kích thước file thực tế.

Đừng lo nếu PageSpeed Insights đôi khi báo LCP là heading thay vì ảnh. Điều đó cho thấy ảnh chưa chắc là nút thắt chính, hoặc ảnh hero bị render sau heading.

Nên dùng WebP, AVIF hay JPEG?

Với WordPress hiện nay, WebP là lựa chọn an toàn cho hầu hết website; AVIF đáng dùng khi hosting và pipeline ảnh hỗ trợ tốt; JPEG vẫn phù hợp làm fallback hoặc dùng cho quy trình chưa hỗ trợ định dạng mới. Đừng chọn định dạng chỉ vì tên nghe hiện đại.

MDN mô tả WebP và AVIF là các định dạng ảnh hiện đại có hiệu năng tốt hơn các định dạng cũ trong nhiều trường hợp [3]. WordPress 6.5 cũng đã thêm hỗ trợ upload và sử dụng AVIF nếu thư viện xử lý ảnh trên hosting hỗ trợ [4].

Mình không khuyên bạn chuyển toàn bộ thư viện cũ sang AVIF ngay lập tức. Cách chắc hơn là thử trên nhóm URL quan trọng, rồi kiểm tra MIME type, srcset và fallback.

Responsive images và kích thước hiển thị: tránh tải ảnh quá lớn

Responsive images giúp trình duyệt chọn phiên bản ảnh phù hợp với màn hình thay vì tải ảnh lớn quá mức. Đây là phần WordPress làm khá tốt nếu ảnh được upload đúng cách và theme không phá srcset/sizes.

Khi bạn upload ảnh vào Media Library, WordPress có thể tạo nhiều kích thước phụ và xuất srcset. Nhưng theme hoặc page builder vẫn có thể làm sai nếu ép ảnh bằng CSS, dùng background image, đặt sizes không đúng hoặc chèn ảnh từ URL ngoài.

• Upload ảnh gốc đủ lớn nhưng không quá dư.
• Đảm bảo thẻ img có width và height để trình duyệt giữ chỗ.
• Kiểm tra srcset có các size hợp lý cho mobile, tablet và desktop.
• Kiểm tra sizes có phản ánh kích thước hiển thị thật.
• Không dùng CSS để kéo ảnh nhỏ thành ảnh lớn hoặc thu nhỏ ảnh cực lớn.

Nếu bạn đang dùng page builder, hãy kiểm tra riêng từng template vì homepage, single post và landing page có thể output ảnh rất khác nhau.

Hero image: preload, fetchpriority và lazy load nên đặt thế nào?

Ảnh hero hoặc ảnh LCP không nên bị lazy load; nếu trình duyệt phát hiện ảnh quá muộn, bạn nên cân nhắc preload hoặc fetchpriority=”high”. Đây thường là bước có tác động rõ nhất khi LCP element là ảnh trên màn hình đầu.

web.dev khuyến nghị dùng preload cho tài nguyên quan trọng mà trình duyệt không phát hiện sớm; Fetch Priority API có thể báo cho trình duyệt tăng ưu tiên tải ảnh quan trọng [5]. Với responsive images, web.dev cũng có hướng dẫn preload bằng imagesrcset và imagesizes để tránh preload sai phiên bản ảnh [6].

Ví dụ ý tưởng trong theme WordPress:

<?php
// Ví dụ: thêm fetchpriority cho ảnh hero chính trong template.
echo wp_get_attachment_image(
    $hero_image_id,
    'full',
    false,
    array(
        'class' => 'hero-image',
        'loading' => 'eager',
        'fetchpriority' => 'high',
        'decoding' => 'async',
        'alt' => esc_attr( $hero_alt ),
    )
);
?>

Lưu ý: đừng gắn fetchpriority=”high” cho quá nhiều ảnh. Với một trang thông thường, bạn chỉ nên ưu tiên ảnh LCP hoặc ảnh thật sự quan trọng trong viewport đầu.

Ảnh dưới màn hình đầu: lazy load không gây CLS

Lazy load phù hợp với ảnh dưới màn hình đầu, nhưng cần chừa sẵn không gian bằng width/height hoặc aspect ratio để tránh layout shift. Lazy load sai chỗ có thể làm LCP chậm hơn; lazy load thiếu kích thước có thể làm CLS xấu đi.

WordPress đã có cơ chế native lazy loading cho ảnh trong nhiều trường hợp, nhưng bạn vẫn cần kiểm tra output thật. Một số plugin thay src bằng data-src rồi dùng JavaScript để thay lại sau; cách này có thể làm ảnh quan trọng bị phát hiện muộn.

• Không lazy load logo chính, hero image, ảnh sản phẩm đầu tiên hoặc featured image nằm trong viewport đầu.
• Lazy load ảnh trong thân bài, gallery dài và thumbnail dưới màn hình đầu.
• Luôn giữ width và height hoặc aspect ratio để tránh layout bị nhảy.
• Kiểm tra trên mobile thật vì viewport mobile khác desktop.
• Sau khi bật plugin, xem source HTML để chắc ảnh quan trọng không bị chuyển sang data-src.

Nếu bạn đang tối ưu cả cache, hãy đọc thêm bài WordPress caching. Cache tốt giúp HTML đến trình duyệt sớm hơn, nhưng không sửa được ảnh LCP bị lazy load nhầm.

Khi nào nên dùng image CDN?

Image CDN đáng dùng khi website có nhiều ảnh, nhiều kích thước hiển thị, traffic từ nhiều khu vực hoặc đội ngũ không muốn tự quản lý pipeline chuyển đổi ảnh. Nhưng CDN không thay thế việc chọn đúng ảnh LCP và cấu hình theme đúng.

Image CDN thường giúp tự động resize, convert định dạng, cache ảnh gần người dùng và phục vụ URL tối ưu theo thiết bị.

• CDN có tạo kích thước ảnh theo width thực tế không?
• Có hỗ trợ WebP/AVIF theo Accept header không?
• Có cache hit ổn định ở khu vực người dùng chính không?
• Có làm đổi URL ảnh khiến SEO image hoặc cache cũ bị ảnh hưởng không?
• Có tương thích với plugin tối ưu ảnh, WooCommerce và theme hiện tại không?

Nếu website đang dùng Cloudflare, bạn có thể kết hợp bài này với hướng dẫn Cloudflare APO cho WordPress để hiểu phần cache HTML và edge delivery.

Checklist tối ưu ảnh WordPress để cải thiện LCP

Checklist tốt nhất là checklist bắt đầu từ dữ liệu đo, xử lý đúng ảnh LCP, rồi mới mở rộng sang toàn bộ thư viện ảnh. Bạn có thể dùng danh sách dưới đây cho các URL quan trọng nhất.

• Đo trước bằng PageSpeed Insights và DevTools; ghi lại LCP, LCP element và waterfall.
• Đảm bảo ảnh LCP không bị lazy load, có kích thước sát layout và được phát hiện sớm.
• Dùng WebP hoặc AVIF khi pipeline hỗ trợ tốt; giữ JPEG fallback nếu cần.
• Kiểm tra srcset, sizes, width và height cho các breakpoint chính.
• Lazy load ảnh dưới màn hình đầu, sau đó kiểm tra CLS.
• Chạy lại PageSpeed Insights sau khi xóa cache và theo dõi Search Console trong 14-28 ngày.

Nếu bạn muốn xử lý theo lớp hạ tầng trước, bài chọn hosting theo quy mô website sẽ giúp bạn tránh mua sai gói khi vấn đề thực ra nằm ở cache, ảnh hoặc theme.

Nguồn tham khảo

1. web.dev: Largest Contentful Paint
2. web.dev: Optimize Largest Contentful Paint
3. MDN: Image file type and format guide
4. Make WordPress Core: WordPress 6.5 adds AVIF support
5. web.dev: Optimize resource loading with the Fetch Priority API
6. web.dev: Preload responsive images
7. WordPress Advanced Administration Handbook: Optimization

Tóm lại, tối ưu ảnh WordPress không phải là bấm một nút nén ảnh rồi chờ điểm xanh. Bạn cần xác định đúng ảnh LCP, tải ảnh quan trọng sớm hơn, dùng định dạng phù hợp, giữ layout ổn định và đo lại bằng dữ liệu thật. Nếu bạn đang tối ưu website doanh nghiệp, hãy bắt đầu từ 3 URL quan trọng nhất trước.