Kecepatan loading sebuah blog sangat dipengaruhi oleh kode-kode pemrograman yang ada pada template. Untuk itu dalam memilih template, jangan cepat tergiur oleh judul artikel dengan embel-embel "fast loading".
Silahkan cek loading blog Anda saat ini juga. Jika score yang Anda peroleh menunjukkan indikator warna merah atau kuning, Anda wajib waspada. Itu sinyal yang memberitahu kerja loading blog Anda masih lamban dan butuh perbaikan.
Lewat artikel ini saya bagi tips yang bisa Anda terapkan agar loading blog Anda lebih enteng dan ngebut.
Tips agar Loading Blog Ringan dan Cepat
Loading halaman super cepat (versi desktop dan mobile) sangat di sukai oleh mesin pencari dan penggunanya.
Dimata search engine, blog dengan loading yang ringan memiliki struktur yang mudah untuk dirayapi. Bagi pengunjung, cepatnya waktu loading tak akan membuat mereka lama menunggu.
Nah, berikut ini tips yang saya sarankan untuk Anda lakukan, demi kepuasan pembaca blog Anda.
1. Kode Jquery harus asinkron
Hampir di semua template sebuah website terdapat kode script jquery. Jquery adalah library JavaScript multiplatform yang dirancang agar menyusun client-side script pada file HTML menjadi lebih mudah.
Dengan syntax jquery, para pengembang template lebih gampang dalam merancang berbagai plugin berbasis JavaScript. Plugin inilah yang dipakai untuk menyusun abstraksi seperti interaksi animasi, dan efek yang kompleks dari berbagai widget yang dapat dikonfigurasikan.
Namun begitu, penempatan kode jquery pada template haruslah dibarengi dengan kode asinkron agar kerja loading blog jadi lebih ringan dan cepat. Silahkan buka template Anda, cari kode jquery seperti ini:
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
Untuk menambah kecepatan loading blog, tambahkan kode asinkron (tulisan warna biru) hingga jadi seperti di bawah ini.
<script async='true' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
2. Hapus kode jquery pada widget
Saat memasang widget pada blog, perhatikan kode script nya. Hapus jika ada kode jquery di dalamnya. Anda tak perlu khawatir jika widget tidak akan muncul, karena secara otomatis kode jquery nya sudah di load dari template Anda.
Andai kode jquery pada widget tidak dihapus, justru akan membebani loading blog. Resiko nya tentu widget akan lama tampil, atau muncul tapi tidak sempurna. Dan dikhawatirkan akan menimbulkan konflik jquery pada template.
3. Kompres gambar
Setiap artikel butuh gambar untuk visualisasi nya. Gambar pun bisa di optimasi untuk mendekatkan artikel di halaman bergengsi. Masalahnya tiap gambar punya muatan file dan format yang berbeda. Perhatikan kedua hal itu saat memasang gambar untuk artikel Anda.
Makin besar ukuran file dan resolusinya, daya muat blog akan semakin berat. Itulah perlunya meng-kompres gambar agar ukuran file jadi lebih ramping. Jangan buat blog Anda tersiksa, segera perkecil file gambar Anda.
4. Minimalkan html template
Untuk membantu meringankan kerja loading, HTML template pun perlu diperkecil ukurannya. Banyak situs yang memberikan layanan gratis untuk merampingkan HTML. Salah satunya adalah HTML Compressor.
Selain mudah, hasil kompresinya akan tetap mempertahankan kode script asli pada template Anda. Mereka hanya ‘membuang’ kode-kode yang memang tidak dibutuhkan.
Perlu diingat, sebelum melakukan tips ini, backup dulu template Anda.
Berikutnya, buka alamat ini https://htmlcompressor.com lalu klik boks hijau bertuliskan “Start Using Now”. Dari edit html, gunakan ctrl+A lalu copy dan paste kan html template Anda pada kotak source di halaman HTML Compressor. Selanjutnya klik compress. Tunggu beberapa saat.
Setelah muncul hasil kompres, pilih select all, lalu paste kan ke html template Anda. Pratinjau template, jika tidak terjadi masalah simpan template.
Agar lebih yakin, coba cek URL homepage dan URL artikel ini pada pagespeed insight. Lihat skornya ?
5. Pisahkan kode asinkron iklan pada css template (khusus blog adsense)
Tips ini khusus buat pemain Adsense blog. Tahukah Anda, iklan termasuk salah satu penyebab lambatnya tampilan loading halaman sebuah blog, tak terkecuali iklan Adsense.
Andai ada lebih dari satu iklan Adsense yang terpasang pada blog, mengakibatkan terjadinya pengulangan pada pembacaan kode asinkron. Ini bisa memperlambat daya muat loading. Tapi tenang, ada cara untuk menyiasatinya.
Secara umum, kode script iklan Adsense adalah seperti ini.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- blog si kuya 300x250 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-xxxxxxxxxxx"
data-ad-slot="xxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Sengaja saya beri warna pada kode tersebut agar lebih mudah membedakannya. Untuk mempercepat loading iklan, prosesnya mirip dengan pemasangan kode jquery di atas.<!-- blog si kuya 300x250 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-xxxxxxxxxxx"
data-ad-slot="xxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Pisahkan kode asinkron iklan Adsense (tulisan warna biru) lalu tempatkan pada CSS template, tepatnya di bawah kode </b:skin>. Selanjutnya, saat memasang kode iklan lewat widget atau pun dalam postingan, cukup body iklan nya saja yang Anda pasang (tulisan warna merah).
Pemisahan ini tujuan nya agar saat proses loading, kode asinkron di load cukup sekali untuk semua iklan yang terpasang sehingga loading pun jadi lebih enteng.
6. Modifikasi css bundle blogger
Bagi Anda yang sering ngecek speed loading lewat pagespeed insight, dan kebetulan mendapat skor warna merah atau kuning, tentu tidak asing dengan warning ini “Eliminate render-blocking JavaScript and CSS in above-the-fold content”.
Peringatan itu memberitahu bahwa ada script di konten paruh atas pada template yang menghalangi proses render. Salah satu nya adalah css bundle blogger.
Solusinya cukup mudah. Cari kode <b:skin>….</b:skin> lalu letakkan kode di bawah ini sebelum kode <b:skin>.
<style type="text/css"> <!-- /*
Simpan template, dan cek kembali skor Anda.7. Pasang widget seperlunya
Peran widget sangatlah penting. Sebagai blogger yang cerdas, Anda harus bisa menentukan apa saja widget yang mujarab untuk meningkatkan pageview.
Utamakan widget yang berfungsi sebagai navigasi untuk menggiring pengunjung agar mengklik artikel yang ada pada blog. Jangan pasang widget yang nggak penting bagi pembaca yang justru akan ‘menyiksa’ blog Anda.
Menurut saya, ada 3 widget yang wajib Anda pasang yaitu popular post, recent post, random post. Diluar ketiganya, saya anggap tidak terlalu penting.
Sumber : http://www.maseteguh.com/