Cài đặt Lazy Load Image tăng tốc độ tải trang
Tốc độ website hiện nay quan trọng hơn bao giờ hết. Nó tác động trực tiếp đến trải nghiệm người dùng và xếp hạng của trang web trên Google. Bài hôm nay Bizfly Cloud sẽ hướng dẫn các bạn thực hiện Lazy Load Images để cải thiện đáng kể thứ hạng website trong BXH và tăng trải nghiệm người dùng!
Website chứa nhiều ảnh gây chậm tốc độ tải trang
Ảnh là nội dung rất quan trọng đối với các trang Web. Tuy nhiên, một website lớn chứa nhiều hình ảnh với quá nhiều imagesloaded cùng lúc sẽ làm giảm tốc độ tải trang đáng kể, khiến người đọc cảm thấy khó chịu khi họ không đủ kiên nhẫn để chờ đợi. Lazy Load Image là phương pháp rất hiệu quả trong trường hợp nêu trên.
Bằng cách chỉ hiển thị ảnh lên khi người dùng cuộn trang đến ảnh đó, không cần phải load tất cả hình ảnh từ ban đầu, nó sẽ giúp website tải nhanh hơn rất nhiều đồng thời tiết kiệm được nhiều băng thông cho cả chủ sở hữu website và khách truy cập.
Đọc thêm: Lazy loading là gì? Khi nào nên sử dụng để tăng tốc độ website?
Cách cài đặt Lazy Load Image
Để cài đặt Lazy load image, bạn có thể áp dụng các cách như sau:
1. Sử dụng bower hoặc npm
$ bower install jquery.lazyload
$ npm install jquery-lazyload
2. Sử dụng minified version (jquery.lazyload.min.js) trực tiếp hoặc sử dụng CDN
Sử dụng jquery: http://jquery.eisbehr.de/lazy/
![Cài đặt Lazy Load Image tăng tốc độ tải trang - Ảnh 1. Cài đặt Lazy Load Image tăng tốc độ tải trang - Ảnh 1.](https://techvccloud.mediacdn.vn/2018/6/12/photo-1-1528797500107285695717.png)
Sử dụng dịch vụ CDN của Bizfly Cloud: https://bizflycloud.vn/cdn
![Cài đặt Lazy Load Image tăng tốc độ tải trang - Ảnh 2. Dịch vụ CDN của Bizfly Cloud](https://techvccloud.mediacdn.vn/thumb_w/650/280518386289090560/2024/7/3/bizfly-cdn-17199776966802006877042.jpg)
Hướng dẫn sử dụng Image Lazy Load
1. Để tạo Lazy Load cho image nào đó
// html
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
// javascript
$("img.lazy").lazyload
Trong đó:
- data-original: sử dụng thay thế cho scr là hình ảnh để hiển thị.
- Để tạo Lazy load, bạn phải gọi javascript method: image_selector.lazyload()
- Xem ví dụ trực quan kiểu load này, bạn hãy click link sau:
https://appelsiini.net/projects/lazyload/enabled/
2. Setting Threshold (Cài đặt Threshold)
![Cài đặt Lazy Load Image tăng tốc độ tải trang - Ảnh 3. Cài đặt Lazy Load Image tăng tốc độ tải trang - Ảnh 3.](https://techvccloud.mediacdn.vn/thumb_w/650/2019/10/4/photo-1-1570179698863859810444.jpg)
Lazy Loading Images
Mặc định, hình ảnh sẽ hiển thị khi mình scroll đến ảnh đó tức là khi ảnh đó xuất hiện trên màn hình nó mới hiển thị lên.
Nếu bạn muốn ảnh hiển thị lên trước khi scroll đển trong khoảng nào đó, bạn có thể sử dụng threshold.
Nếu set threshold bằng 200, image đó sẽ load lên trước khi bạn scroll đến 200 pixels.
$("img.lazy").lazyload({ threshold : 200 });
3. Event to Trigger Loading (Sự kiện để thực hiện Load ảnh)
Mặc định, hình ảnh sẽ chờ đến lúc nào bạn scroll đển nó mới hiển thị. Nhưng nếu bạn chỉ muốn nó hiển thị lên khi có hành động click
hoặc mouseover
. Bạn sử dụng như sau:
$("img.lazy").lazyload({ event : "click" });
4. Sử dụng Effects
Bạn có thể thêm các effects khi ảnh hiển thị lên như sau: $("img.lazy").lazyload({ effect : "fadeIn" });
5. Xử lý với các trình duyệt không hỗ trợ javascript
Thường thì khi bạn sử dụng Lazy load cho trang web, công cụ sẽ chạy tốt trên các trình duyệt hỗ trợ javascript với lazyload js.
![Cài đặt Lazy Load Image tăng tốc độ tải trang - Ảnh 5. Cài đặt Lazy Load Image tăng tốc độ tải trang - Ảnh 5.](https://techvccloud.mediacdn.vn/2018/12/10/photo-2-1544413394321440923479.jpg)
Còn nếu không thì sao? Các images đó sẽ không được load lên?
Để xử lý trường hợp này, bạn dùng cách sau:
<img class="lazy" data-original="img/example.jpg" width="640" heigh="480">
<noscript>
<img src="img/example.jpg" width="640" heigh="480"
</noscript>
Sử dụng <noscript></noscript>, nếu trình duyệt không hỗ trợ javascript, images đó vẫn hiển thị bình thường.
- Để tránh placeholder image và image thật hiển thị cùng một lúc, bạn nên ẩn ảnh placeholder đi như sau:
.lazy
{ display: none;
}
- Đối với các trình duyệt hỗ trợ javascript, hiển thị lên ảnh placeholder lại như sau:
$("img.lazy").show().lazyload();
Cảm ơn các bạn đã theo dõi!
Theo: viblo.asia
>> Có thể bạn quan tâm: Top 6 công cụ giảm dung lượng ảnh mà vẫn giữ nguyên chất lượng hiển thị trên website
Kể từ ngày 05/11/2018, VCCloud chính thức đổi tên thành Bizfly Cloud - là nhà cung cấp các dịch vụ đám mây hàng đầu tại Việt Nam hiện nay với các dịch vụ nổi bật như: Bizfly Cloud Server, Bizfly CDN, Bizfly Load Balancer, Bizfly Pre-built Application, Bizfly Business Mail, Bizfly Simple Storage. Hãy tăng tốc thích nghi cho doanh nghiệp cùng các giải pháp công nghệ của Bizfly Cloudtại đây.