Performance erhöhen: Social-Buttons mit Zählung skriptfrei realisieren

Dieser Beitrag wurde vor mehr als 8 Jahren veröffentlicht. Daher kann es sein, dass sein Inhalt oder ein Teil davon nicht mehr aktuell ist.

Die Geschwindigkeit einer Website ist mitunter der wichtigste Faktor bei den Besuchern. Wenn eine Seite ewig lädt, haut der Nutzer ab. Gerade mobil ist das ein ziemliches Problem, da die Datenraten hier teils echt brutal schlecht sind. Da ist es gut, wenn man jeden Ballast entfernen kann, wie zum Beispiel die Social-Buttons zum Teilen von Inhalten. Hier kommt SharedCount zum Einsatz.

SharedCount

Wer kennt sie nicht, der Like-Button von Facebook, der Tweet-Button von Twitter und der +1-Button von Google+. Alle werden sie per JavaScript geladen und das kostet Zeit. Auch wenn diese Buttons klein sind, steckt da massig Code hinter. Die Darstellung, das Erkennen, ob jemand eingeloggt ist. Die Darstellung der Zählung von Likes, Tweets und +1ern. Und das eben alles 3 Mal. Das kann den Aufbau einer Seite schon böse verzögern. Hier auf dem Wishu-Blog waren es laut mehreren Messungen im Schnitt 0,8-1,3 Sekunden, die die Seite länger lud, als ich den ganzen Käse noch drin hatte. Klingt vielleicht auf den ersten Blick nicht viel, aber die Masse macht’s.

Auf Buttons zum Teilen der Inhalte zu verzichten, war natürlich keine Option. Auf die Darstellung der Anzahl wie oft geteilt wurde, wollte ich nicht verzichten. Denn erstens interessiert es mich (auch bei anderen Blogs) wie oft etwas geteilt wurde und zweitens wird eher geteilt, wenn eine Anzahl vorhanden ist und davon leben Blogs schließlich. Wenn nichts geteilt wird, wird auch nichts gelesen. Doch wie kommt man an die Anzahl der geteilten Inhalte?

Die Suche war an sich gar nicht so lang. Wenn man weiß, wonach man googlen muss, geht das schnell von der Hand. Und so stieß ich auf SharedCount, einen Dienst der eben genau das macht und nicht mehr. Er liest die »Shares« einer URL aus und bietet dafür eine API an, auf die man zugreifen kann.

SharedCount Preistabelle

Anmelden, API Key nutzen fertig. 50.000 Mal kann man das pro Account kostenlos machen – danach gibt es Zahlungsmodelle. Das sollte für die meisten durchaus ausreichen, wer mehr tägliche Leser hat, wird sicherlich auch 40$ im Monat dank der Werbeeinnahme übrig haben, um das nächste Modell zu bedienen, was 150.000 Überprüfungen zulässt.

Die Bedienung ist denkbar einfach. Die API-Dokumentation ist gerade mal gut 3 A4-Seiten lang und absolut selbsterklärend, wenn man ein wenig Ahnung von PHP hat. 2 Zeilen PHP und man hat die Daten. Diese beinhalten StumbleUpon, Reddit, Facebook, Delicious, Google+, Buzz (Das gibt es noch?), Twitter, Digg, Pinterest und LinkedIn. Alle davon haben eine eigene Schnittstelle, die man natürlich einzeln ansprechen kann, bei den 3 gängigen Netzwerken wären das aber 3 Requests, was die Ladezeit wieder erhöht. Also eine Abfrage und man hat alle Daten zusammen. Um in WordPress an die Daten zu kommen, braucht man zum Beispiel folgenden Code:

$url = get_permalink();
$json = file_get_contents("http://api.sharedcount.com/?url=" . rawurlencode($url) . "&apikey=XXX");
$counts = json_decode($json, true);

Schon hat man die Daten. Angesprochen werden die jeweiligen Ziffern dann mit $counts["Twitter"] oder eben das jeweilige Pendant von anderen Diensten. Wie die jeweiligen Namen sind, könnt ihr einfach der API-Dokumentation entnehmen.
Und das war es dann auch schon. Hier mal ein Beispiel, wie das ganze hier im Blog aussieht:

echo '<ul id="shr-btns">';
echo '<li class="shr-fb-btn"><a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u='.$url.'" target="_blank">Auf Facebook teilen <span class="cnt">'.intval($counts["Facebook"]["total_count"]).'</span></a></li>';
echo '<li class="shr-twt-btn"><a target="_blank" href="https://twitter.com/intent/tweet?text='.$title.'&url='.$url.'&via=WishuKaiser" target="_blank">Auf Twitter teilen <span class="cnt">'.intval($counts["Twitter"]).'</span></a></li>';
echo '<li class="shr-gplus-btn"><a target="_blank" href="https://plus.google.com/share?url='.$url.'" target="_blank">Auf Google+ teilen <span class="cnt">'.intval($counts["GooglePlusOne"]).'</span></a></li>';
echo '</ul>';

Jetzt fehlt an sich nur noch das CSS, um die Buttons zu stylen, meiner Meinung nach der zweitgrößte Vorteil. Denn die offiziellen Social-Buttons fügen sich nun wirklich in kein Design ein. Hier seid bitte selbst kreativ und übernehmt nicht unbedingt meine Buttons. Kein Verbot, nur eine Bitte.

Hinweis: Achtet bitte darauf, dass euer Hoster file_get_contents(); erlaubt. Wenn dies nicht der Fall ist, bleibt die Variable $json einfach leer.

Mit dem entfernen der Social-Buttons und der Social-Widgets (Die Dinger, mit denen man eine Seite bei Facebook liked etc. Die jetzt bei mir diese großen Buttons rechts sind) und der nötigen Plugins dafür, konnte ich mal eben einen Geschwindigkeitszuwachs von gut 2,3-2,5 Sekunden erreichen. Manche Seiten laden noch nicht mal so lange… Wie dem auch sei, auch wenn mein Blog noch immer kein Geschwindigkeitswunder ist (Überrascht wenig, ist es doch seit 2008 dieselbe Installation), ist er weit schneller geworden und blockiert gerade mobil nicht mehr so stark.

8 Kommentare

    • Es geht ja auch darum, auf Plugins zu verzichten. Jedes Plugin macht die Seite langsamer. Zudem gibt es ja nicht nur WordPress. Aber danke dir, sicherlich für einige, die sich damit nicht auskennen, sinnvoll :)

    • Hab den +1-Button als Chrome-Erweiterung. Nutze ihn auf anderen Seiten halt auch nur zum Teilen. Mir persönlich ist die Performance wichtiger, als ein +1. Aber ich überleg mir mal, ob mir eine Alternative einfällt, bzw. ein Zusatz.

        • Hover hab ich schon mal eingesetzt (Bei MG damals). Das Blöde ist, dass es dann aus Versehen auch mal ausgelöst werden kann, was eventuell nicht erwünscht ist. Gerade wenn es darum geht, dass man eben nicht von Facebook und Co getrackt werden will. Doppelklick ist halt wieder ein Klick mehr.
          Zudem kommt eben dazu, was mich neben der Performance am meisten stört: Das Design. Wie oben erwähnt, die Buttons passen in kein Design. Zudem hat die Vergangenheit gezeigt, dass sie gerne mal vom Design geändert werden und wenn das wie beim Like-Button auch in der Breite passiert, kann das unter Umständen das Design zerschießen.

          Ich habe mir viele Gedanken drum gemacht, was man machen könnte, allerdings war mir eine komplett skriptfreie Lösung bisher am liebsten. Ob ich da noch was dran verändere werde ich schauen. Vielleicht die Original-Buttons per Klick noch zusätzlich nachladen, aber da mag ich nichts in Stein meißeln.

  1. Aber hast Du nun nicht noch die Ladezeit zu api.sharedcount.com huckepack? Die kann je nach Auslastung und CDN-Routing des Anbieters ja auch eine Rolle spielen.

    • Ich hab die Lösung jetzt eine Woche in autarken Tests am Laufen gehabt und die Ladezeiten getrackt und seit vorgestern hier im Blog. Bei den autarken Tests, war die maximale Verzögerung des Seitenaufbaus in der Zeit 217ms, was aber eine Ausnahme war. Im Schnitt lag der Wert im niedrigen zweistelligen Bereich, was durchaus zu verkraften ist.
      Wenn man einem Ausfall vorbeugen möchte, kann man den Timeout auf eine Sekunde setzen, sodass selbst bei einem Ausfall die Verzögerung noch unter der liegt, die von den JavaScript-Buttons ausgelöst wird.