Blog zu den Themen Webentwicklung, technisches Online Marketing und Suchmaschinenoptimierung

Pagespeed: Social Buttons nachladen lassen

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 Artikel die 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.

Dieser Artikel wurde am 14.01.2013 veröffentlicht

Wer schreibt hier?

Torben Leuschner - Webentwickler

Hi, ich bin Torben und baue leidenschaftlich gerne Webseiten. Also habe ich mein Hobby zum Beruf gemacht und bin seit 2008 als Webentwickler Selbständig tätig. Obwohl ich schwerpunktmäßig für Kunden arbeite habe ich auch sehr viel Freude an der Realisierung eigener Projekte. Daraus resultierend hat sich eine große Affinität zu den Themen Online Marketing und Suchmaschinenoptimierung entwickelt. Gelegentlich schreibe ich auf Twitter, viel aktiver bin ich allerdings auf Facebook. Gerne können wir uns dort vernetzen!

Wie stehst du dazu?

  1. ich würde sogar noch weiter gehen! Ich würde die Buttons erst nach dem Klick laden lassen!
    Zum Einen wegen dem deutschen Recht und zum Anderen, weil es dann noch schneller lädt, sofern die Buttons nicht benutzt werden..
    Für alle Anderen ist Deine Lösung genial!

  2. Noch eine Idee: Nicht per Timeout drauf waren, sondern auf den ersten Scroll mit der Maus ?! Was meinst Du? Dann wären Bots definitiv aus dem Spiel raus!

  3. Hey Viktor,
    guter Einwand!

    Was aus Datenschutzsicht zwar etwas bedenklicher wäre, ist die Buttons erst bei Mouseover zu laden. Vorher platziert man einfach ein paar Bildicons (natürlich per CSS-Sprite), die dann beim Drüberfahren (also wenn die Absicht zum Sharen da ist), geladen werden :)

    Gruß Torben

  4. Sehr geile Geschichte! Vor ein paar Wochen habe ich genau danach gesucht… grrrrr… etwas spät also. ;-) Aber ich werde das bei mir ausprobieren. Kann man sich das irgendwo als Demo ansehen?

    • Ah, vielen Dank. Hab’s direkt nach dem Absenden dann auch gesehen. Coole Sache. Wie du in der Demo schon schreibst, sollte man in die graue Box halt schon die Icons einbauen… sonst erkennt das ja keiner. Aber ich denke das ist allen klar. ;-)

  5. Ich habe gerade noch einen kleinen Test ausgeführt. Wenn man mit dem Google Page Speed Tool über die Demo geht, hat man einen Score von 99. Es werden also wirklich absolut keine Daten vorgeladen. Erst beim Mouseover erkennt man im Network Reiter schön, wie sämtliche Requests an die Google, Facebook und Twitter Server losgeschickt werden.

    So entsteht folgendes Ergebnis:
    Onload => 1 Request; 1 KB
    Mouseover => 22 Requests, 207 KB

    Das Potential einer Optimierung sollte deutlich werden! :)

  6. Die Idee mit dem Sprite und Mouse-Over finde ich super!
    Das Einzige was mich an bisherigen 2-Klick-Lösungen stört ist, dass man dann die Anzahl der Likes nicht mehr sehen kann (das wiederspiegelt ja die Reputation der Seite!).
    Da könnte man doch diese Werte serverseitig über deinem Social Count Checker API abfragen und anzeigen lassen, oder? Wie sieht es dann mit dem Datenschutz aus?

    • Theoretisch wäre das durchaus möglich. Man müsste dann nur einen idealen Weg aus serverseitiger Abfrage und Caching finden, um die Performancegewinne nicht gleich wieder zu verblasen.

      Ich denke ich würde dazu eine extra Datei erstellen und alle paar Minuten per Cronjob aufrufen lassen. Diese geht dann chronologisch alle Blogartikel durch, checkt deren Social Counts und schreibt die Zahlen in eine Datenbank.

  7. Das nachladen per klick/mouseover ist eine tolle Sache, hat nur einen Haken. Wenn User z.B. das Facebook Icon klicken gehen sie i.d.R. davon aus das sie jetzt geliked haben. Aber in dem Fall wird FB erstmal geladen, d.h. der User muss ein zweites Mal klicken um wirklich zu liken.

    • Da hast du sicherlich recht, weshalb ich auch die Mouseover-Lösung bevorzugen würde. Denn in dem Moment wo er mit der Maus ja auch nur in die Nähe kommt (d.h. ein Klick noch gar nicht möglich ist) wird die Aktion ausgelöst.

      • Ja auch richtig, da aber z.B. FB teils arg langsam lädt und auch die Bandbreite der Nutzer schwankt kann es mit mouseover zu einer ordentlichen Verzögerung kommen. Schwieriges Thema, ich bevorzuge persönlich momentan die Klick-Lösung von Heise, da ist recht eindeutig zu erkennen, das man den Button erst aktivieren muss.

  8. Hallo Torben,
    danke mal wieder für einen interessanten Beitrag. Dein erster Absatz kommt mir sowas von bekannt vor … aber ich hab das Gefühl, je älter man wird, desto weniger Zeit bleiben für diese Dinge. Ich teste Deine Idee gleich mal aus und wollte mich eigentlich nur melden und sagen, dass ich in Deinem Blog bisher nur „stiller“ Leser war – einer von denen, die nur in der Statistik zu sehen sind :)
    Danke, mach weiter so, wenn es Deine Zeit erlaubt.
    Gruß, Jürgen

  9. Toller Artikel!
    Ich selbst nutze auch solch ein Script und lade die Buttons erst per Klick nach. Die Idee mit dem Mouse-over finde ich aber persönlich nich interessanter und spannender. Sobald ich ein wneig zeit finde werde ich deinen Lösungsansatz mal umsetzen!

    Danke!

  10. Wie mache ich es denn, wenn ich zusätzlich in der Sidebar noch die Badges von G+, FB und Twitter einbinden möchte? Wo und wann sollte ich dann die Scripts laden lassen?

    • Hi Jakob,

      im Prinzip ändert sich dann am Vorgehen nichts. Die meisten Netzwerke verwenden ja das selbe Script für unterschiedliche Plugins.

      Eigentlich musst du also quasi überhaupt nichts tun, außer das jeweilige Script entweder rauszuwerfen oder in die setTimeout()-Funktion zu integrieren.

      Gruß Torben

  11. Der ausfahrende Code-Part sieht wirklich klasse aus. Nur vermisse ich aus Usability-Sicht den den Link zur Startseite des Blogs oder wird es bei dir alle separat gehalten?

  12. Torben, verrätst Du uns auch, wie Du das aktuell machst? Der Google Plus Button und der Twitter Button da oben werden doch zur Laufzeit geladen, der?

  13. @Tobias: Wie Viktor schon sagte, ist das Logo mit der Blog-Startseite verlinkt, wie es die „Konventionen“ vorsehen ;-)

    @Viktor: Theoretisch basiert die Technik auf diesem Blogartikel, nur dass kein Mouseover- oder Klick-, sondern mit dem Scroll-Event gearbeitet wird. Die Social Buttons werden also erst geladen, sobald der Nutzer das erste mal über einen bestimmten Wert gescrollt hat :)

  14. ok, scroll habe ich gefunden, da wäre man aber sicher gut beraten es als $(window).one(’scroll‘, function() {}); zu benutzen, oder?

  15. Ist ein super Artikeln! Vielen Dank dafür! Bin gerade dabei das ganze umzubauen für eine Tripadvisor Widget Box, leider hängts da a bissle. Das taugt dem irgendwie nicht. Bin leider a no nit so guat in jquery.
    Bei dem Tripadvisor Widget ist ein Teil des Codes „“
    das heißt ich kann nicht einfach das script hineingeben sondern muss das dazu aufrufen .. hab schon alles mögliche probiert, aber leider komm i da nit weiter. Irgendein Tipp?

  16. Hi Karo,

    leider wurde dein Code nicht richtig im Kommentar übernommen.

    Lade das ganze doch z.B. mal auf gist.github.com hoch und poste den Link.
    Dann können wir Dir sicher weiterhelfen :)

  17. Hey !
    Hier also mein Gist
    Einmal der Orginal-Code vom Widget
    und dann mein Versuch es mit deinem Code umzusetzten
    https://gist.github.com/karok/54963e4b2a7ea67299cb

    und hier das ganze umgesetzt:
    – direktes integrieren des widgets: http://www.juicy-blue.com/testingTripAdv.html
    – github-umsetzung (mein versuch): http://www.juicy-blue.com/testingTripAdv2.html

    ziemlich sicher liegt das an der einbindung des externen JS … hab da schon verschiedenes versucht was i im internet gefunden hab aber hat alles nicht so geklappt…

    danke!

  18. Hi Karo,

    generell ist dein verwendetes JS leider stark fehlerhaft.
    Du solltest also die Syntax nochmal kontrollieren.

    Leider habe ich auch kein zufriedenstellendes Ergebnis erzielen können.
    Selbst bei statischem Aufruf gibt wird das Widget nicht korrekt geladen.

    Eventuell hilft es, einfach mal direkt bei TripAdv nachzufragen?

    Gruß, Torben

  19. Danke Tobias fürs anschauen + testen!
    Werd mir das nochmal alles genauer ansehen, und vielleicht Tripadvisor kontaktieren!

    Ich hab noch eine Frage.
    Ich habe 2 FB Boxen würde gerne eine früher laden als die andere (die 2. große ist sowieso weiter unten) an der seite.
    Bekomm das noch nicht ganz hin..
    es ladet jeweils nur die eine oder andere box…

    http://jsfiddle.net/karo/6Ryh5/1/ > nur die 2. box ladet
    http://jsfiddle.net/karo/U7Z3Q/ > nur die 1. box ladet

    Soweit ich das gegoggelt habe braucht man mehrere Funktionen um mehrere settimeouts zu verwenden und man sollte cleartimeout verwende um diese zu löschen, jedoch wenn ich cleartimeout noch einbaue wird keines der boxen mehr angezeigt.

    Schon sowas ähnliches versucht?

  20. Cooler Tip, danke, jetzt siehts wieder besser aus mit PageSpeed Insights und das Facebook-Gedöns ist jetzt nur noch Enhancement.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *