Cải thiện tốc độ tải ảnh trên website hiệu quả

[Nhật Quang]

Lighthouse có một insight mới giúp phát hiện các ảnh quá lớn trên trang và đề xuất cách tối ưu. Bài viết này giải thích bốn kỹ thuật chính để giảm dung lượng ảnh, cải thiện FCP và LCP trên website của bạn.

Tổng quan về Improve image delivery​

Improve image delivery là một insight mới từ Lighthouse, nhận diện những ảnh có kích thước vượt cần thiết và gợi ý cách giảm dung lượng mà không làm giảm chất lượng thấy rõ.

Insight này liệt kê các ảnh có thể tối ưu cùng lượng tiết kiệm ước tính (KB) và hướng dẫn chi tiết cho từng ảnh, sắp xếp theo tiềm năng tiết kiệm byte để ưu tiên xử lý.

Tại sao tối ưu ảnh quan trọng​

Nếu trình duyệt mất ít thời gian hơn để tải ảnh thì các chỉ số liên quan đến hiển thị như First Contentful Paint (FCP) và Largest Contentful Paint (LCP) sẽ cải thiện trực tiếp.

Thời gian tải ảnh phụ thuộc vào dung lượng file ảnh nhưng cũng chịu ảnh hưởng của nhiều yếu tố khác — insight của Lighthouse tập trung vào dung lượng byte của ảnh đã được render trong khung thời gian phân tích.

Bốn kỹ thuật tối ưu ảnh chính​

1. Tăng mức nén ảnh (compression)​

Nén ảnh ở mức hợp lý giúp giảm đáng kể dung lượng. Mục tiêu là tìm tỉ lệ nén sao cho file nhỏ nhất có thể trong khi khác biệt thị giác gần như không thấy.

Bạn có thể dùng công cụ trực tuyến như Squoosh hoặc các bộ chuyển đổi dòng lệnh như cwebp (WebP) và avif-cli (AVIF). Hoặc dùng image CDN như IMGIX hoặc Cloudinary và điều chỉnh tham số chất lượng (IMGIX: q, Cloudinary: q hoặc q_auto).

Với nhu cầu web chung, đặt quality khoảng 70-80 thường giữ ảnh sắc nét đủ và nhẹ file. Sau khi nén, hãy đo ảnh hưởng bằng công cụ so sánh (ví dụ DebugBear Compare).

2. Chuyển sang định dạng ảnh thế hệ mới (WebP, AVIF)​

WebP và AVIF nén hiệu quả hơn JPG/PNG truyền thống, giúp giảm dung lượng lớn. Lighthouse khuyến nghị dùng định dạng hiện đại hoặc tăng nén nếu phù hợp.

Bạn có thể chuyển đổi bằng Squoosh, các công cụ dòng lệnh hoặc qua image CDN. Nếu cần hỗ trợ trình duyệt cũ, cung cấp fallback bằng thẻ

<picture>

và

<source>

.

/assets/images/use-modern-image-format-5679a59b51cb6768600360152c7d20c5.png

3. Dùng video thay GIF cho nội dung động​

Với hoạt ảnh lớn, chuyển từ GIF sang video (MP4 hoặc WebM) sẽ giảm kích thước đáng kể. Lighthouse cảnh báo với GIF lớn thường >100 KB vì GIF thường là tài nguyên lớn và tải chậm.

Bạn có thể chuyển GIF sang WebM/MP4 bằng các công cụ chuyển đổi, rồi tối ưu video (nén, cắt khung, giảm bitrate) để phục vụ web.

4. Ảnh đáp ứng (responsive images)​

Cung cấp nhiều nguồn ảnh để trình duyệt chọn bản phù hợp với kích thước hiển thị giúp tránh tải ảnh quá lớn so với không gian hiển thị.

Loại responsiveness phổ biến là theo chiều rộng (width-based). Lighthouse sẽ báo khi ảnh file lớn hơn cần thiết so với kích thước hiển thị.

Bạn có thể dùng thuộc tính srcset và sizes trên thẻ

<img>

hoặc dùng

<picture>

với

<source>

để phục vụ các kích thước khác nhau. Ví dụ:

[code]<picture>
  <source srcset='image-800.webp 800w, image-400.webp 400w' type='image/webp' media='(max-width: 600px)'>
  <img src='image-800.jpg' srcset='image-800.jpg 800w, image-400.jpg 400w' sizes='(max-width: 600px) 100vw, 800px' alt='Mô tả ảnh'>
</picture>

[/code]

Các bước theo dõi và đo lường​

Để duy trì hiệu năng ảnh, thiết lập giám sát web performance cho các trang quan trọng. Theo dõi thay đổi dung lượng ảnh theo thời gian và cấu hình performance budget để cảnh báo khi vượt ngưỡng.

Dùng báo cáo lab để xem waterfall của từng ảnh, tính toán tiềm năng tiết kiệm và ưu tiên xử lý những ảnh có lợi nhất.

Kết luận​

Tối ưu ảnh gồm nhiều kỹ thuật: nén hợp lý, chuyển sang định dạng hiện đại, thay GIF bằng video cho hoạt ảnh lớn và dùng ảnh đáp ứng. Kết hợp các cách này sẽ cải thiện đáng kể FCP và LCP, mang lại trải nghiệm nhanh hơn cho người dùng.

Bắt đầu bằng việc chạy kiểm tra Lighthouse/DebugBear, xác định các ảnh có tiềm năng tiết kiệm lớn và áp dụng các phương pháp nêu trên theo thứ tự ưu tiên.

Nguồn: https://www.debugbear.com/blog/improve-image-delivery