Tối ưu tốc độ web/blog dùng lazyload image, iframe

Lazy loading là 1 kĩ thuật tối ưu khi làm web, thay vì tải toàn bộ trang web và render ngay từ đầu, kỹ thuật này cho phép tải ngay các thành phần cần thiết để hiển thị tới người dùng và trì hoãn các tài nguyên còn lại cho đến khi cần.

Tối ưu tốc độ web/blog dùng lazyload image, iframe

Tại sao lại phải “lazyload images”?

Giải quyết vấn đề về performance

Ví dụ: khi bạn viết code 100 tấm ảnh chứa trong các thẻ img, browser sẽ tải về tất cả các tấm ảnh ấy, dù cho user có muốn hay không, hay có scroll và xem hết 100 tấm ảnh ấy không. Vì thế, việc lazy-load sẽ giúp browser tải ít resource (ảnh) lại, trả kết quả về user nhanh hơn. Bất kì user nào cũng thích các trang web chạy nhanh hơn là chậm.

Tiết kiệm tài nguyên

Việc “trì hoãn” những resource chưa cần thiết giúp tiết kiệm CPU, GPU, bộ nhớ, băng thông… đặc biệt là trên các thiết bị di động có tốc độ kết nối chậm.

Tăng giải nghiệm người dùng

Ngày nay số lượng người dùng trên mobile đã vượt qua cả trên desktop. Nếu trang của bạn có quá nhiều hình ảnh gây chậm tốc độ tải trang, thì user sẽ cảm thấy rằng đó là một trang web tệ và không còn muốn quay lại lần sau.

Tăng điểm số trên các trang đo tốc độ web, ví dụ như Pagespeed Insights

Nếu bạn quan tâm đến “điểm số” của web thì lazy load sẽ giúp điểm số tăng cao hơn nhé (nếu bạn áp dụng đúng cách). Bên cạnh đó, tốc độ web và trải nghiệm người dùng ảnh hưởng rất lớn đến xếp hạng (ranking) trang web trên Google search nữa nhé.

Dùng lazyload image, iframe

*Yêu cầu: Web/Blog có Jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Script hỗ trợ lazyload image và iframe mà mình muốn nhắc đến đó chính là lazySizes. lazySizes là một lazyloader script được phát triển bởi Alexander Farkas. Lazysizes rất nhanh và nhẹ. Script này hỗ trợ đầy đủ cho hình ảnh, iframe, scripts/widget… LazySizes sẽ tự động ưu tiên tải các tải nguyên quan trọng giúp cải thiện đáng kể hiệu suất của trang web.

Các tính năng nổi bật của lazySizes:

• Hiệu năng cao: script nhẹ, hoạt động mượt mà với số lượng lớn ảnh/iframe
• Linh hoạt: script cung cấp nhiều tiện ích mở rộng cho các tính năng nâng cao. Ví dụ như hiệu ứng LQIP/blurry
• SEO friendly: lazysizes không ẩn ảnh và tài nguyên của bạn khỏi Google. Nên sẽ không sự có khác biệt dù có sử dụng hay không với các bộ máy tìm kiếm.
• Độ tương thích cao: script hoạt động tốt với hầu hết các trình duyệt và hệ điều hành

Để cài đặt Lazyload lazySizes bạn truy cập vào https://afarkas.github.io/lazysizes/lazysizes.min.js sau đó tải về máy hoặc copy toàn bộ script bên trong dán vào file js riêng của bạn.

Enable

    <script src="https://cdn.staticaly.com/gh/aFarkas/lazysizes/gh-pages/lazysizes.min.js" async defer></script>

Đoạn trên bạn chỉ mới thêm javascript vào thôi nên thuộc tính img chưa có gì thay đổi chúng ta cần thêm một functions để làm điều đó.

Thêm class lazyload cho image và iframe 

<script>$("img").each(function(){$(this).attr("src",$(this).attr("src").replace("http://","https://")),$(this).addClass("lazyload"),$(this).attr("data-src",$(this).attr("src")),$(this).removeAttr("src")}),$("source").each(function(){$(this).attr("srcset",$(this).attr("srcset").replace("http://","https://")),$(this).addClass("lazyload"),$(this).attr("data-srcset",$(this).attr("srcset")),$(this).removeAttr("srcset")}),$("iframe").each(function(){$(this).addClass("lazyload"),$(this).attr("data-src",$(this).attr("src")),$(this).removeAttr("src")});</script>