Het wordt regelmatig aan ons gevraagd: is de LayerSlider WP ($ 18) of Revolution Slider ($ 19) onze favoriete WordPress slider plugin? En het antwoord was altijd lastig, omdat de twee concurrenten elkaar voortdurend de loef afsteken. Daardoor is soms de ene plugin beter, en na een update de andere weer. Het leek dus altijd niet veel uit te maken welke van de twee plugins je kiest, want ze bedwingen gezamenlijk echt de absolute top. Onze verbazing was dan ook groot toen een maand geleden plots de Master Slider WP ($ 28) werd gelanceerd. Deze nieuwe slider plugin is in onze ogen een beduchte concurrent van de LayerSlider en Revolution Slider. Gaat de Master Slider zorgen voor een verschuiving in de top?
Omdat sliders vaak het meest belangrijke toegangspunt van je website innemen, is het heel belangrijk dat je deze ruimte voor zowel je bezoekers als voor zoekmachines optimaal inricht. In dit artikel vergelijken we daarom de drie beste premium WordPress sliders op gebruiksvriendelijkheid en ‘geavanceerdheid’, maar ook op zoekmachine-optimalisatie, responsiveness, browser compatibiliteit en performance.
Achtergrond: Over slideshows en zoekmachine-optimalisatie (SEO) in websites
Animatie heeft sinds de opkomst van de eerste grote websites al een rol gespeeld. Het begon ooit met lichtkranten, waarbij je een tekstregel van rechts naar links door het beeld kon laten bewegen. Niet veel later werd de animated GIF-afbeelding populair en binnen enkele jaren begon het programma ‘Flash’ van softwareleverancier Macromedia (later overgenomen door Adobe) aan populariteit te winnen. Velen zullen zich de websites met geanimeerde Flash-intro’s herinneren, die je soms zelfs móest kijken voordat je de website verder kon bekijken.Het is nog maar een paar jaar geleden dat een keuze van de fabrikant Apple zorgde voor een kentering: Flash werd niet ondersteund op de iPads. Hoewel de tablets toen nog relatief weinig gebruikt werden, konden webontwikkelaars er al snel niet meer omheen dat websites ook goed moeten werken op dergelijke mobiele apparaten. Flash bond dan ook in aan populariteit, en animaties leken zich even te beperken tot uitklappende submenu’s. Maar animatie is niet verdwenen. In de jaren die volgden zijn vele creatieve oplossingen verschenen, die ervoor gezorgd hebben dat animatie niet alleen is doorontwikkeld, maar ook steeds beter is geïntegreerd in websites. Zo zijn animaties tegenwoordig responsive te maken, maar nog belangrijker; ze zijn doorzoekbaar voor zoekmachines.
Een belangrijke element in websites dat tegenwoordig vaak geanimeerd is, is de ruimte op een homepage onder het hoofdmenu en boven de fold. Deze ruimte wordt meestal gebruikt om de bezoeker in enkele woorden duidelijk te maken waar je website over gaat, of wat jou uniek en relevant maakt voor je bezoeker. Door dit beknopt te verwoorden blijft er veel ruimte voor een visuele impressie, want een afbeelding zegt vaak meer dan duizend woorden. Met behulp van een slider kan het geheel aantrekkelijk in beeld gebracht worden. Vaak heb je dan zelfs genoeg aan één slide, maar in sommige gevallen kunnen extra slides waarde toevoegen. In dat geval is het van belang om te onthouden dat zoekmachines er vanuit gaan dat 99% van je bezoekers alleen de eerste slide ziet. Plaats belangrijke content daarom nooit op achterliggende slides.
LayerSlider WP
LayerSlider WP bestaat sinds begin 2012 en is daarmee de oudste van de drie sliders. Dit heeft als voordeel dat de slider ook werkt in oudere browsers zoals Internet Explorer 7. Omdat de plugin sindsdien goed is doorontwikkeld, zijn onverwachte bugs die je soms in nieuwe plugins tegenkomt, verdwenen. De hoge leeftijd maakt het echter wel aannemelijk dat de plugin de meest trage is van de drie; het installatie-bestand van de LayerSlider is namelijk ruim twee keer zo groot in omvang als die van de Slider Revolution en de Master Slider.
[layerslider id=”7″]
Uit onze tests blijkt echter dat dit geen negatief effect heeft op de laadsnelheid van de slider in je website. Sterker nog; de LayerSlider wordt het meest compact verstuurd naar je browser. De plugin zou de performance echter nog verder kunnen verbeteren door goed aan te geven welke bestanden door de browser gecached mogen worden en welke niet. Dat is namelijk weer goed voor de zoekmachine-optimalisate.
Qua functionaliteiten bevat LayerSlider WP alle nieuwste en geavanceerde mogelijkheden. Er zijn heel veel transities mogelijk en elke ‘laag’ (layer) van een slide is los te animeren. Als uitblinker meldt de plugin ontwikkelaar dat je lagen los van elkaar kan laten bewegen met een muisbeweging, zoals je ook in bovenstaand voorbeeld kunt zien (in de tweede slide). We zullen echter zien dat de andere sliders deze functionaliteit ook hebben. Verder schaalt de slider goed mee op verschillende schermen (responsive), al blijft het met goed gevulde slides op kleinere schermen soms wel proppen. Ga er dus niet zonder meer vanuit dat alles leesbaar blijft.
- Overzichtelijk, maar wel uitgebreid
- Geen onderscheidende functies
- Caching en code kan beter
- Elementen schalen mee
- Internet Explorer 7 en hoger
- Zeer compact
Voor zoekmachines scoort de LayerSlider redelijk goed. De code van de slider is zo opgebouwd dat teksten in de slider in elk geval goed door de zoekmachines geïndexeerd kunnen worden. Daarbij is het wel van belang dat je zelf aangeeft welke teksten belangrijker zijn en welke minder belangrijk. De slider maakt echter helaas niet goed aan de zoekmachines duidelijk dat de eerste slide belangrijker is dan de tweede. Dit zou eigenlijk wel moeten, omdat de eerste slide door de meeste bezoekers gezien zal worden.
Op het gebied van gebruiksvriendelijkheid scoort de slider goed. In het overzicht van al je slideshows zie je direct een kleine voorbeeldafbeelding. Wanneer je een slideshow gaat bewerken, zijn de verschillende slides gemakkelijk met tabs op te roepen. Elke slide bestaat weer uit meerdere layers, die los van elkaar in te stellen zijn. Deze instellingen vind je onder de slide. Bovendien kan je alle layers in je slide met de muis verslepen, dat werkt erg gemakkelijk. Door de uitgebreide interface per layer mis je soms echter wel even het overzicht.
Revolution Slider
De Revolution Slider verscheen een klein half jaar later dan LayerSlider WP. In deze periode lieten veel ontwikkelaars de ondersteuning voor Internet Explorer 7 vallen, en zo ook de ontwikkelaars van de Revolution Slider. Hierdoor doet de Revolution Slider het wellicht niet goed in zeer oude browsers, maar vanaf Internet Explorer 8 worden alle browser toch ondersteund.
De performance van de Revolution Slider is technisch dik in orde. Hoewel deze slider de grootste laadtijd heeft, levert de slider bijna alle bestanden wel als beste met de juiste instructies aan de browser. Zo weet je webbrowser welke bestanden in de cache bewaard kunnen worden, en dat is goed voor de zoekmachines.
Ook deze slider bevat bijna alle geavanceerde opties die je kan bedenken. Er zijn stijlvolle parallax-effecten mogelijk, die net als de LayerSlider WP ook op de muiscursor reageren. Daarnaast – en dat is uniek – reageren de slides ook op het scrollen door de pagina. Dat schept aantrekkelijke mogelijkheden. Opvallend genoeg geeft de ontwikkelaar aan deze functie eigenlijk weinig ruchtbaarheid. Een andere leuke uitblinker is dat je layers kan linken naar andere slides. Zo kun je bijvoorbeeld geanimeerde navigatie maken. Verder is de Revolution Slider responsive, net als de LayerSlider WP.
De interface van de Revolution Slider doet wel minder overzichtelijker aan dan de LayerSlider. Zo krijg je bijvoorbeeld niet direct een voorbeeld te zien bij het overzicht van al je slideshows. Wanneer je een slideshow geopend hebt, krijg je wel weer voorbeelden te zien van al je slides.
- Onwennig en onoverzichtelijk
- Parallax en linken naar slides
- Hiërarchisch opgebouwde code
- Elementen schalen mee
- Internet Explorer 8 en hoger
- Goede performance en caching
Het bewerken van een individuele slide voelt echter erg onwennig aan. Bij elke slide krijg je namelijk eerst een groot veld met ‘General slide settings’ te zien, waardoor je naar beneden moet scrollen om te zien hoe je slide er uit komt te zien. Dit is soms erg onhandig, omdat de vormgeving van je slide toch je uitgangspunt is. Ook de layers zitten in de Revolution Slider wat meer verstopt dan bij de LayerSlider WP. Verder kun je, net als bij LayerSlider WP, elke laag met je muis verslepen. Zo kun je snel animaties opbouwen.
Op het gebied van zoekmachine-optimalisatie scoort de Revolution Slider erg goed. De verschillende slides en layers hebben in de code een heldere en duidelijke hiërarchie meegekregen. Teksten kunnen op deze manier uitstekend geïnterpreteerd worden door de zoekmachines.
Master Slider WP
De Master Slider WP zag het levenslicht in april 2014 en bracht bij ons een kleine schok teweeg. Niet alleen zag de Master Slider er op het eerste gezicht namelijk ontzettend gebruiksvriendelijk uit, de plugin is ook nog eens zeer compleet. De ontwikkelaar heeft zich duidelijk heel goed voorbereid voordat deze plugin is uitgebracht. De gebruikerservaring van de Master Slider WP doet ook solide aan; er vinden geen onverwachte fouten plaats, iets wat je wel vaak ziet bij jonge software. Des te meer reden om deze WordPress slider dus eens goed onder de loep te nemen.
Hoewel de plugin nieuw is, is er ondersteuning ingebouwd voor browsers vanaf Internet Explorer 8. Dit zorgt ervoor dat de slider dus ook in oudere browsers prima werkt. Qua performance scoort de Master Slider ook erg goed. Hoewel de plugin iets groter is dan de Revolution Slider en de LayerSlider WP, worden de bestanden wel beter afgehandeld dan bij de andere plugins. Dit zorgt voor de snelste laadtijd ten opzichte van de andere WordPress sliders. Ook de caching is goed in orde, op hetzelfde niveau als de Revolution Slider.
De interface is erg gebruiksvriendelijk en het snelste te begrijpen van de drie sliders. Layers kun je los van elkaar verplaatsen, maar je kan ze ook door middel van ‘snapping’ op logische plekken laten uitlijnen. Erg handig wanneer je bijvoorbeeld drie teksten snel op dezelfde hoogte wilt plaatsen. Alle layers vind je – net als in de andere sliders – netjes onder elkaar, maar in de Master Slider vormen deze lagen tegelijk een tijdlijn. Met de muis kun je eenvoudig door de tijdlijn slepen, zodat je snel kan zien hoe je animatie tot nu toe is opgebouwd.
- Intuïtieve en begrijpelijke interface
- Koppeling met WooCommerce
- Hiërarchie kan beter
- Elementen schalen mee
- Internet Explorer 8 en hoger
- Snelste laadtijd en goede caching
Daarnaast kun je de tijdlijn ook per laag verslepen, zodat je heel snel kan afstemmen welke laag op welk moment moet verschijnen en verdwijnen. Met de andere sliders is dit alleen met de hand in te stellen, door het aantal secondes in te vullen. Dit maakt het erg gemakkelijk om lagen los van elkaar nauwkeurig te animeren.
Daarmee is de Master Slider zonder meer ook de meest geavanceerde van de drie sliders. Naast bovengenoemde functies wordt verder ook ondersteuning voor WooCommerce producten geleverd. Zo kun je heel snel productsliders opbouwen in je WordPress webshop, zonder veel knip- en plakwerk.
Op het gebied van zoekmachine-optimalisatie scoort de Master Slider ook goed. Net als bij de Revolution Slider is de code goed doorzoekbaar voor zoekmachines. De hiërarchie is echter minder duidelijk, net als bij de LayerSlider WP. Hierdoor wordt bijvoorbeeld niet aan zoekmachines duidelijk gemaakt dat de eerste slide belangrijker is dan de laatste. Verder is de slider responsive, met dezelfde beperkingen als de andere sliders.
Conclusie
De drie vergeleken Wordpress sliders bevinden zich technisch in een nek-aan-nek race. De besproken verschillen op het gebied van snelheid, zoekmachine-optimalisatie en browsercompatibiliteit zijn miniem. De slechtste en de beste sliders verschillen vaak maar één procent in score, alleen de performance van de LayerSlider valt ruim 10% lager uit. Ook qua functionaliteiten en geavanceerdheid liggen de verschillende plugins dicht bij elkaar in de buurt. Elke slider heeft wel weer iets unieks, maar dergelijke functionaliteiten zouden alleen de doorslag kunnen geven wanneer je echt specifiek naar die functionaliteit op zoek bent.
Wanneer we alle voor- en nadelen bij elkaar optellen komen we tot de conclusie dat de LayerSlider WP eigenlijk vooral interessant is wanneer je ook in zeer oude browsers ondersteuning nodig hebt. Ben je technisch en is vooral SEO voor je van belang? Dan is de Revolution Slider de beste keuze. Ben je van plan om veelvuldig sliders te maken of is gebruiksgemak vooral belangrijk? Dan is Master Slider WP de beste keuze. Wegen we alle aspecten af als even belangrijk, dan komen we tot de volgende Top 3 WordPress Sliders:
[av_one_third first]
9,0
Master Slider WP
[/av_one_third][av_one_third]
[/av_one_third][av_one_third]
8,0
LayerSlider WP
[/av_one_third]
Ik gebruik zelf het liefst de Revolution Slider, deze heb ik op verschillende sites gebruikt. Hij werkt eenvoudig, is uitgebreid en gebruiksvriendelijk. Ik ben helemaal fan van deze slider.
Voor diverse site heb ik de Avada Theme gebruikt, als je dit thema aanschaft krijg je er divers sliders bij. waaronder revolution, flex slider en elastic slider.
Ik heb ook diverse andere plugin sliders gebruikt maar koos uiteindelijk voor de Revolution slider. Hij werkt altijd! vloeiend, uitgebreide mogelijkheden, per layer mogelijkheid om formaten, linken etc aan te passen. Te maken in ieder gewenst formaat, handige duplicator en import/export functie.
Bedankt voor de vergelijking. Erg overzichtelijk zo, en alle aspecten lijkt het te dekken. Ikzelf gebruik master slider (gratis versie) nu een aantal maanden op een site en toen ik een slider nodig had sprong die eruit omdat hij niet alleen meteen goed werkte (zowel voor social media als sliders was dat een probleem, dat veel ervan niet goed leek te werken) maar ook zo duidelijk was in het interface. Afgezien van de laatste update, waarna de slider niet meer werkte en die ik moest terugdraaien, heb ik eigenlijk nooit problemen gehad. in elk geval van een gebruikersstandpunt af gezien dus een hele fijne en degelijk werkende slider, en gemakkelijk te leren voor degenen die niet zo technisch zijn. 🙂
Ik ben nu op zoek naar info over de performance van sliders, omdat de pagina-laadtijd van de site veel hoger is dan ik graag zou zien. Ikzelf ben niet genoeg ingewijd in alle techniek om dat zelf voldoende goed te kunnen beoordelen, dus ik zoek vergelijkingen als deze (met dank). Inmiddels wat pagina’s gelezen constateer ik dit de eerste vergelijking is waar ik ook master slider in zie (klopt ook wel als hij pas in 2014 uitkwam), maar wat ik vervolgens op die andere pagina’s vaak zie als winnaar is dan de slider van Soliloquy. Deze slider lijkt zowel functioneel vrij rijk te zijn als erg snel. Hij is ook slim genoeg om de eerste slide eerst in te lezen en dan de rest later zodat de bezoeker niet hoeft te wachten.
Een mooi voorbeeld, ofschoon van 2013, is de pagina van Chris Lema (gevonden op het zoekwoord “Slider Performance”) die 6 sliders vergelijkt (Soliloquy, Royal Slider, LayerSlider, Slider PRO, Slider Revolution en Slide Deck 2), en concrete uitkomsten toont, waaronder de laadtijden. De uitkomsten laten daarbij zien dat zowel Soliloquy (436 ms) als SliderPro (534 ms) met stip bovenaan staan (stonden?) in dat aspect. Layer Slider deed er twee keer zo lang over (1.12 s) en Royal Slider vier tot vijf keer zo lang (2.4 s) en Revolution Slider stond met stip genoteerd als de traagste met een meer dan 10 keer zo lange laadtijd (4.95 s). Voor de volledigheid SliderDeck 2 deed er bijna 10 keer langer over met een laadtijd van 4.14 s.
Dat betekent dat twee van de drie door jou beoordeelde sliders in die test er veel langer over deden om te laden, en dat er twee sliders zijn die substantieel beter scoorden daarop. Mijn vragen zijn nu:
“Waarom komen deze twee helemaal niet voor in dit lijstje?” en
“Hoe vergelijken Soliloquy Slider en Slider Pro in de huidige versies met de sliders in de test hierboven?”
Het lijkt ook een dillemma om Sliders überhaupt te gebruiken, omdat ze enerzijds de site veel aantrekkelijker kunnen maken voor de gebruikers, maar omdat de laadtijden, helemaal op mobiele netwerken flink kunnen oplopen en dat weer ten koste gaat van de gebruikerservaring. Ik vind zelf parallax en al dat soort zaken erg fraai, zeker met mate gebruikt, maar is het überhaupt het waard in een site die een doel probeert te bereiken (nieuwsbriefaanmeldingen, verkoop, of iets anders)?
Door de beperkte scope van de bovenstaande vergelijking, blijf ik dus met vragen zitten. Ik ben wel blij met het bovenstaande omdat het in elk geval bevestigt dat Master Slider ook door meer deskundige beoordelaars goed uit de verf komt, al weet ik nog niet of het de beste zal blijken als ik de andere meeweeg. Bedankt daarvoor. En compliment met de helderheid van het artikel en jullie mooie site.
Beste Hans,
Bedankt voor je reactie. We hebben ons bij het schrijven van dit artikel beperkt tot de zogenaamde geavanceerde layersliders, waarbij je elke slide in meerdere lagen met drag-and-drop in een grafische interface kunt opmaken en animeren. Qua performance zijn dit zeker niet de allersnelste sliders, maar je kan er dan ook veel meer mee dan met eenvoudigere slider plugins. Voor het animeren van meerdere lagen, tekst en grafische afbeeldingen binnen één slide hebben we dus een top 3 samengesteld, maar voor een eenvoudige fotoslideshow zijn geavanceerde sliders inderdaad wel topzwaar.