Waarom elke (tiende)seconde telt
Zoekmachines weten dat elke (tiende)seconde telt. Sinds 2010 is de snelheid van je website een rankingfactor voor Google. Een snelle website verbeterd de gebruikerservaring. Daarom vinden zoekmachines het belangrijk dat snelle websites eerder zichtbaar zijn in de resultaten.
Een snelle website zorgt, doordat hij hoger in zoekmachine zoals Google rankt, voor meer bezoekers en heeft een directe invloed op het aantal aankopen dat via jouw website plaatsvindt.
Hoe snel moet mijn website zijn?
De aanbeveling van Google is om binnen 1 seconde content te laten zien op het scherm van de bezoeker. Na deze seconde verliezen gebruikers hun interesse en zijn ze eerder geneigd de pagina te verlaten.
Langzamere laadtijden op mobiel worden meer geaccepteerd dan trage websites op desktop. Dit komt doordat de page speed op mobiele apparaten aan veel meer factoren onderhevig is dan de stabiele Wifi- of dataverbinding op een desktop of laptop. Denk bijvoorbeeld aan factoren als 3G of 4K en het bereik.
Paginasnelheid meten
Wil je weten waar je jouw website op het gebied van snelheid kunt verbeteren? Doe een speed test!
Google PageSpeed Insights geeft je snel een uitgebreid overzicht waarmee je jouw website kunt verbeteren. Je website krijgt een score uitgedrukt in kleuren.
- Scoort je website tussen de 90-100, dan ben je goed bezig.
- Een score tussen 50 en 89 geeft aan dat er optimalisatiemogelijkheden zijn die je website sneller kunnen maken.
- Onder de 50 is het hoog tijd om aan de slag te gaan met het sneller maken van je website.
Aan de hand van een checklist ga je aan de slag.
Ben je meer technisch onderlegd, dan is GT metrix een goede optie. Deze gratis tool geeft je een uitgebreid overzicht met aanbevelingen voor onder andere afbeeldingen, JavaScript en browser caching. Ook geeft GT metrix uitgebreide statistieken over de laadtijd van de verschillende onderdelen van je website.
In 4 stappen naar een snelle website
We weten nu dat snelheid belangrijk is voor het vergroten van het websiteverkeer en daarmee ook de omzet. Met bovenstaande tools kun je de snelheid indexeren.
Hieronder zie je de score die een website van een van onze nieuwe klanten kreeg voordat we aan de slag gingen met de nieuwe website. De pagespeedscore ging meteen al flink omhoog toen we live gingen met de nieuwe website. Met behulp van GT metrix hebben wij vervolgens onderstaande stappen uitgevoerd om de snelheid nog meer te verbeteren.
Stap 1: Snelheid verbeteren begint met hosting
Als de reactietijd traag is, duurt het langer voordat de website geladen is. De reactietijd is de tijd tussen de aanvraag van de browser en de reactie van de server. Zorg voor een goede hostingprovider.
Wij zijn groot fan van Kinsta. Het is bijna een zekerheid dat je snellere pagina laadtijden krijgt als je jouw website host bij Kinsta. Daarnaast verbetert het ook de snelheid van je WordPress dashboard.
Kinsta maakt gebruik van Google Cloud Platform. Ook zijn er actieve en passieve maatregelen actief om aanvallen en kwaadwillende code te stoppen. Constante controle van uptime, DDoS aanvallen, malware scanners, SSL ondersteuning, hardwarematige firewalls. Kortom: jouw website wordt 24/7 gecontroleerd en beveiligd.
PHP 8
Onze websites werken met PHP, een populaire scripttaal. De laatste versie van PHP is momenteel PHP8. Deze versie is twee keer zo snel als de vorige versie van PHP. Needless to say: we raden je aan om je website met PHP8 te laten draaien. Binnen Kinsta is dit een simpele instelling.
Is je website ouder dan 3 jaar en is hij in die tijd niet meer bijgewerkt? Dan kun je de snelheid van je website hier al behoorlijk mee verbeteren.
Tip: Maak wel eerst een back-up voordat je de overstap naar PHP7 maakt. En zorg ook dat alle extra stukjes code op je website (plug-ins voor WordPress bijvoorbeeld), compatibel zijn met PHP7. Oudere stukjes code kunnen wel eens problemen veroorzaken.
Vind je dit allemaal toch wat te uitdagend? Contacteer ons dan voor meer informatie en/of hulp.
HTTP/2
HTTP staat voor “HyperText Transfer Protocol”. Het is de taal die servers en browsers gebruiken om met elkaar te communiceren. HTTP/2 is de nieuwste variant van het HTTP-protocol. Dit nieuwe protocol zorgt ervoor dat data op een snellere, slimmere en efficiëntere manier via het internet wordt overgebracht.
Websites die HTTP2 hanteren draaien dus veel sneller en efficiënter dan websites die het vorige protocol gebruiken (HTTP 1.1). Bovendien is HTTP/2 ook veiliger, mobielvriendelijker en moeilijker te hacken.
Score na stap 1
Na de lancering van de nieuwe website en deze eerste stappen hadden we al een flinke verbetering in de GT metrix score! De laadtijd is met bijna een 1 seconde verbeterd. Je ziet ook dat de grootte van de website fors minder is geworden. Dit was hiervoor nog 4,23 MB.
Stap 2: Voeg bestanden samen en maak gebruik van compressie
Het ontwerp en functionaliteit van een website worden bepaald door CSS-bestanden (ontwerp) en JavaScript-bestanden (functionaliteit). Deze bestanden bestaan vaak uit een groot aantal regels met code en commentaar. Door bestanden te comprimeren neemt het aantal regels en de grootte van de bestanden sterk af. De bestanden worden daardoor sneller geladen door de browser.
Score na stap 2
Na het comprimeren van de CSS- en JavaScript-bestanden wonnen we 0,2 seconden. Die lijkt niks, maar alles kleine beetjes helpen!
Stap 3: Optimaliseer afbeeldingen, gebruik een CDN en LazyLoad
Of je nou een blog hebt, een webwinkel of een andere website die er geweldig uit moet zien: het is altijd de moeite waard om de tijd te nemen om elke afbeelding die je uploadt te optimaliseren.
Veel websites bestaan uit één klein stukje code en heel veel afbeeldingen. Al deze gegevens moeten door de bezoeker ingeladen worden. Hoe groter het aantal en de omvang, hoe langer de laadtijd. Iedere KB in laadtijd telt!
De grootte van een afbeelding wordt vooral bepaald door: het bestandsformaat, compressieniveau en afbeeldingsafmetingen. Om een afbeelding zo goed en compact mogelijk op te slaan, besteed je aandacht aan alle vier de elementen.
1. JPEG of PNG
De twee bestandsformaten die je het vaakst tegenkomt zijn JPEG (of JPG) en PNG. Beide hebben hun voor- en nadelen, maar in de meeste gevallen kun je dit als richtlijn nemen:
- Foto’s moeten worden opgeslagen en geüpload als JPEG’s.
Dit bestandstype kan alle kleuren in een foto verpakken in een relatief kleine en efficiënte bestandsgrootte. Als je JPEG’s gebruikt zijn je bestanden minder groot dan wanneer je foto’s opslaat als PNG’s. - Graphics, vooral die met grote, platte kleurvlakken, moeten worden opgeslagen als PNG’s.
Dit geldt voor de meeste designs, infographics, afbeeldingen met veel tekst en logo’s. De kwaliteit van een PNG is beter dan die van een JPEG, maar het bestand is meestal ook groter. PNG’s zorgen voor mooie heldere lijnen in kleurvlakken en tekst, zodat je zonder kwaliteitsverlies kunt inzoomen. PNG’s ondersteunen ook transparante achtergronden.
2. Compressie
Zowel JPG, PNG als GIF kennen een vorm van compressie. Dit betekent dat door middel van een algoritme de opgeslagen gegevens verkleind worden. Hoe hoger de compressie des te kleiner het bestand en des te minder de beeldkwaliteit. Het kwaliteitsverlies van JPG valt niet veel op bij foto’s, maar wel bij bijvoorbeeld grafieken, lijnen of letters.
Het is dus mogelijk bestandsgroottes aanzienlijk te verkleinen, zonder kwaliteit van de afbeelding te verliezen. Zelfs het menselijk oog valt het niet op!
3. Afmetingen
De meeste originele afbeeldingen hebben niet de juiste afmetingen voor een website. Vaak zijn ze te groot of hebben ze rondom teveel witruimte. Hoe groter je afbeelding, hoe meer ruimte hij in beslag neemt. Zorg er dus altijd voor dat je afbeelding niet onnodig groot is.
Extra tip: Kies de juiste naam voor je afbeeldingen
De meeste mensen denken niet veel na over de namen van hun bestanden. Ze noemen een foto “Foto1.jpg” of “Screen Shot 2019-26-06 om 15.41.15”. Als dat je bekend voorkomt, neem dan even de tijd om je afbeeldingen een andere bestandsnaam te geven voordat je ze uploadt naar je website. Waarom? We geven je drie goede redenen.
- Het is heel goed voor je SEO. Zie het zo: wanneer Google je website scant, kan het je tekst lezen, maar kan het niet zien wat er op je foto’s staat. Google haalt informatie over de afbeelding uit de bestandsnaam, zodat de afbeelding goed geïndexeerd kan worden. Een bestandsnaam als telefoon.jpg zegt daarom meer dan DSC12345.jpg.
- De bestandsnaam wordt ook onderdeel van de URL van de afbeelding, dus als je je afbeeldingen een duidelijke Nederlandse naam meegeeft, wordt de navigatie van je URL’s eenvoudiger en zijn ze makkelijker te interpreteren.
- Zodra je een afbeelding naar je website uploadt is de bestandsnaam openbaar. Zorg dus dat je je bestanden geen gênante of geheime naam meegeeft. 😉 Daarnaast gebruiken websitebezoekers met een zichtbeperking vaak de optie ‘voorlezen’. Ook afbeeldingen worden hierin meegenomen.
Gebruik voor consistentie kleine letters en de nummers 0-9. Vermijd liever spaties en interpunctie. Het is ook beter een liggend streepje te gebruiken en geen underscore.
Maak gebruik van een CDN
Wanneer je een website bezoekt, dan wordt de content van die website (afbeeldingen, tekst, enz.) gedownload van een server. Hoe groter de afstand is tussen die server en je computer, hoe langer het duurt om de website te laden. Een CDN of Content Delivery Network verhelpt dit probleem. Het is een netwerk van servers die geografisch verspreid zijn in verschillende datacenters overal ter wereld.
Als je een website bezoekt die gebruikmaakt van een Content Delivery Network, dan wordt je website geladen via de dichtstbijzijnde server(s). Zo kan je snel en zonder vertraging content binnenhalen en kan je website overal snel laden. Een CDN is met name interessant als je een internationale website runt, maar ook als je website door een bedrijf wordt gehost met servers in het buitenland. Wanneer de website is ondergebracht bij Kinsta kun je met één klik gratis gebruik maken van het Kinsta CDN.
Lazyload
Lazyload is een optimalisatietechniek die zichtbare content boven de vouw laadt, maar het downloaden en renderen van de content die daaronder komt, vertraagt. Deze techniek wordt zeer op prijs gesteld door Google en is iets dat je zeker zou moeten overwegen als je veel video’s en afbeeldingen met een hoge resolutie hebt binnen een pagina. Het downloaden en weergeven van video’s die verderop de pagina komen wordt vertraagd totdat een sitebezoeker naar beneden scrolt en aanvullende content in beeld komt.
Het eindresultaat is dat afbeeldingen en video’s pas worden gedownload wanneer ze daadwerkelijk nodig zijn. Voor sites met veel afbeeldingen en video’s kan dit de prestaties aanzienlijk verbeteren.
Score na stap 3
Het comprimeren van bestanden zorgen voor bijna een seconde winst in laadtijd. De laadtijd is na 3 stappen al met 2 seconden verbeterd.
Stap 4: Maak gebruik van caching
Web caching kan secondes van de laadtijd van een website halen, wat zorgt voor een nog hoger rendement.. Web caching is het (tijdelijk) opslaan van pagina’s die worden opgevraagd. Dit kan client- of server-side zijn. Als hetzelfde bestand nog een keer wordt opgevraagd, wordt het sneller geladen.
WordPress pagina’s worden opgebouwd uit een database. Als een gebruiker een pagina bezoekt, worden in de database de bijbehorende content en gegevens opgevraagd en weergegeven. Maar deze communicatie met de database is een stap die extra tijd kost ten opzichte van een pagina direct laden. Daarom is het slim om caching te gebruiken. De dynamisch opgebouwde pagina’s worden compleet opgeslagen op de server en deze bestanden worden opgehaald als een bezoeker de site bekijkt. Zo heeft de server veel minder tijd nodig om de pagina aan de bezoeker te tonen.
Op diverse momenten wordt de cache bijgewerkt, bijvoorbeeld als een pagina wordt bewerkt, er een aanpassing wordt gedaan in het thema, of wanneer er een update wordt uitgevoerd. Ook moeten sommige delen van een pagina altijd dynamisch worden opgebouwd, bijvoorbeeld een nieuws-pagina die vaak wordt ge-update. Zo blijft altijd de meest actuele versie van de pagina in de cache.
Score na stap 4
Deze laatste stap zorgt voor een verbeterde laadtijd van 1,3 seconden! Als we dit nog even vergelijken met onze beginscore zie je dat we van een laadtijd van bijna 5 seconden naar een laadtijd van slechts 1,5 seconden zijn gegaan. Zoals eerder aangegeven wil Google dat er al na 1 seconde content te zien is op de site. Dankzij LazyLoad is het niet erg dat we daar nog 0,5 seconden boven zitten.
De totale grootte van de website is flink geslonken door het bouwen van een nieuwe website en het uitvoeren van bovenstaande stappen. GT metrix geeft deze website nu een dikke A.
Eindscore
Beginscore
Dus…
Het is belangrijk om de snelheid van je pagina te verbeteren om te voorkomen dat je websitebezoekers afhaken en je daardoor omzet misloopt. Een snelle website zorgt voor een betere user experience en geeft je een hogere positie in zoekmachines.
Google PageSpeed Insights geeft aan de hand van een checklist aan op welke punten jouw website verbeterd kan worden. Heb je meer technische kennis over dit onderwerp dan is GT metrix een goede optie. Aan de hand van 4 stappen verbeter je vervolgens de snelheid van je website.
Stap 1: Kies de juiste hostingpartij. Wij adviseren Kinsta.
Stap 2: Voeg bestanden samen en maak gebruik van compressie.
Stap 3: Optimaliseer afbeeldingen, gebruik CDN en LazyLoad.
Stap 4: Maak gebruik van caching.
