Wie in jedem neuen Jahr nehme ich mir auch diesmal wieder vor, mehr zu Bloggen. Leider macht mir das Tagesgeschäft da häufig einen Strich durch die Rechnung. Heute morgen habe ich mir dennoch mal wieder ein bis zwei Stündchen reserviert, um mit einem neuen Beitrag zum Thema Pagespeed auch hier im Blog 2013 einzuläuten.
Schreiben möchte ich mal wieder über eines meiner aktuellen Lieblingsthemen: Pagespeed. Bereits vor einigen Monaten habe ich hier auf dem Blog einen relativ umfangreichen Artikel zum Thema Pagespeed veröffentlicht, der auf mehrere einzelne Teilaspekte eingeht. Heute möchte ich etwas konkreter werden und mich einem Thema zuwenden, mit dem sich wohl jeder Webmaster schon mal rum geärgert hat. Die Rede ist von den bekannten Social Buttons (Facebook, Twitter, Google +1), auf die man zum einen selten verzichten möchte, die auf der anderen Seite aber häufig ein Grund für schlechte Website-Performance sind.
Lösung: Erst das Wichtige laden lassen
Technisch gesehen gibt es für dieses Problem eine recht simple Lösung, die sich sogar ohne den Einsatz von Javascript-Bibliotheken wie jQuery schnell umsetzen lässt. Wir warten einfach ab, bis die wichtigen Bestandteile der Website (CSS, Bilder, Javascript, …) geladen sind und geben anschließend erst die Anweisung, die Social Buttons zu integrieren.
Schauen wir uns dazu einfach mal ein stark vereinfachtes HTML-Dokument an:
Sieht auf den ersten Blick wahrscheinlich komplizierter aus als es ist. Folgend möchte ich euch die wichtigen Passagen des Dokuments im Detail erklären:
- Zeilen 5 – 10:
Hier nehmen wir eine ganz einfache Formatierung für die Social Buttons vor. Sie sollen sich linksbündig anordnen und 12 Pixel Abstand zum nächsten Button einhalten. - Zeile 16:
An dieser Stelle initialisieren wir einen leeren DIV-Container mit der ID social-buttons. In diesen fügen wir im Anschluss per Javascript die Buttons ein. - Zeile 19:
Per window.onload sagen wir der anonymen Funktion, dass sie mit der Ausführung warten soll, bis die komplette Website (einschließlich Bildern) vollständig geladen wurde. Somit wird an dieser Stelle bereits verhindert, dass das Laden der Social Buttons den Aufbau der restlichen Website behindert. - Zeilen 20 – 22:
Die Social Buttons benötigen eine URL, auf die sie sich beziehen können. Twitter benötigt zudem noch einen Titel beziehungsweise Tweet-Text. Diese Angaben könnte man zwar auch leer lassen und die Buttons würden sich automatisch URL und Seitentitel ziehen; ich empfehle jedoch immer eine manuelle Eingabe vorzunehmen, um Fehlerquellen im Vorfeld auszuschließen.
In Content Management Systemen wie WordPress oder fokus stehen zum Füllen dieser Variablen praktische Funktionen bereit. Für die URL wäre das the_permalink() beziehungsweise $fks->getURL() und für den Titel the_title() beziehungsweise $fks->getTitle(). - Zeile 24:
Wir referenzieren das DIV #social-buttons für den späteren Aufruf. - Zeile 26:
Neben window.onload kommt auch noch die Funktion setTimeout() zum Einsatz. Damit können wir den Aufruf der folgenden anonymen Funktion um eine gewünschte Anzahl von Millisekunden aussetzen (Variable wait in Zeile 22 und 49).
So stellen wir zum einen sicher, dass die Website wirklich fertig geladen ist. Zum anderen gibt es Artikeldie ich auf die schnelle nicht finde, dass die Conversion Rate der Buttons besser sei, wenn sie nicht sofort sichtbar sind sondern erst nach einiger Zeit erscheinen. - Zeilen 28 – 30:
An dieser Stellen fügen wir das HTML des Twitter Buttons in unser bis dato noch leeres DIV ein. Das legen wir uns als erstes ein neues DIV an (Z. 28), welches wir anschließend (Z. 29) mit Inhalt befüllen. Hier finden wir auch die Variablen url und title wieder, die wir an entsprechender Stelle einsetzen. In Zeile 30 fügen wir unser neues DIV schließlich in unser Bestehendes (#social-buttons) ein. - Zeile 32:
Hier laden wir nun das zum Twitter-Button gehörende Javascript. Dieses stammt nicht von uns sondern wurde einfach von der entsprechenden Tweet-Button-Dokuseite entnommen. - Zeilen 35 – 40:
Nun wird auch der Google +1 Button geladen und in die Seite integriert. Die Ausführung ist mit der des Tweet-Buttons nahezu identisch. Das Javascript in Zeile 40 wurde von der +1-Dokuseite kopiert. - Zeilen 43-48:
Das beste kommt zum Schluss? In diesem Fall nicht ganz richtig, schließlich ist der Facebook Like Button in jeder Hinsicht einfach nur grausig. Nachgeladen lädt der Button an sich zwar auch nicht schneller, aber er bremst den restlichen Seitenaufbau wenigstens nicht aus.
Wie bei den anderen beiden Buttons zuvor wurde das Javascript in Zeile 48 wieder nur kopiert; und zwar von hier.
Keine Abstriche bei der Individualisierung der Buttons
Getestet habe ich das ganze erfolgreich mit dem Facebook, Google +1 und Tweet-Button. Im Prinzip sollte es aber auch mit fast jedem anderen Social Button funktionieren. Natürlich könnt ihr auch weiterhin die Ausgabe der Button im jeweiligen HTML-Code variieren; zum Beispiel beim Like Button von box_count auf button_count umstellen.
Das ganze kann man natürlich noch weiterspinnen und zum Beispiel an Hand der Bildschirmgröße festlegen, ob überhaupt alle oder bestimmte Buttons geladen werden sollen. Gerade auf Android Smartphones macht der Like Button eventuell weniger Sinn, wohingegen der +1 Button auf Grund des persistenten Google Logins durchaus in Betracht zu ziehen wäre.
Feedback, Kritik und Anregungen wie immer in die Kommentare. Ansonsten natürlich gerne teilen, damit unser Web in 2013 noch schneller und zugänglicher wird :)
Update: Buttons erst bei Mouseover laden
Der Viktor Dite hat mich in den Kommentaren zu diesem Artikel auf eine gute Idee gebracht. Man könnte die Social Buttons ja auch erst per Klick oder alternativ Mouseover austauschen. Die Idee finde ich so spannend, dass ich gleich mal das Script umgeschrieben habe. Natürlich sollte man statt einem Text bereits die entsprechenden Icons als Bild (CSS-Sprite) einbinden.
Wer statt Mouseover lieber per Klick laden lassen möchte, muss lediglich den Parameter “mouseover” in Zeile 29 und 55 durch “click” austauschen.
