20.1.14
18
Memasang jQuery Untuk Mempercepat Loading Blog
Memasang jQuery Untuk Mempercepat Loading Blog - Selain desain Template yang anda modifikasi sehingga terkesan menarik, hal utama yang disukai pengunjung atau pembaca adalah kecepatan loading halaman blog anda, bagaimana tidak sekalipun anda menyisipkan pernak-pernik di blog yang menurut anda pasti terlihat menarik bagi pengunjung, tetapi untuk melihat itu semua membutuhkan waktu yang cukup lama untuk membuka halaman blog anda. Lalu apakah pengunjung akan menunggu.?..hemm..jawab sendiri ya..!! hehehe...

Banyak cara yang perlu kita ketahui untuk mempercepat loading suatu halaman di blog, salah satunya hindari penggunaan background gelap pada template, dan masih banyak lagi yang pastinya dilain waktu akan saya bahas di artikel selanjutnya.
Untuk lebih memaksimalkan loading blog anda bisa menerapkan dengan Memasang jQuery Untuk Mempercepat Loading Blog, kode script yang kita gunakan jQuery Lazy Load, dengan jQuery ini anda bisa manfaatkan agar proses loading gambar tampil lebih cepat dan maksimal dari sebelumnya, karena waktu yang dibutuhkan untuk menunggu proses loading halaman adalah proses dalam memuat gambar.

Memasang jQuery Untuk Mempercepat Loading Blog akan dapat meminilisir untuk mempercepat proses loading gambar akan tampil lebih awal, sedangkan untuk loading gambar lain pada halaman blog akan terlihat saat halaman tersebut kita scroll. Detailnya jQuery Lazy Load memiliki fungsi untuk menampilkan gambar pada halaman blog terlebih dahulu terbuka dengan cepat.
Sebelum anda memasang jQuery ini, ada baiknya cek kecepatan loading halaman blog anda terlebih dahulu di SAHABAT BLOGGER 77-GOOGLE INSIGHTS, lalu bandingkan setelah anda memasangnya untuk mengetahui apakah jQuery Lazy Load dapat bekerja maksimal pada blog anda.

Gambar Speed Loading Page

Berikut Tutorial Memasang jQuery Untuk Mempercepat Loading Blog
  1. Login ke- Blogger
  2. Copy kode jQuery berikut, dan Pastekan pada Template blog anda
  3. Diatas atau sebelum kode penutup </head>
<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUp0V3G7wUj1g6vmNfOuq2kEYBK7vC6KkOzXkmZbgAxWnfZmeRuswaqOG5FPP3IIDHb4Res_dL8eZHMtcXsHtytBL8iU8bSPWkFmFnEY-4q7CBEK-eTHhbqHbLlnfAxlFC4KmWOrfhnVc/h120/lazy+image.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

Update -
Cek kembali kecepatan loading halaman blog anda, jika angka speed load berubah, maka saya ucapkan anda berhasil Memasang jQuery Untuk Mempercepat Loading Blog.
Semoga bermanfaat dan Happy blogging to All

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Memasang jQuery Untuk Mempercepat Loading Blog
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

18 komentar

  1. makasih sist untuk juery nya semoga dengan trik ini blog jadi semakin cepat loadingnya ya :D

    BalasHapus
    Balasan
    1. amin...terimakasih kembali sist..

      Hapus
  2. selamat pagi mbk Devy....
    ini juga menguntungkan buat kita dan pengunjung ya mbk
    makasih mbk Devy atas tutorianya

    BalasHapus
    Balasan
    1. pagi juga bang ronny.

      sama-sama bang

      Hapus
  3. wah bagus juga nih tutorialnya. Jadi bisa mempercepat loading blog ya degan mmasang kode jquery ini. Bisa dicoba nih. Thanks ya atas share nya :)

    BalasHapus
    Balasan
    1. hanya sebuah pilihan mbak, terkadang banyak juga yang enggan untuk memasang jquery karena takut bentrok dengan jquery default pada template sebelumnya..

      Hapus
  4. terkadang kita kudu hati-hati mas jika harus berurusan dengan edit HTML, oleh karenanya biasanya saya selulu save template dulu sebelum melakukan pengeditan,,untuk menghindari bilamana ada kesalahan...

    BalasHapus
  5. ijin mempraktekannya boss..

    BalasHapus
  6. Setelah saya check loading speed laman saya di http://developers.google.com/speed/pagespeed/insights/ ternyata ada pesan begini :
    "" Optimalkan Pengiriman CSS yang berikut:
    1. https://www.blogger.com/…409279300-widget_css_mobile_2_bundle.css
    2. https://www.blogger.com/…&zx=e2e7ed48-311a-4b47-8d76-6ef76461f0ad ""

    Cara Optimasi yang dimaksud bagaimana ya sis??. Mohon bantuannya.

    Saya pasang dulu "jQuery Lazy Load" nya.
    Terima kasih.

    BalasHapus
    Balasan
    1. setelah saya ceck kecepatan loading blog anda pada toolbar alexa belum terdaftar mas, tetapi sebagai saran, faktor yang sangat mempangaruhi kecepatan loading adalah muat gambar, jadi jika ingin menyisipkan gambar pada halaman blog, jangan langsung upload gambar, upload terlebih dahulu ke picasa, selanjutnya terapkan koreksi, baru ambil url-gambar lalu upload pada blog,

      kalau problem diatas, saya sudah lupa pengaturannya, tetapi itu menandakan ada beberapa widget yang tidak dapat terbaca saat menggunakan versi mobile,sehingga muat laman cukup lama

      Hapus
  7. dicoba ya sis ilmu nya, tapi aman ga ya sis, takut dihukum ama google, maklum ane pemula sis

    BalasHapus
    Balasan
    1. sebenarnya hal seperti ini dilarang mas, terlebih kita menyisipkan js tersebut secara langsung dalam struktur template, kalau belum paham tentang perkodean, sebaiknya jangan dipasang mas,

      untuk mempecepat loading blog salah satunya perbaiki pada laman widget yang berlebihan. itu saja sebagai awalnya.
      selanjutnya mas bisa pelajari disini tentang perkodean HTML template

      Tata Letak HTML Template Halaman Posting

      Hapus
    2. nyimak aja mba dev, keren dah...kaya orangnya....

      Hapus
  8. Sama mbak ini blog kamu saya coba tes di yang punya;
    Optimalkan Pengiriman CSS yang berikut:
    https://www.blogger.com/…189244943-widget_css_mobile_2_bundle.css
    https://www.blogger.com/…&zx=98939715-ca87-49d1-bde4-7869eb6d1061
    tolong solusinya gimana?

    BalasHapus
  9. istimewa, sukses, cepat bgt mba.

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK