Kỹ thuật Lazy Loading Image giúp website tăng tốc độ tải trang. Bởi khi dùng kỹ thuật này các hình ảnh trên website sẽ hiển thị theo từng màn hình scroll bạn dùng.
Khi sử dụng kỹ thuật Lazy Loading bạn tự tin dùng những hình ảnh chất lượng. Từ đó giúp trải nghiệm người dùng tốt hơn khi website sử dụng những hình ảnh mờ.
Với những website thương mại điện tử, sản phẩm thường sử dụng nhiều hình ảnh. Khi sử dụng hình ảnh nhiều sẽ tạo ra dung lượng lớn. Từ đó ảnh hưởng đến việc load website, làm người dùng khó chịu vì thời gian load quá lâu.
Kỹ thuật Lazy Loading Image là gì?
Lazy Loading Image được hiểu nôm na là việc load hình ảnh khi bạn cần sử dụng đến chúng. Khi website có nhiều hình ảnh cần tải, nếu cần tải toàn bộ thì tốc độ tải website sẽ chậm. Từ đó ảnh hưởng đến trải nghiệm người dùng, ảnh hưởng đến SEO.
VD: Khi bạn vào trang thương mại điện tử như https://shopee.vn/, https://www.lazada.vn/…
Bạn để ý khi vào trang web thì hình ảnh lúc đầu sẽ là ảnh demo sau đó 1 chút sẽ load ra hình ảnh sản phẩm. Và khi các bạn kéo xuống tới đâu thì hình ảnh sản phẩm, bài viết,… sẽ hiển thị ra đến đó.
Những lợi ích mang lại khi sử dụng lazy loading image
Giải quyết vấn đề hiệu suất (performance)
Khi website của bạn có 60-80 hình ảnh hoặc có thể hơn nữa. Thì trình duyệt (browser) sẽ tải về tất cả các tấm ảnh ấy. Nhưng có trường hợp tải hết rồi nhưng người dùng không xem các tấm ảnh đó thì sao. Do đó lazy-load images sẽ giúp trình duyệt sẽ nhận ít các source từ server, nên trả kết quả về nhanh hơn. Bất kì người dùng nào cũng muốn website chạy nhanh hơn là chậm.
Tiết kiệm tài nguyên
Việc làm chậm các resource chưa cần thiết giúp tiết kiệm CPU, bộ nhớ, băng thông… Điều đó sẽ tối ưu hình ảnh hơn trên các thiết bị di động có tốc độ kết nối chậm.
Tăng trải nghiệm người dùng
Trải nghiệm người dùng (UX – User Experience) có nhiều tiêu chí. Một trong các tiêu chí được nhiều người quan tâm là tốc độ load trang. Khi website tải quá nhiều dữ liệu chưa cần thiết sẽ làm chậm tốc độ tải trang web.
Hiện nay lượng người dùng trên smartphone vượt qua cả trên desktop. Theo thống kê VPN Mentor, năm 2021 số lượng truy cập website đến từ thiết bị di động toàn cầu là 48,2%. Nên website có nhiều hình ảnh gây chậm tốc độ tải trang. Người dùng sẽ từ bỏ truy cập và sẽ quay lại vào trang khác.
Tăng điểm số tối ưu tốc độ website
Bạn thường quan tâm đến “điểm số” của website. Giải pháp lazy load images sẽ giúp điểm số tăng cao đáng kể. Ngoài ra tốc độ website và trải nghiệm người là tiêu chí cao xếp hạng (ranking) trang web trên Google.
Những lợi ích mang lại khi dùng Lazy Loading Image
Trường hợp website có nhiều dữ liệu (hình ảnh, kí tự đặc biệt..) làm chậm tốc độ tải trang và giảm hiệu suất trang web.
Website cần tối ưu tốc độ trên thiết bị di động và desktop. Người dùng hướng đến là những người sống ở các trung tâm hiện đại, phát triển. Khi đó những lỗi gặp với Javascript của Lazy-load sẽ không bị phát sinh vì có tốc độ kết nối cao.
Những lưu ý khi dùng Lazy Loading Image
Đầu tiên chúng ta cần hiểu rõ về Lazy Loading và tính năng Lazy Loading đem lại cho website. Lazy Loading là thuộc tính để “điều khiển” sự xuất hiện của các dữ liệu trên website (thường là hình ảnh). Chúng ta sử dụng Lazy-load với thuộc tính Loading.
Thuộc tính Loading gồm ba giá trị với chức năng như: lazy, eager, auto.
- Lazy – lazy-loading (lười tải): trình duyệt cần lazy-load dữ liệu này.
- Eager – eager (tha thiết, háo hức): trình duyệt cần phải tải dữ liệu ngay lập tức hoặc càng sớm càng tốt. Khi dữ liệu đang load với cơ chế lazy được đổi sang eager thì nó sẽ lập tức được tải ngay.
- Auto – auto (tự động): trình duyệt quyết định việc có nên lazy-load dữ liệu hay không.
Những kỹ thuật sử dụng Lazy Loading Image
Dùng thuộc tính Loading
Cách này áp dụng khá đơn giản, không cần dùng Javascript. Vì vậy sẽ không có lỗi xảy ra với các hình ảnh trên website. Bạn yêu cầu cho trình duyệt những hình ảnh nào cần lazy-load bằng thuộc tính Loading các giá trị tương ứng lazy, eager, auto.
Mời bạn xem thêm: Điểm nổi bật của 3 Plugin tối ưu hình ảnh top WordPress
Dùng Fallback hoặc Polyfill
Đối với các trình duyệt không hỗ trợ Loading. Vậy để triển khai lazy-load chúng ta dùng Fallback (dự phòng) và Polyfill (một mã triển khai tính năng nào đó mà trình duyệt không hỗ trợ)
Ngoài ra bạn cũng viết code với thuộc tính Loading để thực thi việc lazy-load các hình ảnh.
Dùng Intersection Observer API
Intersection Observer API: giám sát và triển khai một thao tác với dữ liệu (hình ảnh) khi người dùng click, move…
Intersection Observer API hỗ trợ lazy loading image. Nhưng không hỗ trợ thuộc tính Loading như hai cách trên. Bạn chỉ dùng lệnh lazy Image khi muốn lazy loading các hình ảnh trên trang. Ngoài ra Intersection Observer API cũng lazy loading cả background bằng lệnh lazy background.
“Lazy loading images” có những nhược điểm gì?
Có thể nói lazy-load là một kĩ thuật hiện đại và hiệu quả. Tuy nhiên việc sử dụng lazy-loading images sẽ có một số hạn chế như sau:
Page bị nhảy khi tấm ảnh được load (layout shift)
Điều này là thường hay gặp khi áp dụng lazy loading. Bởi vì trình duyệt không biết được kích thước của tấm ảnh trước khi nó thật sự hiển thị. Do đó khi load xong tấm ảnh, hình ảnh sẽ đẩy content xung quanh ra xa gây giật trang.
Cách hiệu quả nhật là chỉ ra kích thước của tấm ảnh. Trình duyệt sẽ dành chỗ trước cho tấm ảnh đó trên layout. Khi tấm ảnh hiển thị sẽ lấp đúng khoảng trống đó và không gây lỗi layout shift.
<img src="sample.png" loading="lazy" width="200" height="200">
<img src="sample.png" loading="lazy" style="height:200px; width:200px;">Lưu ý nên hạn chế lazy-load những tấm ảnh ở phần đầu của trang (thuật ngữ chuyên môn gọi là above-the-fold) để tránh việc layout shift.
Khi web bị tắt Javascript
Đối với người dùng tắt Javascript trên trình duyệt (tỉ lệ rất thấp). Khi sử dụng Intersection Observer hay scroll sẽ không chạy. Những hình ảnh trên website sẽ không xuất hiện. Bạn có thể sử dụng thẻ noscript để giải quyết vấn đề.
<img data-src="sample.jpg">
<noscript>
<img data-src="sample.jpg" />
</noscript>Không tốt cho SEO
Khi Google Bot crawl trang web của bạn, nó sẽ không hiểu data-src là gì mà nó chỉ hiểu src mà thôi. Khi đó hình ảnh đó sẽ bị lỗi và không index google. Tuy nhiên vẫn có giải pháp dành cho bạn có thể tham khảo như:
Feed cho GoogleBot bằng cách thủ công thông qua sitemap (nếu bạn là dân SEO thì bạn sẽ hiểu nó là gì)
Kiểm tra xem navigator.userAgent có phải là bot của Search Engine không. Nếu phải thì ta bỏ qua việc lazy loading bằng cách thực hiện ngay thao tác copy từ data-src sang src.
Thêm code Javascript chỉ để lazy loading vài tấm ảnh
Với số lượng ảnh cần lazy loading ít và không ảnh hưởng đến tốc độ tải trang. Chúng tôi khuyên bạn không nên sử dụng lazy load.
Điều này làm tốn thêm tài nguyên và dung lượng website. Bạn nên tìm cách giảm dung lượng hình ảnh và sử dụng native lazy loading nếu có thể.
Xin cảm ơn các Anh/Chị đã tham khảo bài viết Lazy Loading Image của Webaoe. Nếu có chỗ nào còn thiếu sót, xin các Anh/Chị góp ý ở phía dưới để hoàn thiện bài viết hơn.
