Wie lade ich die Facebook-Button asynchron?
Fast jedes Blog, eine Website hat einen Facebook-Like-, Share- oder Follow-Button.
Wie Sie vielleicht wissen, wird der Standardcode für die soziale Freigabe von Facebook synchron mit Ihren Webseitenressourcen geladen.
Dies erhöht Ihre Ladezeit der Website und Schaden SEO Score. Es ist nicht nur SEO, sondern beeinträchtigt auch die Benutzererfahrung.
Ich bin mir sicher, dass der Facebook-Social-Share-Button wichtig ist, aber nicht als tatsächlicher Code, der zuerst angezeigt wird. Es gibt viele Blogs oder Websites, die aufgrund des Standard-Facebook-Codes eine höhere Ladezeit für Seiten haben.
Die asynchrone Verwendung von Facebook-Code hilft Ihnen beim Laden Ihrer Webseite 0.5 - 1.5 Sekunden schneller. Dies ist, was Sie Facebook wie laden, teilen oder Schaltfläche schneller folgen müssen.
Hier ist der Code, von dem ich bekommen habe Facebook-Entwickler für Like und Share auf geekflare.com
<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>
Jetzt muss ich nur noch der einzelnen Zeile in meinem Code folgen, um die Schaltflächen schneller zu laden.
js.async=true;
Der geänderte Code wäre also:
<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>
Ist es nicht einfach
Aktualisierung: Die neuen Code-Schnipsel, die von Facebook angeboten werden, sind oben nicht erforderlich script async
schon kannst du unten sehen.
<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>
Verwenden Sie WordPress? Zur kasse diese posHier erfahren Sie, wie Sie die Leistung ohne Plugin optimieren können. Und wenn Sie nach einem Social-Media-Plugin suchen, das nicht langsamer wird, kann ich es nur empfehlen novashare.
Ich bin sicher, dass Ihre Webseite schneller geladen werden soll, und ich hoffe, dies hilft Ihnen.