Performance

Inline CSS/JS size

Measures the total size of inline style and script blocks.

Vérifier votre site gratuitement

Pourquoi est-ce important ?

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.

Comment le corriger ?

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.

Ce check note de 0 à 100. Sous 50 c’est un échec, 50 à 89 un avertissement, 90 ou plus c’est bon. Après chaque crawl vous voyez la note par page dans le rapport, avec une courte explication.

Questions fréquentes

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.

Exemple

Copiez le code ci-dessous et adaptez le nom de domaine, la marque et le contenu à votre 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>
Defer/async scripts Cache headers
Essai gratuit