Skip to content Skip to sidebar Skip to footer

Cara Mempercepat Loading Image di Blog

Cara Mempercepat Loading Image di Blog
Ambyarblog.com - Apa kabar? Dalam dunia blogger, situs website maupun blog yang memiliki kecepatan loading sangat baik dan cepat adalah keinginan semua blogger. Karena kecepatan loading blog sangat berpengaruh, dari mulai kenyamanan pengunjung ketika membaca artikel maupun dari sei SEO (Search Engine Optimization).

Nah, pada kesempatan kali ini saya akan berbagi tutorial mengenai cara mempercepat loading image pada blog. Tapi sebelum ke tutorial terlebih dahulu faktor penyebab loading image menjadi lambat.

Beberapa Faktor Penyebab Loading Image Menjadi Lambat

#1 - Ukuran atau Resolusi Gambar terlalu besar

#2 - Terlalu banyak gambar di postingan blog Anda.

Solusi:

#1 - Ubah atau Perkecil ukuran gambarnya.

#2 - Kompres gambar.

#3 - Maksimal 1 sampai 3 gambar di postingan.

Selain solusi diatas, ada cara lain untuk mengatasi hal tersebut dengan menambahkan script Lazy Load Image pada blog Anda agar loadingnya lebih cepat. Fungsi dari script Lazy Load Image ini untuk meningkatkan kinerja loading gambar pada blog Anda. Script ini sudah support di browser Chrome, Firefox dan lainnya.

Kita langsung ke tutorialnya.

Cara Mempercepat Loading Image di Blog

Langkah #1 - Buka dashboard Blogger Anda.

Langkah #2 - Pilih menu Tema > Klik Edit HTML.

Langkah #3 - Copy dan paste kode dibawah ini tempat DIATAS </head>.
&lt;script type=&#039;text/javascript&#039;&gt;
//&lt;![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
*/
(function($, window, document, undefined) {
    var $window = $(window);
    $.fn.lazyload = function(options) {
        var elements = this;
        var $container;
        var settings = {
            threshold       : 0,
            failure_limit   : 0,
            event           : &quot;scroll&quot;,
            effect          : &quot;show&quot;,
            container       : window,
            data_attribute  : &quot;original&quot;,
            skip_invisible  : true,
            appear          : null,
            load            : null
        };
        function update() {
            var counter = 0;
            elements.each(function() {
                var $this = $(this);
                if (settings.skip_invisible &amp;&amp; !$this.is(&quot;:visible&quot;)) {
                    return;
                }
                if ($.abovethetop(this, settings) ||
                    $.leftofbegin(this, settings)) {
                        /* Nothing. */
                } else if (!$.belowthefold(this, settings) &amp;&amp;
                    !$.rightoffold(this, settings)) {
                        $this.trigger(&quot;appear&quot;);
                        /* if we found an image we&#039;ll load, reset the counter */
                        counter = 0;
                } else {
                    if (++counter &gt; 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(&quot;scroll&quot;)) {
            $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(&quot;appear&quot;, function() {
                if (!this.loaded) {
                    if (settings.appear) {
                        var elements_left = elements.length;
                        settings.appear.call(self, elements_left, settings);
                    }
                    $(&quot;&lt;img /&gt;&quot;)
                        .bind(&quot;load&quot;, function() {
                            $self
                                .hide()
                                .attr(&quot;src&quot;, $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(&quot;src&quot;, $self.data(settings.data_attribute));
                }
            });
            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if (0 !== settings.event.indexOf(&quot;scroll&quot;)) {
                $self.bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $self.trigger(&quot;appear&quot;);
                    }
                });
            }
        });
        /* Check if something appears when window is resized. */
        $window.bind(&quot;resize&quot;, 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(&quot;pageshow&quot;, function(event) {
                if (event.originalEvent.persisted) {
                    elements.each(function() {
                        $(this).trigger(&quot;appear&quot;);
                    });
                }
            });
        }
        /* 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 &lt;= $(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 &lt;= $(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 &gt;= $(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 &gt;= $(element).offset().left + settings.threshold + $(element).width();
    };
    $.inviewport = function(element, settings) {
         return !$.rightoffold(element, settings) &amp;&amp; !$.leftofbegin(element, settings) &amp;&amp;
                !$.belowthefold(element, settings) &amp;&amp; !$.abovethetop(element, settings);
     };
    /* Custom selectors for your convenience.   */
    /* Use as $(&quot;img:below-the-fold&quot;).something() or */
    /* $(&quot;img&quot;).filter(&quot;:below-the-fold&quot;).something() which is faster */
    $.extend($.expr[&#039;:&#039;], {
        &quot;below-the-fold&quot; : function(a) { return $.belowthefold(a, {threshold : 0}); },
        &quot;above-the-top&quot;  : function(a) { return !$.belowthefold(a, {threshold : 0}); },
        &quot;right-of-screen&quot;: function(a) { return $.rightoffold(a, {threshold : 0}); },
        &quot;left-of-screen&quot; : function(a) { return !$.rightoffold(a, {threshold : 0}); },
        &quot;in-viewport&quot;    : function(a) { return $.inviewport(a, {threshold : 0}); },
        /* Maintain BC for couple of versions. */
        &quot;above-the-fold&quot; : function(a) { return !$.belowthefold(a, {threshold : 0}); },
        &quot;right-of-fold&quot;  : function(a) { return $.rightoffold(a, {threshold : 0}); },
        &quot;left-of-fold&quot;   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
    });
//]]&gt;
&lt;/script&gt;
&lt;script charset=&#039;utf-8&#039; type=&#039;text/javascript&#039;&gt;
$(function() {
   $(&amp;quot;img&amp;quot;).lazyload({placeholder : &amp;quot;http://4.bp.blogspot.com/-wRaPvE0Jqrs/USIW4erewNI/AAAAAAAAFNk/TXDOtgYUGlc/s1600/grey.gif&amp;quot;,threshold : 200});
});
&lt;/script&gt;
Langkah #4 - Jangan lupa Simpan.

Penutup

Itulah tutorial Cara Mempercepat Loading Image di Blog, apabila ada pertanyaan silahkan komen dibawah. Sampai disini, sekian dan terima kasih.

Selamat Mencoba!

2 comments for "Cara Mempercepat Loading Image di Blog"

  1. Ini jg lagi bersih2 script witget. Kebanyakan mlh bikin lama lodingnya

    ReplyDelete
    Replies
    1. Iya mas. Memang betul. 👍

      Terima kasih sudah berkunjung di Ambyar Blog. 🙏

      Delete

Silahkan Tinggalkan Komentar!

close