Je LCP verschilt per toestel: onderzoek het element

Bij LCP gaat het om het grootste inhoudselement dat in beeld verschijnt. Dat element hangt af van wat er in de viewport past. Op een brede desktop kan dat een hero-afbeelding zijn, op een smal scherm kan een kop of tekstblok groter uitvallen omdat de afbeelding door de layout kleiner of anders gepositioneerd wordt.

MDN beschrijft webprestaties in het algemeen als zowel objectieve metingen als ervaren gebruikerservaring (MDN, webprestaties); de bron gaat niet specifiek over LCP per viewport. Onze eigen conclusie is dat een cijfer zonder context van toestel en scherm weinig zegt over wat je moet aanpassen.

Begin daarom niet met de oplossing maar met de vraag: welk element is het bij welke schermbreedte, en wanneer verschijnt het? Zonder die notitie weet je niet of je afbeeldingen, lettertypen of de HTML-aanvraag zelf moet onderzoeken.

1. Kies een representatieve pagina. Neem een pagina die veel bezoekers ontvangt, bijvoorbeeld je startpagina of een belangrijke dienstpagina.
2. Kies twee tot drie schermbreedtes. Bijvoorbeeld een smalle telefoon, een tablet en een brede desktop. Schrijf de exacte breedte op.
3. Meet per breedte met de prestatietools in je browser of een labotool. Noteer welk element als grootste inhoud wordt aangeduid.
4. Leg het type element vast. Afbeelding, achtergrondafbeelding, tekstblok of video-poster.
5. Noteer wanneer het verschijnt en wat er daarvoor gebeurt: de HTML-aanvraag, blokkerende CSS of scripts, het laden van het bestand zelf.
6. Bewaar de metingen als vergelijkingsbasis voor je iets verandert.

Een labometing is een momentopname onder gekozen omstandigheden. Ze vervangt geen gegevens van echte bezoekers, die je bij je beheerder of in je eigen meetomgeving controleert.

De cursus Learn Performance van web.dev behandelt achtereenvolgens onder meer de HTML-aanvraag, het kritieke renderpad, het laden van bronnen en afbeeldingsprestaties (web.dev, Learn Performance). Dat geeft je een bruikbare volgorde om het probleem te lokaliseren: eerst de eerste aanvraag, dan wat het renderen blokkeert, dan het element zelf.

Gebruik die volgorde als diagnose. Is het element een afbeelding, kijk dan of die laat wordt ontdekt omdat ze pas via CSS of script wordt opgevraagd, of omdat ze groter is dan de weergave nodig heeft. Is het tekst, kijk dan naar het laden van lettertypen en naar CSS die de weergave uitstelt. Is het een video-poster, kijk dan naar hoe de video is ingesloten.

Schrijf per breedte één zin op: "element X, type Y, vertraagd door Z". Als Z op desktop en mobiel verschilt, heb je twee afzonderlijke problemen en geen generieke afbeeldingskwestie.

Gebruik deze matrix als eerste richting. Ze is een hypothese die je met een nieuwe meting toetst, geen garantie.

Past geen enkele rij, dan is de meting onvolledig: herhaal ze met een andere breedte of op een andere pagina.

Dit is een verzonnen invoer om de methode te tonen, zonder resultaten. Stel dat je op 390 pixels breed noteert: grootste element is een tekstblok, vertraagd door een lettertype dat pas laat beschikbaar is. Op 1440 pixels breed noteer je: grootste element is een hero-afbeelding die via CSS als achtergrond is ingesteld. Dan heb je twee verschillende acties: lettertypegedrag voor mobiel en de manier van insluiten voor desktop. Een algemene beeldcompressie zou het mobiele probleem niet raken.

Verwachte technische controles: meet dezelfde pagina opnieuw op dezelfde breedtes en onder dezelfde omstandigheden, noteer of het aangeduide element nog hetzelfde is, en vergelijk met je basismeting. Of de waarde daalt, weet je pas na die meting.

Test ook de toegankelijkheid van wat je aanpast. De WAI-tutorials van W3C bieden richtlijnen voor onder meer afbeeldingen en andere content, zodat een prestatiewijziging de bruikbaarheid niet schaadt (W3C WAI, tutorials). Een alternatieve tekst of leesbaarheid mag niet sneuvelen voor snelheid.

Wil je zien welke publieke signalen je website uitstraalt, bekijk ze dan via Marketing Scan. Een publieke scan meet zichtbare signalen en voert niet alle controles uit die hier staan.