Cara Mempercepat Loading Gambar Pada Blog dan Website

Daftar isi [Tampil]
Cara Mempercepat Loading Gambar Pada Blog dan Website - Hallo sahabat blogger. Dalam dunia blogger, Situs Website ataupun Blog yang memiliki kecepatan loading yang sangat baik dan cepat adalah keinginan atau impian oleh seorang blogger. karena kecepatan loading blog ini juga sangat berpengaruh, dari mulai kenyamanan pengunjung ketika membaca artikel maupun dari segi SEO (Search Engine Optimization).

Baca Juga : 5 Tips dan Cara Mudah Mendapatkan Sitelink Blog dari Google Terbaru

Pada kesempatan kali ini saya akan lanjut ke tutorial mengenai cara mempercepat loading gambar pada blog. tapi sebelum itu saya akan bahas terlebih dahulu faktor penyebab loading gambar pada blog ini lambat.

Cara Mempercepat Loading Gambar Pada Blog dan Website
Cara Mempercepat Loading Gambar Pada Blog dan Website

Ada beberapa faktor Penyebab Loading Gambar pada Blog ini 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. Gunakan maksimal 1 sampai 3 gambar di setiap postingan blog

Selain menggunakan solusi di atas, ada cara lain untuk mengatasi hal tersebut. yaitu dengan menambahkan script Lazy Load Gambar pada blog anda agar loading gambarnya lebih cepat. fungsi dari script Lazy Load Gambar ini adalah untuk meningkatkan kinerja loading gambar pada blog anda. script ini juga sudah support di browser Chrome, Firefox, Internet Explorer dan browser lainnya. tak hanya meningkatkan kinerja gambar atau thumbnail saja, akan tetapi konten iframe juga. oke kita langsung saja ke tutorialnya.

Baca Juga : Cara Memasang dan Menggunakan Font Google Sans di Blogger

Berikut adalah Cara Mempercepat Loading Gambar Pada Blog dan Website


  • Masuk terlebih dahulu ke akun Blogger dan masuk ke menu Dashboard blog
  • Pilih Tema atau Template > Edit HTML
  • Kemudian tekan tomol CTRL dan F untuk memudahkan anda mencari kode </head>
  • Jika sudah ketemu, silahkan Copy kode di bawah ini dan letakan di atas kode </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;

  • Terakhir Simpan Tema atau Template

Nah, Mungkin itu saja tutorial kali ini mengenai Cara Mempercepat Loading Gambar Pada Blog dan Website. jangan lupa tinggalkan komentar di bawah dan share ke media sosial anda, semoga bermanfaat.
Show comments
Hide comments

Belum ada Komentar untuk "Cara Mempercepat Loading Gambar Pada Blog dan Website"

Posting Komentar

Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2019 - 2020 Serieswans - All Rights Reserved Created With