A slow first paint you cannot explain
A large inline script or a data URI in the head delays everything after it, and never shows up as a network request.
HTML Weight Breakdown MEMBERS
See exactly what your HTML document is made of. Splits the page into markup, inline scripts, inline CSS, embedded SVG and data URIs, and names the biggest blocks.
Members only
Privacy-first
Sign in required. The page is fetched once and never stored. Sign in to use this tool
This tool is available to POLPROG members. Sign in to your account to start, or create one in under a minute.
- Secure access
- Account in under a minute
Use cases
When to break a document down
Knowing a page is heavy is not actionable. Knowing what makes it heavy is.
After adding a framework or a widget
Inlined state, hydration payloads and embedded SVG accumulate quietly between releases.
Setting a document budget
A composition breakdown turns an abstract size target into a named list of blocks to cut.
Scope and limits
Measured bytes, clearly labelled
The three sizes this tool reports mean different things, and it never merges them.
The page is read as data, never executed
The document is fetched once and parsed as text and markup. No script from the page is run, no subresource is loaded, and the analysis covers the HTML document alone: linked JavaScript, CSS, fonts and images are not part of these figures. Raw bytes, the compressed transfer size and the inline payload inside the document are reported separately, because quoting one as another is the most common mistake in this area.
Help
FAQ
What the breakdown tends to raise.
Why is the transferred size so much smaller than the raw size?
Because the server compressed it. Raw bytes are what the browser parses; transferred bytes are what crossed the network. Both matter, for different reasons: compression helps the download, not the parse.
Does this include my JavaScript and CSS files?
Only if they are inline. Linked files are separate requests with their own weight, and they are deliberately outside this figure so the document total stays meaningful.
Is a deep DOM actually a problem?
Not on its own. It becomes one when style recalculation and layout have to walk it repeatedly. The depth histogram is there so you can see whether the depth is a handful of outliers or the whole document.
Why is this tool members only?
It fetches an arbitrary URL from our servers and reports on it in detail, so it is kept behind an account to keep that capability accountable and rate limited.
Website Performance and Core Web Vitals: Why They Matter for Business
Performance is not only a technical topic. Slow pages cost leads, harm SEO, and erode trust, and the things that fix them are usually small, specific, and boringly consistent.
Read article
Moment.js vs date-fns: Best Date Library for Modern Apps
Moment.js was once the default date library for JavaScript applications, but modern frontend stacks usually need smaller, more modular, and more tree-shakeable tools. date-fns provides date utilities as independent functions, which makes it a better fit for many modern apps. The decision is usually straightforward for new projects: Moment.js may remain in legacy code, but date-fns is often a better choice for new development.
Read article
Lodash vs es-toolkit: Modern Utility Library Comparison
Lodash is one of the most widely used utility libraries in the JavaScript ecosystem, especially in older and enterprise codebases. es-toolkit is a modern alternative built around TypeScript, ES modules, tree-shaking, and smaller bundles. The question is not whether Lodash still works. It does. The better question is whether your project still needs the weight and legacy patterns that come with it, or whether a leaner, type-first option fits your stack better in 2026.
Read article