Wie lade ich den Facebook-Button asynchron?
Fast jeder Blog, eine Website hat Facebook-Schaltflächen wie, teilen oder folgen.
Wie Sie vielleicht wissen, wird der standardmäßige Social-Share-Code von Facebook synchron mit Ihren Webseiten-Ressourcen geladen.
Dies erhöht die Ladezeit Ihrer Website und beeinträchtigt den SEO-Score. Es ist einfach kein SEO, sondern verdirbt auch die Benutzererfahrung.
Ich bin sicher, dass die Facebook-Social-Share-Schaltfläche unerlässlich ist, aber nicht als Ihr eigentlicher Code, der zuerst angezeigt werden soll. Es gibt viele Blogs oder Websites, die aufgrund des standardmäßigen Facebook-Codes eine längere Seitenladezeit haben.
Die asynchrone Verwendung von Facebook-Code hilft Ihnen, Ihre Webseite 0,5 – 1,5 Sekunden schneller zu laden. Dies ist, was Sie brauchen, um die Facebook-Schaltfläche „Gefällt mir“, „Teilen“ oder „Folgen“ schneller zu laden.
Hier ist der Code, den ich bekommen habe Facebook-Entwickler zum Liken und Teilen auf wdzwdz.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, was dazu beiträgt, 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?
Update: Die neuen Code-Snippets, die von Facebook angeboten werden, erfordern oben nicht, da sie bereits asynchrones Skript enthalten, wie Sie unten sehen können.
<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? Sehen Sie sich diesen Beitrag an, der erklärt, wie Sie die Leistung ohne ein Plugin optimieren können. Und wenn Sie nach einem Social-Media-Plugin suchen, das nicht langsamer wird, dann kann ich es nur wärmstens empfehlen Novashare.
Ich bin sicher, Sie möchten, dass Ihre Webseite schneller geladen wird, und ich hoffe, das hilft Ihnen.
Haben Sie den Artikel gerne gelesen? Wie wäre es mit der Welt zu teilen?