Good text-to-HTML ratio
At least 25% of your page's raw size should be actual content text, not markup.
What the ratio measures
The text-to-HTML ratio is the proportion of your page that is actual readable text versus HTML markup, inline CSS, and inline JavaScript. A ratio below 25% means the page is mostly scaffolding with a little content stuck on top.
Content-dense pages score above 30%. Text-heavy blog posts can hit 40% or more. Single-page React apps often score below 5% because all the content is in JavaScript rather than HTML.
How to improve the ratio
- — Move inline styles to external CSS files.
- — Move inline scripts to external JavaScript files.
- — Render content server-side so it appears in the HTML.
- — Remove unused CSS and JS from the critical path.
- — Replace div soup with semantic HTML elements.