Home / Pagespeed / Asynchrones Laden (CSS und JS Scripte)

Asynchrones Laden (CSS und JS Scripte)

Seit der Einführung von google PageSpeed Insights wird bei vielen Webseiten die Meldung “JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten “above the fold” (ohne Scrollen sichtbar) beseitigen” angezeigt. Mit dem Tipp, das oder die betreffenden Scripte asynchrone laden zu lassen. Oftmals ist die von dem PageSpeed Insights-Tool leichter gesagt als von dem Webmaster technisch realisiert.

Hier findet Ihr einige wichtige Hinweise, Informationen, Tipps und Anregungen um dieses Problem zu lösen. Als erstes Beispiel betrachten wir den oft verwendeten Adsense-Code der die Ursache in vielen Fällen ist.
<script type='text/javascript'>
google_ad_client = "ca-pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 160;
google_ad_height = 600;
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Wenn wir den Adsense-Code asynchron laden wollen, dann müssen wir diesen wie folgt ändern:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
ins class="adsbygoogle"
style="display:inline-block;width:160px;height:600px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx">
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Durch den einfachen und schnellen Austausch des Adsense-Codes wird dieser nun Asynchron geladen. Dieser Code wird direkt von google zur Verfügung gestellt!

Weitere Scripte asynchron Laden lassen:
Google selbst stellt Euch eine umfangreiche Liste mit Anleitungen und Codeschnipseln zur Verfügung um weitere JavaScript-Codes verschiedener Anbieter asynchron zu Laden, ohne dabei Einschränkungen in dem Funktionsumfang zu bekommen.
In der Übersicht findet Ihr Anleitungen für die Codeschnipsel von Disqus, Facebook, Google AdSense, Google Analytics, Google DFP GPT, Google Plus, Pinterest, ShareThis, StumbleUpon, Twitter und auch für Yandex.

Asynchrone Skripts verwenden: https://developers.google.com/speed/docs/insights/UseAsync

1 Star2 Stars3 Stars4 Stars5 Stars (Noch keine Bewertung)
Loading...

Check Also

Reihenfolge der Formate und Skripts optimieren

Wenn der Punkt Reihenfolge der Formate und Skripts optimieren bei der PageSpeed Analyse angezeigt wird, …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

This site uses Akismet to reduce spam. Learn how your comment data is processed.