Inline CSS/JS omvang
Meet de totale omvang van inline stijl- en scriptblokken.
Waarom is dit belangrijk?
Grote hoeveelheden inline CSS/JS kunnen niet gecached worden door de browser, worden bij elk paginaverzoek opnieuw verstuurd en vergroten de HTML-bestandsgrootte. Dit verhoogt de laadtijd en vertraagt de Time To Interactive.
Hoe los je het op?
Verplaats herhaalde inline stijlen naar externe CSS-bestanden. Verplaats inline scripts naar externe JS-bestanden met defer. Kleine kritieke CSS die above-the-fold styling bepaalt mag wel inline staan.
Deze check scoort van 0 tot 100. Onder de 50 is een fail, 50 tot 89 een waarschuwing, 90 of hoger is goed. Na elke crawl zie je de score per pagina in je rapport, met een korte uitleg wat we vonden.
Veelgestelde vragen
Meet de totale omvang van inline stijl- en scriptblokken.
Grote hoeveelheden inline CSS/JS kunnen niet gecached worden door de browser, worden bij elk paginaverzoek opnieuw verstuurd en vergroten de HTML-bestandsgrootte. Dit verhoogt de laadtijd en vertraagt de Time To Interactive.
Verplaats herhaalde inline stijlen naar externe CSS-bestanden. Verplaats inline scripts naar externe JS-bestanden met defer. Kleine kritieke CSS die above-the-fold styling bepaalt mag wel inline staan.
Voorbeeld
Kopieer de code hieronder en pas de domeinnaam, merknaam en inhoud aan naar jouw situatie.
<!-- Kritieke above-the-fold CSS inline (max. ~5 KB) -->
<style>
/* Alleen stijlen voor de direct zichtbare viewport */
body { font-family: Inter, sans-serif; margin: 0; }
.hero { background: #1e40af; color: white; padding: 4rem 2rem; }
.hero h1 { font-size: 2.5rem; font-weight: 800; }
</style>
<!-- Alle overige CSS extern laden (gecachet door browser) -->
<link rel="stylesheet" href="/build/assets/app.css">
<!-- Scripts altijd extern + defer -->
<script src="/build/assets/app.js" defer></script>