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 umgesetzt.
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.
<script type='text/javascript'><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxxx";
/* 160x600 eigene Bezeichnung */
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>
<!-- 160x600 eigene Bezeichnung -->
<ins class="adsbygoogle"
style="display:inline-block;width:160px;height:600px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<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.
+ Asynchronous Scripts by google
