# HTML size (performance)

> HTML size is the weight of a page's HTML document in kilobytes. The browser has to download and parse all of it before it can show the page.

- **Check ID:** P2
- **Area:** [Performance](https://be1st.ai/glossary/performance)
- **Tool:** [SEO + Security + Performance](https://be1st.ai/tools/ssp-audit)
- **Page:** https://be1st.ai/glossary/performance/html-size

## Why it matters

Large HTML slows down loading because the browser must download and parse the entire document before it can begin rendering. On mobile networks this is even more pronounced. Smaller HTML also reduces data consumption for users and speeds up DOM parsing.

## In practice

The Google homepage has HTML under 50 KB, enabling lightning-fast loading. Shopify optimizes their templates' HTML to a minimum. If your blog generates 500 KB of HTML due to inline CSS and unnecessary attributes, loading on a 3G network can take up to 5 seconds.

## How be1st checks it

Checks the size of the page's HTML document. The ideal size is under 100 KB (100-500 KB is a warning). Large HTML documents slow down parsing and increase the time to first render. Excessively large HTML often results from inline styles, inline scripts, or duplicated content.

[SEO + Security + Performance](https://be1st.ai/tools/ssp-audit), Performance tab.

Every check ends as: Pass, Warning, Fail.

## Sources

- [Optimize the encoding and transfer size of text-based assets](https://web.dev/articles/optimizing-content-efficiency-optimize-encoding-and-transfer) (web.dev)
- [Avoid enormous network payloads](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight) (Chrome for Developers)
- [Web Performance](https://developer.mozilla.org/en-US/docs/Web/Performance) (MDN Web Docs)

## Related terms

- [HTML size (SEO)](https://be1st.ai/glossary/seo/html-size): HTML size is the weight of a page's HTML document in kilobytes, without images, styles and scripts. Search engines and browsers have to download and parse all of it.
- [Inline CSS](https://be1st.ai/glossary/performance/inline-css): Inline CSS is styling written directly in the HTML, in `<style>` blocks or style attributes, instead of in a separate stylesheet file.
- [External resources](https://be1st.ai/glossary/performance/external-resources): External resources are the separate script and stylesheet files a page loads. Each one is another download that can delay rendering.
- [Inline JS](https://be1st.ai/glossary/performance/inline-js): Inline JavaScript is code written directly in the HTML inside `<script>` tags, instead of in a separate file the browser can cache.
- [Image optimization](https://be1st.ai/glossary/performance/image-optimization): Image optimization means serving images in the right size and format and loading the ones below the fold only when they are needed.
- [Total page weight](https://be1st.ai/glossary/performance/total-page-weight): Total page weight is the combined size of everything a page downloads: HTML, CSS, JavaScript, images and fonts.