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. I piszę o rzeczach, które inspirują mnie i ciekawią w pracy web developera. Na moim blogu znajdziesz porady dotyczące WordPressa i programowania stron, a także moje osobiste przemyślenia na najróżniejsze tematy.

Masz pytania lub uwagi? Zostaw komentarz :-)

Pola oznaczone gwiazdką są obowiązkowe.

Podaj swoje imię lub nazwę. Ta nazwa będzie widoczna przy Twoim komentarzu.
Napisz komentarz.