Adsense Reklamlarının Yüklenmesini Preload ile Hızlandırma

5.10.19
Adsense Reklamlarının Yüklenmesini Preload ile Hızlandırma

Adsense Reklamlarının Yüklenmesini Preload ile Hızlandırma - Adsense reklamları, uyumsuz zaman reklamları nedeniyle varsayılan olarak tüm sayfa öğeleri yüklendikten sonra görünecektir. Yüklenen sayfanın zaman olarak yüklenme hızı yavaşsa, Adsense reklamlarının yüklenme hızı daha da yavaş olacaktır.

Adsense reklamlarının yüklenme hızını geliştirmenin en iyi yolu blog yüklenmesini daha hızlı olacak şekilde geliştirmektir. Blog sayfası ne kadar hızlı yüklenirse, Adsense reklamları da o kadar hızlı yüklenecektir.

Blog sayfalarının yüklenme hızını geliştirmenin bir yolu da, birden fazla Adsense JS dosyası kullanmamaktır. Yani Adsense JS kodunu her reklam kodunda kullanılmaması gerekir. Sadece 1 (bir) adet Adsense JS kodunu </body> kodunun üzerine eklemeniz ve kaydetmeniz yeterli olacaktır. Böylece, sadece 1 (bir) Adsense JS kodu ile tüm reklam birimleriniz görüntülenir.

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

Bunu yapmanız durumunda, tarayıcı sadece 1 (bir) Adsense JS kodu yükler ve sayfa yükleme daha hızlı hale gelir.

Her bir reklam alanında veya her reklam kodunda Adsense JS kodunun olduğunu düşünün, bu durumda tarayıcı reklam birimi kadar da Adsense JS kodu yükleyecektir.

Şimdi, Adsense reklamlarının yüklenmesini hızlandırmanın en yeni yollarını paylaşacağım. Burada paylaşacağım bilgiler Adsense reklamlarının, yüklenen sayfa ile birlikte görünmesini sağlayacaktır.

İşin püf noktası, Adsense JS için <link rel="preload"> kullanmaktır. Ön yükleme ile Adsense reklamları daha hızlı yüklenecek; ön yüklemenin buradaki görevi, tarayıcıya Adsense reklam kaynaklarının gecikme olmadan hızlı bir şekilde yüklenmesini iletir.

Adsense JS için <head> içerisinde bulunan meta etiketlerinden sonraki bölüme <link rel="preload"> eklemeniz gerekir. Kod aşağıdadır.

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

Kodu blog HTML sayfanıza eklemenize yardımcı olabilecek örnek görünümü aşağıda paylaştığım gibidir.

Örnek Görünüm
<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Blogger</title>
    <meta charset='utf-8'/>
    <meta content='width=device-width,minimal-ui,initial-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport'/>
    <meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
    <meta content='blogger' name='generator'/>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <link as='script' href='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' rel='preload'/>
    <style>

    </style>
  </head>
  <body>
    <header>

    </header>
    <main>

    </main>
    <footer>

    </footer>
    <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
  </body>
</html>

Eğer Adsense lazyload kullanıyorsanız, bu yöntemi kullanmanıza gerek yoktur.

AMP HTML için aşağıdaki kodu kullanın:

<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'/>

Ve görünüm örnekleri aşağıdaki gibi:

AMP Örnek Görünüm
<!doctype html>
<html amp="amp">
  <head>
    <meta charset="utf-8"/>
    <title>AMP Blogger</title>
    <meta charset='utf-8'/>
    <meta content='width=device-width,minimal-ui,initial-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport'/>
    <meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
    <meta content='blogger' name='generator'/>
    <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'/>
    <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'/>
    <style amp-custom>

    </style>
  </head>
  <body>
    <header>

    </header>
    <main>

    </main>
    <footer>

    </footer>
  </body>
</html>

AMP Adsense reklamlarını geç yüklendiğini düşünen blogcular, reklam yüklenmesini hızlandırmak için bu yöntemi deneyin.

Yorum Gönder