√ Cara Meningkatkan Kecepatan Loading Dan Seo Template Evo Magz

komputerdia.com - Pada kesempatan kali ini, saya secara khusus akan memperlihatkan tips dan trick bagi kalian yang memakai 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, kalau 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 instruksi atau script modifikasi yang kita terapkan di template tersebut

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

Baca Juga Artikel Menarik Lainnya:

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 instruksi diatas dengan instruksi dibawah ini

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

Kedua silahkan cari instruksi dibawah ini

]]></b:skin>

Ganti instruksi diatas dengan instruksi ibarat dibawah ini

*/]]></b:skin>

Langkah ketiga, silahkan kalian cari instruksi dibawah ini, dan hapuslah instruksi 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 instruksi </head>, dan letakkan instruksi dibawah ini sempurna diatas instruksi </head>.

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/> <script type='text/j4vascript'> 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 instruksi dibawah ini dan silahkan hapus instruksi tersebut

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

Langkah keenam, silahkan cari instruksi </head> dan letakkan instruksi dibawah ini sempurna diatas instruksi </head>.

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

Langkah terakhir silahkan kalian masukkan instruksi atau script Lazy Load, instruksi ini berfungsi untuk meringankan loading blog yang diakibatkan alasannya yaitu konten gambar yang memiliki kapasitas yang sangat besar.
Cari instruksi </body> dan letakkan instruksi dibawah ini sempurna diatas instruksi </body>.

<script type='text/j4vascript'> //<![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/AVvXsEgO1_rDjOZbO0K_YqEQL1LxxCjksNSPCp5OxacEu9kCkrd4-stkrfK4nXD3uFdC0uwNZ5FRfoEtMouPjsCPI6nyUEOsqH5VMWp34J6LjWMQtEzqsBmQSdjnqZAeHOvdcVgIELuYiX8PUkHs/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 melaksanakan cara ini, sebaiknya kalian backup terlebih dahulu template orisinil biar bilamana terjadi kesalahan kalian sanggup merestore-nya dengan mudah
Dicara bab kedua, kalian perlu juga untuk meng-Compress instruksi html, css ataupun instruksi Jquery kalian biar loading blog makin joss
Contoh saya akan meng-compress instruksi css sajian content warpper, dalam template evo magz setiap instruksi css akan selalu diawali dengan tag pembuka inisial nama instruksi tersebut contohnya /* CONTENT WRAPPER */, dan akan diakhiri dengan instruksi inisial pembuka css yang lainnya
Caranya silahkan kalian cari bab instruksi html, css atau Jquery yang akan kalian compress
Silahkan kalian Blok instruksi 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 bab kotak bawahnya

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

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

Sumber http://www.komputerdia.com