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
5. Simpan template jika sudah selesai.
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'>
//<;
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() {
$("img").lazyload({placeholder : "http://4.bp.blogspot.com/-wRaPvE0Jqrs/USIW4erewNI/AAAAAAAAFNk/TXDOtgYUGlc/s1600/grey.gif",threshold : 200});
});
</script>
//<;
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() {
$("img").lazyload({placeholder : "http://4.bp.blogspot.com/-wRaPvE0Jqrs/USIW4erewNI/AAAAAAAAFNk/TXDOtgYUGlc/s1600/grey.gif",threshold : 200});
});
</script>
5. Simpan template jika sudah selesai.
makasih banyak sob. izin copy scripnya ya..
BalasHapuskinerja blog memang dibutuhkan dalam hal SEO gan tapi apakah dengan javascript ini akan menghambat loading blog setelah gambarnya di optimasi dengan javascript tersebut ?
BalasHapusmohon pencerahannya
informasinya sangat menarik sob..
BalasHapusberlaku untuk wp juga kah, kak?
BalasHapusSemangat baget deh bila udah baca artike yang bagus kaya gini.. semoga kedepanya semakin menarik dan bagus dari yang terbagus. salam blogspot.
BalasHapusthankas infonya gan
BalasHapusmakasih banyak gan untuk tutorialnya, langsung saja ane pake di blog ane.
BalasHapusSalam semangat hari ini bener-bener beruntung baca artikel yang menginformasikan manfaat yang banyak semoga selalu bagus blogspotnya..
BalasHapusselamat sore, makasih, om. artikelnya sangat meng-inspirasi sekali, bagus banget situsnya.
BalasHapuskeren gan, artikelnya mantep banget buat dibaca, lain kali saya datang lagi berkunjung deh
BalasHapusTerimakasih atas penyampaiannya.
BalasHapusudh lama ga main ke sini, mas bro. oh ya, kok ga pake template responsive?
BalasHapusSelamat Pagi !
BalasHapusTerimakasih atas informasinya semoga bermanfaat bagi pembaca. posting terus saya tunggu informasi selanjutnya :)
Selamat Sore ! Bagaimana hari ini masih semangat ??
BalasHapus:D semangat donk harus,, hehe... Cuma mau numpang koment gini aja,, semoga tetap lancar yah dalam menjalankan segala aktivitasnya. Terimakasih
sip gan boleh di coba ni
BalasHapusmakasih mas..sangat membantu..
BalasHapusTerimakasih atas informasinya. Ditunggu terus informasi selanjutnya. :) Salam semangat dari yang tersemangat !!
BalasHapusSaya tadi sudah menyimak isi blogspot yang di share kan sangat bermanfaat dan memiliki infirasi baru buat di aplikasikan dalam kehidupan. thanks ..
BalasHapusthnak banegt tutornya :D
BalasHapusSelamat 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 !!
BalasHapuswah.. udah pake scipt. bingung.
BalasHapushee..
solusi kekayaan, silahkan mampir sini.
Doa Kekayaan | www.doakekayaan.com | Jeng Riska
semangat blogging dan memperbaiki blog...
BalasHapusvirtuarchive.blogspot.com
Terimakasih informasinya bermanfaa. Semoga sukses !!
BalasHapusSudah sore,,,, tetap harus Semangaaaaaaaaat........ !! :D
BalasHapusSelamat 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.
BalasHapusMenarik dan semakin bagus artikelnya kunjungan pertama nih :) semoga semakin maju. !!
BalasHapusterima kasih atas informasinya
BalasHapusSelamat Pagi !
BalasHapusKok 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.
Respon ku setelah liat artikel ini semoga semakin bagus dan lebih baiklagi untuk mempublic informasinya.
BalasHapusSemangat terus buat anda yang selalu share informasi yang bermanfaat untuk di simak, kali ini informasinya menarik dan membuahkan manfaat baru bagi pembaca the follow.
BalasHapusKunjungan pertama nih boleh ya menyimak informasinya :)
BalasHapuswah perlu di uji coba nie,...
BalasHapussoal na blog saya banyak foto2 na hehe
Selamat siang, senang berkunjung pada situs ini, salam kenal untuk semuanya dan semoga sukses selalu.^^ kunjungin balik ya^^
BalasHapusTerima kasih banyak untuk informasinya, sangat menarik.. Ditunggu untuk update berikutnya..
BalasHapuskursi tamu Jepara
BalasHapuskursi tamu Ukir Jati
kursi tamu Minimalis Jati
kursi Jati Jepara
kursi tamu
kursi tamu Minimalis
kursi tamu Ganesa
Mebel Jepara
Mebel Jati Jepara
kursi tamu sudut Jati
kursi tamu jati
kursi tamu jati jepara
kursi tamu Sofa Ukir
kursi tamu sofa jepara
kursi jati jepara
Jepara Mebel Kursi Tamu
kursi tamu mebel jepara
Boleh dicoba nih buat template wp.
BalasHapuskalo udah bisa kayak gini dan berhasil, memungkinkan buat internet tanpa loding.. (?)
BalasHapusvibrator alat sex alat sex wanita alat sex alat sex wanita alat bantu sex penis silikon alat mansturbasi alat orgasme alat sex alat bantu wanita alat sex pria alat sex pasutri alat sex pria alat sex wanita alat onanai alat sex orgasme obat kuat pembesar penis alat vital alat bantu sex wanita alat sex pria alat bantu sex alat sex terbaru vakum penis vakum payudara obat perangsang
BalasHapusApa ada cara2 yang lainnya lagi?
BalasHapusNice 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.
BalasHapusToshiba - Satellite 15.6" Laptop - 8GB Memory - 750GB Hard Drive - Mercury Silver
Toshiba - Satellite 15.6" Laptop - 4GB Memory - 500GB Hard Drive - Satin Black (C55A5243NR)
artikel nya bagus2 gan
BalasHapusSalam Kenal Dari Kami galeri-obat.com Menjual Aneka Produk Kesehatan Pria Dan Wanita Terlengkap Dan Terlaris.
BalasHapus✔ 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
bagus nih artikelnya :D
BalasHapustapi apa script nya gk terlalu kepanjangan mas?
gan, bagaimana cara kerja dari script diatas ?
BalasHapus