Themen

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:

<div id="fb-root"></div>
 <script src="//connect.facebook.net/en_US/all.js"></script>
 <script>
   FB.init({
     appId  : 'YOUR APP ID',
     status: true, // check login status
     cookie: true, // enable cookies to allow server to access session,
     xfbml: true, // enable XFBML and social plugins
     oauth: true, // enable OAuth 2.0
     channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
   });
 </script>

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):

<script src="//connect.facebook.net/en_US/all.js"></script>

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:

<?php
  $cache_expire = 60*60*24*365;
  header("Pragma: public");
  header("Cache-Control: maxage=".$cache_expire);
  header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>

<script src="//connect.facebook.net/en_US/all.js"></script>

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:

<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
  /* All Facebook functions should be included
     in this function, or at least initiated from here */
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id',
             status: true,
             cookie: true,
 	     xfbml: true});

    FB.api('/me', function(response) {
      console.log(response.name);
    });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
</body>
<html>

Die entsprechenden Dokumentationen von Facebook wurden entsprechend angepasst.

Autor: Thomas Hutter 1294 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.
15% Rabatt auf die Tickets der AllFacebook Marketing Conference am 10.11.14 >>> Rabattcode HUTTERAFMC <<< Jetzt profitieren!
Hello. Add your message here.