[HTML/JS] Social Media "like" buttons en performance

[geert1]

Het leeuwendeel van de moderne websites maakt tegenwoordig gebruik van "like"- of "share"-buttons van de verschillende grote social media. Ik heb deze functionaliteit als frontender ook vaak in sites en shops geplaatst, zowel de officiële buttons als de verschillende 3rd party scripts die er te krijgen zijn (zoals AddThis). Maar ik stoor me altijd enorm aan de vertragende werking van deze knopjes. In plaats van een simpel linkje, bestaan deze knoppen veelal uit iframes, één of meer javascripts per knop, afbeeldingen, enzovoort. Vaak duurt het inladen van dit handjevol knopjes langer dan de rest van de pagina bij elkaar. Een nette, geoptimaliseerde site wordt zo totaal onderuit gehaald. Vooral tijdens de eerste vertoning, maar ook daarna is het effect duidelijk te zien.

Zijn hier slimme oplossingen voor te bedenken? Een korte zoektocht op Google lijkt weinig uitkomst te bieden, en toch zie ik het effect op de ene site veel sterker dan op de andere. Tweakers.net lijkt bijvoorbeeld geen last te hebben van enige vertraging. Aangezien ik frontend-ontwikkelaar ben, is mijn kennis van server-side techniek en geavanceerde caching-methodes beperkt, maar ik leer graag bij. Het gaat me specifiek om Facebook, Twitter en Google+. Ik denk dat deze informatie voor velen van belang kan zijn, aangezien de performance van een pagina enorm van invloed is op de gebruikerservaring.

[ Voor 4% gewijzigd door geert1 op 03-05-2012 14:45 ]

[Martijn19]

Implementeer je ze als iframe of als iets anders?
Een like button in een iframe is een stuk sneller.

edit;

Ik bedoel daarmee; de content die er toe doet is dan al geladen, en de buttons komen later.

Als je een willekeurig artikel op Tweakers pakt en die refresht zul je ook zien dat alle tweakers content er al staat en de social media knoppen pas later komen.

[ Voor 57% gewijzigd door Martijn19 op 03-05-2012 14:49 ]

[q-enf0rcer.1]

Je kan de share knoppen zelf met JavaScript maken. Op het moment dat je op een knop klikt laat je dan een nieuw venster openen met als url twitter.com/balbalba?=jouwurlhier etc.

Heel simpel. Gewoon de url ontleden die wordt gebruikt voor het plaatsen van berichten en waar nodig de JavaScript variabelen zoals document.title plaatsen.

Voorbeeld:

function facebook()

{ window.open('http://www.facebook.com/sharer.php?u='+escape(document.location.href)+'&t='+document.title,'','scrollbars=no,menubar=no,height=600,width=800,toolbar=no,location=no'); }

[ Voor 26% gewijzigd door q-enf0rcer.1 op 03-05-2012 14:55 ]

[Suepahfly]

Zurb.com heeft hier een interessant artikel over

[geert1]

@m19: Ik gebruik voor Facebook de iframe-methode. In principe wordt iframe-content inderdaad als laatste ingeladen, maar het laden is dan wel zo hevig dat bijvoorbeeld scrollen in de pagina de eerste paar seconden niet mogelijk is. Voor Twitter en Google+ gebruik ik op dit moment ook de standaard-implementaties, wat voor die beide platformen een html-tag + een inline script-blok is.

@q-enf0rcer.1 en @Suepahfly: Jullie hebben het over een eigen implementatie, en dit kan inderdaad voor een flinke snelheidsverbetering zorgen. Uit het gelinkte artikel blijkt ook dat dit simpel is om te doen. Uiteraard zijn er een paar nadelen: Allereerst is er geen garantie dat deze links blijven werken als één van de social media hun structuur aanpast. Bovendien lees ik dit stukje in het artikel:

quote: http://zurb.com

Obviously, there is utility not represented with this option — it won't add fans to your Facebook page the way the "Like" button does, or impact search like the "+1" button does, but it will create a faster, friendlier experience for the majority of your mobile visitors.

Dit kan dus voor veel sites wel helpen, maar voor andere niet. Soms is het essentieel dat een like-buttons ook echt een "fan" toevoegt aan een bepaalde pagina bijvoorbeeld. De eigen implementatie plaatst alleen een berichtje op de "wall" van de gebruiker. Verder nog suggesties?

[ Voor 11% gewijzigd door geert1 op 03-05-2012 15:09 ]

[OkkE]

Ik vind nog steeds dit de netste optie voor het standaard sharen. Naast de minste extra load is het ook het beste ivm privacy.

http://twitter.com/intent/tweet?text=...
http://www.facebook.com/sharer/sharer.php?u=...
http://www.linkedin.com/cws/share?url=...


Anders zou je eens kunnen kijken naar het Async inladen van de verschillende scripts. Doet Tweakers dat niet zelf ook op die manier?

-- edit --

Voor dingen als "Fans" toevoegen: erg weinig ervaring mee. Wij houden het (in samenspraak met onze klanten) vrijwel altijd bij alleen een simpele share-link zoals eerder in dit bericht.

[ Voor 20% gewijzigd door OkkE op 03-05-2012 15:18 ]

[geert1]

Bedankt voor de reacties tot dusver. Ik zal voor simpele sharing-buttons inderdaad overstappen op deze statische linkjes. Voor situaties waarin het fan worden van een merk of bedrijf essentieel is, zal de standaard button maar moeten voldoen denk ik.