-->

Cara Mempercepat Loading Gambar Pada Blog dan Website

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.
Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
  • Related Posts

    Show comments
    Hide comments

    0 Komen

    Posting Komentar

    • 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.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!