Exploring Large HTML Documents on the Web
8 days ago
- #web performance
- #embedded resources
- #HTML optimization
- Matt Zeunert is the founder of DebugBear, a web performance monitoring tool.
- Large HTML documents often contain embedded resources like images, CSS, and fonts, rather than a lot of content.
- Base64 encoding allows images to be embedded in HTML or CSS, eliminating separate requests but causing caching and prioritization issues.
- Inline CSS can significantly increase HTML size, especially with long selectors, though compression can mitigate this.
- Embedded fonts in HTML can delay content rendering until fonts are fully downloaded.
- Client-side application state embedded in HTML for hydration can become large, especially with extensive data or embedded images.
- Examples of large HTML include inline scripts, metadata from tools like Figma, and megamenus with thousands of items.
- HTML size impacts page speed by increasing download and parse times, with high priority given to HTML content.
- Large HTML files can still result in fast page loads, but they may slow down rendering, especially on slower connections or devices.
- Quick fixes and guardrails in CI builds can help manage HTML size and embedded resources effectively.