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.
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 |
Ada beberapa faktor Penyebab Loading Gambar pada Blog ini Lambat :
- Ukuran atau Resolusi Gambar terlalu besar
- Terlalu banyak gambar di postingan blog anda
Solusi :
- Ubah atau Perkecil ukuran gambarnya
- Kompres Gambar
- 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>
<script type='text/javascript'>
//<;
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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZhyGPyXtyffwXl9gyqwcmb1sz82X9FXrsDedywHestUw-kxwNQusHa_QnlTXhXTZK3TAhtFs87wB2vb2gsNxlm4W_FQkSrinjpfeFMK5CUhczsNkT3nlF9IxNf3EsLbODWBDzL_U9XrY/s1600/grey.gif&quot;,threshold : 200});
});
</script>
- 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.
Posting Komentar