Cara Meningkatkan Kecepatan Loading dan Seo Template Evo Magz

komputerdia.com - Pada kesempatan kali ini, saya secara khusus akan memberikan tips dan trick bagi kalian yang menggunakan template Evo Magz untuk blognya. Secara keseluruhan template Evo Magz memang sudah di setting seo friendly, Responsive, Mobile friendly dan fast loading.

Namun perlu kalian ketahui, jika postingan kalian sudah sangat banyak tentunya kecepatan (fast loading) dari template evo magz ini agak sedikit berkurang. Hal ini dikarenakan banyaknya konten gambar yang kita muat dan banyaknya kode atau script modifikasi yang kita terapkan di template tersebut 

Untuk masalah yang satu ini, tentunya saya sudah mempraktekannya sendiri, terlebih blog saya yang satu ini memang menggunakan template Evo Magz premium buatan Mas Sugeng

Baca Juga Artikel Menarik Lainnya:

• Cara Daftar Akun Github dan Cara Upload File Menggunakan GitHub
• 13 Cara Membuat Artikel Seo Friendly Agar Bisa Bersaing Di Mesin Pencari
• Cara Daftar Webmaster Tools dan Mengkonfigurasi Blog Pada Webmaster Tools

Meningkatkan Fast Loading dan Seo Template Evo Magz

A. Memperbaiki Struktur Kode Evo Magz

• Kode pertama yang harus kalian cari adalah

<b:skin><![CDATA[/*

• Silahkan kalian ganti kode diatas dengan kode dibawah ini

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[

• Kedua silahkan cari kode dibawah ini

]]></b:skin>

• Ganti kode diatas dengan kode seperti dibawah ini

*/]]></b:skin>

• Langkah ketiga, silahkan kalian cari kode dibawah ini, dan hapuslah kode tersebut

<link href='//fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>

• Langkah ke empat, kalian cari kode </head>, dan letakkan kode dibawah ini tepat diatas kode </head>.

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>
<script type='text/javascript'>
function loadCSS(e, t, n) { &quot;use strict&quot;; var i = window.document.createElement(&quot;link&quot;); var o = t || window.document.getElementsByTagName(&quot;script&quot;)[0]; i.rel = &quot;stylesheet&quot;; i.href = e; i.media = &quot;only x&quot;; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || &quot;all&quot; }) }
loadCSS(&quot;//fonts.googleapis.com/css?family=Open+Sans+Condensed:700&quot;);loadCSS(&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css&quot;);
</script>

• Langkah kelima, cari kode dibawah ini dan silahkan hapus kode tersebut 

<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

• Langkah keenam, silahkan cari kode </head> dan letakkan kode dibawah ini tepat diatas kode </head>.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> 

• Langkah terakhir silahkan kalian masukkan kode atau script Lazy Load, kode ini berfungsi untuk meringankan loading blog yang diakibatkan karena konten gambar yang mempunyai kapasitas yang sangat besar.
• Cari kode </body> dan letakkan kode dibawah ini tepat diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(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/AVvXsEg-M_wa4P0PpXT33kaHmqXRMBqURn3JaOEY8DdaHRLlObiK6tF3CU8YbiZz-wfW7sLkg7KI0AbggTZBP51TgA8Y8spqQYo2tsOo9WTZY4N_d0Lq7el3k_VAhwh4NYGkwLIp0VC2ih1SSKTP/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

• Simpan atau Save template evo magz kalian

B. Compress Kode HTML dan CSS Template Evo Magz

• Sebelum melakukan cara ini, sebaiknya kalian backup terlebih dahulu template asli agar bilamana terjadi kesalahan kalian dapat merestore-nya dengan mudah
• Dicara bagian kedua, kalian perlu juga untuk meng-Compress kode html, css ataupun kode Jquery kalian agar loading blog makin joss
• Contoh saya akan meng-compress kode css menu content warpper, dalam template evo magz setiap kode css akan selalu diawali dengan tag pembuka inisial nama kode tersebut contohnya /* CONTENT WRAPPER */, dan akan diakhiri dengan  kode inisial pembuka css yang lainnya
• Caranya silahkan kalian cari bagian kode html, css atau Jquery yang akan kalian compress
• Silahkan kalian Blok kode css yang akan kalian compress

• Setelah di copy silahkan kalian buka situs compress html, dan pastekan copy tersebut kemudian tekan tombol compress dan tunggu hasil compressnya.

• Maka hasil code compress akan kalian lihat pada bagian kotak bawahnya

• Setelah itu silahkan kalian copy kode hasil compress tersebut dan hapus kode asli yang ada di template evo magz dengan hasil code compress tadi.
• Untuk meng-compress kode HTML juga sama dengan cara diatas, namun situs yang menjadi tujuannya silahkan kalian kunjungi situs HTML Compressor.
• Lakukan setting seperti berikut ini.

• Pada bagian Code type silahkan ubah menjadi Blogger.
• Klik menu show options di samping blogger tersebut
• Dan ubah HTML Tag and Spaces menjadi Agressive Minimization.
• Selanjutnya copy kode HTML yang akan kalian compress dan tekan tombol compress.
• Tunggu proses compress hingga selesai, dan cara pemasangannya sama seperti pada cara diatas
• Selesai semoga bermanfaat untuk kalian semuanya
• Untuk memantafkan hasilnya, kalian juga bisa menerapkan cara membuat artikel seo friendly yang bisa kalian baca di artikel berikut ini
• 13 Cara Membuat Artikel Seo Friendly Agar Bisa Bersaing Di Mesin Pencari

Share this post