Khái quát
Với những website cần hiển thị nhiều hình ảnh, việc thời gian loading ảnh quá lâu là một vấn đề về perfomance thường xuyên gặp phải. Để giải quyết vấn đề này có một phương pháp khá đơn giản và thường xuyên được áp dụng, đó là Lazy Loading
Lazy Loading là gì
Lazy Loading là phương pháp sẽ không tiến hành loading trước toàn bộ resource trong Website, mà thay vào đó sẽ chỉ loading lần lượt resource vào thời điểm cần thiết. Nói cách khác, chỉ khi nào cần hiển thị tới ảnh nào đó, thì mới bắt đầu loading ảnh đó.
Hiệu quả của Lazy Loading
Với việc loading thông thường, những ảnh nằm ngoài phạm vi hiển thị của browser cũng sẽ được loading trước.
Vì thế, sẽ tốn khá nhiều thời gian đến lúc loading được hết các ảnh.
Với Lazy Loading, những ảnh nằm ngoài phạm vi hiển thị của browser sẽ không loading, nhờ vậy giúp tăng tốc độ hiển thị màn hình.
Các bước tiến hành
Chúng ta sẽ tiến hành theo các bước dưới đây sử dụng lazysizes
1. Download lazysizes.min.js
Pull source code lazysizes từ Github. Ở thời điểm hiện tại 05/2021, version mới nhất đang là 5.3.1.
2. Include lazysizes vào source code của webpage.
<script src="lazysizes.min.js" async=""></script>
3. Thêm class lazyload vào các thẻ img của ảnh mong muốn
<img class="lazyload" src="image.jpg">
Sau khi được thêm class="lazyload", những ảnh này sẽ trở thành đối tượng xử lí của lazysizes.
4. Thay đổi thuộc tính src thành data-src
<img class="lazyload" data-src="image.jpg">
Chúng ta đã hoàn thành việc tiến hành lazy loading chỉ với vài bước trên.
Thử nghiệm
Phương pháp
Chúng ta sẽ chuẩn bị sẵn 2 page:
- (a) Không sử dụng Lazy Loading
- (b) Có sử dụng Lazy Loading
Nội dung mỗi page đều có khoảng 15 bức ảnh. Ta sẽ tiến hành đo đạc, so sánh thời gian loading của mỗi page trong trường hợp không có cache.
Nội dung
<body> <div> <img class="lazyload" data-src="img-001.jpg"> </div> <div> <img class="lazyload" data-src="img-002.jpg"> </div> <div> <img class="lazyload" data-src="img-003.jpg"> </div> <!-- 省略 --> <div> <img class="lazyload" data-src="img-013.jpg"> </div> <div> <img class="lazyload" data-src="img-014.jpg"> </div> <div> <img class="lazyload" data-src="img-015.jpg"> </div> <script src="lazysizes.min.js" async></script>
</body>
Kết quả
(a) Page không sử dụng Lazy Loading
Thời gian loading toàn bộ mất khoảng 1.47s. Trong đó cần loading 15 bức ảnh, gửi 17 requests và lấy về 6.1MB resourses
Khi tính score trên LightHouse cũng đã xuất hiện cảnh báo "Avoid enormous network payloads"
(b) Page có sử dụng Lazy Loading
Thời gian loading chỉ mất khoảng 0.584s.
Do chỉ cần loading 4 bức ảnh trong phạm vi hiển thị, nên cũng chỉ phải load khoảng 1.2MB resources
Khi scroll browser xuống tới vùng hiển thị của những ảnh khác, những ảnh này sẽ được loading tương ứng.
Khi tính score trên LightHouse cũng thì không còn cảnh báo "Avoid enormous network payloads".
Có thể thấy được việc performance đã được cải thiện.
Kết
Lazy Loading là một phương pháp tương đối dễ triển khai và thường xuyên được sử dụng để cải thiện hiệu suất trên các trang web sử dụng nhiều hình ảnh.