Inline CSS/JS size
Measures the total size of inline style and script blocks.
Why does this matter?
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.
How to fix it?
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.
This check scores from 0 to 100. Below 50 is a fail, 50 to 89 is a warning, 90 or above is good. After each crawl you see the score per page in your report, with a short note on what we found.
Frequently asked questions
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.
Example
Copy the code below and adapt the domain name, brand name and content to your situation.
<!-- 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>