Tulisan ini dibuat bermula ketika beberapa hari lalu saya melakukan test situsweb dengan GTmetrix, dan mendapatkan informasi bahwa script Custom Search yang saya dapatkan dari AdSense ternyata memblokir pembukaan halaman. Alhasil loading time lebih lambat dari seharusnya.
Loading time begitu penting karena selain untuk memberi pengalaman yang baik bagi pengunjung ketika membuka halaman, adalah juga karena pembatasan jumlah hit per ketika yang biasanya diterapkan untuk shared hosting. Probabilitas server error semakin besar dengan semakin lamanya loading time saat jumlah pengunjung meningkat, dan tentu saja itu sebuah hal yang sebisa mungkin harus dihindari.
Cukup lama juga saya mencari informasi tentang bagaimana membuat script ini agar asynchronous. Pemilihan kata kunci yang salah atau kurang tepat sering menjadi kendala dalam pencarian, sehingga hasil pencarian sering melenceng dari yang diharapkan.
Bagaimana pun akhirnya saya bisa menemukan script asynchronous itu, yang setelah saya test kembali dengan GTmetrix memberi hasil yang menggembirakan. Tidak ada lagi blocking pada page rendering. Pada script pun sudah bisa dilihat bahwa kodenya memang asycnhronous.
Untuk mendapatkan script Asynchronous Google AdSense Custom Search, lakukan langkah sebagai berikut.
- Login ke akun Google / Adsense
- Buka halaman https://www.google.com/cse/all.
- Klik tautan nama iklan AdSense Custom Search Anda. Anda juga bisa membuat yang baru.
- Klik "Look and feel".
- Pada "Layout" pilih layout yang Anda suka. Saya menggunakan "Overlay". Klik "Save"
- Pada "Themes", klik salah satu (saya memakai "Default"). Klik "Save"
- Pada "Customize", pilih warna box dan border sesuai selera Anda. Klik "Save & Get Code". Code Anda akan seperti ini:
<script>
(function() {
var cx = 'partner-pub-xxxxx:xxxxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'https:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search> - Copy code-nya, dan paste di tempat yang Anda inginkan form custom search Anda akan muncul.
Ketika memasangnya pada widget, saya melihat kotak custom search terlihat terlalu gemuk, sehingga hampir saja saya batal memasangnya. Namun setelah berkutat beberapa lama, akhirnya saya bisa menemukan dengan cara saya sendiri bagaimana mengatur lebar kotak, yang Anda bisa baca pada tulisan Merubah Kotak Asynchronous Google AdSense Custom Search.
Label: AdSense, Inspirasi, Tutorial
Bagikan ke: WhatsApp, Email. Print!.
