Danh sách kiểm tra tối ưu ảnh cho website: 10 bước để trang nhanh hơn

Ảnh có dung lượng lớn, thường có rất nhiều ảnh, và trình duyệt phải tải chúng xong thì trang mới trông hoàn chỉnh. Ảnh nặng gây khó chịu cho người truy cập mạng chậm, làm tăng tỷ lệ thoát trang và kéo điểm trải nghiệm trang xuống, như chỉ số Largest Contentful Paint.

Tin tốt là ảnh phản ứng rất tốt với những cách sửa đơn giản. Chỉ vài thay đổi cũng có thể giảm dung lượng trang đi một nửa hoặc hơn.

Hãy bắt đầu từ trên xuống. Ba cách đầu tiên thường mang lại phần lớn cải thiện với rất ít công sức.

Chuyển sang WebP hoặc AVIF

• Ưu điểm: file nhỏ hơn rõ rệt và trang nhanh hơn.
• Nhược điểm: cần phương án dự phòng và kiểm tra một chút. Xem cách chuyển ảnh website sang WebP.

Dùng CDN hoặc dịch vụ xử lý ảnh

• Ưu điểm: tự động chọn định dạng, kích thước và phân phối nhanh.
• Nhược điểm: tốn tiền và thêm một thứ phải phụ thuộc.

Tải lười

• Ưu điểm: ít dữ liệu ban đầu hơn và màn hình đầu hiện nhanh hơn.
• Nhược điểm: gây hại cho trang nếu áp dụng cho ảnh chính hoặc quên khai báo kích thước.

Chạy cùng những trang đó qua PageSpeed Insights hoặc Lighthouse trước và sau khi sửa. So sánh tổng dung lượng ảnh và thời gian Largest Contentful Paint, và đọc danh sách ảnh quá khổ hoặc chưa tối ưu, vì nó chỉ ra chính xác file nào cần sửa tiếp. Báo cáo Core Web Vitals trong Search Console cho thấy trải nghiệm thực của người truy cập, nhưng phải mất vài tuần mới cập nhật. Để hiểu sâu hơn về các chỉ số này, hãy đọc ảnh ảnh hưởng đến Core Web Vitals thế nào.

• Tối ưu các ảnh trang trí mà bỏ qua ảnh lớn nhất ở đầu trang.
• Tải lười tất cả, kể cả ảnh đầu tiên.
• Nén đi nén lại cùng một file thay vì làm từ bản gốc.
• Quên khai báo kích thước, làm trang bị nhảy.
• Chỉ kiểm tra một lần trên mạng nhanh. Hãy thử cả trên điện thoại với mạng chậm hơn.