Help mij groeien

Tips: LCP voor WordPress verbeteren.

Als je search console gegevens een LCP-probleem vertoond: langer dan 4 seconden (mobiel) of (desktop) in WordPress of een ander CMS, dan helpt dit artikel je om deze scores te verbeteren of zelfs op te lossen. Dit artikel is ontstaan na het uitvoerig oplossen van LCP-problemen bij onze opdrachtgevers. We nemen je mee in een praktijkvoorbeeld van een opdrachtgever waarbij de Pagespeed scores onvoldoende waren. Het LCP-probleem op deze website hebben we verbeterd van 14,6 sec. naar 3,3 seconden. Deze website draait op Wordpress en is gebouwd in Divi.

Lange laadtijden van Largest Contentful Paint oplossen.

Zoals gezegd nemen we voor dit artikel een recent project van een opdrachtgever die bij ons de opdracht heeft neergelegd om de PageSpeed score te verbeteren. In dit artikel lichten we uit hoe we de LCP score naar beneden hebben gebracht.

De 0-meting:

Het resultaat:

Eerste reactietijd van de server verkorten.

In eerste instantie moeten we de basis goed houden. Combineer uw Google Analytics- en zoekconsole-gegevens en bepaal de landinstellingen van de doelgroepen.

In ons geval heeft de klant zijn doelgroep in Nederland, maar de hostingserver locatie is in Amerika. Het is van essentieel belang om dit als eerste op te lossen.

Aangezien het LCP-rapport is gebaseerd op gegevens van Chrome-gebruikers, heeft het geen zin om de site aan de andere kant van de wereld te hosten.

Er zijn veel hostingaanbieders zoals Kinsta, Flywheel of WPEngine die beheerde WordPress-hostingservices aanbieden vanuit meerdere wereldwijde datacenter locaties. Wij maken vrijwel altijd gebruik van Cloudways omdat het schaalbaar oplossingen biedt.

Er ook veel shared hosting-bedrijven zoals SiteGround die ook een datacenter in alle regio’s aanbieden (VS, VK, Azië en Australië) en ik raad ze aan als je op zoek bent naar een fatsoenlijke host onder de € 10 per maand.

Investeer in een CDN

De reactietijd van de server kan gemakkelijk worden verkort als je doelgroep uit één land komt, maar voor sites die veelvuldig wereldwijde bezoekers ontvangen is dit een ander verhaal.

Als je in jezelf in deze situatie bevindt waarin je bezoekers van meerdere landen uit de wereld wilt krijgen, is het gebruik van CDN eigenlijk verplicht om LCP-problemen op te lossen.

Door een CDN toe te gebruiken, wordt niet direct de LCP verbeterd. Zorg je ervoor dat je Full Page Caching (HTML, CSS & JS) hebt aanstaan om de TTFB te verbeteren en dus de LCP te verbeteren.

Als je CDN al gebruikt en geen caching van volledige pagina’s gebruikt, vraag dan je CDN-ondersteuning om het te implementeren.

Hieronder tref je een aantal CDN aanbieders waar we zelf goede ervaringen mee hebben.

Van deze vijf is Google CDN de snelste, maar vereist dat de websites worden gehost op Google Cloud, wat weer een groot nadeel is.

StackPath CDN is zeer snel en vrij goedkoop voor $10 per maand (onbeperkt aantal sites).

Cloudflare is zeer goed en gratis, maar niet de snelste in het gratis abonnement. Dan zul je een pro-abonnement van $20 per maand moeten kiezen.

BunnyCDN is goedkoop, maar minstens 15-30 ms langzamer dan de hierboven genoemde CDN’s.

Natuurlijk zijn er nog zoveel meer aanbieders. Vergeef me als ik er 1 over het hoofd heb gezien die in deze lijst zou moeten worden opgenomen.

Verwijder ongebruikte CSS & JS

Afgezien van bovenstaande technieken, is het (onjuist)gebruik en instellen van CSS en JS het grootste probleem dat ik op de meeste sites aantref.

In WordPress worden de CSS en JS op alle pagina’s geladen, ongeacht het gebruik. De ideale manier is dus om CSS en JS alleen in te laden als dat nodig is.

Je kunt hiervoor kiezen tussen PerfMatters (betaald) of WP Assest Clean Up (gratis). Om het werk gemakkelijker te maken, gebruik ik PerfMatters op al mijn sites, inclusief deze site.

Hoe vind ik de ongebruikte CSS en JS?

Een handige tool is om GTmetrix te gebruiken en de Waterfall te bekijken.

Je kunt zien dat de startpagina van deze site Paginabuilder-scripts laadt terwijl de pagina lang niet alle css en javascript op deze pagina nodig heeft. Dus door de builder CSS & JS uit te schakelen, kun je de paginagrootte met meerdere seconden verkleinen. Dit is hoe je de ongewenste CSS & JS moet verwijderen. Ga hier wel voorzichtig mee om. Onjuist gebruik kan er voor zorgen dat bepaalde functies niet meer werkend zijn.

Gebruik een CDN voor afbeeldingen en WebP afbeeldingen.

De meeste CDN’s cachen de bestanden (CSS, JS, afbeeldingen en HTML) gewoon in hun POP-locaties en leveren snel ladende pagina’s.
Normale CDN’s veranderen de afbeelding niet en zijn niet bedoeld voor de eindgebruiker, aangezien het aanwezig is op jouw website.
Maar de afbeelding moet worden gecomprimeerd, moet worden geleverd als adaptieve afbeeldingen op basis van het gebruikersapparaat, waarbij de afbeeldingsbreedte wordt toegevoegd en moet vervolgens in WebP-indeling worden afgeleverd.

Om het probleem op te lossen, komt image CDN in het spel en Shortpixel biedt een uitstekende oplossing.

Shortpixel levert:

  • Realtime beeldverwerking op basis van de behoefte van de eindgebruiker
  • Levert de juiste afbeeldingsgrootte voor de browserviewport van de gebruiker
  • WebP-ready afbeeldingen

Hiervoor kun je een Shortpixel abonnement nemen en zowel de image optimizer installeren als de Adaptive Images plugin.

Wees kritisch op je smartphone weergave

Wat we bij vrijwel alle projecten tegengekomen is een responsive versie van de desktop website. Dat betekent dat letterlijk alle componenten, secties en visuals worden weergegeven, echter met opgekropte dimensies.
We zien vaak onnodig veel secties die informatief niets toevoegen aan de pagina of artikel.

  • Denk hierbij dus aan afbeeldingen die schermvullend zijn op mobiele weergave.
  • Schakel deze uit voor weergave op smartphones.
  • Wees kritisch welke blokken en secties moeten worden weergegeven op een smartphone.

Dit kan je LCP drastisch verlagen en veel winst boeken in de uiteindelijke score voor LCP (mobiel).

Bel ons direct Formulier Scroll naar boven