De cumulatieve lay-outverschuiving is een Core Web Vital- indicator die evalueert in welke mate een pagina zijn visuele consistentie behoudt. Het aantal onverwachte wijzigingen in de lay-out zonder dat de gebruiker iets met de website doet, bepaalt de mate van visuele stabiliteit. Elke keer dat de inhoud van de pagina verandert, wordt aangenomen dat de lay-out is gewijzigd, ook al is dit niet omdat u op een link of iets dergelijks hebt geklikt.
De totaalscore voor de Cumulatieve Lay-outverschuiving wordt bepaald door al deze diensten bij elkaar op te tellen.
Wat is cumulatieve lay-outverschuiving?
Vertraging bij het laden van foto's is het meest voorkomende type dat CLS- gebruikers melden. Het is gebruikelijk dat de tekst vóór de media-elementen wordt geladen. Bovendien verandert de structuur van de webpagina nadat alle grafische componenten volledig zijn geladen. Deze gebeurtenissen vinden plaats ongeacht of u aan het scrollen bent.
Of een websitepagina een hoge CLS-score heeft, het kan moeilijk zijn om te bepalen wanneer deze volledig is geladen. De complexiteit van de website en de hoeveelheid media-inhoud vergroten de kans dat gebruikers te maken krijgen met lay-outwijzigingen.
Cumulatieve lay-outverschuiving in WordPress verminderen?
Het gebruik van de CLS-foutopsporing van Google Web Vitals is de meest effectieve methode om te bepalen welke componenten verantwoordelijk zijn voor de hoge CLS-score van uw website. Het presenteert u een GIF die alle draaiende elementen op uw website illustreert. De meeste hoge CLS-scores kunnen worden toegeschreven aan advertenties en media-items. U moet elk onderdeel optimaliseren om uw CLS-score te verhogen.
Voor dit doel volgen enkele methoden die kunnen worden gebruikt om de CLS-score van uw website te verbeteren:
1. Voeg dimensiekenmerken toe aan alle mediabestanden
Omdat uw webbrowser de grootte van uw afbeelding en de lay-outoriëntatie moet beoordelen nadat deze is geladen, kan de kans op een lay-outverschuiving toenemen als u media-items met onbekende kenmerken uploadt. Grote foto's en bestanden van hoge kwaliteit hebben een grotere kans om een van deze scenario's te ervaren dan kleinere. Wijzig het formaat van afbeeldingen in de WordPress Media-editor.
2. Zorg ervoor dat lettertypen lokaal worden geladen
Tijdens het laden van het lettertype moet de tekst zichtbaar blijven. Om dit doel te bereiken, is het daarom het eerste dat moet worden gedaan om ervoor te zorgen dat lettertypen lokaal worden geladen in plaats van dat ze worden opgehaald van websites die hostlettertypen van derden gebruiken.
3. Vermijd FOIT en FOUT
Het ‘flits van onzichtbare tekst ’ (FOIT) treedt op wanneer er geen reservelettertype is opgegeven. Als gevolg hiervan zien gebruikers een leeg gebied waar de tekst normaal gesproken zou staan, terwijl hun webbrowser probeert het lettertype te laden of een alternatief zoekt.
Gedurende een periode die bekend staat als een flits van ongestylede tekst (FOUT), gebruikt uw webbrowser het standaard fallback-lettertype totdat het door u geselecteerde lettertype kan worden geladen. Om dit te verhelpen kunt u het attribuut font-display: switch toevoegen.
Meer van dit soort artikelen kunt u lezen op Seahawk Media Blog .
