Pada Tutorial Kali ini, Admin mencoba Memberikan SEMUA cara yang Admin tahu untuk Mempercepat Loading di blog, termasuk cara yang admin terapkan pada blog kesayangan ini hehe, Lebih sayang blog daripada Pacar :3 :D
Mempercepat loading di blog tidak terlalu susah, dan juga tidak terlalu gampang, jadii sobat harus mengikuti tata cara dibawah ini untuk mempercepat loading blog.
Cara Mempercepat Loading Blog
Seperti yang Mastahweb uraikan diatas, Ada banyak cara untuk Mempercepat loading blog, Sekarang mastahweb mencoba memberikan Penjelasannya & Mempraktikkannya satu persatu.Yukk Simak Cara cara berikut..
1. Compress Semua Script pada Blog (HTML, CSS, JAVASCRIPT)
Hampir Semua Blog & Website Memiliki masalah loading karena Script seperti HTML, CSS, dan Javascript tidak di Compress. mengcompress sebuah kode sama sekali tidak merugikan bagi sobat, Tapi jika sobat mengcompress Script diatas, Pasti blog sobat fast Loading.Berikut ini adalah list situs untuk Mengcompress Script pada Template Blog.
2. Compress Gambar & Ukuran (Pixel)
Jika sobat sudah selesai melakukan Compress berbagai macam kode pada blog, namun Blog sobat masih Melambat, Kemungkinan Penyebabnya adalah gambar tidak dicompress, dan Asal asalan memilih Gambar & Ukuran.Jika sobat yang Hobby Copy paste postingan orang tidak masalah, tapi jika sobat yang benar benar terjun di dunia blogger, Ada baiknya Selalu Mengcompress dan mengatur Ukuran pada Gambar.
Ukuran gambar & Size yang Optimal
- Ukuran gambar : 700x360
- Size : 10-30KB
Sebenarnya, Dengan melakukan 2 Cara ini sudah cukup untuk Meringankan beban Blog Sobat, Tetapi ada baiknya terus kita Optimalkan Dengan cara cara yang akan Admin berikan lagi.
3. Menggunakan Javascript Lazyload
1. Login ke Blogger2. Lihat tab Tema > Edit HTML
3. Masukkan Javascript dibawah ini tepat diatas kode </body>
<script type="text/javascript">
//<;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/AVvXsEiCr_1KJzsx1csndvdkx0Ylopm3hb3VZugeMxpVSgYKMhyphenhyphenlk5iszJRKtTx5u4wIvrFRfh21pqfBpdyHoCA8e7La-LfDdE5_LMX0lzIk4zi2xldhci96tutEc0tgzwGkxmTN3qlWkjTSNv2F/s1600/mastahweb.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
4. Menggunakan DNS Prefetch
Penjelasan DNS PrefetchDNS Prefetch Merupakan salah satu cara untuk Mempercepat loading blog loh sobat, Walaupun terkadang asing di telinga sobat semua khususnya para blogger. Karena cara ini admin Rahasiakan Hehe, Jadi Mastahweb coba Membagikan aja deh.
DNS Prefetch berfungsi untuk Mempercepat loading pada Link External, Seperti misal kode external js, css, link,dll.
Dikutip dari W3C "jenis Relasinya link dns-prefetch digunakan untuk menunjukkan asal yang akan digunakan untuk mengambil sumber daya yang diperlukan"
Cara Penggunaan DNS Prefetch
1. Login ke Blogger
2. Lihat tab Tema > Edit HTML
3. Masukkan kode dibawah ini, Tepat dibawah kode <head>
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//use.fontawesome.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//feedburner.google.com' rel='dns-prefetch'/>
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>
<link href='//github.com' rel='dns-prefetch'/>
<link href='//player.vimeo.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>
Kesimpulan :
Jika sobat Menerapkan cara cara yang sudah mastahweb uraikan diatas, Dijamin 100% Pasti blog sobat akan Fast Loading dan ringan, Cara ini juga untuk Mengoptimalkan blog kita di mata pencarian Search Engine.Silahkan diterapkan sobat:)
Sampai Jumpa di Internet +_=
