Cara Mempercepat Loading Iklan Google Adsense

Salah satu permasalah sejuta umat dari publisher google adsense adalah loading blog atau website yang menjadi berat. Ini sebenarnya bisa dikatakan wajar karena memang ada penambahan kode javascript dan load untuk mengambil data iklan berupa gambar, video atau komponen lainnya. 

Buat anda yang memperhatikan pasti sangat terasa sekali perbedaan loading antara sebelum dan sesudah memasang kode iklan google adsense. Ini bisa anda rasakan secara langsung atau melalui skor benchmark kecepatan loading (pagespeed insight, gtmetrix, dan sejenisnya)

Baca juga: Cara Meningkatkan CPC dan RKT Google Adsense

Loading yang berat ini tentunya membawa banyak kekurangan. Dari segi pengunjung kenyamanan mereka menjadi berkurang, dari segi SEO dan peringkat situs di google juga terpengaruh karena kita tahu update algoritma google saat ini mengarahkan untuk mempercepat loading website, dan dari segi penghasilan juga akan terpengaruh karena 2 faktor sebelumnya berpengaruh pengunjung bisa berkurang. 

Mempercepat loading iklan adsense sama artinya mempercepat iklan tersebut muncul di pengunjung (dapat meningkatkan penghasilan)

Tanpa basa-basi lagi berikut cara untuk mempercepat loading iklan google adsense di blog atau website anda.

 Cara Mempercepat Loading Iklan Google Adsense

Untuk Blog atau Website Non AMP

Untuk mempercepat loading iklan adsense kita harus memahami terlebih dahulu kode iklan yang diberikan adsense.

Kurang lebihnya jika anda membuat jenis iklan display ads, in feed ads, in-article ads, dan matched konten.

Ada satu kode javascript yang sama.

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

Disini jika anda memasang lebih dari satu kode ads maka akan muncul lebih dari satu load kode javascript yang sama. Jelas ini pemborosan, anda cukup memasang satu kode yang diatas saya tandai tadi.

Anda bisa menggunakan satu kode diatas yang yang ditaruh diatas </body> dan diload secara defer.

Jadi yang teman-teman harus lakukan adalah:

• Menghapus semua kode pada unit iklan yang anda pasang

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

• Mengantinya dengan script adsense yang terload secara defer, cukup 1 dan taruh kode ini diatas </body> 

  <script>
  //<![CDATA[
  function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
  //]]></script>

• Jika anda menggunakan auto ads bisa menghapus semua kode auto ads dan mengantinya dengan ini:

  <script>
  //<![CDATA[
  function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";d.setAttribute("data-ad-client","ca-pub-XXXXXXXXXXXX"),document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload
  //]]>
  </script>

  Silakan ganti yang saya tebalkan dengan ID Publisher adsense anda.
  
  
• Jika anda menggunakan manual ads dan auto ads anda cukup memasang kode auto ads secara defer yang mana sudah menggantikan kode

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

Dengan defer kode ads ini loading menjadi lebih ringan dibanding versi asli yang menggunakan asyncronus dimana iklan diload bersamaan dengan load halaman dan menjadikannya berat.

Dan juga dengan defer kode ads ini iklan bisa langsung muncul tanpa perlu discroll sedikit kebawah seperti lazy load. Dibeberapa kasus tidak sedikit mempengaruhi penghasilan karena iklan tidak langsung muncul dengan penerapan lazy load ads.

Untuk Blog atau Website AMP

Untuk anda pengguna AMP seperti tidak ada yang perlu dikhawatirkan dengan masalah loading karena memang AMP sudah kenceng loading dari bawaan, hehehe.

Tapi masih ada cara yang bisa anda lakukan agar load iklan adsense di blog atau website AMP anda lebih cepat lagi yaitu dengan memanfaatkan preload dan dns prefect.

Jika anda menggunakan manual ads

 <link as='script' href='https://cdn.ampproject.org/v0/amp-ad-0.1.js' rel='preload'/>

Jika anda menggunakan auto ads

 <link as='script' href='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js' rel='preload'/>

Jika anda menggunakan kedua maka gunakan kedua kode diatas. Taruh kode diatas di antara kode <head> dan </head> sebelum kode amp ads dan amp auto ads.

Kurang lebihnya akan seperti ini implementasinya:

<!doctype html>
<html amp="amp" lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1"/>
    <meta name="description" content="This is the AMP Boilerplate."/>
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js"/>
    <link as='script' href='https://cdn.ampproject.org/v0/amp-ad-0.1.js' rel='preload'/>
    <link as='script' href='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js' rel='preload'/>
    <link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin=""/>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
    <script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>
    <!-- Import other AMP Extensions here -->
    <style amp-custom>
      /* Add your styles here */
    </style>
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"/>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <link rel="canonical" href="."/>
    <title>My AMP Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Buat anda yang Non AMP yang sudah menggunakan defer load ads juga bisa menggunakan teknik rel='preload' ini untuk mempercepat load iklan.

<link as='script' href='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' rel='preload'/>

Taruh diantara kode <head>....</head> (implementasinya sama seperti versi amp)

Rel='preload' ini akan memerintahkan browser untuk segera menload sumber daya tersebut (high priority) untuk kasus ini iklan adsense akan lebih cepat muncul tanpa menganggu load blog anda.

Semakin cepat proses load halaman dan iklan muncul maka semakin baik bagi blog atau website anda baik dari segi kenyamanan pengguna, SEO, dan penghasilan.

Itu dia cara untuk mempercepat loading iklan google adsense, semoga bisa jadi solusi bagi anda yang galau dengan loading blog yang berat setelah dipasang adsense.

Tuliskan komentar dibawah jika ada pertanyaan.

Souce code: https://www.kompiajaib.com/2020/11/defer-script-adsense-dengan-auto-ads.html

Baca juga