A Practical HTML Performance Checklist
Reduce render-blocking work, prioritize the first viewport, and ship a smaller page before reaching for complex tooling.
The short version
The fastest resource is the one the page does not need.
Make the first HTML response useful
Put meaningful content in the server response instead of waiting for JavaScript to construct the page. Keep the DOM proportional to the interface, remove invisible duplicate layouts, and avoid shipping components that never appear.
Inline only the tiny amount of critical CSS that earns its place. A giant inline stylesheet makes the HTML heavy and prevents the browser from caching it separately.
Load scripts with intent
Use defer for classic scripts that can run after parsing. Module scripts defer by default. Third-party analytics, chat, and widgets should be reviewed like product dependencies because they compete with the page for network and main-thread time.
<link rel="stylesheet" href="/app.css">
<script type="module" src="/app.js"></script>
<!-- Connect early only when the origin is truly critical. -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin>Prioritize the visible experience
A checklist is not a score-chasing exercise. Focus on the delay a real reader feels: when the main content appears, when it stops moving, and when the primary action responds.
- Do not lazy-load the likely largest image in the first viewport.
- Set image dimensions to reduce layout shifts.
- Subset and preload only the font files used immediately.
- Delay low-value embeds until the reader asks for them.
- Measure on a slower device and network, not only a fast laptop.