Een snelle website houdt je bezoekers vast én zorgt voor een hogere positie in de zoekmachines.
Performance is belangrijk,
Ongeacht de context willen bezoekers zo snel mogelijk toegang hebben tot de informatie die ze zoeken. Ook websites die niet snel reageren op clicks of die niet lekker soepel scrollen zorgen ervoor dat bezoekers snel afhaken. Net als websitebezoekers houdt ook Google van snelheid. Zelfs zo veel dat het de positie van je website in de zoekresultaten beïnvloedt. Super belangrijk dus, dat de performance van je website op orde is. Maar hoe verbeteren we die performance?
Loadtime performance
Volgens gebruikersonderzoek van Jacob Nielsen is maximaal 1 seconde wachten acceptabel als het om de laadtijd van een website gaat. Een browser laadt de webpagina van boven naar beneden in. Renderen noemen we dit ook wel. Wat hij onderweg ook tegenkomt, hij probeert alles in te laden. Sommige grote of complexe elementen (zoals een Javascript of CSS bestand) kunnen voor vertraging zorgen. Deze bestanden heten dan ook toepasselijk ‘render blockers’. Daar moeten we dus slim mee omgaan.
Bijvoorbeeld door niet te grote afbeeldingen te gebruiken en door “visueel geweld” alleen te gebruiken als de context er zich voor leent. Laat complexe animaties op mobiele apparaten gewoon weg bijvoorbeeld. Ook al heeft Neelie Kroes flink gesleuteld aan de roamingkosten, zo’n animatie van 2MB zwaar kostte me daar in Sevilla al bijna een ‘café con leche’. Daarnaast kunnen we ervoor zorgen dat de meest belangrijke informatie als eerste wordt ingeladen. Het bovenste stuk van de pagina bijvoorbeeld.
Perceived performance
Naast een feitelijk snellere website kunnen we ook de gepercipieerde snelheid verbeteren. Een mooi voorbeeld is de toevoeging van bijvoorbeeld een laadbalk. Gebruikers zijn bereid tot drie keer langer te wachten op content als ze een visuele indicatie krijgen dat de site geladen wordt.
Hoe zorg je er verder voor dat de laadtijd korter lijkt?
- Door afbeeldingen pas te laden als alle tekst er al staat.
- Vóór het tonen van een mooie video op de achtergrond, laten we eerst een low-res afbeelding zien, die pas wordt vervangen als de browser tijd heeft om de video in te laden.
- In plaats van alle 40 blog-posts laten we alleen de eerste 10 zien, om de rest pas op te halen als de tijd rijp is. Dat doen we bijvoorbeeld ook op http://www.ezelsbruggetje.nl
Zo bouwen we de hele site stukje bij beetje op, waarbij de eerste focus ligt op de primaire behoefte van de bezoeker (in de meeste gevallen); de content. Ook al duurt dit meestal maar een fractie van een seconde, dit kan voor je bezoeker al het verschil maken tussen een positieve of een een minder positieve ervaring!
Runtime performance
Veel websites laden op zich prima en lekker snel, maar werken net niet lekker. Ze reageren bijvoorbeeld niet snel op clicks of scrollen schokkerig. Dit is de zogenaamde runtime performance. Als een gebruiker op je site is, wil deze niet worden opgehouden. Hij wil een natuurlijke user flow.
Hoewel browsers natuurlijk enorm slim en snel zijn, is de laatste stap van een browser nog steeds om een rijtje pixels op je scherm te tekenen. Met slimme technieken (en door slechte technieken te vermijden), zorgen we ervoor dat de browser zo min mogelijk elementen opnieuw hoeft te tekenen. Zo voelt je website dus lekker snel aan.
Hoe snel is jouw website?
Benieuwd of jouw website snel genoeg is? Met de Page Speed Insights tool van Google zie je direct hoe Google de laadtijd (op desktop en mobile) beoordeelt. Ook krijg je meteen wat tips ter verbetering te zien. Zit je met je score onder de 80? Dat kan beter! Wil je echt uitblinken? Dan is een score van boven de 90 jouw goal. Een beetje abracadabra allemaal? Snappen we. Wij helpen je graag verder!