Quantcast
Channel: netheweb.de » facebook
Viewing all articles
Browse latest Browse all 15

Facebook Fanbox asynchron laden

0
0

Inzwischen ist es fast unmöglich ohne Facebook Integration auf der eigenen Website aus zu kommen, da dies zumeist aber über externe Javascripts geschieht, kann es zu einer deutlichen Beeinflussung der Performance und damit der Ladezeit kommen.

Dies lässt sich allerdings vermeiden indem man die Javascripts nicht parallel zum Seiteninhalt laden lässt sondern erst danach abruft.

Der normale Code für die Integration der Facebook Fanbox sieht wie folgt aus:


<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/all.js#xfbml=1&appId=248179685198419";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Eingebunden wird die Box dann über:


<div class="fb-like-box" data-href="http://www.facebook.com/netheweb" data-width="320" data-show-faces="true" data-border-color="#4888ee" data-stream="false" data-header="false"></div>

So werden allerdings noch die Inhalte synchron zu den anderen Website Daten geladen, was die Ladezeit insgesamt verlängert.

Um dies zu verhindern, fehlt uns nur eine kleine Zeile Code, die wir im Javascript für Facebook ergänzen müssen:

js.async=true;

Nach dem einfügen sieht der Javascript code dann wie folgt aus:


<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/all.js#xfbml=1&appId=248179685198419";
fjs.parentNode.insertBefore(js, fjs);
js.async=true;
}(document, 'script', 'facebook-jssdk'));</script>

Den Effekt testen und auch weitere Verbesserungspotentiale für die Website könnt ihr mit Googles Pages Speed Insights


Viewing all articles
Browse latest Browse all 15

Latest Images

Trending Articles





Latest Images