Social media knoppen en performance: een slechte match?

banner joomladagen
slow social media buttons

Sociale media spelen een steeds belangrijker rol in ons leven en daarom is het voor ons als webbouwers steeds belangrijker om deze te integreren in onze websites. Helaas maken deze knoppen de website vaak erg traag door de benodigde connecties tijdens het laden.

Voor elk soort social media moeten tijdens het laden netwerk connecties opgezet worden om vooral de tellertjes weer te geven die aangeven hoevaak de pagina al gedeeld is. Niet iedereen realizeert zich dit, maar soms blijken deze knoppen verantwoordelijk te zijn voor meer dan de helft van de laadtijd van de hele pagina! Als je je realizeert hoe belangrijk performance is, is dit echt te gek. Vooral de buttons van Facebook maken het wel heel bont. Kijk maar eens naar dit screenshot van een performance test (met Pingdom Tools) van een willekeurige website met een paar share-buttons:

performance social media

Zeven van de connecties komen van domeinen van Facebook, en dat allemaal om een simpel knopje weer te geven.... En reken maar dat ze je site vertragen. Om te beginnen zou ik de standaard deel-knoppen dus verwijderen. Maar je wilt nog wel je conetnt delen natuurlijk. Er zijn talloze manieren waarop je dat voor elkaar kunt krijgen, maar laten we er eens een paar onder de loep nemen.

Share buttons zonder tellertjes

Vooral als je maar een paar shares hebt, waarom zou je dan eigenlijk dit magere resultaat willen tonen? Als je maar een paar shares hebt ziet dat er niet bepaald indrukwekkend uit en ook zal het mensen niet vaker laten sharen dan ze anders zouden doen. Twitter is recent zelfs gestopt met het tonen van de aantallen tweets voor een pagina, waarschijnlijk om die gekke focus op tellertjes te vermijden.

Als het je dus puur gaat om de mogelijkheid van delen makkelijk te maken is een hele simpele knip genoeg. Zo'n knop hoeft helemaal geen netwerk verbindingen te leggen totdat je hem daadwerkelijk aanklikt. Er zijn op de Joomla Extensions Directory wel een paar voorbeelden van te vinden:

Als je dit soort knoppen eens bestudeerd zul je zien dat ze eigenlijk heel simpel in elkaar zitten. Eigenlijk zijn het niet meer dan knoppen met een link. Je kunt ze vrij simpel zelf bouwen, direct in een artikel of in een Aangepaste HTML module. Ik doe dat laatste vaak, waarbij ik dan wat simpele PHP code gebruik die ik met Nonumber's Sourcerer extensie invoeg.Met de PHP code haal ik de Paginatitel en URL van de actieve pagina op en voeg die dan weer in in de social media knoppen. De code ziet er dan bijvoorbeeld als volgt uit (de Sourcerer tags moeten er nog wel omheen gezet worden, maar die heb ik hier weggelaten omdat de plugin anders de code gaat interpreteren):

<?php
$doc = JFactory::getDocument();
$page_title = $doc->getTitle();
$page_url = JURI::current();
?>

<a class="button" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=400');return false;" href="http://www.facebook.com/sharer.php?u=<?php echo JURI::current(); ?>"><i class="uk-icon-facebook "></i> Share</a>

<a class="button" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=400');return false;" href="https://twitter.com/intent/tweet?url=<?php echo $page_url; ?>&amp;via=@simonkloostra&amp;text=<?php echo $page_title; ?>"><i class="uk-icon-twitter "></i> Tweet</a>

<a class="button" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" href="https://plus.google.com/share?url=<?php echo JURI::current(); ?>"><i class=" uk-icon-google "></i> Google+</a>

Dit resulteert in de volgende knoppen (iets opgeleukt in dit geval):

Super simpel, en geen verlies in laadsnelheid ;) Klik er maar eens op om te zien dat ze gewoon netjes resultaeren in een pop-up om een link te delen.

Share buttons met vertraagde executie

Als je toch echt graag tellertjes in je knoppen wilt zijn er een paar extensies die de functionaliteit op zo'n manier aanbieden dat dit toch niet ten koste gaat van de laadsnelheid van de pagina. Ze doen dit soor de buttons op zo'n manier aan te bieden dat de code pas actief wordt nadat de pagina al geladen is. Vaak gebeurt dit door een gebruikers-actie als trigger te gebruiken, zoals scrollen of een klik. Na de klik of scroll worden dan wel de connecties naar de social media opgestart, maar de pagina is dan al geladen, en ten tweede zal de gebruiker dat waarschijnlijk minder erg vinden omdat hij bewust een link wil delen. Ik heb 2 extensies gevonden die dit netjes regelen:

  • Fast Social Share (van dezelfde ontwikkelaar als het uitstekende Jsitemap). De knoppen worden pas actief als de gebruiker naar beneden scrolled of er met zijn muis overheen gaat
  • 2CSB - 2 Click Social Buttons van Viktor Vogel's Kubik-Rubik extensies. Je moet hier eerst op de knop klikken om ze actief te maken

Joomla Hosting tip: Siteground

Joomlaseo.com laadt in 0.5 - 1 seconden en heeft een Pingdom score van 100%!!! Daarom bevelen we Siteground hosting aan. Snelle servers, goede support, gratis SSL, etc. En niet duur...

 

Ampz van Roosterz

Recent heb ik kennis gemaakt met Ampz Social Sharing van de Nederlandse ontwikkelaar Roosterz.De kennismaking beviel uitermate goed en ik ben deze extensie ook gaan gebruiken, zoals je kunt zien in de zijkant rechts. Het heeft voor mij de ideale combinatie van mooi design, functionaliteit en performance. En het geeft ook nog eens netjes de tellertjes weer...

Performance was natuurlijk mijn eerste zorg: ik wil niet mijn 100% scores in Google Pagespeed en Pingdom Tools kwijtraken, maar dat ging helemaal goed. Er worden slechts 2 kleine resources ingeladen in mijn geval. De goede performance komt door een slimme caching oplossing: de tellertjes worden niet bij elke pageload opgehaald, maar slechts 1 keer per uur (of meer / minder als je wilt) en vervolgens gecached. Andere redenen waarom de plugin me zo bevalt:

  • Support voor veel components. De plugin detecteert welke er geinstalleerd zijn en geeft je de keuze om ze overal waar je ze wilt toe te voegen.
  • Optioneel tellertjes aan- of uitzetten
  • Je kunt zelfs Twitter-counts weer aanzetten door een slimme integratie met Newsharecounts.com.
  • Aparte weergave op mobiele devices
  • Cache settings voor de beste performance
  • En natuurlijke de mooie design options, met de mogelijkheid om de buttons in de sidebar, inline of als fly-in-box weer te geven:

ampz social share

Trouwens, als je de plugin-settings doorloopt zul je verrast zijn door de dashboard-achtige look en feel die je ziet in plaats van de standaard plugin-tabjes die je gewend bent. Het ziet er mooi uit, al had ik het ook niet erg gevonden als de klassieke Joomla weergave was aangehouden.

Ook erg leuk zijn de statistieken die Ampz aanbiedt in het dashboard. Je ziet zo snel welke pagina's veel geliked zijn, in welke aantallen en vanaf welke module positie:

ampz statistics

Het enige nadeel van de extensie is dat hij niet gratis is. Je kunt hem aanschaffen vanaf €27 tot €97 voor levenslange toegang. Downloaden kan hier.

Veel plezier met delen ;)

Over deze site

Joomlaseo.com is volledig gebouwd en geschreven door Simon Kloostra, SEO Specialist en Webdesigner uit Utrecht. Ik heb ook een boek geschreven en blogs voor bedrijven als OStraining, TemplateMonster, SEMrush en dergelijke.