Cách dùng Script đơn giản Lazy Load hiển thị ảnh lần lượt tăng tốc độ Blospot (P2)

Đoạn Code sử dụng Script này được sử dụng nhằm tối ưu quá trình tải và hiển thị hình ảnh trên website, giúp cải thiện đáng kể tốc độ tải trang và trải nghiệm người dùng. Thông qua việc áp dụng cơ chế lazy load, hình ảnh chỉ được tải khi người dùng cuộn đến vị trí hiển thị, từ đó giảm dung lượng tải ban đầu và tăng hiệu suất tổng thể.

Bên cạnh đó, hiệu ứng chuyển opacity nhẹ khi ảnh load xong mang lại trải nghiệm hiển thị mượt mà, tránh hiện tượng ảnh xuất hiện đột ngột. Tổng thể, đây là giải pháp đơn giản nhưng hiệu quả để nâng cao tốc độ website, tối ưu SEO và cải thiện trải nghiệm người dùng.

TĂNG TỐC ĐỘ LOAD WEBSITE BLOGSPOT

Chèn đoạn Code sau vào trước thẻ đóng </body>

<script>
document.addEventListener("DOMContentLoaded", function () {
const images = document.querySelectorAll("img");

images.forEach(img => {

// Bỏ lazy cho ảnh quan trọng
if (
img.closest("header") ||
img.classList.contains("no-lazy") ||
img.getAttribute("loading") === "eager"
) {
img.setAttribute("loading", "eager");
return;
}

// Lazy load native
img.setAttribute("loading", "lazy");

// Decode async
img.setAttribute("decoding", "async");

// Fade mượt hơn (không nháy)
img.style.transition = "opacity 0.4s ease";

if (!img.complete) {
img.style.opacity = "0.2";

img.addEventListener("load", () => {
img.style.opacity = "1";
});
}
});
});
</script>

Lưu lại và kiểm tra ngay nhé! 

Tham khảo thêm phương án khác: TẠI ĐÂY