HTML Size and Resource Reference Checker
Measure the returned HTML document and inventory the scripts, stylesheets, images, fonts, iframes, videos, and other references found in source. Use it to spot bloated templates before deeper browser-based testing.
Check HTML Size and Resource References
About the HTML Size and Resource Reference Checker
This tool fetches any public webpage and reviews the returned HTML document size plus the resource references visible in source. It is designed to help you diagnose heavy templates, markup bloat, and asset sprawl before you move on to browser waterfalls, Core Web Vitals testing, or runtime profiling.
Privacy note:This server-side check fetches only the public URL you enter. It does not download every asset file and does not use private Search Console, Analytics, ranking, or backlink data.
HTML Source Size
Measures the returned HTML document size with category assessment (Excellent, Good, Fair, or Large).
Referenced Image Count
Counts image references found in the returned HTML and flags pages that may need image review.
CSS & JS References
Counts external files and inline blocks referenced in source, including defer/async attributes on scripts.
Why HTML Size and Resource References Matter
These checks help you diagnose templates that may be heavier or more complex than they need to be:
- Browser performance — Heavier HTML and many referenced assets can make it harder to deliver strong LCP, INP, and CLS results in real browser tests, even though this tool does not measure those metrics directly.
- Crawl efficiency — Bloated templates can waste crawler time and make large sites harder to recrawl efficiently.
- Page load behavior — Large HTML documents take longer to download and parse, and many referenced resources usually mean more requests and more browser work.
What Affects Page Size?
| Resource | Typical Impact | Optimization Strategy |
|---|---|---|
| Images | Referenced image count in returned HTML | Confirm transfer size in DevTools, then use WebP/AVIF, lazy loading, and responsive sizes where appropriate |
| JavaScript | External and inline script references found in source | Confirm runtime cost, then defer/async, code split, or remove unused code |
| CSS | Stylesheet references and inline style blocks found in source | Minify, inline only critical CSS, and remove unused rules after coverage testing |
| Fonts | Preloaded or Google Font references visible in source | Subset, self-host when useful, and use font-display: swap |
| Third-party code | Referenced third-party scripts, frames, or resources visible in source | Audit regularly and replace heavy widgets with lightweight alternatives when confirmed |
Best Practices for Optimal Page Size
- Keep HTML under 100KB — Minify HTML, remove unnecessary comments and whitespace.
- Use next-gen image formats — WebP and AVIF often reduce image transfer size compared with JPEG, but confirm savings on your own images.
- Lazy load everything below the fold — Use
loading="lazy"on images, iframes, and videos. - Bundle and minify CSS/JS — Consolidate files and minimize their size.
- Use defer for non-critical JS — Move render-blocking scripts to load after the page renders.
- Limit web fonts — No more than 2-3 font families with font-display: swap.
- Remove unused CSS and JS — Use browser coverage tools or bundle analysis to confirm what can be trimmed.
- Enable compression — Gzip or Brotli compress HTML, CSS, and JS by 60-80%.
Frequently Asked Questions
What counts toward this tool's size check?
This tool measures the returned HTML document and counts resource references it finds in the source code: images, CSS, JavaScript, fonts, iframes, videos, and similar assets. It does not download every referenced file to measure its byte size, so use browser DevTools or a waterfall tool when you need full network weight.
What is a good page size?
Smaller HTML documents load faster across all connection types, especially on mobile. The HTML document itself should be as lightweight as practical. The total number of referenced resources also affects how many round trips the browser needs.
Does this tool measure the actual file sizes of individual resources?
It counts resources referenced in the HTML (images, scripts, stylesheets) and reports the HTML document size fetched via our server. For precise individual file sizes and loading waterfalls, use browser DevTools (Network tab) or tools like PageSpeed Insights, Lighthouse, or WebPageTest.
How does page size affect page load speed?
Larger HTML documents take longer to download and parse. The browser must process the HTML before discovering and fetching external resources. Reducing HTML size and resource references can help pages load faster. This tool measures only the HTML document and counts referenced resources — it does not measure actual transfer sizes, caching behavior, HTTP/2 multiplexing, or real browser paint times.
What is the biggest contributor to page bloat?
On many pages, images and third-party scripts are major contributors to total page weight. This checker can show how many image, script, font, and iframe references appear in the HTML, but it does not fetch each resource to measure exact bytes. Use it to spot likely bloat, then confirm with browser-based network tools.
How many CSS and JS files is too many?
The impact of CSS and JS file count depends on your server configuration. HTTP/2 and HTTP/3 multiplex requests, reducing the overhead of multiple files. What matters more is total transfer size, critical-path blocking, and execution cost. This tool reports how many external resources are referenced in the HTML — it cannot measure actual transfer sizes, whether files are cached, or whether they block rendering. Use browser DevTools or PageSpeed Insights for request-level analysis.
What is the impact of inline scripts vs external JavaScript?
Inline scripts add weight directly to the HTML document and may execute during parsing depending on where they are placed. External files can often be cached and loaded with async or defer. This tool counts inline script blocks and external references, but it does not profile execution cost or render blocking in a real browser.
How do web fonts affect page size and performance?
Web fonts can add 100-500KB+ to page weight, especially when multiple weights and styles are loaded. They also cause invisible text (FOIT) or flash of unstyled text (FOUT) while loading. Use font-display: swap, subset fonts to include only needed characters, self-host instead of using Google Fonts, and limit to 2-3 font families with no more than 3-4 weight variants total.
Should I be concerned about iframes and videos?
Each iframe loads a separate HTML document (including its own CSS, JS, images, and fonts), potentially increasing page weight. Embedded videos may add significant weight depending on the player and poster image. Use lazy loading (loading="lazy") on both iframes and videos, and consider replacing autoplay videos with static poster images that load the player only on user interaction.
How does page size affect mobile usability?
Heavier HTML and many resource references usually feel worse on slower connections and lower-power devices. This checker helps you spot templates that may need cleanup, but it does not measure mobile rankings, Core Web Vitals, or real-user performance. Pair it with browser testing and Search Console data when you need those answers.