Tải trễ ảnh (lazy loading): Khi nào có ích, khi nào có hại
Tải trễ nghĩa là trình duyệt chờ đến khi người xem sắp nhìn thấy một ảnh thì mới tải nó. Dùng đúng chỗ, nó tiết kiệm dữ liệu và làm trang có cảm giác nhanh hơn. Dùng cho mọi ảnh, nó có thể làm bức ảnh quan trọng nhất hiện muộn hơn mức cần. Bài này giải thích khi nào nó giúp ích và khi nào gây hại.
Tải trễ là gì và hoạt động ra sao
Thông thường, trình duyệt bắt đầu tải mọi ảnh trên trang gần như ngay lập tức, kể cả những ảnh nằm rất xa phía dưới mà người xem có thể không bao giờ cuộn tới. Tải trễ thay đổi điều đó: ảnh nằm xa vùng đang hiển thị chỉ được tải khi người xem cuộn đến gần.
Các trình duyệt hiện đại hỗ trợ tính năng này sẵn. Hãy thêm loading="lazy" vào thẻ img, ví dụ <img src="photo.jpg" loading="lazy" width="800" height="600" alt="...">, và trình duyệt lo phần còn lại. WordPress thêm thuộc tính này vào ảnh theo mặc định.
Lợi ích và rủi ro
Lợi ích
- Trang hiện nội dung quan trọng sớm hơn, vì ít file phải tranh nhau băng thông lúc đầu.
- Người xem không cuộn xuống thì không phải tải những ảnh họ chẳng bao giờ thấy, tiết kiệm dữ liệu.
- Các bài viết dài, thư viện ảnh và danh sách sản phẩm nhẹ đi rõ rệt.
Rủi ro
- Tải trễ ảnh lớn đầu tiên làm nó chậm lại và có thể làm xấu LCP.
- Không có kích thước thì ảnh bật ra và đẩy nội dung xung quanh, làm tăng xê dịch bố cục.
- Nếu ảnh tải quá muộn, người xem thấy các khoảng trống khi cuộn nhanh.
- Một số thư viện tải trễ bằng JavaScript giấu địa chỉ ảnh thật khỏi công cụ tìm kiếm.
Mục đích là chỉ trì hoãn những gì người xem chưa nhìn thấy ngay.
Nên dùng ở đâu và đừng dùng ở đâu
| Ảnh | Có tải trễ không? | Vì sao |
|---|---|---|
| Banner ở đầu trang | Không | Thường là phần tử LCP và cần tải trước tiên |
| Ảnh đầu tiên trong slide đang hiển thị | Không | Người xem thấy nó ngay lập tức |
| Ảnh nằm sâu hơn trong bài viết | Có | Chưa cần đến khi người xem cuộn tới |
| Lưới sản phẩm từ hàng thứ hai trở đi | Có | Tiết kiệm băng thông cho danh sách dài |
| Ảnh trong tab hay accordion đang ẩn | Có | Chưa nhìn thấy cho đến khi mở ra |
Quy tắc chung: ảnh nằm trong màn hình đầu tiên của trang thì tải bình thường, còn mọi ảnh khác có thể tải trễ.
Từng bước: thiết lập đúng cách
- 1Liệt kê các ảnh trên trang và đánh dấu những ảnh nhìn thấy được mà không cần cuộn.
- 2Để những ảnh đó không có
loading="lazy". Với ảnh chính, hãy thêm cảfetchpriority="high". - 3Thêm
loading="lazy"cho các ảnh còn lại. - 4Thêm
widthvàheight(hoặc tỷ lệ khung hình trong CSS) cho mọi ảnh. Đổi kích thước ảnh hiển thị đúng kích thước pixel của từng file. - 5Làm từng file nhẹ đi. Nén bằng Nén ảnh để ảnh nhẹ khi được tải về.
- 6Kiểm tra plugin và giao diện. Một số plugin tối ưu tải trễ mọi thứ. Hãy chắc rằng ảnh đầu tiên được loại trừ.
- 7Thử trên điện thoại với kết nối bị giới hạn rồi cuộn trang. Ảnh phải hiện ra ngay trước khi bạn cuộn tới.
Tải trễ có sẵn của trình duyệt hay thư viện JavaScript?
loading="lazy"có sẵn: lựa chọn đơn giản và an toàn nhất. Không cần mã thêm, các trình duyệt hiện đại hỗ trợ, và công cụ tìm kiếm tìm thấy được ảnh. Hạn chế là ít kiểm soát được việc ảnh bắt đầu tải sớm đến đâu.- Thư viện JavaScript: cho bạn kiểm soát ngưỡng và ảnh giữ chỗ, nhưng phải duy trì thêm mã và có thể giấu địa chỉ ảnh khỏi bot nếu URL thật không nằm trong HTML.
Với đa số web, tải trễ có sẵn là lựa chọn mặc định đúng.
Những lỗi thường gặp
- Tải trễ ảnh banner. Đây là lỗi phổ biến nhất và tốn kém nhất. Xem bài về Core Web Vitals và hình ảnh.
- Bỏ qua kích thước, gây xê dịch bố cục khi ảnh hiện ra.
- Chỉ đặt địa chỉ ảnh thật trong thuộc tính data, mà công cụ tìm kiếm có thể không theo dõi.
- Nghĩ rằng tải trễ thay thế được việc tối ưu. File nặng vẫn nặng khi được tải về, nên vẫn phải đổi kích thước và nén.
Câu hỏi thường gặp
Tải trễ có ảnh hưởng xấu đến SEO không?
Tải trễ có sẵn của trình duyệt không ảnh hưởng xấu đến SEO, vì công cụ tìm kiếm tìm thấy được ảnh. Vấn đề phát sinh khi địa chỉ ảnh thật bị giấu trong JavaScript, hoặc khi ảnh chính bị tải trễ làm trang chậm đi.
Tôi có nên tải trễ mọi ảnh không?
Không. Các ảnh nhìn thấy ngay ở màn hình đầu tiên, nhất là ảnh chính, nên tải bình thường. Hãy tải trễ những ảnh còn lại.
loading="lazy" làm gì?
Nó bảo trình duyệt hoãn việc tải một ảnh cho đến khi người xem cuộn tới gần. Tính năng này chạy sẵn trong các trình duyệt hiện đại, không cần JavaScript.
Vì sao ảnh tải trễ làm trang bị giật?
Trình duyệt không biết kích thước ảnh cho đến khi nó tải xong, nên không thể dành sẵn chỗ. Hãy thêm thuộc tính width và height, hoặc tỷ lệ khung hình trong CSS, cho mọi ảnh.
WordPress có tải trễ ảnh theo mặc định không?
Các bản gần đây tự thêm loading="lazy" vào ảnh và cố gắng tránh áp dụng cho ảnh đầu tiên. Hãy xem HTML của trang, vì giao diện và plugin có thể thay đổi điều này.