Adsense Memperlambat Kecepatan Situs Web, Masalah Terpecahkan!

Pembaruan core web vitals terbaru Google akan mulai mempengaruhi hasil pencarian mulai Juni 2021. Dan jika skor wawasan PageSpeed situs web kamu terlalu rendah, maka kamu harus khawatir tentang hal itu. Tetapi bagaimana jika kecepatan situs kamu bagus, tetapi setelah menambahkan kode iklan Adsense, kecepatan situs turun? Kamu bahkan tidak dapat mengoptimalkan server AdSense. Artikel ini akan membahas cara memuat iklan Adsense tanpa memengaruhi kecepatan situs web.

Jadi jika kamu ingin menghasilkan pendapatan dengan pengalaman pengguna yang baik di situs web untuk mengembangkan situs web. Kamu harus mengurus iklan Adsense dan kecepatan situs web.

Bagaimana cara memeriksa kinerja kecepatan situs web?

Ada banyak alat gratis dan premium yang tersedia untuk memeriksa kecepatan situs web. Kamu mungkin sudah mengetahui Google Page Speed Insights, GTmetrix, Pingdom Tools, dll. Tetapi pertanyaan penting di sini adalah, kecepatan halaman mana yang harus kamu periksa?

Sebagian besar blogger memeriksa kecepatan beranda mereka dan selesai, tetapi itu belum selesai, kamu harus memeriksa kecepatan halaman dari semua konten yang tersedia. Tetapi tidak mungkin untuk memeriksa kecepatan semua postingan dan halaman. Solusinya adalah, periksa beberapa hal berikut :

• Kecepatan beranda
• Kecepatan Posting Blog
• Kecepatan Halaman

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

Bagaimana Cara Memuat iklan Adsense tanpa mengorbankan kecepatan situs web?

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.

Ketika kita menghasilkan iklan Adsense, itu akan terlihat seperti berikut :

<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="12345678910"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Dalam kode di atas, file adsbygoogle.js mulai memuat secara asinkron dengan konten tanpa memblokir konten dari pemuatan. Hal ini menyebabkan keterlambatan dalam memuat konten, dan karenanya situs web membutuhkan lebih banyak waktu untuk memuat.

Tapi apa yang akan kita lakukan dengan script ini adalah, iklan akan dimuat setelah website siap untuk berinteraksi dengan pengguna. Dan ketika pengguna menggulir, mengklik, atau setelah 5 detik tanpa input.

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

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

Semua blok iklan akan terlihat mirip dengan ini. Saya telah memilih blok iklan ukuran 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>

Kamu dapat menambahkan skrip berikut di bagian footer situs web kamu, untuk meningkatkan skor wawasan PageSpeed-nya. Tetapi akan lebih baik untuk menghindari iklan responsif otomatis karena ini akan menghasilkan skor shift tata letak kumulatif yang besar. Kamu 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. Saya telah mengubah src ke data-src untuk memuat iklan Adsense setelah interaksi pengguna. Harap dicatat bahwa kamu harus menghapus baris berikut yang diblokir semua iklan, bukan semua itu. Tempelkan yang 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 kustom ke footer, maka tambahkan secara manual. Untuk ini, kamu harus menggulir ke tema appearance>theme>edit dan kemudian menemukan footer.php. Sekarang tempel skrip di atas (keduanya) tepat sebelum tag </body>. Untuk menjaga perubahan ini bahkan setelah pembaruan tema, gunakan tema anak. Coba buat tema anak untuk situs wordpress kamu.

Pengguna Blogger dapat mengedit tema Blogger dan menempelkan skrip di atas ke dalam file tema di atas tag </body>. Setelah melakukannya, kamu dapat memeriksa kecepatan situs web. kamu juga dapat membaca panduan kami untuk meningkatkan kecepatan blog Blogger.

Saya harap kamu terbantu dengan artikel ini, semoga bermanfaat. Jika ada keraguan, pertanyaan, umpan balik, jangan ragu untuk bertanya di bagian komentar yang disediakan di bawah ini. Terima kasih!