Cara Mempercepat Template Blog di PageSpeed Insights hingga 90%

Tags

Cara Mempercepat Template Blog di PageSpeed Insights - hello sobat, pada posting kali ini saya akan membagikan seputar template blog, tentang cara mempercepat template blog hingga 90 - 100% di pagespeed insight tool.

beberapa rentang waktu yang lalu, saya membuat template dan template tersebut sangat - sangat lambat dan dengan struktur yang kurang maksimal, mungkin inilah resiko menggunakan hosting gratis blogger dan juga resiko membuat template sendiri, namun saya rasa itu tidak menjadi beban, dengan beberapa solusi akhirnya saya mendapatkan cara untuk mempercepat loading template blog saya hingga 90% dari sebelumnya.

tampilan hasil dibawah ini adalah hasil dari template yang saya coba di domain lama, atau di website saya yang lama.

Cara Mempercepat Template Blog di PageSpeed Insights
sekarang saya akan membagikan cara-cara untuk meningkatkan kecepatan template tersebut, kepada sobat blogger sekalian, untuk wordpress, saya rasa hal ini sangat mudah, karena banyak plugin - plugin yang bisa mengatasi hal ini, sebelumnya sihlakan disimak ini terlebih dahulu...

#1. Konten blog.

Dalam tahap awal, kecepatan website, yang di perioritaskan untuk terbuka lebih awal adalah isi dari kontent atau halaman website, dan yang lainnya bisa menyusul, jadi bagaimana mengatasi ini, mudah saja, jika anda memakai template premium atau template buatan orang biasanya sudah teratur strukturnya.

Namun jika belum ya sihlakan di perbaiki ! 

cukup atur CSS koding, HTML dan javascriptnya.
HTML : Header => Blog1 => footer.
CSS : untuk cssnya sesuaikan saja, peletakkan, begitu juga untuk javascripntya.

#2. Menyembunyikan CSS reset Bawaan BLogger.

css bawaan blogger akan terdeteksi oleh page speed insight, karena javascript bawaan blogger ini memuat juga pada halaman website atau template blog yang anda pakai. Bagaimana mengatasi hal ini, ikuti langkah - langkah berikut :

Cari Kode ini <b:skin><![DATA[ ganti dengan kode dibawah ini :
<style type="text/css"> <!-- /*<![CDATA[*/]]> Selanjutnya Cari Kode ini ]]></b:skin> ganti dengan kode dibawah ini :
/*]]>*/ </style>Selanjutnya Cari Kode ini <head> ganti dengan kode dibawah ini :
&lt;head&gt;Selanjutnya Cari Kode ini </head> ganti dengan kode dibawah ini :
&lt;/head&gt;&lt;!--<head/>--&gt;terakhir simpan template anda, dan lihat hasilnya di tool, page speed insight, jika masih kurang lanjut, ke tahap ke 3.

#3. Menyembunyikan Js widget BLogger.

javascript widget bawaan blogger, coding ini bisa anda lihat jika menggunakan inspact element tool/melihatnya dengan bantuan source code Ctrl U pada browser, widget yang digunakan untuk widget -widget ini juga mempengaruhi perfoma kecepatan loading template,coding sejenisnya adalah koding js dari google plus blogger, dan bagaimana cara mengatasinya, simak berikut ini :

Cari Kode ini </body> ganti dengan kode dibawah ini :
&lt;!--</body>--&gt;&lt;/body&gt;sihlakan simpan template anda dan lihat hasilnya.

#4. Mensingkronkan Loading CSS eksternal.

paling banyak dijumpai di beberapa template blogger, memakai font - font eksternal, dan icon - icon eksternal yang berupa kode pemanggil .CSS, hal ini berdampak pada pemuatan pada pemanggil url koding tersebut saat template meload file CSSnya, maka pengaruhnya dengan eksternal link CSS ini menjadil lambat, nah bagaimana cara mengatasinya, sihlakan di simak berikut ini :

Simpat kode dibawah ini, tepat di atas </head> :
<script> //<![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("//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"); //]]> </script>
sihlakan ganti link css ekternal yang anda punya, atau link css eksternal yang bermasalah di pagespeed insight, jika anda mempunyai dua atau lebih link CSS eksternal, maka cukup tambahkan lagi koding LoadCSS dibawahnya, seperti contoh berikut ini :
<script> //<![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("//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"); loadCSS("//fonts.googleapis.com/css?family=oswald:700"); loadCSS("//www.blogger.com/static/v1/widgets/1691512649-css_bundle_v2.css"); //]]> </script>

#5. Mensingkronkan Loading script .js Eksternal.

biasanya jika anda menggunakan beberapa widget yang dibuat oleh orang lain, maka mereka pastinya menyimpan kodingnya diluar hal ini juga lebih bagus untuk mempersingkat koding javascript, dan tidak membuang banyak tempat koding hanya untuk javascript, namun file script .js ini mempengaruhi juga perfoma loading Template anda, jadi bagaimana cara mengatasinya, berikut sihlakan simak :

Contoh saya mempunyai Script .js Eksternal :
<script type="text/javascript" src="https://cdn.masidyn.com/masidyn/file/gh-pages/allin.js"></script> Maka cukup tambahkan kod async="async" pada Script tersebut, seperti ini :
<script type="text/javascript" async="async"src="https://cdn.masidyn.com/masidyn/file/gh-pages/allin.js"></script> 

#6. Mensingkronkan Loading script Jquary.

pastinya anda sudah mengetahui script jquary ini, yang mana sangat berperan penting untuk javascript dan script komentar blog. seperti yang komentar di blog saya yang menggunakan jenis komentar berbalas, maka tanpa jquary, effek tersebut tidak akan bisa tercipta, jadi bagaimana agar loading jquarynya sinkron tanpa harus menghapusnya :

Cukup tambahkan script berikut async="true" di jquary anda :
<script type="text/javascript" async="true" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

#7. Mengoptimasi pemuatan gambar blog.

beberapa permasalahan lain yang timbul di page speed insight, adalah, pemuatan gambar yang tidak teroptimasi, jadinya membuat pemuatan kecepatan template menjadi lambat, untuk mengatasi hal ini anda bisa menggunakan javascript berikut, letakin tepat di atas kode </body>
<script type='text/javascript'> //<![CDATA[ for(var imgEl=document.getElementsByTagName("img"),i=0;i<imgEl.length;i++)imgEl[i].getAttribute("src")&&(imgEl[i].setAttribute("data-src",imgEl[i].getAttribute("src")),imgEl[i].removeAttribute("src"),imgEl[i].setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="));console.log(document.body.innerHTML); var imgDefer=document.getElementsByTagName("img");for(var i=0;i<imgDefer.length;i++){if(imgDefer[i].getAttribute("data-src")){imgDefer[i].setAttribute("src",imgDefer[i].getAttribute("data-src"))}}; //]]> </script>

#8. Compres koding Template.

pengkompresan digunakan untuk memperbaiki dan memperkecil size koding, yang mana biasanya ada banyak spasi yang kita buat setelah mengacak atau mengedit - edit template, biasa ada banyak spasi maupun ada banyak jarak antar koding, yang perlu anda ketahui bahwa, spasi didalam koding mempunyai ukuran 1 karakter, jadi hitung saja berapa banyak spasi di coding anda yang terbuang.

untuk itu anda perlu mengkompresnya, seperti kompres CSS dan HTML di dalam koding, 

sihlakan baca ini untuk cara mengcompres CSS koding = "cara compress CSS template blog"
untuk HTMLnya, anda bisa googling sendiri cek web - web penyedia kompres / repair struktur HTML.

sampai tahap ini, saya harap anda sudah mendapatkan nilai yang puas dengan score bagus di situs pagespeed insight, sehingga template blogger anda menjadi super ngebuut tanpa kendala apapun, tips terakhir dari saya :
hapus Javascript yang memang tidak perlu, begitu juga script / koding CSS dan HTML, jangan membuat banyak script yang tidak berguna untuk template anda.
semoga artikel di atas bisa menjadi tambahan referensi ilmu bagi sobat blogger seskalian, karena memang menggunakan template blog tidak begitu enak instan seperti menggunakan wordpress. thanks, semoga bermanfaat.

source_code sumber : blogespedia.blogspot.co.d

3 komentar

Perhatikan juga speed mobile mas, sebagian pengunjung sekarang sudah pada pakai mobile

Saya harap link sumber nya di perbaiki kang. Terima kasih.

- Berkomentarlah dengan sopan.
- No Link Aktif, SPAM, SARA P#RN.
- Jangan membalas yang tidak sesuai tema.
- Untuk "PM/tanya hal penting" bisa lewat Social Media yang saya miliki, sekalian Kenalan dengan Admin ^_^.
EmoticonEmoticon