De cumulatieve lay-outwijziging is een Core Web Vital- indicator die de mate van visuele consistentie van een pagina evalueert. Het aantal onverwachte lay-outwijzigingen zonder interactie van de gebruiker met de website bepaalt de mate van visuele stabiliteit. Elke keer dat de inhoud van de pagina verandert, wordt de lay-out geacht te zijn gewijzigd, zelfs als dit niet komt doordat je op een link of iets dergelijks hebt geklikt.
De eindscore voor de cumulatieve lay-outverschuiving wordt bepaald door al deze verschuivingen bij elkaar op te tellen.
Wat is cumulatieve lay-outverschuiving?
Het laden van foto's is de meest voorkomende klacht die CLS- gebruikers melden. Het komt vaak voor dat de tekst eerder laadt dan de media-elementen. Bovendien verandert de structuur van de webpagina nadat alle grafische componenten volledig zijn geladen. Deze problemen doen zich voor, ongeacht of je aan het scrollen bent.
Zelfs met een hoge CLS-score kan het lastig zijn om te bepalen wanneer een webpagina volledig is geladen. De complexiteit van de website en de hoeveelheid mediacontent vergroten de kans dat gebruikers lay-outwijzigingen tegenkomen.
Verminder de cumulatieve lay-outverschuiving in WordPress?
De Google Web Vitals CLS-debugger is de meest effectieve methode om te bepalen welke componenten verantwoordelijk zijn voor de hoge CLS-score van uw website. De debugger toont een GIF die alle bewegende elementen op uw website illustreert. De meeste hoge CLS-scores zijn te danken aan advertenties en media-elementen. U moet elk van deze componenten optimaliseren om uw CLS-score te verhogen.
Hiervoor kunt u de volgende methoden gebruiken om de CLS-score van uw website te verbeteren:
1. Voeg dimensie-attributen toe aan alle mediabestanden
Omdat uw webbrowser de grootte en de lay-outoriëntatie van uw afbeelding moet bepalen nadat deze is geladen, kan de kans op een verschuiving van de lay-out toenemen als u mediabestanden uploadt met onbekende eigenschappen. Grote foto's en bestanden van hoge kwaliteit hebben een grotere kans op een dergelijk probleem dan kleinere bestanden. Afbeeldingen verkleinen in de WordPress Media-editor.
2. Zorg ervoor dat de lettertypen lokaal worden geladen
Tijdens het laden van het lettertype moet de tekst zichtbaar blijven. Daarom is het allereerst essentieel om ervoor te zorgen dat lettertypen lokaal worden geladen in plaats van te worden opgehaald van websites die door derden worden aangeboden.
3. Vermijd FOIT en FOUT
Het 'flash of invisible text' (FOIT) treedt op wanneer er geen reservelettertype is opgegeven. Gebruikers zien dan een lege ruimte waar normaal gesproken de tekst zou staan, terwijl hun webbrowser probeert het lettertype te laden of een alternatief te vinden.
Tijdens een periode die bekend staat als een 'flash of unstyled text' (FOUT), gebruikt uw webbrowser het standaard reservelettertype totdat het door u geselecteerde lettertype geladen kan worden. Om dit te verhelpen, kunt u het attribuut `font-display: switch` toevoegen.
Je kunt meer artikelen zoals deze lezen op de Seahawk Media Blog.
