Cara Mempercepat Loading Iklan Adsense

Pembaruan core web vitals terbaru Google akan mulai memengaruhi hasil penelusuran mulai Juni 2021. Dan jika skor wawasan PageSpeed ​​situs web Anda terlalu rendah, Anda harus mengkhawatirkannya. Tetapi bagaimana jika kecepatan situs Anda bagus, tetapi setelah menambahkan kode iklan Adsense, kecepatan situs turun? Anda bahkan tidak dapat mengoptimalkan server AdSense. Artikel ini akan membahas cara mempercepat loading iklan Adsense tanpa mempengaruhi kecepatan website.

Jadi, Anda ingin menghasilkan pendapatan dengan pengalaman pengguna yang baik di situs web untuk mengembangkan situs web. Anda harus menjaga iklan Adsense dan kecepatan website.

Bagaimana Cara Memeriksa Kinerja Kecepatan Situs Web?

Ada banyak alat gratis dan premium yang tersedia untuk memeriksa kecepatan situs web. Anda mungkin sudah mengetahui Google PageSpeed ​​Insights , GTmetrix , Web.dev , dll. Tetapi pertanyaan penting di sini adalah, kecepatan halaman mana yang harus Anda periksa?

Sebagian besar blogger memeriksa kecepatan beranda mereka dan selesai, tetapi itu tidak dilakukan pak, Anda sudah memeriksa kecepatan halaman dari semua konten yang tersedia. Tetapi tidak mungkin untuk memeriksa kecepatan semua posting dan halaman. Solusinya adalah, periksa

• Kecepatan beranda,
• Kecepatan Posting Blog,
• Kecepatan Halaman.

Misalkan Anda memiliki halaman lain seperti halaman produk atau posting blog yang berisi media, iframe, dll. Anda juga dapat melakukan pemeriksaan kecepatan untuk halaman tersebut. Anda dapat memeriksa kecepatan semua halaman ini sebelum dan sesudah menambahkan iklan Adsense.

Bagaimana Cara Memuat Iklan Adsense Tanpa Mengurangi Kecepatan Situs Blog?

Kecepatan situs web saya sebelum menerapkan AdSense adalah 95+ untuk seluler dan 100 untuk perangkat desktop di alat PageSpeed ​​Insights. Tetapi ketika saya menambahkan iklan Adsense, itu berkurang menjadi 30 hingga 40 untuk seluler dan 80 untuk desktop. Saya menjalankan blog Blogger serta situs WordPress. Saya ingin solusi yang tepat untuk keduanya.

Saat kita dapat iklan Adsense, maka akan terlihat seperti berikut ini.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- Large Rectangle -->

<ins class="adsbygoogle"

 style="display:inline-block;width:336px;height:280px"

 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"

 data-ad-slot="1234567890"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

Pada kode di atas, file adsbygoogle.js mulai memuat secara tidak sinkron dengan konten tanpa menghalangi pemuatan konten. Ini menyebabkan penundaan dalam memuat konten, dan karenanya situs web membutuhkan lebih banyak waktu untuk memuat.

Tapi yang akan kita lakukan dengan skrip ini adalah, iklan akan dimuat setelah situs web siap berinteraksi dengan pengguna. Dan ketika pengguna menggulir, mengklik, atau setelah 5 detik tidak ada input.

Pertama, kami akan menghapus adsbygoogle.js dari semua unit iklan laman, seperti yang ditunjukkan di bawah ini.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Semua blok iklan akan terlihat seperti ini. Kami telah memilih blok iklan berukuran 336×280 sehingga dapat digunakan untuk perangkat seluler dan desktop.

<!-- Large Rectangle -->

<ins class="adsbygoogle"

style="display:inline-block;width:336px;height:280px"

data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"

data-ad-slot="1234567890"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

Anda dapat menambahkan skrip berikut di bagian footer situs web Anda untuk meningkatkan skor wawasan PageSpeed-nya. Tetapi akan lebih baik untuk menghindari iklan responsif otomatis karena ini akan menghasilkan skor pergeseran tata letak kumulatif (CLS) yang sangat besar . Anda juga dapat menayangkan iklan Adsense responsif menggunakan metode ini .

<script id='flying-scripts' type='text/javascript'>const loadScriptsTimer=setTimeout(loadScripts,5*1000);const userInteractionEvents=["mouseover","keydown","touchstart","touchmove","wheel"];userInteractionEvents.forEach(function(event){window.addEventListener(event,triggerScriptLoader,{passive:!0})});function triggerScriptLoader(){loadScripts();clearTimeout(loadScriptsTimer);userInteractionEvents.forEach(function(event){window.removeEventListener(event,triggerScriptLoader,{passive:!0})})}function loadScripts(){document.querySelectorAll("script,iframe[data-type='lazy']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-src"))})}</script>

Di bawah skrip ini, tempelkan skrip penayangan iklan Adsense dalam format yang sama seperti yang ditampilkan di bawah ini. Kami telah mengubah src menjadi data-src untuk memuat iklan Adsense setelah interaksi pengguna. Harap perhatikan bahwa Anda telah menghapus baris berikut semua blok iklan, bukan semua itu. Tempel berikut ini

<script data-ad-client='ca-pub-XXXXXXXXXXXXXXXX' data-src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' data-type='lazy'></script>

Pengguna WordPress dapat menambahkan kode berikut di bagian footer menggunakan panel tema. Jika tema tidak mendukung javascript khusus ke footer, tambahkan secara manual. Untuk ini, Anda harus menggulir ke tampilan> tema> edit tema dan kemudian temukan footer.php. Sekarang rekatkan skrip di atas (keduanya) tepat sebelum tag </body>. Untuk mempertahankan perubahan ini bahkan setelah pembaruan tema, gunakan theme child . Coba buat theme child untuk situs WordPress Anda .

Pengguna Blogger dapat mengedit tema Blogger dan menempelkan skrip di atas ke file tema di atas tag </body>. Setelah melakukannya, Anda dapat memeriksa kecepatan situs web. Anda juga dapat membaca panduan kami untuk cara mempercepat pagespeed insight Blogger .

Saya harap Anda menemukan artikel cara mempercepat loading iklan Adsense dan bermanfaat, jika ada keraguan, pertanyaan, umpan balik, jangan ragu untuk bertanya di bagian komentar yang disediakan di bawah. Terima kasih!

Berbagi :