KECEPATAN (Speed) merupakan faktor penting SEO Blog --membuat blog mudah dan cepat terindeks Google.
Dua elemen utama yang membuat loading blog lambat adalah kode javascript dan ukuran gambar. Salah satu script yang ada di blog adalah jQuery.
Link ke font Google juga mempengaruhi loading karena harus memanggil kode huruf ke situs lain. Kode CSS termasuk faktor yang mempengaruhi loading blog jika tidak dikompress.
Dengan demikian, Cara Mempercepat Loading Blog Agar Lebih SEO Friendly di antaranya dengan lima cara berikut ini:
- Kompress Kode CSS
- Kode Script untuk Link ke Font Google
- Pasang kode Lazy Load
- Hapus Bundle CSS Bawaan Blogger
- Optimalkan Gambar
Cara Ampuh Mempercepat Loading Blog Agar Lebih SEO Friendly
Dengan kode CSS yang dikompres, blog akan lebih ringan. Memperkecil CSS bisa dilakukan secara manual atau dengan otomatis.
Kode CSS yaitu semua kode yang ada di antara kode ]]><b:skin> dan ]]></b:skin> atau <style> dan <style>
Semua kode CSS tersebut bisa dikompress secara online di situs-situs berikut ini:
Contoh, kode CSS tadinya begini:
body {
font-size:14px;
font-family:Arial;
}
h1 {
font-size:14px;
font-family:Arial;
}
Setelah dikompress akan menjadi begini:
body{font-size:14px;font-family:Arial}h1{font-size:14px;font-family:Arial}
atau begini:
body{font-size:14px;font-family:Arial}
h1{font-size:14px;font-family:Arial}
#2. Mempercepat Loading Blog dengan Optimalisasi Ukuran Gambar
Ukuran gambar memainkan peran utama dalam loading blog. Makin besar ukuran gambar, makin lambat tampilan blog. Demikian sebaliknya.
Gambar atau foto yang akan diupload sebagai pelengkap atau ilustrsi postingan bisa lebih dulu dioptimalkan di situs ini: Image Optimizer.
#3. Memasang Javascript lazyload
Kode Lazy Load merupakan "primadona" untuk mengatur tampilan gambar di blog. Kode Lazy Load ini akan menyembunyikan gambar yang belum muncul di layar sehingga blog tampil ringan.
Simpan kode Lazy Load berikut ini di atas 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/AVvXsEjhZFAcoapOqbdcD6crOg3FEZBboAb3ZuTEUrqt7NhyPuvNFiMStKuT3-dBJrT5zCMQsmWvGINhV8rfTPY2QbKPQi5J07XvXBCmNN3Ux4vn83a4kIE-OU2EXx-wNnfdxb_6m_9F2zSi1oo/h120/lazy+image.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
#4. Kode Script untuk Link ke Font Google
Jika Anda menggunakan font Google, maka biasanya ada kode link seperti ini:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Demikian pula link ke Font Awesome:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
Kedua link tersebut mempelambat loading blog. Untuk mempercepatnya, pindahkan kedua link tersebut ke dalam kode berikut ini.
Pasang kode berikut ini di atas kode </head>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i|Roboto+Condensed:700");
loadCSS("https://fonts.googleapis.com/css?family=Oswald:300,400,500,600");
loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>
#5. Hapus CSS Bundle Bawaan Blogger
CSS Bundle bawaan blogger itu kodenya seperti ini:
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/763856997-widget_css_bundle.css' />
Ini langkah populer di kalangan blogger, namun hanya berlaku di template yang bukan bawaan blogger. Untuk template bawaan blogger, akan terjadi error. Namun, coba saja, siapa tahu cocok di template Anda.
Caranya:
- Ganti <head> dengan <head>
- Ganti </head> dengan </head><!--<head/>-->
- Ganti </body> dengan <!--</body>--></body>
Silakan dicoba 5 Cara Ampuh Mempercepat Loading Blog Agar Lebih SEO Friendly di atas. Semoga cocok buat blog Anda saat ini. (bloggerbandung.net).*
Post a Comment
Post a Comment