Beranda / AdSense / Core Web Vitals / JavaScript / SEO / Blogger

Trik Jitu Optimasi INP Blogger dan Iklan AdSense

Posting Komentar
Trik Jitu Optimasi INP Blogger dan Iklan AdSense

Daftar Isi

Mengapa Blog Anda Terasa Lambat?

Memiliki blog yang populer dengan penghasilan iklan yang stabil adalah impian setiap pemilik konten. Namun, seringkali kita menghadapi dilema besar: semakin banyak unit iklan yang dipasang, semakin berat pula performa halaman tersebut. Anda mungkin menyadari bahwa saat pengunjung mencoba mengklik menu atau menggulir halaman, ada jeda waktu yang menjengkelkan sebelum sistem merespons. Fenomena inilah yang sedang diperangi oleh Google melalui Optimasi INP Blogger agar pengalaman pengguna tetap mulus tanpa mengorbankan pendapatan.

Mari kita jujur, tidak ada yang suka menunggu. Di era digital yang serba cepat, keterlambatan respons selama beberapa milidetik saja dapat membuat pengunjung meninggalkan situs Anda. Sebagai pengguna platform Blogger (Blogspot), Anda memiliki tantangan unik karena keterbatasan akses ke sisi server. Namun, bukan berarti Anda tidak bisa melakukan apa-apa. Fokus kita kali ini adalah bagaimana mengatur ulang cara Google AdSense memuat kodenya agar tidak menghalangi interaksi pengunjung.

Dalam panduan mendalam ini, saya akan menunjukkan kepada Anda cara melakukan penyesuaian prioritas pemuatan skrip yang cerdas. Kita akan mempelajari bagaimana skrip pihak ketiga dapat "antre" dengan sopan sehingga peramban (browser) bisa memproses perintah pengguna terlebih dahulu sebelum sibuk merender iklan.

Apa Itu Interaction to Next Paint (INP)?

Mulai Maret 2024, Google secara resmi mengganti metrik First Input Delay (FID) dengan Interaction to Next Paint (INP) sebagai salah satu indikator utama dalam Core Web Vitals. Perbedaannya sangat krusial. Jika FID hanya mengukur keterlambatan interaksi pertama, INP mengukur seluruh rangkaian interaksi selama pengunjung berada di situs Anda. Ini mencakup klik tombol, ketukan pada layar sentuh, hingga input keyboard.

Masalah utamanya adalah responsivitas halaman. Ketika sebuah halaman web memuat skrip JavaScript yang besar—seperti kode otomatis AdSense—Main Thread atau jalur utama prosesor pada peramban akan menjadi sangat sibuk. Bayangkan jalur utama ini seperti sebuah jalan satu jalur yang sempit. Jika truk besar (skrip iklan) sedang melintas, maka sepeda motor (klik pengguna) harus menunggu truk tersebut selesai lewat sebelum bisa bergerak.

Bagi pengguna Blogger, masalah ini seringkali muncul karena kode iklan dipasang secara mentah di bagian kepala (head) tema. Hal ini menyebabkan peramban berhenti merender konten visual hanya untuk mengeksekusi perintah iklan. Hasilnya? Skor INP Anda akan memerah, dan Google mungkin akan memberikan peringkat yang lebih rendah pada hasil pencarian karena buruknya pengalaman pengguna.

Perbedaan FID vs INP dalam Konteks Blogger

FID hanya peduli pada kesan pertama. Jika klik pertama lancar, skor FID akan bagus. Namun, INP jauh lebih jujur. Jika blog Anda lancar di awal tetapi menjadi macet saat pengguna mencoba membuka menu navigasi di tengah artikel, skor INP akan jatuh. Inilah alasan mengapa eksekusi kode asinkron menjadi harga mati dalam optimasi modern.

Analogi Restoran: Masalah Terbesar AdSense dan INP

Agar lebih mudah memahami teknis Optimasi INP Blogger, mari kita gunakan analogi sebuah restoran populer. Restoran ini adalah blog Anda, pengunjung adalah pembaca, dan pelayan adalah Main Thread peramban.

Bayangkan seorang pengunjung masuk dan ingin memesan makanan (melakukan interaksi klik). Di saat yang bersamaan, manajer restoran (AdSense) datang membawa tumpukan laporan keuangan yang sangat tebal dan memaksa pelayan untuk menghitungnya saat itu juga. Karena pelayan sangat sibuk menghitung laporan (mengeksekusi JavaScript iklan), dia tidak bisa mencatat pesanan pengunjung. Pengunjung harus menunggu lama sampai pelayan selesai dengan laporannya.

Kondisi inilah yang menyebabkan skor INP menjadi buruk. Strategi kita bukan memecat manajer (menghapus iklan), tetapi mengatur jadwalnya. Kita akan memberi tahu pelayan: "Catat dulu pesanan pengunjung, berikan mereka minum, baru setelah ada waktu luang, silakan kerjakan laporan dari manajer."

Dengan teknik penundaan skrip AdSense yang tepat, kita memberikan ruang napas bagi peramban untuk mendahulukan hal-hal yang dianggap penting oleh pengunjung, yaitu konten dan interaksi fisik pada halaman.

Strategi Optimasi INP Blogger dengan Prioritas Skrip

Kunci dari perbaikan INP adalah manajemen tugas pada Main Thread. Ada beberapa teknik yang bisa kita terapkan pada platform Blogger untuk memastikan user experience Blogger tetap di level tertinggi:

  • Asynchronous Loading (async): Memungkinkan skrip diunduh di latar belakang tanpa menghentikan parsing HTML, namun tetap bisa mengeksekusi skrip segera setelah unduhan selesai.
  • Deferred Loading (defer): Menunda eksekusi skrip sampai seluruh struktur HTML selesai diproses. Ini sangat efektif untuk skrip iklan yang tidak kritis bagi tampilan awal.
  • Lazy Loading Manual: Hanya memuat kode AdSense ketika pengguna mulai menggulir halaman (scroll). Ini adalah teknik paling ampuh untuk mendapatkan skor performa hijau di PageSpeed Insights.
  • Priority Hints: Menggunakan atribut khusus untuk memberi tahu peramban mana skrip yang memiliki prioritas rendah.

Banyak blogger melakukan kesalahan dengan meletakkan kode adsbygoogle.js berkali-kali di setiap unit iklan. Padahal, satu skrip di bagian atas sudah cukup. Namun, meletakkannya di atas justru seringkali memicu masalah render-blocking. Oleh karena itu, kita perlu memindahkan beban kerja ini ke waktu yang lebih tepat.

Panduan Teknis Penyesuaian Skrip di Dashboard Blogger

Mari kita masuk ke bagian teknis. Pastikan Anda telah mencadangkan (backup) tema Anda sebelum melakukan perubahan ini. Kita akan melakukan Optimasi INP Blogger dengan memodifikasi cara pemanggilan pustaka AdSense.

1. Membersihkan Kode AdSense Berulang

Periksa kode iklan di gadget Sidebar atau di dalam postingan. Biasanya kodenya terlihat seperti ini:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxx" crossorigin="anonymous"></script>

Hapus baris tersebut dari semua unit iklan Anda. Kita hanya akan memanggilnya satu kali dengan cara yang lebih cerdas.

2. Menerapkan Teknik Delay Script

Alih-alih membiarkan AdSense memuat segera setelah halaman terbuka, kita akan menggunakan sedikit bantuan JavaScript untuk menundanya selama beberapa detik atau sampai ada aktivitas sensorik dari pengguna. Masukkan kode berikut tepat di atas tag </body> pada editor HTML Blogger Anda:

Contoh Kode Penundaan:

 <script type='text/javascript'> //<!
Location:

Posting Komentar untuk "Trik Jitu Optimasi INP Blogger dan Iklan AdSense"