How to Check Website Page Size: HTML, Images, Scripts & Fonts
Learn what a website page-size estimate includes, how to find heavy images and scripts, and how to verify the full transfer size in browser DevTools.
A website can feel slow even when its HTML file is small. The browser may also need to download images, stylesheets, fonts, scripts, and other resources. To find the main contributors, start with a page-size estimate, then confirm what a real browser downloads.
Use the UtilVox Page Size Checker for a quick first look at a public URL. This guide explains how to read its estimate and how to measure a complete page load in Chrome.
What “page size” means
Page size can refer to different measurements. The HTML document has its own response size. A page load also requests supporting resources, and the browser’s transfer size can differ from the files’ decoded sizes because of compression, caching, redirects, and conditional requests.
For a performance review, record both the total transferred bytes for a page load and the largest individual requests. A single total helps compare releases, while the request list tells you what to fix. Chrome’s Lighthouse resource summary groups requests by type and reports transfer size; its documentation also explains why images, scripts, fonts, and HTML affect different parts of rendering.
How to get a quick page-size estimate
- Open the Page Size Checker and enter the full page URL, including the path you want to inspect.
- Review the HTML estimate, discovered resource count, and the image, JavaScript, CSS, and font breakdown.
- Sort the resource list by size and note the largest files. Check whether they are needed on the page and whether they are larger than their displayed dimensions require.
- Repeat the check after a change, using the same URL and a fresh browser session for a fair comparison.
The checker is a quick diagnostic estimate, not a full browser waterfall. It reads the HTML response, finds resource URLs exposed in that markup, and checks up to 25 discovered resources using their response headers. Pages that load assets with JavaScript, use responsive image attributes, lazy-load content, or do not return a usable size header can have additional bytes that this estimate does not capture. A reported zero for a resource means its size was not available to the checker; it does not prove that the asset has no weight.
Verify the complete page load in Chrome
- Open the exact page in Chrome, open DevTools, and select the Network tab.
- Turn on “Disable cache” for the measurement, then reload the page. Keep the viewport and network conditions consistent when comparing runs.
- Wait for the page’s normal content to finish loading. If the page loads more content as you scroll, include that behavior in a separate measurement.
- Read the transferred amount in the Network summary and sort requests by the Size column to find the largest files.
- Use Lighthouse for a repeatable audit and its resource summary to group transfer by images, scripts, stylesheets, fonts, and other types.
Do not compare a cold load with a warm cached visit. A repeat visit may reuse files from the browser cache and make the network total look much smaller. Also record whether the page was tested on mobile or desktop: responsive layouts can request different assets.
What to optimize first
Images
Start with images that are both large and visible near the top of the page. Serve dimensions close to the rendered size, use responsive image sources, and choose a modern format when it preserves the detail you need. Keep meaningful text in HTML rather than baking it into a large image. The Image Compressor can help prepare an image, and the Image Resizer can set its pixel dimensions.
JavaScript and third-party code
Remove scripts that are no longer used, load nonessential code only when needed, and review third-party tags individually. A smaller JavaScript transfer can also reduce parsing and execution work, but transfer size alone does not measure that work.
Fonts and CSS
Use only the font families and weights the page needs. Remove unused styles and avoid loading a large set of font files for a small amount of text. Text-based resources can be compressed by the server, so check the transferred amount instead of judging only by the uncompressed source file.
Is there one ideal page-size limit?
There is no single byte threshold that guarantees a fast experience or a good search position. A page with a larger payload can still render its main content quickly, while a smaller page can feel slow if it blocks rendering or waits on a slow server. Use page weight to find waste, then measure real loading and interaction performance with Lighthouse and field data.
For a practical workflow, use the Page Size Checker to spot likely heavy resources, verify the complete transfer in Chrome DevTools, and use the Website Speed Checker to review performance metrics. Recheck after each meaningful change.