Thêm Lazyload Hình Ảnh Vào Blogger/Blogspot

Thêm Lazyload Hình Ảnh Vào Blogger/Blogspot, Áp dụng lazy load cho blogger, lazy load blogger.

Các tệp phương tiện như hình ảnh làm cho bài đăng trên blog của chúng ta trông hấp dẫn và bắt mắt. Hình ảnh là các tệp nặng và sử dụng nhiều dung lượng dẫn đến tốc độ tải trang của trang web của chúng ta chậm và khi chúng ta kiểm tra tốc độ trang, nó hiển thị "Trì hoãn hình ảnh ngoài màn hình".

Nếu bạn là một trong số đó, sử dụng nền tảng Google Blogger để viết blog, thì việc cài đặt plugin Lazy loading sẽ trở nên quá khó khăn vì Blogger không hỗ trợ cài đặt plugin.

Bạn có thể đã dành quá nhiều thời gian, cố gắng giảm, nén kích thước hình ảnh của mình, sử dụng phần mềm hoặc các phương pháp trực tuyến khác nhưng công cụ kiểm tra tốc độ trang vẫn cho phép Trì hoãn hình ảnh ngoài màn hình hoặc cân nhắc sử dụng plugin Lazy load.

Nhưng đừng lo lắng, với sự trợ giúp của hướng dẫn này, bạn sẽ tìm hiểu cách giảm đáng kể thời gian tải trang của blog Blogger của bạn và tăng tốc độ này bằng cách cài đặt tập lệnh Lazy Load trong Blogger.

Lazy Load là gì?

Lazy Load là một kỹ thuật tối ưu hóa cho các tệp phương tiện. Thay vì tải toàn bộ trang web và hiển thị nó, plugin tải lười chỉ hỗ trợ tải phần thiết yếu của trang web và trì hoãn phần còn lại.

Lợi ích của Lazy Load trong Blogger

Sử dụng tập lệnh Lazy Load trong Blogger sẽ làm cho nội dung blog của bạn được tải trước, hình ảnh được tải sau khi nội dung được tải.
Plugin tải chậm làm cho trang web của bạn tải nhanh hơn và tăng hiệu suất SEO trang web của bạn.
Khi hình ảnh được tải chậm, trình duyệt web của bạn sẽ không cần phân tích cú pháp tài nguyên cho đến khi chúng được yêu cầu bằng cách cuộn xuống trang.
Hình ảnh được tải chậm sẽ giúp người truy cập tiết kiệm dữ liệu và băng thông.

Lazy Load có hại cho SEO không?

Sử dụng lazy load cho blogger chắc chắn là một phương pháp hay cho SEO. Các công cụ tìm kiếm như Google và các công cụ khác có thể xử lý các hình ảnh được tải chậm. Google khuyến khích sử dụng tải chậm trong hướng dẫn dành cho Nhà phát triển của mình.

Tôi có nên sử dụng tính năng Lazy load không?

Nó phụ thuộc vào việc trang web của bạn đang sử dụng một số tệp phương tiện khá nặng để tải thì chắc chắn bạn nên sử dụng nó, vì sử dụng tập lệnh blogger lazy load, bạn sẽ thấy hiệu suất tốc độ trang tốt.

Cách Thêm Lazy load Hình Ảnh Vào Blogger/Blogspot

Để thêm Lazy Load vào blogger, các bạn hãy làm theo các bước sau đây nhé. Lưu ý là hãy sao lưu chủ đề của bạn trước đi nhé.

Bước 1: Đăng nhập vào Blogger.

Bước 2: Trên bảng điều khiển Blogger , Chọn Chủ Đề ➺.Chỉnh Sửa HTML.

Bước 3: Tìm đến thẻ </body> và dán đoạn JS này vào trên nó.

<script type = 'text/javascript' > //<![CDATA[
// Fast Load
(function(a) {
    a.fn.lazyload = function(b) {
        var c = {
            threshold: 0,
            failurelimit: 0,
            event: "scroll",
            effect: "show",
            container: window
        };
        if (b) {
            a.extend(c, b)
        }
        var d = this;
        if ("scroll" == c.event) {
            a(c.container).bind("scroll", function(b) {
                var e = 0;
                d.each(function() {
                    if (a.abovethetop(this, c) || a.leftofbegin(this, c)) {} else if (!a.belowthefold(this, c) && !a.rightoffold(this, c)) {
                        a(this).trigger("appear")
                    } else {
                        if (e++ > c.failurelimit) {
                            return false
                        }
                    }
                });
                var f = a.grep(d, function(a) {
                    return !a.loaded
                });
                d = a(f)
            })
        }
        this.each(function() {
            var b = this;
            if (undefined == a(b).attr("original")) {
                a(b).attr("original", a(b).attr("src"))
            }
            if ("scroll" != c.event || undefined == a(b).attr("src") || c.placeholder == a(b).attr("src") || a.abovethetop(b, c) || a.leftofbegin(b, c) || a.belowthefold(b, c) || a.rightoffold(b, c)) {
                if (c.placeholder) {
                    a(b).attr("src", c.placeholder)
                } else {
                    a(b).removeAttr("src")
                }
                b.loaded = false
            } else {
                b.loaded = true
            }
            a(b).one("appear", function() {
                if (!this.loaded) {
                    a("<img />").bind("load", function() {
                        a(b).hide().attr("src", a(b).attr("original"))[c.effect](c.effectspeed);
                        b.loaded = true
                    }).attr("src", a(b).attr("original"))
                }
            });
            if ("scroll" != c.event) {
                a(b).bind(c.event, function(c) {
                    if (!b.loaded) {
                        a(b).trigger("appear")
                    }
                })
            }
        });
        a(c.container).trigger(c.event);
        return this
    };
    a.belowthefold = function(b, c) {
        if (c.container === undefined || c.container === window) {
            var d = a(window).height() + a(window).scrollTop()
        } else {
            var d = a(c.container).offset().top + a(c.container).height()
        }
        return d <= a(b).offset().top - c.threshold
    };
    a.rightoffold = function(b, c) {
        if (c.container === undefined || c.container === window) {
            var d = a(window).width() + a(window).scrollLeft()
        } else {
            var d = a(c.container).offset().left + a(c.container).width()
        }
        return d <= a(b).offset().left - c.threshold
    };
    a.abovethetop = function(b, c) {
        if (c.container === undefined || c.container === window) {
            var d = a(window).scrollTop()
        } else {
            var d = a(c.container).offset().top
        }
        return d >= a(b).offset().top + c.threshold + a(b).height()
    };
    a.leftofbegin = function(b, c) {
        if (c.container === undefined || c.container === window) {
            var d = a(window).scrollLeft()
        } else {
            var d = a(c.container).offset().left
        }
        return d >= a(b).offset().left + c.threshold + a(b).width()
    };
    a.extend(a.expr[":"], {
        "below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",
        "above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",
        "right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",
        "left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"
    })
})(jQuery);
$(function() {
    $("img").lazyload({
        placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfAddfDCtf9VqqgnOL1tRQo9QbMhjbFsXLx0ZGRgcOGQ6g3Wu4-fontmpEyEV2r1o-Q2Dpo75YOkFejRHKK6x_gpa6cWzwh1yX5zAfkkUWo2R7vy259GnJIkoFxNceBf59Ny7Q-gy39Okr/s640/arlinadesign.gif",
        effect: "fadeIn",
        threshold: "-50"
    })
}); //]]>
</script>

Bước 4: Lưu chủ đề của bạn lại.

Cách kiểm tra xem Lazy load của bạn có hoạt động không

Có nhiều cách để xác minh rằng plugin lazy load blogger images đang hoạt động hay không. Bạn có thể so sánh hiệu suất tốc độ trang trên GTMetrix hoặc PageSpeed Insights. Các bạn nên vào thẳng blog của bạn và xem hình ảnh có hoạt động không nhé.

Tuổi Trẻ Lập Trình