HTML Size Analyzer

Visible text

What is it? All the text visitors read on screen: headings, paragraphs, menu items, button and link text, and the page title.

Why does it matter? This is where the page's real value lies; search engines understand the content from this text. A large share for this group is usually not a problem.

What to do

• This is your page's actual content; don't try to shrink it. This is the part that delivers value to visitors and to Google.
• If the same menu or text is written twice, once for mobile and once for desktop, with one copy hidden, reduce it to a single copy.
• Remove long texts that are never shown on the page (hidden); search engines don't value hidden text.

Whitespace and indentation

What is it? Spaces, tabs and line breaks between tags. They make the code readable for humans; the browser doesn't display them.

Why does it matter? These are unnecessary bytes, but because compression (gzip/Brotli) shrinks repeated whitespace very well, the impact over the network is usually small.

What to do

• Minify the HTML you publish: whitespace and line breaks are removed automatically. In WordPress, the “minify HTML” setting of caching plugins does this; on other platforms, your build tool's minify option does.
• Check that compression (gzip, or better, Brotli) is enabled on the server; whitespace already shrinks a lot over the network.
• Keep writing readable code during development; minification is applied only to the published copy.

HTML tags

What is it? The tag names and angle brackets that make up the page's structure, such as <div>, <section>, <a> and </p>. The document type declaration (<!DOCTYPE>) is counted here too.

Why does it matter? If it's very high, the page may have unnecessary nested layers (“div soup”). Every tag becomes an element in the browser, and the more elements there are, the slower the page.

What to do

• If your theme or page builder wraps every element in several layers of <div>, choose a leaner theme or component structure.
• Load long lists (products, reviews, news) with pagination or a “show more” button instead of all at once.
• Try to keep the number of elements on the page (DOM size) under 1,500. The more elements there are, the slower the page renders and the slower it responds to clicks (INP).

class attributes

What is it? The class="…" values added to tags. These names determine how CSS styles each element.

Why does it matter? On sites using utility-first CSS (e.g. Tailwind) it can take up a lot of space. Because the same names repeat so often, compression shrinks it considerably.

What to do

• If you use tools like Tailwind, gather long repeated class lists into shared component classes.
• Make sure your build tool purges unused CSS classes.
• Compression shrinks this area a lot: if its share is small in the “Compressed” view, it's a low priority.

Link and resource URLs

What is it? The addresses of links (href) and resources such as images and scripts (src, srcset).

Why does it matter? Long URLs with parameters and large numbers of links make this group bigger. Every image size in a srcset is written as a separate URL.

What to do

• Use short (relative) URLs instead of full ones for internal links: /category/ instead of https://www.yoursite.com/category/.
• Remove tracking parameters (such as ?utm_source=…) from internal links. They add size and make the same page appear under multiple addresses.
• Remove unused sizes from your images' srcset lists; 3–4 sizes are enough for most pages.
• If a card has several links to the same target (image, title, “read more”), reduce them to a single link.

Other attributes

What is it? Other fields that add information to tags: id, alt, title, aria-*, data-*, width/height and the content values of meta tags.

Why does it matter? alt and aria-* are needed for accessibility. However, long data-* values added by frameworks and repeated attributes can create bloat.

What to do

• Clean up unused data-* attributes left by plugins and frameworks.
• Leave alt and aria-* attributes alone; they're needed for accessibility and image search.
• Keep the width and height values on images; they prevent layout shifts (CLS) while the page loads.

Inline CSS

What is it? Style code written directly into the HTML: <style> tags and style="…" attributes written on individual elements.

Why does it matter? Inlining the (critical) CSS needed for the first visible part of the screen helps the page render quickly. But if all of the site's CSS is embedded in the HTML, it's downloaded again on every page and can't be cached.

What to do

• Keep only the CSS needed for the first visible part of the screen (critical CSS) in the HTML.
• Move the rest of the styles to an external .css file; the browser caches it and doesn't download it again on subsequent pages.
• Turn style="…" values written on individual elements into shared classes.

Inline JavaScript

What is it? JavaScript written directly into the HTML: <script> tags without src and event attributes such as onclick.

Why does it matter? External .js files are cached, but inline code is downloaded again on every page view. Large inline scripts keep the browser busy while the page loads.

What to do

• Move large code into an external .js file loaded with defer; it gets cached and doesn't hold up the page load.
• Review your analytics, advertising and live chat code and remove what you don't use. Old tags piling up in Google Tag Manager are a common source of bloat.
• Check whether the same configuration code is repeated several times on the page.

JSON / page state (hydration)

What is it? Data that modern JavaScript frameworks embed in the HTML to “bring the page to life” in the browser (hydration), such as __NEXT_DATA__ or window.__INITIAL_STATE__.

Why does it matter? It's often a second copy of content already visible on the page; if it's large, the page is effectively shipped twice. Because it downloads at the same high priority as the HTML, it delays other resources.

What to do

• Send only the data the page actually uses: if a list shows 5 fields, don't send 50.
• Paginate long lists or load them on demand.
• Server components in Next.js and Nuxt, and partial hydration in frameworks like Astro, greatly reduce this data.

Structured data (JSON-LD)

What is it? <script type="application/ld+json"> blocks that describe the page and the brand to search engines in machine-readable form.

Why does it matter? It's valuable for SEO and usually small. If it's very large, the same data may be repeated several times, or content that isn't visible on the page may be marked up.

What to do

• Don't remove structured data; it's valuable for rich results and AI search. Simplify it instead.
• Combine separate blocks into a single @graph block; write definitions such as Organization and WebSite once and link them with @id. The Schema Generator produces code in this structure.
• Don't mark up content that isn't visible on the page (e.g. your entire product catalog).

Inline SVG

What is it? Vector graphics written directly into the HTML: icons, logos, illustrations.

Why does it matter? It's ideal for small icons (no extra request needed). But if the same icon is repeated dozens of times, or complex illustrations are embedded, the HTML grows quickly.

What to do

• If the same icon is used many times on the page, define it once as a <symbol> and reference it everywhere with <use>.
• Load large drawings and illustrations as .svg files with <img>; the browser caches them.
• Optimize SVGs with a tool like SVGO to remove unnecessary code left by design programs.

Embedded files (base64)

What is it? Images or fonts converted to text (base64) and written directly into the HTML, such as data:image/png;base64,….

Why does it matter? The file grows by about a third, can't be cached, barely shrinks with compression, and because it downloads at the same high priority as the HTML, it delays the actual content.

What to do

• Load embedded images and fonts larger than 1–2 KB as separate files; they get cached and don't delay the page's first load.
• Load fonts as .woff2 files instead of base64.
• Keep placeholder images used for lazy loading very small, or use a plain background color instead.

HTML comments

What is it? Notes written between <!-- and --> that the browser ignores completely.

Why does it matter? They're of no use to visitors and sometimes expose internal system details (server names, versions, team notes) to everyone.

What to do

• Enable a minify setting that automatically strips HTML comments in production.
• If comments contain server names, versions or team notes, remove them right away; anyone can see them.

Other

What is it? Content that doesn't fit the groups above: <noscript> blocks, script templates (text/template), CDATA sections.

Why does it matter? It's usually small. Tracking pixels inside <noscript> and large templates may need attention.

What to do

• Remove unused <noscript> blocks and old tracking pixels.
• Clean up templates (text/template) that the page doesn't use.

Raw size (uncompressed)

The actual length of the source code. This value determines how much text the browser has to process, and it's what Googlebot's 2 MB limit applies to.

Compressed size

The size the server sends after shrinking it with gzip or Brotli; this determines the download time. Repetitive text compresses very well, while random-looking data such as base64 barely compresses at all.

gzip and Brotli

The web's two common compression methods. Brotli is newer and usually produces 15–20% smaller HTML. All current browsers support both.

DOM

The element tree the browser builds from the HTML. Every tag becomes an element; as the number of elements grows, so do style calculation, memory use and response time to clicks.

Hydration

Making a server-rendered page interactive in the browser with JavaScript. The data this needs is often embedded in the HTML as JSON.

base64

An encoding that turns files such as images or fonts into text. It makes the file about a third larger.

#text (technical breakdown)

The text directly inside a tag plus the tag itself (<p> and </p>). Attributes are counted separately on their own rows.