Front-end onderdelen die invloed hebben op de Core Web Vitals?
Er wordt onmeunig veel geschreven over de performance van WordPress, vaak met aandacht voor de problemen en weinig oplossingen. Ik ga proberen daar iets aan te doen.
Ik geef hier een korte uitleg van de hoofdlijnen. In de komende artikelen duik ik dieper in de details en laat ik je met voorbeelden zien wat de beste oplossingen zijn.
Grote afbeeldingen die niet geoptimaliseerd zijn
Afbeeldingen zijn een essentieel onderdeel van de front-end. Ze moeten correct worden ingeladen, qua resolutie afgestemd zijn op hun weergavegrootte, en geoptimaliseerd zijn voor snelle laadtijden.
Stel je voor dat je een enorme doos verstuurt terwijl een envelop voldoende was geweest. Dat is wat er gebeurt als je foto’s gebruikt die veel te groot zijn voor hun doel. Gebruik je bijvoorbeeld een profielfoto van 1200×1200 pixels terwijl deze maar 100×100 pixels getoond wordt? Dat is een enorme verspilling van middelen.
- Ongecomprimeerde afbeeldingen.
Het direct uploaden van high-res foto’s zonder compressie leidt tot onnodig grote bestanden. Vergelijkbaar met het versturen van een 4K-film via WhatsApp: veel te zwaar en onnodig. - Overmatige afmetingen.
Het gebruik van grote afbeeldingen waar kleine formaten volstaan, dit zie je vaak gebeuren als de standaardinstellingen van WordPress niet gewijzigd worden. - Verkeerde bestandsformaten.
Het verkeerd kiezen van formaten, zoals PNG voor foto’s in plaats van JPEG of moderne alternatieven. Reserveer PNG voor graphics of wanneer transparantie nodig is.
Externe bronnen
Elke keer dat je website iets externs moet ophalen, zoals een lettertype, script of stylesheet, moet de browser een nieuwe verbinding maken. Dit kost tijd en vertraagt je website. Hoe meer externe bronnen, hoe langer het duurt om alles te laden.
- Te veel externe script- en CSS-bestanden.
Wanneer elk item van je website van een andere locatie moet komen, verlengt dat de laadtijd. - De volgorde van de laadtijd niet geoptimaliseerd.
Wanneer belangrijke onderdelen niet als eerste worden geladen, kan je website niet optimaal worden weergegeven. Zorg ervoor dat essentiële resources in de juiste volgorde worden geladen. - Scripts zonder async of defer attributen.
Dit leidt tot onnodige blokkades, omdat scripts elkaar in de weg kunnen zitten. Door async en defer te gebruiken, kunnen scripts parallel worden geladen. - Fonts die niet geoptimaliseerd zijn.
Karaktersets in alle talen downloaden terwijl je alleen de Nederlandse tekens nodig hebt, is onnodige ballast. - Externe lettertypen zonder preload.
Het niet vooraf laden van lettertypen kan vertraging veroorzaken bij het weergeven van de website.
Inefficiënte code
Soms is code complexer dan nodig. Onnodige HTML-structuren, herhaling- en van CSS-regels zorgen voor onnodige vertraging.
- Onnodig grote HTML-structuren.
Een webpagina die alle producten, blogs en video’s tegelijk probeert te laden, maakt je site traag. De browser moet dan omgaan met duizenden elementen, wat het proces vertraagt. Dit zie je vaak op de homepage waar eigenaren alles willen laten zien. Niet alleen lastig voor browsers, ook veel gebruikers hebben daar moeite mee. - Niet-gecomprimeerde code.
Code die niet is gecomprimeerd bevat overbodige spaties, enters en aantekeningen, waardoor het bestand onnodig groot wordt. - Overbodige div’s en nesting.
Een eenvoudige structuur volproppen met onnodige elementen maakt de code ingewikkelder en trager. - Inline CSS en JavaScript.
Inline CSS en JS direct in de<body>opnemen zorgt voor duplicatie en inefficiëntie. Beter is het om deze los te koppelen en extern te laden.
Verkeerd gebruik van media
Een PowerPoint presentatie waarbij elke slide een 4K-video afspeelt, belast je apparaat onnodig zwaar. Grote mediabestanden kunnen je website merkbaar vertragen.
- Video’s die automatisch afspelen.
Automatisch afspelende video’s belasten zowel je website als het apparaat van de gebruiker. - Zware iframes.
Het laden van een volledige externe website binnen jouw website kan veel resources vragen. - Zware achtergrondvideo’s.
Bewegende achtergronden kosten onnodig veel energie en vertragen je site, vooral als ze continu moeten afspelen.
Animaties en Overgangen
Animaties kunnen waarde toevoegen, maar als ze niet goed worden geoptimaliseerd, kunnen ze de prestaties negatief beïnvloeden:
- Zware Animaties: Animaties die ’top’ of ‘left’ gebruiken, belasten de CPU (Central Processing Unit) meer omdat ze de hele pagina-layout opnieuw moeten berekenen. ‘Transform’ animaties daarentegen kunnen door de GPU (Graphics Processing Unit) worden verwerkt, wat veel efficiënter is. Dit maakt ’transform’ animaties vloeiender, vooral op minder krachtige apparaten.
- Te veel animaties tegelijkertijd: Wanneer te veel elementen tegelijkertijd bewegen, kan dit de browser vertragen, vooral op mobiele apparaten of oudere hardware.
Cache-gerelateerde problemen
Zonder caching moet je website alle content steeds opnieuw ophalen, alsof je elke keer naar de supermarkt moet voor een maaltijd, omdat je geen voorraadkast hebt.
- Ontbrekende cache headers.
Dit leidt tot onnodige herhalingen, zoals steeds opnieuw je profiel invullen op een website. - Geen gebruik van browser caching.
Als een website telkens ‘vergeet’ welke onderdelen eerder al geladen zijn, gaat dit ten koste van de snelheid. - Sommige vinden ook HTTP Caching. Ik vind het meer een server-dingetje.
Rendering & blokkerende bronnen
- CSS verkeerd geplaatst
Wanneer alle CSS eerst geladen moet worden voordat de pagina zichtbaar wordt, terwijl sommige delen al meteen getoond kunnen worden. - JavaScript dat niet op het juiste moment laadt
Scripts die elkaar blokkeren, verlengen de laadtijd en zorgen voor vertraging. - Grote DOM-structuren
Wanneer de browser een te grote structuur moet verwerken, duurt het langer om de juiste elementen te tonen.
Meer weten over rendering? Ga naar het artikel waarin ik alles uitleg over het renderingproces, inclusief het opbouwen van de DOM en CSSOM, het creëren van de render tree, en de stappen van layout en painten.
JavaScript overload
Te veel JavaScript kan een website zwaar en traag maken. Het minimaliseren en optimaliseren van JavaScript is essentieel voor een soepele front-end ervaring. Laad een script op het juiste moment en alleen wat echt nodig.
Niet geoptimaliseerde fonts
Het gebruik van meerdere font-families en varianten, terwijl je er maar één of twee echt nodig hebt, belast de laadtijd. Kies alleen de font-weights en font-styles die je daadwerkelijk gebruikt en beperk het aantal lettertypen tot een minimum. Lees: Webfonts optimalisatie en layout shifts.
Begin met optimaliseren bij je front-end
Front-end onderdelen zijn cruciaal voor de Core Web Vitals van een WordPress website. Door aandacht te besteden aan afbeeldingen, externe bronnen, code-efficiëntie en mediagebruik kun je de snelheid van je site aanzienlijk verbeteren.
In de volgende artikelen ga ik dieper in op elk onderwerp en bied ik praktische oplossingen en voorbeelden om je website sneller en gebruiksvriendelijker te maken. Blijf op de hoogte!