Website snelheid verbeteren
De snelheid van websites is de afgelopen tijd opnieuw helemaal actueel geworden. Mobiele apparaten worden nu meer gebruikt om websites te bezoeken dan ‘gewone’ computers. Dat betekent dat er steeds meer bezoekers zijn die browsen op een langzame 3G verbinding of instabiel wifi netwerk. Veel websites houden daar te weinig rekening mee. Tegenwoordig is een gemiddelde mobiele website wel 2 MB groot. Dat is een gemiste kans! Onderzoek wijst uit dat er een directe relatie is tussen snelheid en conversiepercentage.
De laadtijd van je website op mobiel is ook een belangrijke ranking factor voor SEO. Google maakt tegenwoordig geen onderscheid meer tussen apparaten: De posities in Google zijn afhankelijk van de mobiele versie van je website. Presteert je website slecht op mobiel? Dan heeft dat dus gevolgen voor alle posities. Ook bij zoekopdrachten vanaf gewone computers en laptops!
Website snelheid en gebruikerservaring testen
Wil je de laadtijden van je website verbeteren? Begin dan eerst met het meten van de laadtijd. Google heeft hiervoor een goede tool ontwikkeld: Pagespeed Insights. Deze tool houdt niet alleen maar rekening met het gewicht van je pagina. Er wordt ook gekeken naar de gebruikerservaring van de website. Neem bijvoorbeeld de volgende twee pagina’s van exact dezelfde grootte:
Laadtijd verloop van wiki-vakantie.nl
De eerste pagina wordt binnen twee seconden al zichtbaar terwijl de tweede pagina ruim vier seconden een wit scherm houdt. Voor bezoekers geeft de eerste pagina de beste gebruikerservaring. De pagina voelt namelijk veel sneller, omdat ze veel eerder kunnen beginnen met lezen. Daarom zal de eerste pagina beter scoren in de test, ook al zijn ze qua gewicht precies gelijk.
Tip: Test de snelheid van alle belangrijke pagina’s op je website. De ervaring kan heel verschillend zijn, afhankelijk van de opbouw en inhoud van de pagina’s.
Vanaf 2021: Core Web Vitals
In November 2020 heeft Google opnieuw bevestigd dat vanaf mei 2021 de Pagespeed Insights score onderdeel wordt van het algoritme dat de ranking in de zoekresultaten bepaalt. Concreet betekent dat: zorg voor een zo hoog mogelijke score in de test!
Afbeeldingen, webfonts en andere bronnen verkleinen
Een van de belangrijkste maatregelen die je kunt nemen om je website sneller te maken, is het terugbrengen van het gewicht van je website. Gebruik de Pingdom Tools om te kijken hoe zwaar jouw website is en welke bronnen het meeste wegen. Meestal zijn dit de afbeeldingen.
Afbeeldingen kunnen op verschillende manieren verkleind worden.
- Het verkleinen van het formaat van de afbeelding zorgt voor een groot verschil in de bestandsgrootte.
- Ten tweede kan de bestandsgrootte van afbeeldingen verkleind worden door compressie. Dit kan bijvoorbeeld via de website tinypng.com.
- Als laatste is het ook mogelijk om het formaat van de afbeelding af te stemmen op het apparaat. Mobiele websites hebben kleinere afbeeldingen nodig dan websites op een groter scherm.
Tip: Automatiseer het verkleinen en comprimeren van afbeeldingen in je CMS om tijd te besparen.
Naast afbeeldingen zijn er andere bronnen die gewicht kunnen toevoegen aan een pagina, zoals webfonts en CSS of JavaScript bestanden. Neem de volgende maatregelen om de snelheid van je site te verbeteren:
- Beperk het aantal varianten van een lettertype tot bijvoorbeeld alleen normaal en vetgedrukt.
- Combineer en verklein CSS en JavaScript bronnen tot één CSS bestand en één JavaScript bestand.
- Ook de HTML code zelf kan verkleind worden voor een minimale besparing.
Blokkerende bronnen (JavaScript en CSS) verwijderen
Als het gewicht van je website is teruggebracht, dan kunnen we naar een volgende maatregel kijken die veel invloed heeft op de ervaring van de snelheid: Blokkerende bronnen verwijderen.
Elke website bestaat uit bronnen die nodig zijn voor de opmaak en animaties op de pagina: CSS bestanden, JavaScript bestanden en lettertypes (ook wel webfonts genoemd). Tijdens het laden van deze bronnen moet het inladen van de rest van de pagina wachten. Veel van deze bronnen worden door ontwikkelaars nog steeds bovenin de pagina toegevoegd. Hierdoor wordt het inladen van de pagina geblokkeerd en moeten bezoekers vele malen langer wachten totdat ze kunnen beginnen met lezen.
Om blokkerende bronnen te voorkomen zijn er twee mogelijkheden:
- Laad de bronnen asynchroon in. Hierdoor wordt het laden van de rest van de pagina niet meer geblokkeerd. Deze techniek wordt bijvoorbeeld toegepast bij de Google Analytics trackingcode.
- Laad de bronnen pas onderaan de pagina in. Op deze manier zal eerst het zichtbare deel inladen, en daarna pas de externe bronnen.
Tip: voor WordPress is er een handige plugin die dit automatisch voor je kan doen, genaamd autoptimize.
Browser caching en GZIP compressie.
Twee maatregelen die weinig werk kosten en toch veel winst opleveren zijn browser caching en GZIP compressie.
Browser caching is een instelling waarbij je aangeeft dat bepaalde bronnen voor een bepaalde tijd in het geheugen bewaard mogen blijven voor volgende bezoeken aan de website. Wanneer de bezoeker binnen deze bepaalde tijd terugkomt, worden deze bronnen niet opnieuw ingeladen, omdat ze al zijn opgeslagen in de browser van de bezoeker.
GZIP compressie zorgt ervoor dat elke pagina en elke bron gecomprimeerd wordt verstuurd. Deze vorm van compressie levert veel winst op bij tekst bestanden zoals de internetpagina zelf, CSS bestanden en lettertypes.
Beide instellingen moeten worden uitgevoerd op de server. Voor apache servers kan dit door het volgende toe te voegen aan het .htaccess bestand (bron):
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 year"
# Data interchange
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
# Favicon (cannot be renamed!) and cursor images
ExpiresByType image/x-icon "access plus 1 week"
# HTML components (HTCs)
ExpiresByType text/x-component "access plus 1 month"
# HTML
ExpiresByType text/html "access plus 0 seconds"
# JavaScript
ExpiresByType application/javascript "access plus 1 year"
# Manifest files
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Media
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# Web feeds
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
# Web fonts
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
</IfModule>
<IfModule mod_deflate.c>
# Compress all output labeled with one of the following MIME-types
# (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
# and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
# as `AddOutputFilterByType` is still in the core directives).
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/x-web-app-manifest+json \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>
</IfModule>Reactietijd van de server verbeteren
Als laatste kun je de laadtijd van je site verbeteren door de reactietijd van de website hosting te optimaliseren. Deze tijd is afhankelijk van verschillende factoren: de kwaliteit van de hosting, het CMS en het aantal verwijzingen. Er zijn verschillende maatregelen te bedenken voor het terugbrengen van de reactietijd van de server. Dit zijn de voornaamste:
- Server caching. Bij deze maatregel wordt een kant-en-klare versie van elke pagina opgeslagen in het geheugen van de webserver. Wanneer iemand de pagina bezoekt hoeft de pagina dus niet eerst opgehaald te worden uit de database. Dit scheelt erg veel tijd. Voor WordPress sites is server caching eenvoudig in te stellen via een plugin, bijvoorbeeld Hyper Cache.
- Hosting upgraden. Goede hosting is essentieel voor de laadtijd van je pagina’s en het hoeft niet duur te zijn. Wij zijn een groot fan van Siteground. Als je klant wordt, verhuizen ze bovendien kosteloos je website naar het nieuwe hostingpakket.
- Verminder het aantal redirects. Wanneer je een pagina bezoekt, moet je zo min mogelijk doorverwezen worden. Breng het aantal redirects in kaart met behulp van de redirect checker.
Hulp nodig bij het verbeteren van je laadtijden?
Wat is de gemiddelde laadtijd van jouw site? Kijk hiervoor ook eens in je Google Analytics rapporten. Heb je hulp nodig bij het verbeteren van de laadtijden? Neem dan contact op met de interpedia helpdesk.