Wat is Cumulative Layout Shift (CLS)? Uitleg over de betekenis van Cumulative Layout Shift<\/h2>\n
Cumulative Layout Shift is de maat voor hoeveel een pagina op je site onverwacht beweegt tijdens het bezoek van een gebruiker, zoals gemeten door de Layout Instability API<\/a>, een gestandaardiseerde API voor het testen van de prestaties<\/a>.<\/p>\n Cumulative Layout Shift (CLS) is een van de drie statistieken in Google’s Core Web Vitals initiatief<\/a>, samen met Largest Contentful Paint (LCP) en First Input Delay (FID).<\/p>\n Om de betekenis van Cumulative Layout Shift te begrijpen, is het belangrijk om de layoutverschuiving in het algemeen te bespreken.<\/p>\n Een layoutverschuiving treedt op wanneer content op je site onverwacht “verplaatst” of “verschuift”.<\/p>\n Of, in technische termen, wanneer een element dat zichtbaar is in de viewport van startpositie verandert tussen twee frames.<\/p>\n Een veel voorkomend voorbeeld is dat je midden in het lezen van een blok tekst zit… maar dan verschijnt er plotseling een laat ladende advertentie die de tekst naar beneden duwt.<\/p>\n Hier is een ander voorbeeld van Google dat laat zien hoe dit gebeurt:<\/p>\n Je bent bijna zeker wel eens layoutverschuivingen tegengekomen bij het surfen op het web, zelfs als je ze niet bij die naam kent.<\/p>\n Een enkel bezoek kan meerdere afzonderlijke layoutverschuivingen hebben. Daarom probeert de Cumulative Layout Shift metric het hele plaatje te vangen door het totale aantal onverwachte layoutverschuivingen op een pagina te meten*.<\/p>\n *De exacte meting is iets technischer na enkele wijzigingen door Google, maar dit is nog steeds het basisidee. Als je ge\u00efnteresseerd bent in de details, <\/em>lees je er hier meer over<\/em><\/a>.<\/em><\/p>\n\n De belangrijkste reden waarom Cumulative Layout Shift slecht is, is dat het een slechte gebruikerservaring<\/a> op je site oplevert.<\/p>\n In het beste geval is het lichtelijk vervelend voor je bezoekers. In het ergste geval kan het bezoekers aanzetten tot acties die ze niet willen ondernemen.<\/p>\n Stel je bijvoorbeeld voor dat een gebruiker op “Cancel” wil klikken, maar per ongeluk op “Confirm” klikt omdat een verschuiving in de layout de positie van de knoppen verplaatste op het moment dat de persoon aan het klikken was.<\/p>\n Behalve dat het de ervaringen van je menselijke bezoekers be\u00efnvloedt, kan een slechte Cumulative Layout Shift score ook een belemmering zijn voor de ranking van je site in zoekmachines<\/a>.<\/p>\n Vanaf Google’s Page Experience update<\/a> (die in augustus 2021 volledig uitgerold is) gebruikt Google Core Web Vitals als een van zijn SEO rankingfactoren. Omdat Cumulative Layout Shift deel uitmaakt van Core Web Vitals, betekent dat dat het de zoekprestaties van je site kan be\u00efnvloeden<\/a>.<\/p>\n In principe zal het oplossen van problemen met Cumulative Layout Shift op je site helpen om hem beter te maken voor zowel menselijke bezoekers als zoekmachines.<\/p>\n Dus – wat kan de oorzaak zijn van Cumulative Layout Shift? Dat behandelen we nu.<\/p>\n Hier volgt een kort overzicht van de meest voorkomende oorzaken van layoutverschuiving:<\/p>\n Later in dit artikel gaan we dieper in op deze problemen en laten we je zien hoe je elk veel voorkomend probleem kunt oplossen.<\/p>\n Er is een aantal tools dat je kunt gebruiken om de Cumulative Layout Shift score van je site te testen.<\/p>\n Cumulative Layout Shift is onderdeel van de Lighthouse audit, dus elk snelheidstestprogramma dat Lighthouse gebruikt als onderdeel van zijn audit zal CLS gegevens bevatten – dit zijn PageSpeed Insights<\/a>, GTmetrix<\/a>, Chrome Developer Tools, en vele andere populaire testprogramma’s<\/a>.<\/p>\n Hier zijn enkele van de top Cumulative Layout Shift testtools die erg nuttig zijn.<\/p>\n PageSpeed Insights<\/a> is een van de nuttigste tools voor het beoordelen van de toestand van de layoutverschuiving van je site, omdat het je twee gegevensbronnen biedt:<\/p>\n Je kunt ook gegevens bekijken voor zowel desktop als mobiel door te wisselen tussen de tabbladen.<\/p>\n Let op <\/strong>– de labgegevens kunnen alleen layoutverschuivingen meten die optreden tijdens het laden van de pagina, dus je resultaten voor echte gebruikers kunnen iets hoger uitvallen als je layoutverschuivingen hebt die optreden na het laden van de pagina.<\/p>\n Chrome Developer Tools biedt enkele nuttige resources<\/a>\u00a0voor zowel het meten van CLS als het debuggen van de individuele layoutverschuivingen die op je site optreden.<\/p>\n Ten eerste kun je een Lighthouse audit uitvoeren om de CLS score van je site te bekijken. Dit gaat als volgt:<\/p>\n Na even wachten zou je dan de gewone Lighthouse audit-interface moeten zien (die veel lijkt op PageSpeed Insights).<\/p>\n Chrome Developer Tools laat je echter ook dieper in CLS graven met zijn Rendering<\/strong> analyse. Hiermee kun je individuele verschuivingsgebieden in je site markeren, wat je helpt bij het debuggen.<\/p>\n Hier zie je hoe:<\/p>\n Herlaad nu de pagina die je wilt testen en Chrome zou alle gebieden met layoutverschuivingen moeten markeren met een blauw vak. Deze markeringen verschijnen op de pagina zelf terwijl de content wordt geladen en verdwijnen als de verschuiving is voltooid.<\/p>\n Als de highlights te snel verschijnen om te kunnen volgen, kun je je site vertragen en kijken hoe hij frame voor frame wordt geladen via het tabblad Performance<\/strong>.<\/p>\n Hoewel je met Google Search Console<\/a> geen labtesten kunt uitvoeren om Cumulative Layout Shift te bepalen, kun je wel op een eenvoudige manier problemen met Cumulative Layout Shift op je site bekijken, zoals gemeten door het Chrome UX rapport.<\/p>\n Het voordeel van het gebruik van Google Search Console<\/a> in plaats van andere tools is dat je snel problemen over je hele site kunt zien in plaats van pagina voor pagina te moeten testen.<\/p>\n Hier lees je hoe je potenti\u00eble problemen op je site kunt bekijken:<\/p>\n Indien van toepassing markeert Google URL’s<\/a> met problematische Cumulative Layout Shift scores.<\/p>\n Let op <\/strong>– je ziet hier alleen gegevens als je site genoeg maandelijks verkeer heeft om in het Chrome UX rapport te worden opgenomen.<\/p>\n Zoals de naam al zegt, genereert Layout Shift GIF Generator<\/a> een GIF van de layoutverschuivingen op je site, zodat je precies kunt zien welke content\u00a0problemen veroorzaakt. Het geeft je ook je score, hoewel dat niet de hoofdzaak is van de tool.<\/p>\n Het enige wat je doet is de URL toevoegen die je wilt testen en kiezen tussen mobiel of desktop. Vervolgens genereert het een GIF van je site met groene highlights die de exacte elementen tonen die verschuiven.<\/p>\n Door te zien welke elementen verschuiven en bijdragen aan je Cumulative Layout Shift score, weet je precies waar je je op moet richten om de scores van je site te verbeteren.<\/p>\n Volgens het Core Web Vitals initiatief van Google is een goede Cumulative Layout Shift score 0,1 of minder<\/strong>.<\/p>\n Als je Cumulative Layout Shift score tussen 0,1 en 0,25 ligt, definieert Google dat als \u201cNeeds Improvement\u201d.<\/p>\n En als je Cumulative Layout Shift score hoger is dan 0,25, dan definieert Google dat als “Poor”.<\/p>\n Hier is een grafiek van Google’s Core Web Vitals website die deze scores visueel weergeeft:<\/p>\n Nu je begrijpt wat er gebeurt met Cumulative Layout Shift, is het tijd om over te gaan op enkele bruikbare tips over hoe je Cumulative Layout Shift in WordPress kunt verhelpen.<\/p>\n Hoewel deze tips uit een van WordPress hoek\u00a0komen, zijn ze allemaal universeel, en kun je ze ook toepassen op andere websitebuildingtools.<\/p>\n Een van de meest voorkomende oorzaken van layoutverschuiving zijn laat ladende afbeeldingen die content verplaatsen, vooral als je gebruik maakt van tactieken als lazy loading.<\/a>.<\/p>\n Om dit te voorkomen kun je de afmetingen van een afbeelding opgeven in de code wanneer je die insluit. Op die manier zal de browser van de bezoeker die ruimte reserveren, zelfs als de afbeelding nog niet geladen is, waardoor de afbeelding de content\u00a0niet hoeft te verplaatsen.<\/p>\n Als je afbeeldingen insluit via de WordPress editor (ofwel de Gutenberg blokeditor<\/a> of de klassieke TinyMCE editor<\/a>), dan hoef je niet handmatig de afmetingen van de afbeelding op te geven, omdat WordPress dit automatisch voor je doet.<\/p>\n Hetzelfde geldt voor populaire paginabuilderplugins<\/a> zoals Elementor, Divi<\/a>, Beaver Builder, enzovoort.<\/p>\n Er kunnen echter problemen ontstaan als je handmatig afbeeldingen insluit met je eigen code, wat kan gebeuren als je content\u00a0toevoegt aan een plugin, de templatebestanden van je childhema<\/a> bewerkt, enzovoort.<\/p>\n De HTML code voor het insluiten van een basisafbeelding ziet er als volgt uit:<\/p>\n Om de afmetingen te specificeren kun je height<\/strong> en width<\/strong>\u00a0parameters toevoegen. Hier is een voorbeeld van hoe dat eruit zou kunnen zien voor een afbeelding van 600x300px:<\/p>\n Veel WordPress performanceplugins<\/a> bevatten ook features\u00a0om dit te automatiseren, zoals de Add Missing Image Dimensions<\/strong> features\u00a0 in WP Rocket of Perfmatters.<\/p>\n Net als bij afbeeldingen moet je ook bij video’s, iframes en andere insluitingen de afmetingen opgeven.<\/p>\n De meeste insluitprogramma’s van websites geven automatisch afmetingen op voor de insluiting.<\/p>\n Als je bijvoorbeeld kijkt naar de insluitcode van YouTube<\/a>, dan zie je dat die afmetingen bevat:<\/p>\n Hetzelfde geldt voor veel andere diensten.<\/p>\n Als je insluitcode echter niet de hoogte en breedte aangeeft, kun je deze afmetingen handmatig toevoegen aan de insluitcode.<\/p>\n Problemen met het laden en optimaliseren van lettertypen kunnen een andere veel voorkomende bron van layoutverschuivingen zijn via twee potenti\u00eble problemen:<\/p>\n Om deze problemen te voorkomen moet je de manier waarop je lettertypen op je site laadt optimaliseren (wat ook enkele voordelen kan hebben voor de prestaties van je site).<\/p>\n Door lettertypen lokaal te hosten en vooraf te laden, vertel je de browsers van bezoekers om een hogere prioriteit te geven aan het laden van aangepaste lettertypebestanden.<\/p>\n Door lettertypebestanden v\u00f3\u00f3r andere bronnen te laden, kun je ervoor zorgen dat de lettertypebestanden al geladen zijn als de browser je content begint te renderen, wat problemen met FOUT en FOIT kan voorkomen.<\/p>\n Om te leren hoe je lettertypen lokaal kunt hosten in WordPress, kun je onze complete handleiding voor het lokaal hosten van lettertypen in WordPress<\/a> lezen.<\/p>\n Vanaf daar kun je het voorladen van lettertypen handmatig of met behulp van een plugin instellen. De meeste performanceplugins bevatten opties om lettertypen voor te laden, waaronder WP Rocket, Perfmatters, Autoptimize<\/a>, en andere.<\/p>\n Als je Google Fonts gebruikt<\/a>, kun je ook de gratis OMGF plugin<\/a> gebruiken om de lettertypen lokaal te hosten en<\/em> voor te laden.<\/p>\n Je kunt lettertypen ook handmatig preloaden door de code toe te voegen aan de <head><\/strong> sectie van je site.<\/p>\n Hier is een voorbeeld van de code – zorg ervoor dat je de code vervangt door de werkelijke naam\/locatie van het lettertypebestand dat je wilt voorladen:<\/p>\n Je kunt het direct toevoegen met een WordPress childthema<\/a> of het injecteren met de wp_head hook<\/a> en een plugin als Code Snippets<\/a>.<\/p>\n Met de CSS Font-Display property<\/a> kun je het rendergedrag van de lettertypen op je site regelen en FOIT vermijden.<\/p>\n In wezen kun je hiermee een fallback lettertype gebruiken in situaties waarin je eigen lettertype nog niet geladen is.<\/p>\n Er zijn twee hoofdopties die je kunt gebruiken om CLS aan te pakken:<\/p>\n Met Swap<\/strong> gaat de browser altijd<\/strong> over op het aangepaste lettertype zodra het geladen is.<\/p>\n Hoewel Swap<\/strong> FOIT volledig oplost, kan het leiden tot FOUT. Om dit te minimaliseren moet je ervoor zorgen dat het fallback lettertype dezelfde spati\u00ebring gebruikt als het aangepaste lettertype (in ieder geval zoveel mogelijk). Op die manier zal dat, zelfs als de letterstijl verandert, niet leiden tot layoutverschuivingen omdat de spati\u00ebring hetzelfde zal zijn.<\/p>\n Met Optional<\/strong> geeft de browser het aangepaste lettertype 100 ms om te laden. Maar als het aangepaste lettertype dan nog niet beschikbaar is, zal de browser het fallback lettertype aanhouden en het nooit veranderen in het aangepaste lettertype voor die pageview (hij zal het aangepaste lettertype gebruiken voor volgende pageviews, omdat het lettertypebestand dan waarschijnlijk al gedownload en gecached is<\/em>).<\/p>\n Optional<\/strong> kan zowel FOIT als FOUT oplossen, maar het nadeel is dat de bezoeker voor zijn eerste pageview vastzit aan het fallback lettertype.<\/p>\n Als je vertrouwd bent met het werken met CSS, kun je de property Font-Display in het stylesheet van je childthema handmatig bewerken.<\/p>\n Als je je daar niet prettig bij voelt, kun je ook enkele plugins vinden die je kunnen helpen:<\/p>\n Als je Elementor gebruikt<\/a>, bevat Elementor ook een ingebouwde optie om dit te doen. Ga naar Elementor \u2192 Settings \u2192 Advanced<\/strong>. Je kunt dan de Google Fonts Load<\/strong> dropdown gelijk zetten aan Swap of Optional, afhankelijk van je voorkeuren:<\/p>\n Als al dit gepraat over preloading en Font-Display een beetje verwarrend is, is een eenvoudige oplossing om gewoon een systeemlettertype te gebruiken in plaats van een custom font stack.<\/p>\n Hoewel dit je ontwerpmogelijkheden beperkt, lost het problemen met Cumulative Layout Shift fonts, FOIT en FOUT volledig op. Bovendien laadt je site dan veel sneller.<\/p>\n Als je hierin ge\u00efnteresseerd bent, bekijk dan Brian’s handleiding voor het gebruik van een systeemlettertype op WordPress<\/a>.<\/p>\n Als je displayadvertenties gebruikt, is het belangrijk dat je in de code van je site ruimte reserveert voor die advertenties. Dit volgt hetzelfde idee als het reserveren van ruimte voor afbeeldingen, video’s en embeds.<\/p>\n Displayadvertenties verdienen echter een speciale vermelding omdat het heel gebruikelijk is dat displayadvertenties laat laden als je een of andere biedingstechnologie gebruikt. Dit komt omdat de biedingstechnologie tijd nodig heeft om te werken en uit te zoeken welke advertentie getoond moet worden.<\/p>\n Het kan ook een probleem zijn met AdSense auto-advertenties<\/a> als je dynamische advertentieslots hebt, omdat AdSense, naast het biedingsprobleem, ook advertenties van verschillende grootte<\/a> laadt (zodat je de grootte van de advertentie misschien niet van tevoren weet).<\/p>\n Als je een van de populaire displayadvertentienetwerken<\/a> gebruikt, zoals Mediavine of AdThrive, dan zouden die al tools moeten bieden om layoutverschuivingen van je advertenties te voorkomen. Als je bijvoorbeeld het gebied Ad Settings<\/strong> van Mediavine opent, kun je een toggle inschakelen voor Optimize Ads for CLS<\/strong>:<\/p>\n Om AdSense te optimaliseren voor Cumulative Layout Shift is het iets lastiger.<\/p>\n Een gebruikelijke oplossing is het toevoegen van een <div> wrapper element rond elke advertentie eenheid die een minimale hoogte specificeert met behulp van de min-height <\/strong>CSS property<\/a>. Je kunt ook mediaqueries gebruiken om de minimale hoogte te veranderen op basis van het apparaat van de gebruiker.<\/p>\n Google raadt aan om de min-hoogte gelijk te stellen aan de grootst mogelijke advertentiegrootte. Hoewel dit kan leiden tot ruimteverspilling als een kleinere advertentie wordt getoond, is het de beste optie om elke kans op een layoutverschuiving uit te sluiten.<\/p>\n Zorg er bij het instellen van dit wrapper element voor dat je een CSS ID gebruikt in plaats van een klasse<\/a>, omdat AdSense vaak de CSS klasse van ouderobjecten verwijdert.<\/p>\n Zo zou de CSS eruit kunnen zien:<\/p>\n En dan hier hoe de AdSense embed er uit zou kunnen zien:<\/p>\n Op de frontend zie je nu dat je site ruimte reserveert voor die advertentie, zelfs als die leeg is:<\/p>\n Veel WordPress sites injecteren dynamisch content voor functies als cookietoestemmingen, gerelateerde content, e-mail opt-informulieren<\/a>, enzovoort.<\/p>\n Hoewel dit prima te doen is, moet je oppassen dat je dit niet doet op een manier die layoutverschuivingen veroorzaakt.<\/p>\n Een goede webontwerp best practice<\/a> is hier om nooit content te injecteren boven<\/em> bestaande content, tenzij de gebruiker specifiek een interactie uitvoert (bijvoorbeeld door op een knop te klikken).<\/p>\n Als je bijvoorbeeld een mededeling over cookietoestemming toevoegt<\/a>, wil je die niet bovenaan je pagina plaatsen, omdat dan de content naar beneden wordt gedrukt (tenzij je al ruimte hebt gereserveerd voor de banner met cookietoestemming<\/em>).<\/p>\n In plaats daarvan moet je de mededeling onderaan de pagina plaatsen, zodat zichtbare content niet naar beneden wordt geschoven.<\/p>\n Om te zien of dynamische content het probleem veroorzaakt, kun je de visualisatiehulpmiddelen van hierboven gebruiken (bijv. Layout Shift GIF Generator<\/a>).<\/p>\n Als je ziet dat content van een specifieke plugin layoutverschuivingen veroorzaakt, kun je overwegen de instellingen van die plugin aan te passen of over te schakelen op een andere plugin.<\/p>\n Sommige cookie-goedkeuringsplugins zijn bijvoorbeeld beter dan andere als het gaat om layoutverschuivingen, dus het is de moeite waard om te experimenteren met verschillende plugins als je problemen hebt.<\/p>\n Als je nog dieper wilt ingaan in het gedrag van de plugin, kun je een tool voor het monitoren van de prestaties van applicaties gebruiken<\/a>. Als je host met Kinsta, is Kinsta’s APM tool<\/a> gratis beschikbaar in je MyKinsta dashboard<\/a>, of je kunt andere APM tools<\/a> vinden.<\/p>\n Om je te helpen plugins te testen, kun je ook de testsites van Kinsta<\/a> of de DevKinsta lokale ontwikkeltool<\/a> gebruiken.<\/p>\n Als je animaties op je site gebruikt, kunnen deze een andere veel voorkomende boosdoener zijn voor layoutverschuivingen.<\/p>\n Om problemen te voorkomen met animaties die layoutverschuivingen veroorzaken, moet je voor animaties de CSS Transform functie<\/a> gebruiken in plaats van andere tactieken:<\/p>\n Dit is meer een technische tip, dus het is onwaarschijnlijk dat je dit hoeft te doen, tenzij je je eigen CSS toevoegt. Voor meer informatie kun je Google’s pagina over CLS en animaties\/overgangen<\/a> lezen.<\/p>\n\n Als je website een hoge Cumulative Layout Shift score heeft, is het belangrijk om dit op te lossen, zowel om een betere ervaring te cre\u00ebren voor je menselijke bezoekers als om de prestaties van je site in de zoekresultaten van Google te maximaliseren.<\/p>\n Twee van de meest voorkomende problemen zijn ontbrekende afmetingen voor afbeeldingen\/insluitingen en problemen met het laden van lettertypen. Als je die oplost, zou je op weg moeten zijn naar een veel betere score.<\/p>\n Andere sites moeten misschien verder gaan en zich verdiepen in het laden van advertenties, dynamische content en animaties. Als je moeite hebt met het zelf uitvoeren van dit soort optimalisaties, kun je overwegen samen te werken met een WordPress bureau<\/a> of freelancer.<\/p>\n Voor meer informatie over Core Web Vitals in het algemeen kun je de volledige Kinsta handleiding voor Core Web Vitals lezen<\/a>.<\/p>\n En als je een WordPress host wilt die je kan helpen een goed presterende site te maken<\/a> die het goed doet in Core Web Vitals, overweeg dan het gebruik van Kinsta’s managed WordPress hosting<\/a> – we migreren je WordPress sites gratis<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":" Problemen met de Cumulative Layout Shift op je website? Of weet je niet zeker wat Cumulative Layout Shift betekent? Cumulative Layout Shift, afgekort CLS, is een …<\/p>\n","protected":false},"author":199,"featured_media":49134,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[877,872],"class_list":["post-49133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-gebruikerservaring","topic-seo-strategie"],"yoast_head":"\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-example-1024x749.jpg\")
Waarom is Cumulative Layout Shift slecht?<\/h2>\n
Wat veroorzaakt Cumulative Layout Shift?<\/h2>\n
\n
Zo meet je Cumulative Layout Shift: beste testtools<\/h2>\n
PageSpeed Insights<\/h3>\n
\n
![\"Cumulative](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pagespeed-insights-cls-1024x960.jpg\")
Chrome Developer Tool<\/h3>\n
\n
![\"Zo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-1-1024x763.jpg\")
\n
![\"Zo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-2-enable-rendering-report-1024x580.jpg\")
Google Search Console<\/h3>\n
\n
![\"Het](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-1024x696.jpg\")
![\"Zo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-list-1024x982.jpg\")
Layout Shift GIF Generator<\/h3>\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/layout-shift-gif-generator-1024x724.jpg\")
Wat is een goede Cumulative Layout Shift score?<\/h2>\n
![\"Google's](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-scores-1024x252.jpg\")
Zo los je Cumulative Layout Shift in WordPress (of andere platforms) op<\/h2>\n
Geef altijd afmetingen op voor afbeeldingen<\/h3>\n
<img src=\"https:\/\/kinsta.com\/example-image.jpg\" alt=\"An example image\"><\/code><\/p>\n<img src=\"https:\/\/kinsta.com\/example-image.jpg\" alt=\"An example image\" width=\"600\" height=\"300\"<\/strong>><\/code><\/p>\nGeef altijd afmetingen op voor video’s, iframes en andere insluitingen<\/h3>\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/youtube-embed-code-1024x605.jpg\")
Herstel en optimaliseer het laden van lettertypen<\/h3>\n
\n
Lettertypen lokaal hosten en vooraf laden<\/h4>\n
<link rel=\"preload\" href=\"https:\/\/kinsta.com\/fonts\/roboto.woff2\" as=\"font\/woff2\" crossorigin><\/code><\/p>\nFont-Display op Optional of Swapp zetten<\/h4>\n
\n
\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/elementor-font-display-1024x796.jpg\")
Te complex? Overweeg een systeemlettertype!<\/h4>\n
Reserveer ruimte voor advertenties (als je displayadvertenties gebruikt)<\/h3>\n
![\"Mediavine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/optimize-mediavine-ads-cls-1024x597.jpg\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-1024x775.jpg\")
![\"Wrap](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-embed-code-1024x703.jpg\")
![\"Je](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-frontend-example-1024x611.jpg\")
Wees slim bij het dynamisch injecteren van content met plugins<\/h3>\n
Gebruik waar mogelijk de CSS Transform property voor animaties<\/h3>\n
\n
Samenvatting<\/h2>\n