07 jul 10 tips om jouw website sneller te maken
Auteur: Erwan Vrignaud
Leestijd: 17 minuten
Iedereen weet het tegenwoordig wel, maar in de praktijk blijkt maar al te vaak dat veel websites vandaag de dag nog steeds veel te traag zijn, vooral de mobiele versies. Sinds 2018 hanteert Google het Mobile First concept hanteert, wat wil zeggen dat de algehele prestaties van je mobiele website zwaarder wegen dan die van de desktop versie. Paginasnelheid is dus een kritische factor in digitale marketing van vandaag. Het heeft een aanzienlijke impact op:
• Hoelang bezoekers op jouw site blijven
• Hoeveel conversies er worden verricht
• De ranking factor in zoekmachines
• De positionering in de organische zoekresultaten
Er is een bijna oneindig aantal zaken waar je jouw dagen mee kunt vullen als digitale marketeers en er is nooit genoeg tijd om ze allemaal te doen. Met als resultaat dat sommige zaken op een laag pitje worden gezet. Maar de snelheid van je website moet in je top 3 staan, ook al is dat wellicht niet het spannendste om te doen. Volgens een onderzoek van Amazon is er een verschil van 100ms, een tijdseenheid die een mens niet eens kan waarnemen, genoeg om hun omzet met 1% te verminderen. Walmart vond vergelijkbare resultaten. Als die kleine tijdseenheid zoveel directe impact heeft op de verkoop, wat soort impact denk je dat een extra seconde of meer zal hebben? Daarom geef ik je 10 tips die helpen jouw website sneller te maken:
1. Vergeet goedkope webhosting
Uiteraard wil je geld besparen daar waar het kan. Maar geld besparen op hosting is zelden een goed idee want het resultaat is bijna altijd een trage website. Wat zij doen om dit goedkoop aan te bieden is zoveel mogelijk websites op één server te proppen waardoor de server continue tegen zijn grenzen aan loopt. Je kunt het vergelijken met een auto, stop je deze helemaal vol met passagiers en bagage, dan zal hij heel wat minder vlot accelereren dan wanneer er alleen een bestuurder in zit. Zo werkt het met servers precies zo. Jouw website zal wel keurig vertoond worden (de auto zal altijd rijden), maar jouw website wordt zo traag geladen dat de kans op afhakers groot is. En Google weet dat dus en zal jouw website zeker niet aanbevelen (hoog in hun posities plaatsen).
Een vaak gehoord argument is dan ook: ‘Je merkt er amper iets van!’. En dat is een foute aanname. Jij vindt het misschien niet zo erg, maar bezoekers raken tegenwoordig gewend aan webpagina’s die meteen laden, in een fractie van een seconde. En wanneer ze dan op jouw website iedere keer secondes moeten wachten zijn ze simpelweg vertrokken. En jouw websites is jouw trots dus ben je veel flexibeler dan een buitenstaander. Deze zal zich in eerste instantie ergeren aan de traagheid. Resultaat is echt altijd hetzelfde, ze gaan weg voordat ze een conversie hebben verricht. Vergeet dus goedkope hosting, het valt onder de Engelse uitdrukking: ‘Penny wise, pound foolish’, dat wat je denkt te besparen zal je een veelvoud aan omzet kosten.
2. Beperk HTTP-oproepen
Elk bestand dat nodig is om een webpagina weer te geven en te laten functioneren, zoals HTML, CSS, JavaScript, afbeeldingen en lettertypen, vereisen een apart HTTP verzoek. Hoe meer verzoeken er worden gedaan, hoe langzamer die pagina wordt geladen. Zelfs in de Google Page Speed test tool waarschuwt Google voor ‘Beperk niet-gebruikte css’ met daarachter de tijd die daarmee bespaard kan worden. Vaak meer dan 1 seconde. Een webdeveloper kan dit opzoeken in de broncode en deze verwijderen. Het werkt in grote lijnen als volgt: de meeste thema’s laden een of meer CSS-bestanden en JavaScript-bestanden. Sommige, zoals Jquery of FontAwesome, worden meestal op afstand geladen van een andere server, wat de laadtijd drastisch verhoogt.
Dit wordt nog problematischer als je kijkt naar de extra CSS- en JavaScript bestanden die zijn toegevoegd door plug-ins. Verwijder dus plug-ins die je niet gebruikt, daarmee bespaar je al flink in HTTP-verzoeken van slapende CSS en JavaScript-bestanden. Wanneer je je al realiseert dat elke afbeeldingen op een pagina om een apart HTTP-verzoek vraagt dan begrijp je al dat ook onnodige (kleine) afbeeldingen moeten worden geëlimineerd.
Voeg JavaScript- en CSS bestanden samen tot één bestand. Verminder of elimineer plug-ins die hun eigen JavaScript en /of CSS-bestanden laden. In sommige gevallen, zoals bij Gravity Forms, heb je de optie om deze uit te schakelen wanneer ze worden geladen. Gebruik CSS-sprite voor veelgebruikte afbeeldingen. Gebruik een lettertype zoals FontAwesome of Ionic Icons in plaats van meerdere verschillende lettertypes of losse afbeeldingen zodat er maar één bestand geladen hoeft te worden.
3. Neem de Trailing Slash op
Het weglaten van de achterste schuine streep op links (van externe websites) die naar jouw website verwijzen, hebben een negatieve invloed op de snelheid. Wanneer iemand een URL bezoekt zonder de schuine streep, zal de webserver zoeken naar een bestand met die naam. Als er geen bestand met die naam wordt gevonden zal deze worden behandeld als een map met daarin het standaardbestand. Met andere woorden; door de achterste schuine streep weg te laten, dwing je de server om een onnodige 301-omleiding uit te voeren. Vertragingen van milliseconden zullen jou niet opvallen, maar voor zoekmachines is elke milliseconde er een teveel.
Voorbeelden wanneer dit fout is ingesteld:
https://www.mediaexpert.nu
https://www.mediaexpert.nu/over-mij
Voorbeelden wanneer dit goed is ingesteld:
https://www.mediaexpert.nu/
https://www.mediaexpert.nu/over-mij/
4. Compressie inschakelen
Het inschakelen van GZIP-compressie kan de tijd die nodig is om jouw HTML-, CSS- of JavaScript-bestanden te downloaden aanzienlijk verkorten. Dit komt doordat ze worden gedownload als veel kleinere, gecomprimeerde bestanden, die vervolgens gedecomprimeerd zodra ze in de browser komen. Jouw bezoekers hoeven niets extra’s te doen omdat alle moderne browsers GZIP ondersteunen en automatisch verwerken.
Het comprimeren van html script kan met behulp van gratis tools
5. Browsercaching inschakelen
Wanneer browsercaching is ingeschakeld, zijn de elementen van een webpagina opgeslagen in de browser van jouw bezoekers. Hiermee kan hun browser, de volgende keer dat ze jouw website bezoeken, de pagina laden zonder dat je nog een HTTP-verzoek naar de server hoeft te sturen. Zodra de eerste pagina is geladen en de elementen zijn opgeslagen in de cache van de gebruiker, hoeven alleen de nieuwe elementen te worden gedownload op volgende pagina’s. Dit kan het totaal aantal bestanden die moeten worden gedownload tijdens een gemiddelde browsersessie drastisch verminderen.
6. Verklein CSS- en JavaScript-bestanden
Het verkleinen van jouw CSS- en JavaScript-bestanden verwijdert onnodige witruimte en opmerkingen en hiermee wordt de tijd die het kost om deze te downloaden bespaart. Gelukkig hoeft dit niet handmatig te worden uitgevoerd, want er zijn verschillende tools online beschikbaar om een bestand om te zetten in een gecomprimeerde versie van datzelfde bestand. Er zijn ook verschillende plug-ins beschikbaar voor WordPress die de CSS- en JavaScript links in jouw websiteheader vervangen door bestanden met een gecomprimeerde versie ervan. De uitvoering van de originele bestanden blijven ongewijzigd, inclusief populaire caching-plug-ins zoals:
W3 Totaal Cache
WP Super Cache
WP Rocket
Het kan wat moeite kosten om de instellingen precies goed te krijgen, omdat het comprimeren soms CSS en JavaScript-bestanden ongeldig maken, dus als je denkt helemaal klaar te zijn is uitvoerig testen een must.
7. Geef prioriteit aan content boven de vouw
Jouw website kan voor de bezoeker sneller worden geladen als deze zo is gecodeerd dat content boven de vouw (content die zichtbaar is voordat een bezoeker scrolt) prioriteit krijgt. Dit betekent dat je er voor zorgt dat alle elementen die boven de vouw verschijnen zo dicht mogelijk bij het begin van de HTML-code worden geplaatst zodat deze als eerste wordt geladen. Het is ook van cruciaal belang om interne CSS en JavaScript te gebruiken in plaats van een externe CSS-bestand.
8. Afbeeldingen optimaliseren
De meest voorkomende fout is wel dat afbeeldingsbestanden niet de juiste indeling hebben (WebP i.p.v. jpg) en onnodig groot zijn. Een foto hoeft geen 3.000 bij 5.000 pixels te zijn om goed vertoond te worden op een desktop scherm van 1.920 bij 1.080 pixels. En vaak wordt een volledige foto gebruikt terwijl maar de helft zichtbaar is op de website zelf, bijvoorbeeld omdat deze in een header geplaats wordt en de boven- en onderkant automatisch worden weggesneden. Door te zorgen dat de foto’s de meest moderne indeling hebben en het juiste formaat kan er aanzienlijk veel bespaard worden. Er zijn verschillende WP Plug-ins zoals Converter for Media die dit automatisch doen.
Breng eenvoudig de grootte van een afbeelding terug van 824 Kb naar 38 Kb
9. Videobestanden optimaliseren
Zorg voor de juiste bestandsindeling van jouw video, namelijk MP4. Deze kan verder worden geoptimaliseerd door middel van de beste compressietechnieken en software als Camtasia of Movavi doen dit voor je. Overweeg om jouw video’s te uploaden naar YouTube of Vimeo in plaats van ze lokaal te plaatsen en hun iframe-insluitcode gebruiken. En zelfs dat levert maar beperkte winst op, om alle media op jouw website echt te optimaliseren moet je de media worden gepresenteerd in de juiste grootte op basis van de schermgrootte van de bezoeker in plaats van simpelweg het formaat ervan wijzigen.
Er zijn twee manieren om dit voor elkaar te krijgen:
1. Mediabestanden binnen de HTML van jouw website kunnen worden weergegeven met behulp van src set waarmee de browser kan het juiste formaat kan selecteren op basis van de schermgrootte van het apparaat dat de bezoeker gebruikt.
2. Mediabestanden worden geplaatst via CSS (meestal als achtergrondafbeeldingen), en deze worden gepresenteerd met behulp van mediaquery’s om het juiste formaat te selecteren op basis van de schermgrootte van het apparaat dat een bezoeker gebruikt.
10. Gebruik Caching & CDN’s
Caching stelt jouw webserver in staat om met een statische kopie van jouw webpagina’s te werken zodat deze sneller wordt geleverd aan de browser. Een CDN maakt gebruik van servers op verschillende locaties overal op de wereld, zodat de browser van een bezoeker die zich het dichtst bij deze server begeeft de content zeer snel kan laden. Dit verbetert de paginasnelheid drastisch.
Conclusie
Wanneer al bovenstaande tips zijn opgevolgd moet je een enorme winst in snelheid kunnen realiseren. De eenvoudigste manier om dit zeker te weten is, voor je deze tips gaat uitvoeren, een test te doen met Google PageSpeed en de waardes die worden gemeten te noteren. Vergeet niet deze waardes van zowel mobiel als desktop te noteren. Nadat alles is afgehandeld zul je gegarandeerd een flink verschil zien en zal Google dit gaan belonen met betere positionering in hun zoekmachine. Heb je hier vragen over, of kun je hier hulp bij gebruiken, neem dan contact op!