Inline CSS/JS size
Measures the total size of inline style and script blocks.
Warum ist das wichtig?
Large amounts of inline CSS/JS cannot be cached by the browser, are resent with every page request and increase HTML file size. This increases load time and slows down Time To Interactive.
Wie beheben Sie es?
Move repeated inline styles to external CSS files. Move inline scripts to external JS files with defer. Small critical CSS that determines above-the-fold styling may remain inline.
Dieser Check bewertet von 0 bis 100. Unter 50 ist ein Fail, 50 bis 89 eine Warnung, 90 oder höher ist gut. Nach jedem Crawl sehen Sie die Note pro Seite im Report, mit einer kurzen Erklärung.
Häufige Fragen
Measures the total size of inline style and script blocks.
Large amounts of inline CSS/JS cannot be cached by the browser, are resent with every page request and increase HTML file size. This increases load time and slows down Time To Interactive.
Move repeated inline styles to external CSS files. Move inline scripts to external JS files with defer. Small critical CSS that determines above-the-fold styling may remain inline.
Beispiel
Kopieren Sie den Code unten und passen Sie Domain, Markenname und Inhalt an Ihre Situation an.
<!-- Critical above-the-fold CSS inline (max. ~5 KB) -->
<style>
/* Only styles for the immediately visible 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>
<!-- All other CSS loaded externally (cached by browser) -->
<link rel="stylesheet" href="/build/assets/app.css">
<!-- Scripts always external + defer -->
<script src="/build/assets/app.js" defer></script>