cloteh.com – Salah satu permasalahan yang sering dikeluhkan oleh banyak pemilik blog ialah kecepatan pemuatan alias loading halaman blog. Mereka banyak sekali yang menanyakan bagaimana caranya untuk mempercepat loadingnya? Beberapa suhu dan mastah banyak yang menyarankan untuk menghapus CSS atau JavaScript yang tidak digunakan, juga menyarankan untuk melepas beberapa widget yang tidak penting, atau yang sering yakni saran untuk menggunakan gambar blog yang ringan atau yang sudah terkompres. Hal-hal tersebut memang mampu mengurangi size page atau ukuran total halaman, namun pada prakteknya, loading masih saja berasa berat. Lalu bagaimana solusinya agar loading blog menjadi ringan tanpa harus mengorbankan banyak sekali script atau elemen-elemen dalam halaman blog itu sendiri?
Sebelum menyelesaikan masalah pemuatan halaman ini, hal yang perlu dilakukan pertama kali yaitu dengan mengetahui ‘penyakit‘ apa yang membuat blog kita terasa berat. Untuk bisa mengetahuinya bisa dilihat melalui tes pada Google Page Speed Insight, atau bisa juga cek pada halaman GT Metrix.
Isi Artikel
MENGURANGI PAGE SIZE BLOG AGAR FAST LOADING
Beberapa sahabat Blogger saya sering bertanya :
Bang, saya pakai template buatan si ANU, di halaman demo loadingnya cepet banget, kok pas saya instal di blog pribadi malah berat dan tidak fast load, ya?
Ada beberapa penyebab yang sering terjadi pada kasus yang demikian. Beberapa diantaranya ialah :
- Halaman terlalu banyak gambar
- Gambar pada halaman ukurannya terlalu besar, sehingga membutuhkan waktu untuk dimuat
- Ada resource eksternal yang harus dimuat (misal : Framework, Iframe, CSS, atau JS)
- Struktur halaman tidak valid, maksudnya tag html yang dimuat tidak sesuai format yang seharusnya. Misal salah meletakkan tag penutup pada heading, atau tag tidak disertai penutup.
- Faktor eksternal (seperti bandwith hosting, storage hosting, internet down, dll)
Pada 2 (dua) poin terakhir jarang sekali terjadi, namun pada poin-poin sebelumnya sangat sering terjadi. Bagaimana caranya memperbaiki loading blog? Beberapa hal yang mungkin bisa kamu lakukan ialah sebagai berikut :
Jangan Terlalu Banyak Gambar
Gunakan gambar seperlunya pada halaman blog. Semisal pada halaman homepage, jangan tampilkan terlalu banyak thumbnail pada recent post atau popular post, kamu bisa atur recent post dan popular post cukup 5 atau 6 saja. Sedangkan untuk halaman postingan gunakan gambar-gambar pendukung seperlunya, kamu bisa gunakan 2 gambar saja untuk artikel 500 kata, atau 3 gambar untuk artikel 1000 kata.
Gunakan Gambar yang Ringan
Kamu bisa menggunakan gambar yang ringan, bisa gunakan yang ukurannya dibawah 100 KB. Jika tidak ada, kamu bisa kompres gambarnya agar ukurannya semakin langsing. Kamu bisa gunakan Tinypng.com (untuk gambar format PNG) atau Tinyjpg.com (untuk gambar format JPG). Kedua tools ini disebut sangat baik dalam melakukan kompres ukuran gambar dengan maksimal, dengan kualitas gambar yang nyaris tidak berubah.
Selain itu ada opsi lain yang bisa kamu lakukan terkait gambar ini. Hindari menggunakan animasi atau GIF pada halaman blog kamu, atau juga bisa gunakan gambar dengan format WEBP yang memang digunakan khusus untuk ditampilkan pada web.
Jangan Menampilkan Banyak Iklan
Seperti disebut di atas, bahwa salah satu faktor penyebab halaman berat ialah karena terlalu banyak memuat resource eksternal. Iklan (terutama CPC dan CPM) adalah salah satu hal tersebut. Coba perhatikan pada script iklan yang kamu pasang. Kebanyakan menampilkan resource atau elemen dari luar situs kamu. Sebagai contoh script iklan Google Adsense, yang mana pada setiap awal baris script iklan tersebut mengambil javascript dengan alamat https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
Ini adalah satu penyebab blog semakin berat. Apalagi jika script eksternal seperti ini ditulis atau diletakkan berulang-ulang. Maka browser si pembaca akan memuat script tersebut saty persatu yang akan berakibat menjadi semakin lemotnya halaman blog kamu.
MERINGKANKAN LOADING BLOG DENGAN LAZY LOAD ADSENSE
Salah satu cara yang sering dilakukan ialah dengan menambahkan script javascript yang berguna untuk menunda pemuatan beberapa element tertentu dan menampilkan text artikel dan css terlebih dahulu. Script ini dinamakan Lazy Load.
Lazy Load sering di aplikasikan pada elemen gambar atau tag <img />, yang mana tujuannya untuk menampilkan gambar setelah konten atau artikel selesai ditampilkan secara utuh. Jika konten sudah tampil utuh, maka tag IMG ini baru dimuat dan gambar bisa ditampilkan setelah semua selesai di loading.
Tapi sebenarnya, cara ini bisa dilakukan untum elemen lain, bukan hanya untuk gambar. Kebanyakan blogger mengaplikasikan ke gambar karena menganggap gambar adalah resource paling berat. Sebenarnya tidak demikian, javascript iklan justru yang seharusnya perlu diperhitungkan. Maka dari itu, kita akan mencoba mengaplikasikan Lazy Load ini untuk Iklan (sebagai contoh : Iklan Adsense).
MEMASANG SCRIPT LAZY LOAD ON SCROLL PADA BLOG
Jika kebanyakan script lazy load memakai prinsip “MUAT YANG LAIN DULU, BARU GAMBAR/IKLAN”, maka kali ini kita gunakan fungsi on scroll. Jadi prinsipnya akan berubah menjadi “MUAT YANG LAIN DULU, MUAT IKLAN/GAMBAR HANYA SAAT DI SCROLL”. Jadi, jika halaman di scroll, maka baru menampilkan gambar atau iklan. Jika tidak di scroll, ya iklan tidak akan di tampilkan.
Script ini saya dapatkan di Kompi Ajaib dan Arlina Dzgn, terimakasih buat kalian berdua. Untuk pengaplikasian kali ini kita buat untuk Adsense ya, jika untuk lainnya nanti silahkan di modifikasi saja.
Silahkan salin Script di bawah ini :
<script>
//<![CDATA[
var lazyadsense = false;
window.addEventListener(“scroll”, function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {
(function() { var ad = document.createElement(‘script’); ad.type = ‘text/javascript’; ad.async = true; ad.src = ‘https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js’; var sc = document.getElementsByTagName(‘script’)[0]; sc.parentNode.insertBefore(ad, sc); })();
lazyadsense = true;
}
}, true)
//]]>
</script>
Untuk memasangnya silahkan ikuti langkah-langkah berikut ini :
- Masuk dashboard blogger,
- Pergi ke menu Theme,
- Klik Edit HTML,
- Silahkan cari </body> atau /body (paling akhir),
- Paste script tadi di atas </body> tadi,
- Simpan Template,
Ada syarat khusus yang perlu dilakukan agar script ini bisa berjalan normal. Yaitu :
Pada script iklan Adsense, hapus bagian baris pertama pada <script async src=’https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js’></script>. Jadi cukup pasang pada tag <ins… sampai bawah.
Semoga tips sederhana tentang mempercepat loading blog menggunakan lazy load khusus iklan adsense ini bisa bermanfaat untuk kalian. Jika ada pertanyaan, silahkan tanyakan pada kolom komentar. Terimakasih.
