Voldoet jouw website al aan alle snelheid optimalisatie eisen van Google Pagespeed Insights? Anno 2021 is het belangrijk dat je een website hebt die met lichtsnelheid laadt. Google beoordeelt websites namelijk steeds meer aan de hand van gebruikerservaring statistieken, waar websitesnelheid een belangrijke van is. Er zijn een aantal handige website snelheid optimalisatie hacks waarmee je jouw website razendsnel kunt maken. In dit artikel bespreken we deze.
Hulp nodig met website snelheid optimalisatie?
Google ontwikkelingen 2021
Het Google algoritme is eigenlijk constant in ontwikkeling en daarom is het geen wonder dat er in 2021 weer een aantal dingen gaan veranderen. Juni dit jaar gaat er een belangrijke update doorgevoerd worden die de ‘Core web vitals’ heet. In het kort: Google gaat websites sterker beoordelen op basis van gebruikerservaring factoren aan de hand van ‘Core Web Vital-statistieken’. Dit omvat factoren zoals paginasnelheid, responsiviteit en de stabiliteit van content tijdens het laden.
Google heeft beloofd dat website-eigenaren tot juni 2021 de tijd hebben om hun website metrics op het gebied van gebruikersvriendelijkheid, snelheid en structuur te verbeteren. Sindsdien zag het bedrijf een toename van 70% in gebruikers die zich bezighouden met Lighthouse, PageSpeed Insights en het Core Web Vitals-rapport van Search Console, ter voorbereiding op de update.
Wat betekent dit voor mijn website snelheid score?
Google Pagespeed Insights is dus eigenlijk een misleidende naam want de test meet meer statistieken dan alleen de websitesnelheid. Dat betekent dan ook dan je een score van 100% niet bereikt als je enkel je website super snel maakt. Er moet namelijk ook rekening gehouden met factoren zoals gebruikersvriendelijkheid en structuur. Daarom kijken we in dit ook naar deze factoren, naast de website snelheid optimalisatie hacks.
- Creëer een solide basis door een goede hoster uit te kiezen
Hoe snel je website is wordt voor een groot deel bepaald door hosting. Als je website draait op een server die traag reageert, dan heeft het weinig zin om te beginnen met optimaliseren van je website. Dat is hetzelfde als het opvoeren van een brommobiel. Je kan optimaliseren wat je wilt, maar het zal je niet lukken om er volwaardig mee te rijden op de snelweg. Hier heb je een auto voor nodig.
Als je kiest voor goede WordPress hosting, dan beschikt jouw website over meer hostingcapaciteit en merk je dat vrijwel direct in de laadtijd. De twee hosters die we je ter harte kunnen aanbevelen zijn Kinsta en SiteGround. Beide zijn erg goed en scoren uitstekend op snelheid, support en veiligheid.
Ben je op zoek naar een zeer krachtige hosting met maximale snelheid, support en veiligheid. Dan is onze WordPress hosting en beheer oplossing misschien wel wat voor jou. Achter onze WordPress hosting oplossing schuilt een sterk partnerschap tussen Sowmedia en Kinsta. Kinsta wordt door onafhankelijke reviews al jaren berekend tot de absolute wereldwijde top van Enterprise WordPress hosting oplossingen.
- Ga voor de ware grootte van afbeeldingen en comprimeer ze
De meeste websites staan vol met afbeeldingen. Dit betekent vaak ook dat afbeeldingen de oorzaak zijn van een aanzienlijk deel van de laadtijd. Daarom adviseren we de laadtijd van je website goed te testen en het formaat van onnodig grote afbeeldingen te verkleinen tot de ware grootte waarop je ze wil tonen in je website.
WordPress helpt al een handje door elke afbeelding die je upload, op te slaan in verschillende formaten. Je kan afbeeldingen verder nog verkleinen en schalen in de mediabibliotheek van WordPress, maar ook – als je handig bent – op je eigen computer voordat je ze uploadt. Je kan hiervoor elke afbeeldingsbewerker gebruiken die bestaat; van Photoshop tot Paint.
Wanneer je het formaat van je afbeeldingen goed hebt ingesteld, is er nog een tweede optimalisatieslag mogelijk voor de laadtijd van je afbeeldingen: compressie. Dit betekent dat de afbeeldingen zo goed mogelijk worden ‘ingepakt’ tot kleine pakketjes, zonder al te veel kwaliteit te verliezen. Zo bespaar je op tientallen afbeeldingen al snel enkele megabytes.
- Laadt content boven de vouw als eerste
Een factor die veel betrekking heeft op de gebruikerservaring is hoe snel de content boven de vouw geladen wordt. In andere woorden: content die zichtbaar is zonder dat de bezoeker naar beneden hoeft te scrollen. Omdat Google gebruikers een prettige ervaring wil bieden, wordt er veel waarde gehecht aan de snelheid waarmee deze content is geladen.
Hoe laadt je content correct boven de vouw? Dit heeft te maken met hoe de codes van je website zijn opgebouwd. Een aantal tips die we je kunnen geven zijn:
- Verwijder CSS en Javascript die het laden van de content boven de vouw blokkeren. Op deze manier laad je eerste de zichtbare elementen, daarna de rest.
- Een techniek die de laatste jaren erg populair is geworden is Lazy-loading. Hiermee worden afbeeldingen pas geladen, wanneer ze nodig zijn.
- Verklein de data boven de vouw door scripts te comprimeren en/of combineren.
- Zorg ervoor dat dat de belangrijke content boven de vouw eerst in beeld komt, voordat andere elementen worden geladen.
Eerlijk is eerlijk, hier is wel wat codeerwerk voor nodig. Ben je niet zo thuis in het coderen, of heb je niemand in dienst? Met een prepaidkaart helpen wij je graag verder.
4. Optimaliseer de code van je website
Een belangrijk punt voor website snelheid optimalisatie is het optimaliseren van de code van je website. Dit doe je door scripts te combineren en/of te comprimeren. Ook het later laden van JavaScript door het naar de footer te verplaatsen helpt hierbij.
Scripts combineren
Wanneer scripts gecombineerd worden, betekent dit niets meer dan dat alle losse bestanden in één bestand achter elkaar geplaatst worden. Het is eigenlijk alsof je de inhoud van drie Word-documenten samenbrengt door ze achter elkaar te plaatsen in één document. De bestandsgrootte van het ene gecombineerde script verschilt eigenlijk niet met die van de losse scripts bij elkaar opgeteld. Toch verbeter je de laadtijd, omdat je webbrowser voor het laden van elk bestand een nieuwe verbinding moet maken. En dat kost tijd.
Doordat de browser nu niet voor drie scripts, maar slechts voor één script verbinding hoeft te maken, neemt snelheid van de laadtijd toe. Twee plugins die je de mogelijkheid bieden om JavaScript en CSS te combineren, zijn WProcket en NitroPack.
Scripts comprimeren
Wanneer je in de vorige stap alle scripts zoveel mogelijk hebt gecombineerd, kun je het gecombineerde bestand nu ook nog comprimeren. Voor scripts houdt het comprimeren vooral in dat onnodige spaties, commentaar, tabs en witregels uit de code worden verwijderd, zodat de totale bestandsgrootte afneemt. Dit wordt minifying genoemd. Er zijn talloze WordPress plugins te vinden die de code voor je website optimaliseren, maar in veel gevallen leveren ze meer problemen op dan ze oplossen. Een geschikte plugin voor het comprimeren van scripts is WProcket.
Verplaats JavaScript naar de footer
JavaScript-bestanden bevatten code die betrekking hebben tot de functionaliteit van je website. CSS-bestanden zorgen ervoor dat de website op een bepaalde manier weergegeven wordt. Omdat zoekmachines het belangrijk vinden dat je website zo snel mogelijk goed weergegeven wordt, helpt het om CSS-bestanden zo snel mogelijk te laden, en JavaScript-bestanden zo laat mogelijk. De gratis plugin Scripts to Footer plaatst alle JavaScript zo ver mogelijk onderaan de paginacode, terwijl het de CSS-bestanden bovenaan laat staan.
Controleer goed of je website nog optimaal functioneert na het activeren van deze plugin. Vaak vereist het wat technische kennis om alle JavaScript-bestanden zo af te stellen dat ze geen problemen veroorzaken in de footer.
- Gebruik caching
Een cache zorgt ervoor dat je website sneller wordt door te voorkomen dat de webserver telkens weer dezelfde pagina moet laden. De website wordt bij een volgend bezoek sneller geladen omdat de browser deze als het ware al opgeslagen. Echter moet dit moet wel ingesteld worden.
Het is erg makkelijk om caching in te stellen. Heb je een WordPress website, dan kun je dit doen via de plugins WP Rocket en W3 Total Cache.
- Statische content extern inladen met CDN
Normaliter worden afbeeldingen en scripts ingeladen vanaf je eigen server. Een Content Delivery Network (CDN) is een externe hosting partij die al jouw statische content (plaatjes, pdf’s, filmpjes, maar ook scripts die zelden veranderen) kopieert en aanbiedt.
Wanneer een bezoeker je website bezoekt wordt de dynamische content (de code van je website die per request verandert) nog steeds door je eigen server geleverd, maar kan alle statische content ergens anders vandaan gehaald worden.
Doordat de requests van een bezoeker verspreidt wordt over twee servers, wordt de belasting per server verlicht en kan een request sneller worden afgehandeld. Hierdoor word je website snelheid verbeterd.
Lees in het artikel van Techradar meer over de beste CDN providers van 2021.
- Verwijder en verplaats ‘render blocking resources’
Een website heeft verschillende onderdelen die niet direct interessant zijn voor een bezoeker, maar die wel ingeladen moeten worden. Denk hierbij aan bepaalde CSS, Javascript of tools zoals Google Analytics en Google Tag Manager. Als deze scripts als eerste worden geladen dan moet de bezoeker langer wachten op datgene wat er echt toedoet. En dit vindt onze grote vriend Google ook niet leuk.
Om dit op te lossen kun je een aantal dingen doen:
- Minify je JavaScript en CSS. Dit betekent dat je alle extra witruimte en onnodige beschrijving in de code verwijdert.
- Voeg JavaScript en CSS aan elkaar toe. Om dit te doen, moet je verschillende .js en .css bestanden nemen en ze combineren.
- Stel het laden van JavaScript uit. Het kan nuttig zijn om het laden van JavaScript-bestanden uit te stellen totdat al het andere op de pagina geladen is. Een betrouwbare manier om het laden van JavaScript uit te stellen is door gebruik te maken van asynchroon laden.
Een handige plugin die je goed op weg kan helpen met het verwijderen en verplaatsen van render blocking resources is WP Rocket
Het laatste punt voor website snelheid optimalisatie is het onderhouden van je WordPress omgeving. Veel website-eigenaren versloffen deze taak waardoor hun website trager wordt en soms zelfs vastloopt. Zorg er daarom altijd voor dat je thema, plugins, WordPress en PHP-versie up-to-date zijn. Probeer ook alle plugins die je niet meer te gebruikt te verwijderen, deze nemen onnodig ruimte in beslag.
Neem Google niet te serieus
Eigenlijk raden we je vooral aan om de score en aanbevelingen van Google PageSpeed Insights met een korreltje zout te nemen. Een 100/100 Pagespeed score biedt namelijk geen zekerheid voor een razendsnelle website, maar laat enkel zien aan de website optimalisatie eisen van Google voldoet. Dit betekent dat Google je website meer waardeert dan websites die een lagere scoren hebben. Wat natuurlijk wel weer een groot voordeel oplevert als er veel concurrentie zit op vergelijkbare content waar je op wil ranken.
Toch zegt dit ook niet alles omdat website snelheid maar een klein stukje van de puzzel is. Er zijn veel meer Google ranking factoren (2021) die van belang zijn voor een goede score in de zoekmachine.
Om de snelheid van je website wat objectiever te beoordelen, kun je ook gebruik maken van andere tools zoals GTMetrix en Pingdom Website Speed Test. Net als Google geven deze testen aanbevelingen over hoe je je website snelheid kan optimaliseren. Met deze data kom je hopelijk heel ver met het zoekmachinevriendelijk maken van je website!
