Inline CSS/JS size
Measures the total size of inline style and script blocks.
¿Por qué importa esto?
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.
¿Cómo se soluciona?
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.
Este check puntúa de 0 a 100. Bajo 50 es un fallo, 50 a 89 un aviso, 90 o más es bueno. Tras cada crawl ve la nota por página en el informe, con una breve explicación.
Preguntas frecuentes
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.
Ejemplo
Copie el código de abajo y adapte el dominio, la marca y el contenido a su situación.
<!-- 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>