Script Lazy Load Image Blogger Yang Wajib Digunakan Dalam 5 Langkah

Lazy Load Image Blogger adalah kunci untuk meningkatkan kecepatan situs Anda, terutama jika Anda menggunakan platform Blogger. Kecepatan situs web sangat penting karena berdampak langsung pada peringkat di mesin pencari dan pengalaman pengguna. Sayangnya, di Blogger, Anda tidak akan menemukan plugin caching atau pengoptimalan gambar seperti yang tersedia di platform lain seperti WordPress. Karena itu, dalam artikel ini, kita akan membahas apa itu Lazy Load dan bagaimana cara mengaktifkan Lazy Load di situs web Blogger Anda.

Gambar merupakan salah satu elemen yang paling berpengaruh terhadap kecepatan situs web. Setiap kali Anda menambahkan gambar ke halaman web, gambar tersebut memerlukan lebih banyak sumber daya untuk dimuat, yang akhirnya memperlambat kecepatan pemuatan halaman web Anda. Ketika pengguna mengunjungi situs Anda, mereka mengharapkan halaman untuk dimuat dengan cepat. Jika halaman web Anda penuh dengan gambar tanpa dioptimalkan, waktu pemuatan bisa melambat secara signifikan.

Standar saat ini menyarankan bahwa sebuah situs web harus dimuat dalam waktu 3 detik agar pengguna mendapatkan pengalaman yang memuaskan. Namun, sebuah penelitian dari Google menunjukkan bahwa waktu pemuatan rata-rata untuk halaman web adalah 22 detik. Perbedaan yang cukup signifikan ini menunjukkan betapa pentingnya optimasi untuk gambar di situs web Anda. Tanpa optimasi yang tepat, Anda berisiko kehilangan pengunjung yang tidak sabar menunggu halaman untuk dimuat.

Jika Anda menggunakan WordPress, banyak plugin yang tersedia untuk membantu Anda mengoptimalkan gambar, seperti ShortPixel, Smush, dan lainnya. Plugin-plugin ini secara otomatis mengompres gambar dan mengoptimalkannya untuk kecepatan yang lebih baik. Namun, untuk pengguna Blogger, pengoptimalan gambar harus dilakukan secara manual. Anda perlu mengunggah gambar yang telah dioptimalkan secara langsung ke situs Anda, yang tentunya membutuhkan lebih banyak usaha.

Untuk membantu mempercepat situs Blogger Anda, ada beberapa teknik optimasi yang bisa Anda terapkan. Salah satunya adalah dengan menggunakan format gambar yang lebih efisien seperti .webp atau JPG 2000. Format-format ini lebih ringan dan dapat mempercepat waktu pemuatan. Selain itu, menerapkan Lazy Load di situs Blogger Anda adalah langkah cerdas untuk meningkatkan kecepatan dan pengalaman pengguna. Dengan Lazy Load, gambar hanya akan dimuat saat pengguna menggulir ke bawah, yang berarti halaman web Anda bisa dimuat lebih cepat.

Mengaktifkan Lazy Load Gambar Blogger adalah salah satu cara terbaik untuk mengatasi masalah kecepatan tanpa harus mengorbankan kualitas gambar. Dengan mengikuti langkah-langkah sederhana ini, Anda dapat mengoptimalkan situs Blogger Anda, meningkatkan kecepatan pemuatan, dan memberikan pengalaman yang lebih baik bagi pengunjung Anda.

Apa itu Lazy Loading?

Lazy loading adalah teknik penting dalam optimasi situs web yang membantu mempercepat waktu pemuatan halaman dengan menunda pemuatan sumber daya atau objek hingga benar-benar diperlukan. Teknik ini sangat berguna ketika situs Anda memiliki banyak elemen berat, seperti gambar atau video, yang tidak perlu dimuat sekaligus saat halaman dibuka. Dengan lazy loading, hanya elemen-elemen yang berada di viewport, atau yang terlihat oleh pengguna, yang akan dimuat terlebih dahulu.

Contohnya, bayangkan sebuah halaman web dengan beberapa gambar di bagian bawah halaman. Jika pengguna harus menggulir ke bawah untuk melihat gambar tersebut, Anda bisa menampilkan placeholder atau gambar pengganti yang lebih ringan terlebih dahulu. Gambar penuh akan dimuat hanya saat pengguna sampai di lokasi gambar tersebut. Ini membantu mengurangi waktu pemuatan awal halaman karena browser tidak harus memuat semua gambar sekaligus. Selain itu, hal ini juga mengurangi penggunaan data, yang sangat penting terutama bagi pengguna dengan koneksi internet yang lambat atau kuota terbatas.

Manfaat utama dari mengaktifkan lazy load untuk gambar adalah penurunan waktu pemuatan awal halaman. Saat halaman Anda lebih ringan karena tidak semua gambar dimuat sekaligus, pengalaman pengguna akan lebih baik karena mereka bisa mulai melihat konten tanpa harus menunggu terlalu lama. Ini sangat penting, mengingat banyak pengguna yang tidak sabar menunggu halaman yang lambat untuk dimuat dan bisa segera meninggalkan situs Anda jika merasa tidak nyaman.

Selain itu, lazy loading juga membantu menghemat sumber daya, baik di sisi server maupun di sisi klien. Dengan menunda pemuatan gambar hingga benar-benar dibutuhkan, server Anda tidak perlu mengirimkan data yang tidak diperlukan oleh pengguna. Sebagai contoh, jika sebuah artikel blog memiliki enam gambar, tetapi pengguna hanya menggulir sampai gambar ketiga, maka hanya tiga gambar pertama yang akan dimuat oleh browser. Hal ini tentunya menghemat bandwidth dan mengurangi beban pada server, yang dapat memberikan dampak positif pada kinerja keseluruhan situs.

Dengan menerapkan lazy loading, browser akan lebih fokus pada pemuatan gambar-gambar yang berada di atas lipatan layar, atau dalam istilah lain, di bagian yang terlihat oleh pengguna saat halaman pertama kali dimuat. Teknik ini dikenal dengan istilah pemuatan di atas lipatan (above-the-fold loading). Dengan cara ini, Anda tidak hanya mengurangi ukuran halaman secara keseluruhan, tetapi juga meningkatkan kecepatan tampilan halaman pertama, yang merupakan salah satu faktor penting dalam penilaian Google untuk Core Web Vitals.

Skor Core Web Vitals sendiri adalah bagian dari laporan PageSpeed Insights yang digunakan untuk mengukur performa situs web. Dengan lazy loading, Anda bisa meningkatkan beberapa metrik penting dalam Core Web Vitals, seperti Largest Contentful Paint (LCP) dan First Input Delay (FID). LCP mengukur kecepatan waktu pemuatan elemen terbesar di viewport, sementara FID mengukur waktu yang dibutuhkan halaman untuk merespons interaksi pengguna pertama kali. Keduanya sangat penting untuk memberikan pengalaman pengguna yang baik.

Lazy loading juga memberikan keuntungan dalam hal efisiensi pengelolaan sumber daya pada perangkat pengguna. Ketika hanya elemen yang dilihat yang dimuat, memori dan prosesor perangkat tidak terbebani dengan memuat elemen-elemen yang tidak terlihat. Ini sangat penting bagi pengguna yang mengakses situs dari perangkat dengan spesifikasi rendah atau dari jaringan yang tidak stabil.

Namun, penerapan lazy loading tidak selalu harus pada gambar. Teknik ini juga dapat diterapkan pada elemen lain seperti video, iframe, atau bahkan elemen interaktif lainnya yang memerlukan pemuatan data dalam jumlah besar. Setiap elemen yang tidak diperlukan secara langsung saat halaman dimuat pertama kali bisa dioptimalkan dengan teknik ini.

Meskipun lazy loading menawarkan banyak manfaat, Anda tetap perlu mempertimbangkan bagaimana implementasi ini berpengaruh pada pengalaman pengguna secara keseluruhan. Jika dilakukan dengan benar, lazy loading dapat meningkatkan performa situs tanpa mengorbankan kualitas tampilan dan fungsionalitas. Tetapi, jika diimplementasikan secara tidak tepat, seperti memuat terlalu banyak elemen secara bersamaan saat pengguna menggulir, hal ini justru dapat menyebabkan lag atau keterlambatan dalam tampilan konten.

Jadi, ketika Anda memutuskan untuk menerapkan lazy loading pada situs Anda, pastikan untuk mengujinya secara menyeluruh agar hasilnya sesuai dengan yang diharapkan.

Langkah-langkah Untuk Mengaktifkan Lazy Load Image Blogger

Ikuti langkah-langkah di bawah ini untuk menambahkan skrip lazyload untuk blogger. Skrip ini akan menerapkan lazy load untuk semua gambar secara otomatis. Tidak perlu menambahkan tag <img> Inline secara manual.

• Pertama, buka dasbor Blogger Anda, dan arahkan ke bagian Tema.
• Setelah itu, klik Edit HTML dari menu yang muncul.
• Di dalam Editor HTML, tekan Ctrl + F untuk memunculkan kotak pencarian. Ketik </body> di kotak pencarian, atau Anda bisa langsung menggulir ke bawah sampai menemukan tag </body> di akhir kode.
• Langkah selanjutnya, tempelkan kode JavaScript di bawah ini tepat di atas tag </body>.
• Terakhir, Simpan perubahan yang sudah Anda buat.

<script>
//<![CDATA[
// Lazy Load
(function($) {
    $.fn.lazyload = function(options) {
        var settings = {
            threshold: 0,
            failurelimit: 0,
            event: "scroll",
            effect: "show",
            container: window
        };

        if (options) {
            $.extend(settings, options);
        }

        var elements = this;

        if (settings.event == "scroll") {
            $(settings.container).bind("scroll", function() {
                var counter = 0;
                elements.each(function() {
                    if ($.abovethetop(this, settings) || $.leftofbegin(this, settings)) {
                        // Do nothing
                    } else if (!$.belowthefold(this, settings) && !$.rightoffold(this, settings)) {
                        $(this).trigger("appear");
                    } else {
                        if (counter++ > settings.failurelimit) {
                            return false;
                        }
                    }
                });

                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }

        this.each(function() {
            var self = this;

            if (undefined == $(self).attr("original")) {
                $(self).attr("original", $(self).attr("src"));
            }

            if (settings.event != "scroll" || undefined == $(self).attr("src") ||
                settings.placeholder == $(self).attr("src") || $.abovethetop(self, settings) ||
                $.leftofbegin(self, settings) || $.belowthefold(self, settings) || $.rightoffold(self, settings)) {

                if (settings.placeholder) {
                    $(self).attr("src", settings.placeholder);
                } else {
                    $(self).removeAttr("src");
                }
                self.loaded = false;
            } else {
                self.loaded = true;
            }

            $(self).one("appear", function() {
                if (!this.loaded) {
                    $("<img />").bind("load", function() {
                        $(self).hide().attr("src", $(self).attr("original"))[settings.effect](settings.effectspeed);
                        self.loaded = true;
                    }).attr("src", $(self).attr("original"));
                }
            });

            if (settings.event != "scroll") {
                $(self).bind(settings.event, function() {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });

        $(settings.container).trigger(settings.event);
        return this;
    };

    $.belowthefold = function(element, settings) {
        var fold;

        if (settings.container === undefined || settings.container === window) {
            fold = $(window).height() + $(window).scrollTop();
        } else {
            fold = $(settings.container).offset().top + $(settings.container).height();
        }

        return fold <= $(element).offset().top - settings.threshold;
    };

    $.rightoffold = function(element, settings) {
        var fold;

        if (settings.container === undefined || settings.container === window) {
            fold = $(window).width() + $(window).scrollLeft();
        } else {
            fold = $(settings.container).offset().left + $(settings.container).width();
        }

        return fold <= $(element).offset().left - settings.threshold;
    };

    $.abovethetop = function(element, settings) {
        var fold;

        if (settings.container === undefined || settings.container === window) {
            fold = $(window).scrollTop();
        } else {
            fold = $(settings.container).offset().top;
        }

        return fold >= $(element).offset().top + settings.threshold + $(element).height();
    };

    $.leftofbegin = function(element, settings) {
        var fold;

        if (settings.container === undefined || settings.container === window) {
            fold = $(window).scrollLeft();
        } else {
            fold = $(settings.container).offset().left;
        }

        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };

    $.extend($.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/AVvXsEiR-3WNj1AKX1J1s_f9AMefJrbs9vhVS1Fo48JZkS2MdVCbAzUQAilMMGDyYG61bmHjZY8_nidIaTZ_29at62NGHKtWi62eutm0yNyseXmFna_5dbf-tUMM8N4pNPsGUUr60_ZBxAXeFPGA/s1600/sun.gif",
        effect: "fadeIn",
        threshold: "-50"
    });
});
//]]>
</script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Kesimpulan

Lazy Load adalah solusi efektif untuk meningkatkan kecepatan situs Blogger Anda. Dengan menggunakan teknik ini, gambar atau elemen berat lainnya tidak akan langsung dimuat ketika halaman pertama kali dibuka, melainkan hanya akan dimuat saat pengguna menggulir ke area tempat gambar tersebut berada. Ini tidak hanya mempercepat waktu pemuatan halaman, tetapi juga menghemat bandwidth dan sumber daya, baik di sisi server maupun pengguna.

Mengaktifkan Lazy Load di Blogger ternyata tidak sulit. Anda hanya perlu menambahkan sedikit kode JavaScript ke template situs Anda. Setelah diaktifkan, semua gambar di situs Anda akan otomatis menggunakan fitur Lazy Load tanpa perlu penyesuaian lebih lanjut. Ini adalah cara sederhana namun efektif untuk memastikan situs Anda berjalan lebih cepat dan memberikan pengalaman pengguna yang lebih baik.

Selain itu, Lazy Load juga membantu memperbaiki skor Core Web Vitals, yang merupakan faktor penting dalam peringkat SEO. Dengan mengurangi ukuran halaman dan memprioritaskan pemuatan elemen penting terlebih dahulu, situs Anda akan lebih cepat diakses dan lebih disukai oleh mesin pencari seperti Google. Jadi, dengan mengaktifkan Lazy Load, Anda tidak hanya membuat situs Anda lebih cepat, tetapi juga meningkatkan visibilitasnya di hasil pencarian.