Wie man den Facebook-Button asynchron lädt
Praktisch jede Webseite oder jeder Blog integriert Facebook-Elemente wie „Teilen“- oder „Folgen“-Schaltflächen.
Der standardmäßige Social-Share-Code von Facebook wird, wie bekannt, synchron mit den übrigen Ressourcen Ihrer Webseite geladen.
Dies führt zu einer längeren Ladezeit Ihrer Seite und kann den SEO-Score negativ beeinflussen. Es ist nicht nur aus SEO-Sicht ungünstig, sondern verschlechtert auch die Benutzererfahrung.
Zweifellos sind Facebook-Social-Share-Buttons wichtig, aber sie sollten nicht als vorrangiger Code geladen werden. Viele Blogs und Webseiten leiden unter längeren Ladezeiten aufgrund der standardmäßigen Einbindung des Facebook-Codes.
Die asynchrone Nutzung des Facebook-Codes kann die Ladezeit Ihrer Webseite um 0,5 bis 1,5 Sekunden reduzieren. Dies ist besonders nützlich, um „Gefällt mir“, „Teilen“ oder „Folgen“-Schaltflächen von Facebook schneller zu laden.
Hier ist der Code, den ich von den Facebook-Entwicklern zum Liken und Teilen auf wdzwdz.com erhalten habe:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Um die Schaltflächen schneller zu laden, müssen wir lediglich eine kleine Anpassung im Code vornehmen.
js.async=true;
Der angepasste Code sieht dann folgendermaßen aus:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async=true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Ganz einfach, nicht wahr?
Aktualisierung: Die neuesten Code-Schnipsel, die Facebook bereitstellt, erfordern diese Anpassung nicht mehr, da sie bereits asynchrones Laden des Skripts beinhalten, wie im folgenden Beispiel gezeigt wird:
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0" nonce="JekfmCeX"></script>
Nutzen Sie WordPress? In diesem Artikel erfahren Sie, wie Sie die Leistung Ihrer Webseite ohne zusätzliche Plugins optimieren können. Und wenn Sie ein Social-Media-Plugin suchen, das die Ladezeit nicht negativ beeinflusst, empfehle ich Novashare wärmstens.
Ich bin sicher, dass Sie eine schnellere Ladezeit für Ihre Webseite anstreben, und ich hoffe, diese Informationen helfen Ihnen dabei.
Hat Ihnen der Artikel gefallen? Teilen Sie ihn gern mit anderen!