Facebook: Tipps zur Performance-Optimierung von Social Plugins

pin it
Share

Facebook hat gestern einen Beitrag zur Optimierung der Performance von Social Plugins im Developers Blog veröffentlicht, welcher den einen oder anderen Webmaster freuen wird.

Millionen von Webseiten nutzen XFBML für das Rendern der Social Plugins. Nachfolgend sind einige Best Practice Beispiele aufgeführt, mit welchen die Leistung der Website erhöht werden können, speziell werden die channelURL und das asynchrone Laden beschrieben, welche die Ladezeiten und den Traffic auf Grund der doppelten Facebookaufrufe reduzieren.

Custom channelURL

Die custom channelURL ist ein optionaler Paramter in der FB.init Funktion. Bei der Initialisierung der JavaScript-Bibliothek kann der channelURL Paramter in die FB.init Funktion hinzugefügt werden:

Die channelURL zeigt auf eine Datei, welche in das lokale Verzeichnis hinzugefügt wird. Diese Datei hilft die Geschwindigkeit in einigen älteren Browserversionen zu erhöhen. Ohne die channelURL werden über diverse “Workarounds” teilweise eine Kopie der Seite in versteckten iFrames geladen um die Social Plugins sauber zu laden. Diese “Workarounds” erhöhen die Ladezeit und natürlich auch den Traffic zu Facebook.

In die channel.html-Datei muss folgender Link eingefügt werden (z.B. abgelegt in http://www.yourdomain.com/channel.html):

Falls eine Seite auf einem Server mit PHP ausgeführt wird, sollte für die channelURL ein Langzeit-Caching eingerichtet werden, das entsprechende PHP-Script sieht dann wie folgt aus:

In diesem Fall sollte die channelURL auf die voll qualifizierte URL http://www.yourdomain.com/channel.php gesetzt werden.

Bei den Tests der Facebookentwickler hat das Hinzufügen der channelURL im Internet Explorer bei einer Testseite mit 5 XFBML Plugins eine Verbesserung der Ladezeit von 1.10 auf 0.43 Sekunden gebracht.

Asynchrones Laden

Das asynchrone Laden ist eine weitere einfache Möglichkeit die Performance der Social Plugins zu erhöhen. Beim asynchronen Laden wird das Blockieren von anderen Seitenelementen verhindert. Nach dem erfolgreichen Laden der JS SDK, wird die Funktion window.fbAsyncInit aufgerufen. Diese Funktion garantiert, dass Facebookfunktionen geladen werden, ohne das andere Elemente blockiert werden, entsprechend wird das Rendering beschleunigt, was wiederum SEO-Vorteile bringt.

Beispiel-Code:

Die entsprechenden Dokumentationen von Facebook wurden entsprechend angepasst.

Autor: Thomas Hutter (1243 Posts)

Thomas Hutter (38) ist Inhaber und Geschäftsführer der Hutter Consult GmbH. Er berät grosse und mittlere Unternehmen, Organisationen und Agenturen in der Schweiz, Deutschland, Österreich und Niederlanden rund um den strategischen und nachhaltigen Einsatz von digitaler Kommunikation und digitalem Marketing in und mit sozialen Netzwerken.

Author InfoAuthor InfoAuthor InfoAuthor InfoAuthor InfoAuthor InfoAuthor InfoAuthor Info

pin it
Share

NEU: Wöchentlicher Facebook Marketing Newsletter Jetzt registrieren!
Hello. Add your message here.