Lazy loading là gì ? Cách tăng tốc độ load page với Lazy loading

1 Lazy Loading là gì?

Lazy Loading - dịch đại khái là lưởi tải, dễ hiểu hơn thì nó là việc load dữ liệu khi cần sử dụng đến chúng.Chẳng hạn nhiều người dùng khi vào 1 page còn chẳng kéo xuống hết đến cuối trang để xem toàn bộ nội dung thì ta cần gì load toàn bộ nội dung trước?

Việc ta nên làm là người dùng scroll đến đâu ta sẽ load dữ liệu đến đấy. Lazy Loading có thể áp dụng cho bất cứ resource nào trên 1 page,thậm chí là file JavaScript . Giờ thì chúng ta tập trung vào việc Lazy Loanding Images (load images khi thật sự cần).

2 Tại sao nên sử dụng Lazy Loading

Lazy loading giảm việc tải dữ liệu => Tốc độc load trang nhanh hơn và giảm chí phí (bằng cách giảm tổng số bytes transferred)

Nó phát huy hiệu quả khi bạn duyệt một trang web trên trình duyệt thiết bị di động, mọi thử được load khi đượt trượt đến giúp giảm tải và tăng hiệu suất trải nghiệm lên, tăng xác xuất "giữ" người dùng tiếp tục ở lại và đọc website lâu hơn.

3 Ưu và Nhược điểm Lazy Loading

- Ưu điểm dễ thấy là xem đến đâu nội dung tải đến đấy, giúp mọi thứ hoạt động nhẹ nhàng hơn.

- Nhược điểm: Nếu như có một lỗi gì đó, kết nối chậm - toàn bộ hình ảnh, video ...sẽ không được thực thi sự kiện load.

4 Bản chất của Lazy Loading là gì ?

Ở đây tối lấy ví dự đơn giản khi sử dụng Lazy Loanding Images cho thẻ img

Chèn hình ảnh vói thẻ img bình thường

<img src="/path/to/some/image.jpg" >

Chèn hình ảnh có sử dụng Lazy Loanding

<img class="lazyload" data-src="/path/to/some/image.jpg" >

Như đã biết trình duyệt đọc thuộc tính src để trigger đến việc tải ảnh. khi sử dụng Lazy load thì không có thẻ src cho nên ảnh nó chưa được load và hiển thị ra.

Đến khi người dùng kéo đến phần nội dung có hình đó thì thư viện lazyload bắt lấy sự kiện scroll của người dùng và add link từ data-src vào lại thuộc tính src và thế là hình xuất hiện.

5 Lazy Loading thì dùng thư viện nào ổn nhất ?

LazySizes là thư viện có tốc độ cao, tối ưu SEO và tự khởi tạo (self-initializing) cho mục đích lazy load ảnh (bao gồm cả ảnh đáp ứng picture / srcset), iframe, script / widget và nhiều thành phần khác nữa. Nó cũng ưu tiên các tài nguyên dựa trên sự khác biệt về tầm mức quan trọng, trong đó.

LazySizes ưu tiên các phần tử nằm trong khung nhìn và gần khung nhìn trình duyệt (near view elements) để tối ưu tốc độ tải nhận thức (perceived performance) nhanh hơn.

Cách sử dụng:

+ Chèn đoạn này vào header hoặc trước thẻ body đóng, và phải đứng sau thư viện jquery trong code của bạn.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.0/lazysizes.min.js" async=""></script>

+ Đổi thẻ img có sẳn sang kiểu có áp dụng lazyload 

<img  src="/path/to/some/image.jpg" >

Đổi thành

<img class="lazyload" data-src="/path/to/some/image.jpg" >

+ Nếu muốn hình có tính năng responsive

<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />

Lưu ý: Tránh sử dụng lazy loading cho ảnh trong khung nhìn đầu tiên để không bị lỗi Core Web Vitals

6 Kết Luận

Qua bài viết này bạn đã hiểu hơn về lazy loading là gì ? Nó giúp bạn tăng điểm Perfomance khi test với Google Lighthouse đấy, tin tôi đi.

Chúc bạn thực hiện thành công !