Website optimalisatie: Speed matters!

Website optimalisatie is één van de belangrijkste eisen voor SEO en UX. Hoe optimaliseer je een website om zo snel mogelijk te laden? Het korte antwoord: minimalisatie en samenvoeging van bestanden, caching en lazy loading.

De UX (User eXperience) is de beleving van de website door de bezoekers. Hoe sneller een webpagina laadt, hoe beter de beleving. En snelle laadtijden zijn ook nog eens goed voor SEO (zoekmachine optimalisatie). Speed matters!

Hoe pak je website optimalisatie aan?

1. Minimalisatie heeft twee dimensies: laad om te beginnen alleen die bestanden die je nodig hebt. Als je WordPress zonder blokken gebruikt, dan hoef je de block-library niet te laden. Hetzelfde geldt voor Google fonts en de standaard emoji’s. Alle CSS (voor styling en layout), JavaScript en HTML bestanden die je niet nodig hebt, moet je ook niet laden.
2. Minimaliseer vervolgens de resterende bestanden door met een plugin commentaar en layout (tabs, spaties, nieuwe regel-tekens) weg te halen. Dat scheelt meestal ruim de helft in grootte. Een plugin is een extra stuk software voor WordPress of een ander programma.
3. Concatenatie of samenvoeging van bestanden van hetzelfde type zoals CSS en JavaScript. Want per bestand is er een vaste toegangstijd, onafhankelijk van de grootte. Als je twintig JavaScript bestanden samenvoegt, heb je die toegangstijd nog maar één keer.
4. Asynchroon of deferred (uitgesteld) laden van CSS en JavaScript bestanden. Normaal worden ze synchroon geladen, maar dan duurt het langer voordat de webpagina zichtbaar wordt. Nadeel is dat bij later laden een deel van de al getoonde pagina nog kan verspringen of nog niet functioneert.
5. Caching zorgt voor een kopie van de webpagina in platte HTML, zodat je WordPress, de plugins en de database bij het laden niet aanroept. Dit scheelt vaak een factor vijf tot tien. De cache kan je bovendien preloaden (vooraf aanmaken), zodat hij niet pas wordt aangemaakt als de webpagina wordt opgeroepen.

Lazy loading

6. Lazy loading zorgt ervoor dat afbeeldingen, video’s en scripts pas geladen worden als ze door scrollen in beeld komen. Dat scheelt niet alleen in laadtijd voor de eerste vertoning van de pagina, maar vaak wordt er niet gescrold en dan hoeven die afbeeldingen en video’s helemaal niet geladen te worden. Video’s kan je ook vervangen door afbeeldingen en pas laden als de bezoeker erop klikt. Sinds WordPress 5.4 (in 2020) is lazy loading standaard voor afbeeldingen.
7. Afbeeldingen optimaliseren voor de juiste grootte en resolutie. Op een mobiel is een kleine afbeelding nodig en moet je niet een grote afbeelding laden. En al helemaal niet een zware foto van vele Mega-bytes. Op internet is een gemiddelde resolutie vaak voldoende.

Het mooiste is:

Dit kan je allemaal doen met gratis plugins. Je moet wel de juiste instellingen vinden en proberen wat het beste werkt.

In de praktijk heb ik webpagina’s tien tot honderd keer zo snel kunnen maken, afhankelijk van de complexiteit van een pagina. Dat is dus echt de moeite waard.

Het is goed voor SEO en UX. Daarnaast bespaar je server capaciteit, netwerk capaciteit en dus stroom, kosten en emissies. Samen met een aantal webserver performance verbeteringen heb ik de belasting van mijn VPS (Virtual Private Server) met 50% omlaag kunnen brengen. Als het hele internet met half zo veel servers toe zou kunnen, dan bespaar je heel veel emissies. Website optimalisatie is een win-win situatie.

Speed matters: Check hoe snel je website is.