Anzeige
Anzeige
Hardware & Gadgets
Artikel merken

Sharing-Plugins: Skriptfreie Alternativen für mehr Performance

Social-Sharing-Plugins können echte Performance-Bremsen sein. Wir verraten dir warum und was du dagegen tun kannst.

Von Ilja Zaglov
4 Min. Lesezeit
Anzeige
Anzeige

Social-Sharing-Plugins können schlecht für die Performance sein.

Es gibt kaum eine Seite, die heute ohne soziale Interaktion auskommt. Hierfür kommen of so genannte Social Plugins zum Einsatz, zumeist JavaScript-Bibliotheken, die von fremden Servern abgerufen werden. Hierbei werden zahlreiche Anfragen an unterschiedliche Server abgesetzt, was im Live-Einsatz zu einem wahren Performance-Killer werden kann (die Datenschutzbedenken klammern wir in diesem Fall mal aus).

Warum Social-Sharing-Plugins problematisch sind

Anzeige
Anzeige

Neben dem zusätzlichen Skripten, die bei solchen Social-Sharing-Plugins übertragen werden müssen, sind die zusätzlichen „Requests“ ein Problem, da sie meist an unterschiedlichste Server abgesetzt werden müssen und somit zusätzliche Wartezeiten für das Auflösen der jeweiligen IP-Adressen benötigen (Mehr zum Thema Requests und Webseiten-Performance erfährst du übrigens in unserer Performance-Serie).

Der nachfolgende Screenshot zeigt eine rein textbasierte Testseite, die ohne Social Plugins nur zehn Kilobit auf die Wage bringt und bei einer simulierten EDGE-Verbindung nur eine Sekunde zum Laden benötigt.

Anzeige
Anzeige
Textbasierte Webseite mit hoher Performance

Textbasierte Webseite mit hoher Performance. (Screenshot: t3n)

Werden dieser Seite Social-Share-Buttons, wie sie beispielsweise von den Generatoren der Netzwerke zur Verfügung gestellt werden, hinzugefügt (in diesem Beispiel ein Twitter-, Facebook- und Google+-Button), bläht sich die gesamte Datenmenge auf ein Megabyte und eine Gesamtübertragungszeit über das EDGE-Netzwerk von über anderthalb Minuten aus. Zwar wird der Inhalt durch „Inlining“ des Social-Share-Codes und dem verzögert erfolgenden Nachladen der Skripte schon vorher dargestellt – die Datenmenge steht jedoch in keinem Verhältnis zum Inhalt der Seite.

Anzeige
Anzeige
Social Sharing Plugins Performance

Social-Sharing-Plugins bringen unnötiges Gewicht auf die Waage. (Screenshot: t3n)

Die verlorene Performance gewinnt doppelt an Bedeutung, wenn die Social-Media-Elemente einer Seite nur unterdurchschnittlich oft genutzt werden. Das nämlich würde bedeuten, dass wir bei jedem Seitenaufruf die Wartezeit unserer Nutzer erhöhen, um Funktionen zu realisieren, die kaum oder gar nicht benutzt werden.

Doch müssen wir deshalb noch lange nicht auf die Social-Media-Elemente auf unserer Webseite verzichten. Zumindest für den Aspekt des Teilens von Inhalten gibt es Lösungen, die uns eine ausgewogene Balance zwischen Performance und Nutzen ermöglichen.

Anzeige
Anzeige

Zwei-Klick-Methode

Mit der so genannten „Zwei-Klick-Methode“ kann der unnötige Overhead beim Aufruf der Webseite eingespart werden. Hierbei werden zunächst Platzhalter für die jeweiligen Social-Share-Elemente ausgeliefert. Mit Hilfe eines Skripts beziehungsweise Klicks können diese dann „aktiviert“ werden. Hierbei werden die jeweiligen Anfragen erst nach bewusster Interaktion durch den Benutzer durchgeführt, sodass die Einflüsse auf die Performance minimal sind.

Eine solche Zwei-Klick-Social-Sharing-Lösung wird von den Kollegen von Heise zum freien Download angeboten.

Skriptfreies Sharing

Social Sharing kann aber auch komplett ohne JavaScript implementiert werden. Hierbei benutzt du speziell „codierte“ Links zu den Sharing-Diensten deiner Wahl. In dem Link werden alle benötigten Informationen, die du zum Teilen deiner Inhalte benötigst, untergebracht.

Anzeige
Anzeige

Skriptfreies Sharing mit Twitter

Für Twitter können unter anderem Texte, eine URL und der „Via-Benutzer“ mit der URL übergeben werden, um so mit einem Twitter-eigenen Dialog Inhalte zu teilen. Es reicht jedoch die Angabe des „text“-Parameters, um einen voll ausgestatteten Tweet abzusetzen.

<a target="_blank" href="https://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE">Tweet</a>

Skriptfreies Sharing mit Facebook

Für Facebook reicht die Übergabe der URL zu deiner Webseite. Die benötigten Informationen wie Titel, Beschreibung und Thumbnail holt sich das Soziale Netzwerk dann selbstständig aus deiner Webseite:

<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=YOUR-URL">Share on Facebook</a>

Anzeige
Anzeige

Da die automatische Erkennung von Facebook nicht immer die gewünschten Ergebnisse liefern wird, sollten die jeweiligen Metainformationen im <head>-Bereich der Webseite hinterlegt werden.

<meta name="title" content="The Title Of The Link" />
<meta name="description" content="A description of the link would go here." />
<link rel="image_src" type="image/jpeg" href="http://www.domain.com/path/my_picture.jpg" />

Skriptfreies Sharing mit Google+

Ähnlich wie bei Facebook funktioniert auch das Teilen bei Google+. Die Übergabe einer URL unter Zuhilfenahme zusätzlicher Metadaten – beispielsweise gemäß Open-Graph-Protokoll im Quellcode – reichen aus, um einen funktionierenden +1-Link zu erstellen:

<a target="_blank" href="https://plus.google.com/share?url=YOUR-URL">Plus on Google+</a>
<meta property="og:title" content="..." />
<meta property="og:image" content="..." />
<meta property="og:description" content="..." />

Weitere Skriptlose Sharing-Ansätze

Auch andere Soziale Netzwerke wie LinkedIn, Pinterest und Xing bieten die Möglichkeit, Inhalte über eine URL zu teilen. Bei LinkedIn kannst du neben der URL auch einen Titel, eine Zusammenfassung und eine Quelle angeben:

Anzeige
Anzeige
<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY&source=YOUR-URL">Share on LinkedIn</a>

Für Pinterest übergibst du die URL zur Seite, eine Beschreibung und ein Vorschaubild problemlos direkt über den Share Link:

<a target="_blank" href="http://pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC">Pin on Pinterest</a>

Für XING steht lediglich die URL als Parameter zur Verfügung. Die nötigen Informationen für Beschreibung und Vorschaubild nimmt sich das Netzwerk direkt aus den Metadaten deiner Seite:

<a target="_blank" href="https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url=YOUR-URL">Share on Xing</a>

XING fragt hierbei ein Bild, den Titel, den Autor und die Beschreibung der Seite ab. Hierfür sollten optimalerweise Daten wie im Google+-Beispiel gemäß Open-Graph-Protokoll in der Seite angelegt werden.

Anzeige
Anzeige

Nachteile der Performance-Lösungen

Nachteil der Zwei-Klick-Methode und des skriptfreien Sharings ist die Tatsache, dass durch das Verzichten auf eine Kommunikation zwischen den Servern der Sozialen Netzwerke und dem Client des Benutzers keine aktuellen Daten wie beispielsweise die Anzahl von „Shares“ angegeben werden können. Bei der Zwei-Klick-Methode wird diese Information nach dem Aktivieren des jeweiligen Elements eingeholt. Bei der skriptfreien Methode ist das in der Grundausführung gar nicht möglich.

Aktuelle Daten ohne Performance-Einbußen

Hier müsste serverseitig nachgesteuert werden. Alle Sozialen Netzwerke stellen ihre APIs nicht nur für JavaScript zur Verfügung, sodass beispielsweise über die Twitter-, Google+- und Facebook-API problemlos die benötigten Informationen abgerufen und zwischengespeichert werden können und die Last vom User an den Server übertragen werden kann. So können relativ aktuelle Informationen ausgeliefert werden, ohne die Frontend-Performance zu beeinträchtigen.

Und mit welcher Social-Sharing-Lösung arbeitest du auf deiner eigenen Webseite?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
18 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Sebastian

Durch den heise Beitrag hab ich mich schon vor einem halben Jahr mit der Doppel-Klick-Methode angefreundet. Aber die weitern Ansätze in diesem Beitrag find ich auch sehr viel versprechend.

Antworten
Patrick

Gibt es ein Plugin für WordPress, welches Skriptfreies Sharing realisiert (die von Heise mal ausgenommen)?

Antworten
Christian Zoller

Im Falle von werkenntwen geht die Skriptfreie Variante so:
Teilen auf werkenntwen

Antworten
Uwe

Die HEISE-Lösung ist eigentlich nicht zur Performance-Steigerung gedacht, vielmehr hilft sie, die deutschen Datenschutzbestimmungen einzuhalten (keine Nutzerdatenübertragung an facebook und Co. durch bloßes Aufrufen der Seite). Ich hab‘ die seit ca. einem Jahr laufen und hab‘ den Aspekt der Requests hierbei noch gar nicht bedacht.

Antworten
Olaf

Die Aussage bezüglich der API’s zum Abruf der Zählerstände ist so nicht korrekt. Einzig Facebook bietet dies offiziell an. Bei Twitter handelt es sich um eine undokumentierte Schnittstelle und der Zugriff ist von Twitter auch nicht gewollt. Bei Google+ gibt es ebenfalls keine offiziell dokumentierte Schnittstelle und Google macht es auch deutlich aufwendiger, an die Daten heranzukommen. Bei Twitter und Google+ gilt also, dass diese Methode sich ohne jegliche Ankündigung ändern und entsprechend ausfallen können. Diese Dienste wollen also unbedingt, dass ihr nur ihre Scripte einbindet – damit sie selbst mehr Kontrolle haben. Facebook scheint das noch/mittlerweile etwas entspannter zu sehen. Hier kann man auch gleich Stapelweise Urls abfragen und das Ausgabeformat (JSON, XML) bestimmen.

Antworten
Simon

@Olaf Ohne mich mit Twitter auszukennen – zumindest für G+ gibt es eine sehr gut dokumentierte API: https://developers.google.com/+/api/?hl=de

Antworten
Olaf

@Simon Klar gibt es eine API bei G+, aber es gibt keine offiziell dokumentierte API um die +1, um die es ja hier im Absatz ging, direkt für eine (beliebige) Url abzurufen.

Antworten
Frank Aldersleben

Wie wärs mit dem Ghostery-Plugin für fast alle Browser?

Antworten
Granaton

Für WordPress gibt es die heise-Entwicklung als Plugin unter dem Namen 2-Click Social Media Buttons. Ich arbeite seit knapp einem Jahr damit.
http://granaton.com/das-plugin-2-click-social-media-buttons-gestalten/
Es funktioniert nicht in allen Punkten einwandfrei, doch es ist die beste Alternative zu offenen Social Sharing Plugins. Um das Aussehen des Plugins zu verbessern, habe ich eigene Buttons gestaltet und mithilfe von CSS integriert.
Ghostery unterdrückt tatsächlich die Sharing-Funktionen. Wenn man Ghostery installiert und Social Plugins deaktiviert hat, funktionieren die APIs nicht mehr.

Antworten
Lara

Vielen Dank für die Aufklärung. Da wir regelmäßig versuchen, die Performance unsere Seiten zu optimieren, waren uns diese Plugins schon immer ein Dorn im Auge. Sie bremsen wirklich sehr und wir wussten nie wie wir das schneller hinbekommen können. Wir werden jetzt auf jeden Fall die scriptfreien Codes testen.

Antworten
Sergej Müller

Setze auf meinen Websites ausschließlich Script-lose Buttons ein. Datenschutz und Performance danken.

Antworten
Dominik Horn

Die Methode von Heise ist nach meinem Kenntnisstand deprecated und funktioniert mit den neueren Version von jQuery nicht mehr.

Antworten
Andre

gern würde ich Scriptfreie Buttons einsetzen. Gibt es dafür irgendwo eine Anleitung wie ich dafür auch jeweils einen Share Counter anzeigen lassen kann?

Antworten
Eric

Für WordPress gibt es ein Plugin, welches serverseitig die APIs anspricht: https://github.com/pabloroman/TNW-Social-Count

Gruß

Antworten
dribbler09

Hallo,
toller Bericht, der mir einige Scriptfehler von der Homepage verbannt hat.
Probleme habe ich allerdings noch mit der richtigen Übergabe vor allem der Bilder nach pinterest.
Das scheint wohl noch mit dem „/“ in der URL zusammenzuhängen.

Gruß
Michael

Antworten
moortaube

Hallo,

super Artikel.
Heise hat mittlerweile noch einen nachgelegt und bietet nun Shariff: Social-Media-Buttons mit Datenschutz an, welche serverseitig (Backends) mit Zählern ausgestattet werden können.

Gruß
moortaube

Antworten
sass

Würde gern meine Lösung hier vorstellen. https://github.com/s-a/look-at-this. Man könnte es sehr leicht in word press implementieren.

Antworten
Clipart - Designer

Habe auf meinen Projekten eine Lösung von einem bekannten Anbieter genutzt, bis ich irgendwann gemerkt habe, dass die Website einfach sehr langsam geworden sind.

Danke für den Tipp. Werde versuchen jetzt die scriptlose Variante zu implementieren.

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige