Ảnh nặng là nguyên nhân phổ biến khiến website chậm

Trang chậm làm khách bỏ đi, nhất là khi họ xem bằng điện thoại và mạng không mạnh. Trong nhiều website, ảnh chiếm phần lớn dung lượng tải về. Xử lý ảnh vì vậy thường là việc đáng làm đầu tiên khi muốn trang nhanh hơn.

Vì sao ảnh dễ thành vấn đề

Ảnh chụp từ điện thoại hay máy ảnh thường rất lớn về cả kích thước lẫn dung lượng. Nếu đưa thẳng lên website, trình duyệt phải tải cả tệp lớn đó dù chỉ hiển thị trong một khung nhỏ. Mười ảnh như vậy trong một trang là đủ làm trang nặng đáng kể.

Ảnh cũng là thứ người quản trị hay tải lên mà không để ý, vì mắt chỉ thấy ảnh đẹp, không thấy dung lượng.

1. Đúng kích thước

Đừng đưa ảnh rộng 4000 điểm ảnh vào khung chỉ rộng 400. Hãy thu nhỏ ảnh về kích thước gần với kích thước hiển thị tối đa trước khi tải lên. Khung hiển thị lớn trên màn hình lớn thì cần ảnh lớn hơn, nhưng hiếm khi cần hơn vài nghìn điểm ảnh.

2. Định dạng hiện đại

WebP và AVIF thường nhẹ hơn JPG, PNG ở chất lượng nhìn tương đương. Hầu hết trình duyệt phổ biến hiện nay đọc được WebP. Dùng JPG cho ảnh chụp là chấp nhận được, nhưng đổi sang WebP thường giúp giảm đáng kể dung lượng.

3. Nén có kiểm soát

Nén là giảm dung lượng bằng cách bỏ bớt chi tiết mắt khó nhận ra. Nén quá tay làm ảnh vỡ, nén vừa phải thì khó thấy khác biệt. Cách làm: thử vài mức, so ảnh gốc và ảnh nén ở kích thước hiển thị thật, chọn mức nhẹ nhất mà bạn vẫn hài lòng.

4. Tải khi cần

Ảnh nằm dưới màn hình không cần tải ngay khi mở trang. Kỹ thuật tải lười (lazy loading) chỉ tải ảnh khi khách cuộn gần tới. Nhờ vậy phần khách thấy đầu tiên hiện nhanh hơn.

Ngược lại, ảnh lớn nhất ở đầu trang nên được ưu tiên tải sớm, đừng bắt nó chờ.

5. Lưu đệm

Ảnh logo, ảnh giao diện ít đổi nên để trình duyệt của khách giữ lại. Lần xem sau, trình duyệt dùng bản đã lưu thay vì tải lại. Việc này cấu hình ở máy chủ, người dùng thường không phải làm gì.

Tự kiểm tra nhanh

• Mở trang trên điện thoại bằng mạng di động, trang hiện nội dung chính trong vài giây?
• Ảnh lớn nhất có đúng kích thước khung hiển thị không?
• Ảnh dưới màn hình có tải khi cuộn tới không?
• Ảnh mới tải lên có bị nặng bất thường không?

Công cụ như PageSpeed Insights của Google cho bạn danh sách ảnh cần xử lý, rất tiện để biết nên bắt đầu từ đâu.

Chúng tôi xử lý thế nào

Trang quản trị của chúng tôi tự thu nhỏ ảnh quá lớn và đổi ảnh JPG, PNG sang WebP khi bạn tải lên. Bạn vẫn nên chụp ảnh sáng, rõ và đừng gửi bản quá lớn không cần thiết.

Lưu ý: tốc độ còn phụ thuộc nhiều thứ khác như máy chủ, mã nguồn, phông chữ. Ảnh chỉ là nguyên nhân phổ biến, không phải nguyên nhân duy nhất.

Bước tiếp theo

Xem bài học chèn ảnh và tối ưu tốc độ trong Học viện để làm từng bước. Nếu website hiện tại của bạn chậm, gửi địa chỉ cho chúng tôi xem giúp.