Like Button Tipps – Facebook Social Plugins beschleunigen

Like Button Tipps – Facebook Social Plugins beschleunigen


Wir reisen ja neben unserer Bloggertätigkeit auch als Speaker durch die Lande und werden dort bei Gesprächen häufig mit einem schwergewichtigen Argument gegen den Like Button konfrontiert: Die Geschwindigkeit.

Schuld daran ist, dass der Browser für jeden Like Button eine Vielzahl an Anfragen an die Facebook Server senden muss. So muss zum Beispiel die Like Button Grafik jedes Mal von den Facebook Servern geladen werden. Das kostet Zeit, Zeit die der Besucher einer Webseite unter umständen nicht bereit ist zu warten.

Heute Nacht hat Facebook zwei kleine Tricks zur Beschleunigung des Seitenaufbaus veröffentlicht:

  1. Durch eine zusätzliche lokale Seite wird besonders der Internet Explorer beschleunigt
  2. Durch das asynchrone Laden der Seitenelemente wird der Seitenaufbau nicht mehr blockiert.

Der erste Trick lässt sich wie folgt umsetzen: 

  • FB.init() Funktion um den Parameter channelURL erweitern:
    channelUrl: 'http://yourdomain.de/channel.php'
  • Datei channel.php anlegen und mit folgenden Zeilen befüllen:
    <?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="http://connect.facebook.net/de_DE/all.js"></script>

Leider werden auch bei dieser Lösung wesentliche Elemente (wie etwa die Like Button Grafik) noch nicht lokal gespeichert.

Der zweite von Facebook vorgeschlagene Trick ist das asynchrone Laden der JavaScript Bibliotheken. Dafür wird der bisherige FB.init Block durch die folgenden Zeilen ersetzt:

    <script>
window.fbAsyncInit = function() {
FB.init({appId: 'yourappid',
status: true,
cookie: true,
channelUrl: 'http://yourdomain/channel.php',
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/de_DE/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

Auch einen weiteren Trick, den Facebook hier nicht explizit aufführt, sollte man als Seitenbetreiber beachten. So blockiert ein JavaScript den Seitenaufbau weniger, wenn das Script erst am Seitenende aufgerufen wird. Denn dann sind die meisten Elemente bereits vom Browser gerendert. Dafür wird einfach der komplette Script Teil unmittelbar vor den schließenden </body>-Tag verschoben.

Auch sollte man überprüfen, ob bei mehreren Like Buttons das JavaScript nicht mehrmals vom Facebook Server geladen wird. Zur Darstellung reicht es den oben gezeigten Quelltext einmal auf der Seite einzubinden. Zur Darstellung des Like Button genügt dann einfache die folgende Zeile.

<fb:like href="" send="true" width="450"></fb:like>

Habt ihr noch weitere Tipps und Tricks zur Beschleunigung des Like Buttons? Lasst Sie uns in den Kommentaren wissen.

Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInBuffer this pageEmail this to someone
Kategorien
Veröffentlichung 3. August 2011

Es gibt 7 Kommentare

Deinen hinzufügen

+ Hinterlasse einen Kommentar