Beranda / AdSense / Core Web Vitals / SEO / Tips Blog / Blogger

Rahasia Skor INP Hijau: Trik Fetchpriority AdSense di Blogger

Posting Komentar

Daftar Isi

Masalah Klasik: AdSense vs Interaktivitas Blog

Pernahkah Anda merasa frustrasi melihat skor Interaction to Next Paint (INP) di Google Search Console tetap merah membara meskipun sudah menggunakan template super ringan? Kita semua sepakat bahwa iklan adalah napas bagi blogger, namun di sisi lain, skrip iklan seringkali menjadi beban berat bagi performa. Optimasi Skor INP Blogger AdSense kini menjadi prioritas utama sejak Google meresmikan INP sebagai bagian dari Core Web Vitals pada Maret 2024.

Mari jujur.

Banyak dari kita hanya menyalin kode iklan, menempelnya di tata letak, dan berharap semuanya baik-baik saja. Namun, kenyataannya tidak sesederhana itu. Skrip JavaScript dari AdSense bersifat rakus sumber daya. Ia akan berebut jatah waktu proses dengan interaksi pengguna, seperti klik menu atau tombol pencarian. Jika browser sedang sibuk mengunduh iklan sementara pengunjung mencoba mengeklik sesuatu, terjadilah penundaan (delay). Inilah yang merusak skor INP Anda.

Dalam panduan ini, saya akan membocorkan teknik rahasia.

Bukan sekadar menghapus iklan, melainkan mengatur urutan prioritas pemuatannya menggunakan atribut fetchpriority. Dengan teknik ini, Anda tetap bisa mendulang dollar tanpa harus mengorbankan kenyamanan pengunjung.

Mengenal Interaction to Next Paint (INP) Lebih Dekat

Sebelum masuk ke teknis, kita perlu memahami musuh kita. INP adalah metrik yang mengukur seberapa responsif halaman web terhadap interaksi pengguna. Berbeda dengan First Input Delay (FID) yang hanya mengukur interaksi pertama, INP memantau semua interaksi selama pengunjung berada di halaman Anda.

Bayangkan ini.

Anda menekan tombol "Read More" di blog Anda. Jika butuh waktu lebih dari 200 milidetik bagi browser untuk memberikan respons visual, maka skor INP Anda dianggap buruk. Penyebab utamanya? Seringkali adalah Main Thread yang sedang "macet" karena mengeksekusi skrip pihak ketiga yang berat.

Di sinilah kecepatan loading blog dipertaruhkan. AdSense menggunakan JavaScript yang cukup kompleks untuk menentukan iklan mana yang paling relevan bagi audiens. Jika skrip ini dimuat secara agresif di awal, ia akan menyumbat jalan bagi interaksi lainnya.

Filosofi Fetchpriority: Analogi Pelayan Restoran dan Tamu VIP

Untuk memahami teknik ini, mari kita gunakan sebuah analogi unik. Bayangkan blog Anda adalah sebuah restoran populer.

Browser adalah pelayan restoran, dan sumber daya blog (gambar, teks, skrip iklan) adalah pesanan yang harus diantarkan ke meja pelanggan (pengunjung). Selama ini, skrip AdSense sering dianggap sebagai "Tamu VIP" yang sombong. Begitu ia datang, ia menuntut pelayan untuk menjatuhkan semua nampan lain demi melayaninya terlebih dahulu.

Apa yang terjadi?

Pelanggan lain yang hanya ingin meminta tisu (klik tombol) harus menunggu lama karena pelayan sedang sibuk menyiapkan hidangan mewah untuk si Tamu VIP (AdSense). Akibatnya, pelanggan merasa restoran Anda lambat dan tidak responsif.

Atribut fetchpriority adalah manajer restoran yang cerdas. Dengan memberikan atribut fetchpriority="low" pada skrip AdSense, sang manajer berkata pada pelayan: "Layani Tamu VIP ini, tapi jangan dahulukan dia jika ada pelanggan lain yang butuh bantuan cepat."

Dengan kata lain, kita membiarkan iklan tetap dimuat, tetapi dengan prioritas yang lebih rendah dibandingkan elemen interaktif utama. Ini adalah kunci sukses dalam menjaga user experience tetap optimal.

Mengapa Optimasi Skor INP Blogger AdSense Begitu Menantang?

Blogger (Blogspot) memiliki struktur yang berbeda dengan WordPress. Kita tidak memiliki plugin optimasi otomatis yang canggih. Kita harus berhadapan langsung dengan kode XML di bagian Edit HTML. Selain itu, Blogger seringkali secara otomatis memuat beberapa skrip sistem yang tidak bisa kita ubah.

Namun, keterbatasan ini justru merupakan keunggulan.

Kenapa? Karena kita memiliki kendali penuh atas kode yang kita masukkan. Kita tidak perlu khawatir tentang konflik antar plugin. Masalah render-blocking resources yang sering menghantui pengguna AdSense sebenarnya bisa diatasi dengan modifikasi kecil pada cara kita memanggil JavaScript AdSense itu sendiri.

Panduan Teknis: Injeksi Atribut Fetchpriority pada Skrip AdSense

Sekarang, mari kita masuk ke bagian inti. Pastikan Anda telah mencadangkan (backup) tema Blogger Anda sebelum melakukan perubahan ini. Kita akan memodifikasi skrip pemanggil AdSense yang biasanya diletakkan di antara <head> dan </head> atau di atas </body>.

Langkah-langkahnya:

  • Masuk ke Dashboard Blogger > Tema > Klik tanda panah bawah di samping 'Sesuaikan' > Edit HTML.
  • Cari kode skrip AdSense Anda. Biasanya terlihat seperti ini:
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx" crossorigin="anonymous"></script>
  • Tambahkan atribut fetchpriority='low' ke dalam tag tersebut.
  • Hasil akhirnya akan menjadi seperti ini:
    <script async='async' fetchpriority='low' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx' crossorigin='anonymous'/>

Tunggu, mengapa low?

Karena iklan biasanya berada di bawah lipatan (below the fold) atau setidaknya bukan elemen kritis yang harus muncul dalam sekejap mata pertama. Dengan memberikan prioritas rendah, browser akan mendahulukan pengunduhan CSS utama dan font, serta memberikan ruang bagi Main Thread untuk menangani klik user. Ini adalah langkah krusial dalam meningkatkan performa Blogger secara keseluruhan.

Jika Anda menggunakan iklan otomatis (Auto Ads), pastikan hanya ada satu pemanggilan skrip utama AdSense di tema Anda. Menghapus skrip duplikat juga akan sangat membantu mengurangi beban kerja browser.

Optimasi Skor INP Blogger AdSense Melalui Deferring Strategis

Selain fetchpriority, Anda juga bisa menggabungkan teknik ini dengan pemuatan tertunda (lazy loading) untuk unit iklan di bawah lipatan. Namun, untuk skrip utama, fetchpriority adalah solusi paling "bersih" yang direkomendasikan oleh pakar performa web saat ini.

Cara Memverifikasi Perubahan Melalui Chrome DevTools

Setelah menyimpan perubahan, jangan hanya berasumsi bahwa semuanya sudah beres. Anda harus membuktikannya. Gunakan browser Google Chrome di desktop untuk melakukan audit sederhana.

Caranya:

  1. Buka blog Anda di tab baru.
  2. Klik kanan > Inspect > Pilih tab Network.
  3. Segarkan (refresh) halaman.
  4. Cari file adsbygoogle.js dalam daftar.
  5. Lihat pada kolom Priority. Jika tertulis "Low", maka teknik injeksi Anda berhasil!

Selain itu, gunakan alat seperti PageSpeed Insights. Fokuslah pada bagian "Diagnostics". Jika Anda tidak lagi melihat peringatan berat mengenai "Reduce the impact of third-party code" yang merujuk pada AdSense dengan durasi yang sangat lama, berarti interaktivitas blog Anda sudah membaik.

Dampak Jangka Panjang Terhadap Google Search Console

Perlu diingat bahwa data di Google Search Console (GSC) adalah data lapangan yang dikumpulkan selama 28 hari terakhir. Anda tidak akan melihat grafik merah berubah menjadi hijau dalam semalam.

Tapi, jangan menyerah.

Dengan menerapkan atribut fetchpriority, Anda memberikan sinyal positif kepada algoritma Google bahwa blog Anda peduli pada pengalaman pengguna. Blog yang responsif cenderung memiliki bounce rate yang lebih rendah. Pengunjung betah berlama-lama karena mereka tidak merasa "terjebak" oleh loading iklan yang menghalangi navigasi.

Seiring waktu, perbaikan pada skor INP ini akan memperkuat otoritas blog Anda di mata mesin pencari. Google lebih menyukai situs yang cepat dan tanggap, yang pada akhirnya dapat membantu meningkatkan posisi peringkat Anda untuk kata kunci kompetitif lainnya.

Kesimpulan dan Langkah Lanjutan

Mengelola blog di platform Blogger bukan berarti kita harus pasrah dengan skor Core Web Vitals yang buruk. Teknik sederhana namun ampuh seperti injeksi atribut fetchpriority pada skrip AdSense adalah bukti bahwa optimasi teknis bisa dilakukan oleh siapa saja tanpa perlu menjadi ahli koding.

Ingatlah bahwa performa web adalah perjalanan, bukan tujuan akhir. Teruslah memantau laporan di Google Search Console secara berkala. Selain optimasi iklan, pastikan juga gambar Anda sudah terkompresi dan skrip widget pihak ketiga lainnya diminimalisir.

Dengan melakukan Optimasi Skor INP Blogger AdSense secara konsisten, Anda tidak hanya menyenangkan mesin pencari, tetapi juga memberikan penghormatan tertinggi bagi pengunjung setia blog Anda: sebuah pengalaman browsing yang mulus tanpa hambatan.

Location:

Posting Komentar untuk "Rahasia Skor INP Hijau: Trik Fetchpriority AdSense di Blogger"