Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mudah Mempercepat Loading Gambar Blog

Kecepatan loading blog sangat berpengaruh, baik untuk SEo maupun kenyamanan pembaca blog. Biasanya blog yang dipenuhi dengan gambar foto apalagi berukuran besar membuat blog manjadi lola (loading lama). Hal ini dapat kita atasi dengan menambahkan script tertentu agar loading gambar lebih cepat.

Kode script yang digunakan untuk meningkatkan kinerja loading gambar blog adalah Lazy Load Image Plug-in. Kode ini mendukung banyak browser, seperti firefox, chrome, IE, dan lain-lain. Script Lazy Load Image ini dapat meningkatkan kinerja gambar postingan blog, thumbnail, dan konten iframe.

Cara Mudah Mempercepat Loading Gambar Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Tekan Ctrl F dan cari kode </head>
4. Taruh kode berikut ini di atasnya

<script type='text/javascript'>
//<![CDATA[
/*
* Lazy Load - jQuery plugin for lazy loading images
* Copyright (c) 2007-2012 Mika Tuupola
* Project home: http://www.appelsiini.net/projects/lazyload Version:  1.8.3
* Republished by Muhammad Septi Rosidi www.tutorialblogspot.com
*/
(function($, window, document, undefined) {
    var $window = $(window);
    $.fn.lazyload = function(options) {
        var elements = this;
        var $container;
        var settings = {
            threshold       : 0,
            failure_limit   : 0,
            event           : "scroll",
            effect          : "show",
            container       : window,
            data_attribute  : "original",
            skip_invisible  : true,
            appear          : null,
            load            : null
        };
        function update() {
            var counter = 0;
            elements.each(function() {
                var $this = $(this);
                if (settings.skip_invisible && !$this.is(":visible")) {
                    return;
                }
                if ($.abovethetop(this, settings) ||
                    $.leftofbegin(this, settings)) {
                        /* Nothing. */
                } else if (!$.belowthefold(this, settings) &&
                    !$.rightoffold(this, settings)) {
                        $this.trigger("appear");
                        /* if we found an image we'll load, reset the counter */
                        counter = 0;
                } else {
                    if (++counter > settings.failure_limit) {
                        return false;
                    }
                }
            });
        }
        if(options) {
            /* Maintain BC for a couple of versions. */
            if (undefined !== options.failurelimit) {
                options.failure_limit = options.failurelimit;
                delete options.failurelimit;
            }
            if (undefined !== options.effectspeed) {
                options.effect_speed = options.effectspeed;
                delete options.effectspeed;
            }
            $.extend(settings, options);
        }
        /* Cache container as jQuery as object. */
        $container = (settings.container === undefined ||
                      settings.container === window) ? $window : $(settings.container);
        /* Fire one scroll event per scroll. Not one scroll event per image. */
        if (0 === settings.event.indexOf("scroll")) {
            $container.bind(settings.event, function(event) {
                return update();
            });
        }
        this.each(function() {
            var self = this;
            var $self = $(self);
            self.loaded = false;
            /* When appear is triggered load original image. */
            $self.one("appear", function() {
                if (!this.loaded) {
                    if (settings.appear) {
                        var elements_left = elements.length;
                        settings.appear.call(self, elements_left, settings);
                    }
                    $("<img />")
                        .bind("load", function() {
                            $self
                                .hide()
                                .attr("src", $self.data(settings.data_attribute))
                                [settings.effect](settings.effect_speed);
                            self.loaded = true;
                            /* Remove image from array so it is not looped next time. */
                            var temp = $.grep(elements, function(element) {
                                return !element.loaded;
                            });
                            elements = $(temp);
                            if (settings.load) {
                                var elements_left = elements.length;
                                settings.load.call(self, elements_left, settings);
                            }
                        })
                        .attr("src", $self.data(settings.data_attribute));
                }
            });
            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if (0 !== settings.event.indexOf("scroll")) {
                $self.bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $self.trigger("appear");
                    }
                });
            }
        });
        /* Check if something appears when window is resized. */
        $window.bind("resize", function(event) {
            update();
        });
        /* With IOS5 force loading images when navigating with back button. */
        /* Non optimal workaround. */
        if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
            $window.bind("pageshow", function(event) {
                if (event.originalEvent.persisted) {
                    elements.each(function() {
                        $(this).trigger("appear");
                    });
                }
            });
        }
        /* Force initial check if images should appear. */
        $(window).load(function() {
            update();
        });
        return this;
    };
    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
    $.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();
    };
    $.inviewport = function(element, settings) {
         return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
                !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
     };
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() or */
    /* $("img").filter(":below-the-fold").something() which is faster */
    $.extend($.expr[':'], {
        "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
        "above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },
        "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
        "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
        "in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },
        /* Maintain BC for couple of versions. */
        "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
        "right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },
        "left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
    });
//]]>
</script>
<script charset='utf-8' type='text/javascript'>
$(function() {
   $(&quot;img&quot;).lazyload({placeholder : &quot;http://4.bp.blogspot.com/-wRaPvE0Jqrs/USIW4erewNI/AAAAAAAAFNk/TXDOtgYUGlc/s1600/grey.gif&quot;,threshold : 200});
});
</script>

5. Simpan template jika sudah selesai.

44 komentar untuk "Cara Mudah Mempercepat Loading Gambar Blog"

  1. makasih banyak sob. izin copy scripnya ya..

    BalasHapus
  2. kinerja blog memang dibutuhkan dalam hal SEO gan tapi apakah dengan javascript ini akan menghambat loading blog setelah gambarnya di optimasi dengan javascript tersebut ?
    mohon pencerahannya

    BalasHapus
  3. berlaku untuk wp juga kah, kak?

    BalasHapus
  4. Semangat baget deh bila udah baca artike yang bagus kaya gini.. semoga kedepanya semakin menarik dan bagus dari yang terbagus. salam blogspot.

    BalasHapus
  5. makasih banyak gan untuk tutorialnya, langsung saja ane pake di blog ane.

    BalasHapus
  6. Salam semangat hari ini bener-bener beruntung baca artikel yang menginformasikan manfaat yang banyak semoga selalu bagus blogspotnya..

    BalasHapus
  7. selamat sore, makasih, om. artikelnya sangat meng-inspirasi sekali, bagus banget situsnya.

    BalasHapus
  8. keren gan, artikelnya mantep banget buat dibaca, lain kali saya datang lagi berkunjung deh

    BalasHapus
  9. udh lama ga main ke sini, mas bro. oh ya, kok ga pake template responsive?

    BalasHapus
  10. Selamat Pagi !
    Terimakasih atas informasinya semoga bermanfaat bagi pembaca. posting terus saya tunggu informasi selanjutnya :)

    BalasHapus
  11. Selamat Sore ! Bagaimana hari ini masih semangat ??

    :D semangat donk harus,, hehe... Cuma mau numpang koment gini aja,, semoga tetap lancar yah dalam menjalankan segala aktivitasnya. Terimakasih

    BalasHapus
  12. Terimakasih atas informasinya. Ditunggu terus informasi selanjutnya. :) Salam semangat dari yang tersemangat !!

    BalasHapus
  13. Saya tadi sudah menyimak isi blogspot yang di share kan sangat bermanfaat dan memiliki infirasi baru buat di aplikasikan dalam kehidupan. thanks ..

    BalasHapus
  14. Selamat pagi ! Pagi hari ini sudah disuguhi sajian yang memberikan wawasan bagi saya dan para pengunjung yang lain. Teruskan kebaikannya dalam menyampaikan informasi yang bermanfaat, semoga tetap barokah. Terimakasih salam semangat !!

    BalasHapus
  15. wah.. udah pake scipt. bingung.
    hee..

    solusi kekayaan, silahkan mampir sini.
    Doa Kekayaan | www.doakekayaan.com | Jeng Riska

    BalasHapus
  16. semangat blogging dan memperbaiki blog...

    virtuarchive.blogspot.com

    BalasHapus
  17. Terimakasih informasinya bermanfaa. Semoga sukses !!

    BalasHapus
  18. Sudah sore,,,, tetap harus Semangaaaaaaaaat........ !! :D

    BalasHapus
  19. Selamat Pagi menjelang siang ! Posting terus yooo yang lebih baru lagih dan yang lebih bermanfaat tentunya, karena disini saya sedang mencari informasi yang bermanfaat yang bisa menambah ilmu pengetahuan ahehe. Terimakasih ditunggu yooo :D Salam semangat.

    BalasHapus
  20. Menarik dan semakin bagus artikelnya kunjungan pertama nih :) semoga semakin maju. !!

    BalasHapus
  21. terima kasih atas informasinya

    BalasHapus
  22. Selamat Pagi !
    Kok masih postingan yang ini ?? Belum posting lagi kah??? Ayo donk postingan informasi yang lebih bermanfaat yang lainnya yang lebih baru. saya tunggu yak. Terimakasih. salam semangat.

    BalasHapus
  23. Respon ku setelah liat artikel ini semoga semakin bagus dan lebih baiklagi untuk mempublic informasinya.

    BalasHapus
  24. Semangat terus buat anda yang selalu share informasi yang bermanfaat untuk di simak, kali ini informasinya menarik dan membuahkan manfaat baru bagi pembaca the follow.

    BalasHapus
  25. Kunjungan pertama nih boleh ya menyimak informasinya :)

    BalasHapus
  26. wah perlu di uji coba nie,...
    soal na blog saya banyak foto2 na hehe

    BalasHapus
  27. Selamat siang, senang berkunjung pada situs ini, salam kenal untuk semuanya dan semoga sukses selalu.^^ kunjungin balik ya^^

    BalasHapus
  28. Terima kasih banyak untuk informasinya, sangat menarik.. Ditunggu untuk update berikutnya..

    BalasHapus
  29. Boleh dicoba nih buat template wp.

    BalasHapus
  30. kalo udah bisa kayak gini dan berhasil, memungkinkan buat internet tanpa loding.. (?)

    BalasHapus
  31. Apa ada cara2 yang lainnya lagi?

    BalasHapus
  32. Nice and very helpful information i have got from your post. Even your whole blog is full of interesting information which is the great sign of a great blogger.

    Toshiba - Satellite 15.6" Laptop - 8GB Memory - 750GB Hard Drive - Mercury Silver

    Toshiba - Satellite 15.6" Laptop - 4GB Memory - 500GB Hard Drive - Satin Black (C55A5243NR)

    BalasHapus
  33. Salam Kenal Dari Kami galeri-obat.com Menjual Aneka Produk Kesehatan Pria Dan Wanita Terlengkap Dan Terlaris.

    Obat Pembesar Penis

    Jual Obat Pembesar Penis

    Obat Pembesar Penis Alami

    Obat Pembesar Penis Permanen

    Obat Pembesar Penis Herbal

    Vimax

    Vimax Asli Canada

    Agen Resmi Vimax

    Vimax Asli

    Vimax Pills

    ----------------------------------------------------

    Obat Pembesar Penis KLG

    Jual Obat Pembesar Penis KLG

    KLG Herbal

    Pembesar Penis KLG

    ------------------------------------------------

    Obat Pembesar Alat Kelamin Pria

    Neosize xl

    Jual Neosize xl

    Jual Neosize xl asli

    --------------------------------------------

    Obat Pembesar Alat Vital Pria

    Vigrx Plus

    Jual Vigrx Plus

    Vigrx Plus Original

    BalasHapus
  34. bagus nih artikelnya :D
    tapi apa script nya gk terlalu kepanjangan mas?

    BalasHapus
  35. gan, bagaimana cara kerja dari script diatas ?

    BalasHapus

Berlangganan via Email