Cách bật Lazyloading hình ảnh trên trang Blogspot
Mục lục bài viết
Lazyloading là gì?
Lazyloading là một kỹ thuật tối ưu hóa giúp trì hoãn việc tải hình ảnh và nội dung đa phương tiện cho đến khi người dùng cuộn trang đến vị trí chúng xuất hiện. Điều này giúp giảm thời gian tải ban đầu của trang, tối ưu băng thông và cải thiện tốc độ tổng thể. Khi bật Lazyloading, hình ảnh sẽ chỉ được tải khi cần thiết, tức là khi người dùng thực sự nhìn thấy chúng, thay vì tải toàn bộ hình ảnh ngay từ khi trang web được mở.Lợi ích mà Lazyloading mang lại cho Blogspot của bạn
- Tăng tốc độ tải trang: Tốc độ tải trang nhanh không chỉ cải thiện trải nghiệm người dùng mà còn làm tăng thời gian người dùng ở lại trang.
- Tối ưu SEO: Google ưu tiên những trang có thời gian tải nhanh, giúp cải thiện thứ hạng tìm kiếm.
- Tiết kiệm băng thông: Lazyloading giúp giảm đáng kể lưu lượng dữ liệu mà trình duyệt của người dùng phải tải xuống, nhất là với những trang có nhiều hình ảnh.
- Nâng cao trải nghiệm người dùng: Không còn tình trạng trang bị "giật" do tải quá nhiều nội dung cùng lúc, người dùng sẽ cảm thấy mượt mà hơn khi duyệt trang.
Cách bật Lazyloading hình ảnh trên Blogspot
Truy cập vào quản trị Blogspot
- Trước hết, bạn cần đăng nhập vào trang quản trị Blogspot của mình. Tại đây, chúng ta sẽ tiến hành chỉnh sửa mã HTML để kích hoạt Lazyloading cho hình ảnh.
- Truy cập vào Blogspot của bạn.
- Ở phía bên trái, chọn Chủ đề (Theme).
- Nhấp vào Chỉnh sửa HTML để mở trình soạn thảo mã nguồn của trang web.
Thêm đoạn mã Lazyloading vào Blogspot
Lazyloading không phải là tính năng mặc định của Blogspot, nhưng chúng ta có thể thêm thủ công bằng cách chèn một đoạn mã JavaScript đơn giản vào cuối trang HTML.Trong trình soạn thảo HTML, bạn sử dụng phím Ctrl + F và tìm thẻ </body>.
Chèn đoạn mã JavaScript sau ngay trước thẻ </body>:
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll("img.lazy");
if ("IntersectionObserver" in window) {
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let image = entry.target;
image.src = image.dataset.src;
image.classList.remove("lazy");
observer.unobserve(image);
}
});
});
lazyloadImages.forEach(function(img) {
observer.observe(img);
});
} else {
let lazyloadThrottleTimeout;
function lazyload() {
if (lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
let scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if (img.offsetTop < window.innerHeight + scrollTop) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if (lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
}
});
</script>Thay đổi thuộc tính thẻ <img> để kích hoạt Lazyloading
Bây giờ, bạn cần chỉnh sửa các thẻ hình ảnh trong bài viết hoặc mẫu Blogspot của mình để chúng có thể hoạt động với Lazyloading.Ví dụ, thẻ <img> thông thường trông như sau:
<img src="https://example.com/image.jpg" alt="Mô tả hình ảnh"><img class="lazy" data-src="https://example.com/image.jpg" alt="Mô tả hình ảnh">- class="lazy": Thêm lớp lazy để xác định rằng đây là hình ảnh sẽ được áp dụng lazyloading.
- data-src: Thay thuộc tính src bằng data-src. Điều này đảm bảo hình ảnh sẽ không được tải ngay từ đầu, chỉ khi đoạn mã JavaScript kích hoạt tải hình ảnh khi cần thiết.
Kiểm tra kết quả Lazyloading
Sau khi hoàn tất việc thêm mã JavaScript và cập nhật các thẻ <img>, bạn nên kiểm tra kết quả. Truy cập vào trang Blogspot của mình và thử cuộn trang để xem các hình ảnh chỉ tải khi bạn cuộn tới chúng.Nếu tất cả hoạt động đúng, bạn đã thành công bật Lazyloading cho Blogspot!
Những lưu ý khi bật Lazyloading cho Blogspot
Chọn lọc hình ảnh để áp dụng Lazyloading: Không nên áp dụng Lazyloading cho tất cả hình ảnh, đặc biệt là các hình ảnh ở đầu trang. Những hình ảnh chính cần được tải ngay lập tức để đảm bảo trải nghiệm người dùng.Kiểm tra trên nhiều thiết bị: Đảm bảo Lazyloading hoạt động tốt trên cả máy tính và thiết bị di động. Bạn có thể sử dụng công cụ phát triển của trình duyệt (DevTools) để kiểm tra hiệu suất.
Tối ưu thêm cho SEO: Ngoài việc bật Lazyloading, hãy đảm bảo rằng tất cả hình ảnh trên Blogspot của bạn đều có thẻ alt đầy đủ để tăng cường tối ưu SEO.
Kết luận
Việc bật Lazyloading trên Blogspot là một cách đơn giản nhưng hiệu quả để tối ưu hóa tốc độ tải trang và nâng cao trải nghiệm người dùng. Bài viết này đã hướng dẫn bạn một cách chi tiết và dễ hiểu để bạn có thể thực hiện ngay mà không cần có kiến thức chuyên sâu về lập trình. Hãy áp dụng ngay hôm nay để cảm nhận sự thay đổi tích cực mà Lazyloading mang lại cho trang web của bạn!
