Poprawa szybkości strony: jak opóźnić reklamy Google na urządzeniach mobilnych

Reklamy Google mocno spowalniają stronę. Na szczęście jest sposób, dzięki któremu nie będzie tak źle.

Według instrukcji na stronie Google’a kod reklam powinien być zamieszczony w następujący sposób:

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

<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Sęk w tym, że przeglądarka spędzi w tym miejscu sporo czasu wczytując wszystkie niezbędne skrypty Google’a, co oczywiście odbije się na szybkości strony.

Istnieje jednak sztuczka, za pomocą której możemy opóźnić wczytywanie reklam na urządzeniach mobilnych. Poniższe rozwiązanie dotyczy WordPressa, ale możesz je zastosować wszędzie, ponieważ jest tu tylko HTML i JavaScript.

Najpierw utwórz motyw potomny swojego motywu. O tym, jak to zrobić, pisałam wcześniej. Dzięki temu Twoje zmiany nie znikną przy aktualizacji motywu.

W wybranym miejscu motywu – np. w pliku wp-content/themes/twój motyw/single.php – umieść następujący kod:

<div id="ads" style="height: 300px;"></div>

W tym miejscu wyświetlą się reklamy. height: 300px zarezerwuje na nie prostokąt o wysokości 300 pikseli.

Następnie w pliku wp-content/themes/twój motyw/footer.php, tuż przed zamykającym tagiem </body> zamieść następujący kod:

<script>
var googleAd;

function getGoogleAdsScript() {
  var adScript = document.createElement('script');
  adScript.setAttribute('src','https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
  return adScript;
}

function getGoogleInsTag() {
  var insAd = document.createElement('ins');
  insAd.setAttribute("data-ad-client", "ca-pub-1234567890123456");
  insAd.setAttribute("data-ad-slot", "1234567890");
  insAd.setAttribute("class", "adsbygoogle");
  insAd.setAttribute("data-ad-format", "auto");
  insAd.setAttribute("data-full-width-responsive", "true");
  insAd.setAttribute("style", "display:block;margin-bottom:15px;height:300px;");
  return insAd;
}

function getGoogleInlineScript() {
  var tmpScript = document.createElement("script");
  var inlineScript = document.createTextNode("(adsbygoogle = window.adsbygoogle || []).push({});");
  tmpScript.appendChild(inlineScript);
  return tmpScript;
}

function showAd() {
  googleAd.appendChild(getGoogleAdsScript());
  googleAd.appendChild(getGoogleInsTag());
  googleAd.appendChild(getGoogleInlineScript());
}

window.onload = function () {
  googleAd = document.getElementById("ads");
  if (googleAd) {
    if (window.screen.width < 992) {
      setTimeout(showAd, 3000);
    } else {
      showAd();
    }
  }
};
</script>

Pamiętaj, aby podmienić "ca-pub-1234567890123456" i "1234567890" na własne wartości.

Ten kod opóźni wczytanie reklam o 3000 ms, czyli 3 sekundy (setTimeout(showAdd, 3000)) i tylko na urządzeniach, których ekran jest mniejszy niż 992 piksele. Czas opóźnienia możesz zmieniać i testować prędkość strony.

Mam nadzieję, że pomogło! 🙂

Pani Marta
Jestem Marta. Pani Marta. Na moim blogu dzielę się prostymi sposobami na bezwtyczkowe ulepszenie swojej strony WordPress. Jeśli brakuje Ci czegoś w tym wpisie lub chcesz, abym poruszyła temat, na którym Ci zależy, daj znać w komentarzu!

Dodaj komentarz

*

*

*

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *