Ditulis oleh: Ditulis pada: 9/17/2019
Cara Terbaru Mempercepat Loading Iklan Adsense - Secara default untuk iklan Adsense yang menggunakan asinkron adalah iklan akan muncul setelah semua elemen halaman termuat. Jika loading halamannya lambat, maka loading iklan Adsense akan lebih lambat lagi.
Cara terbaik untuk mengatasi loading iklan Adsense adalah tentu saja dengan memperbaiki loading blog menjadi lebih cepat. Semakin cepat loading halaman blog, maka semakin cepat pula iklan Adsense akan tampil.
Dan salah satu cara untuk mempercepat loading blog adalah dengan cukup menggunakan 1 buah JS Adsense, artinya JS Adsense jangan disimpan di setiap slot iklan atau di setiap kode iklan, tapi cukup simpan kode seperti ini di atas kode </body>.
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>Dengan begitu, browser akan memuat sebuah JS Adsense saja sehingga pemuatan halaman menjadi semakin cepat.
Coba bayangkan jika kita menyimpan JS Adsense di setiap slot iklan atau di setiap kode iklan, maka browser akan memuat JS Adsense sebanyak jumlah JS tersebut.
Dan kini saya akan share cara terbaru untuk mempercepat loading iklan Adsense. Dengan cara yang akan saya bagikan ini, iklan Adsense akan muncul bersamaan dengan loading halaman.
Caranya adalah dengan menggunakan <link rel="preload"> untuk JS Adsense. Dengan preload ini, kita memberitahu browser untuk memuat lebih cepat sumber daya Adsense tanpa penundaan, sehingga iklan Adsense bisa tampil lebih cepat.
Tetapi yang perlu diketahui, meskipun dengan ini, kita tetap menggunakan kode JS Adsense seperti kode yang di atas.
Penempatan <link rel="preload"> untuk JS Adsense ini disimpan pada bagian <head> setelah meta viewport. Berikut ini adalah kodenya:
<link as='script' href='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' rel='preload'/>Penampakannya sebagai contoh seperti berikut ini:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,minimum-scale=1"/>
<meta name="description" content="This is Description"/>
<link as='script' href='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' rel='preload'/>
<style>
/* Add your styles here */
</style>
<link rel="canonical" href="."/>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
</body>
</html>Tetapi jika Anda menggunakan lazyload Adsense, maka Anda tidak perlu menggunakan trik ini.
Dan untuk AMP HTML gunakan kode berikut:
<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'/>Dan contoh penampakannya seperti berikut ini:
<!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>Bagi blogger yang bilang bahwa iklan AMP ADS loadingnya telat, coba dengan trik ini untuk mempercepat loading iklannya.
Dan berikut adalah video yang saya buat untuk memperjelas postingan trik cara mempercepat loading iklan Adsense 2019 ini secara audio visual, silahkan tonton videonya berikut ini:
Selesai, semoga bermanfaat.