To reduce page size, start with images: resize them to their display size and convert them to WebP or AVIF, which typically removes the largest chunk of weight. Then remove unused JavaScript, CSS and plugins, enable Gzip or Brotli compression, limit web fonts to the weights you use, and drop third-party scripts that no longer earn their place.
This guide shows how to measure page weight, what a typical page weighs, and a step-by-step plan for trimming each type of file, biggest wins first.
Key takeaways
- Start with images by resizing them to their display size and converting them to WebP or AVIF.
- The median home page weighs roughly 2.5 MB on mobile, but many small-business pages can sit comfortably under 1 MB.
- Remove unused JavaScript, CSS and plugins, using the DevTools Coverage panel to find code that never runs.
- Enable Gzip or Brotli for text files, trim web fonts to the weights you use and drop unneeded third-party scripts.
How big is the average web page?
According to the HTTP Archive's 2025 Web Almanac, the median home page weighs roughly 2.5 MB on mobile and 2.9 MB on desktop. On mobile, around 0.9 MB of that is images and about 0.6 MB is JavaScript. The median mobile page makes about 72 requests.
There is no official "maximum" page size, but many small-business pages can comfortably sit under 1 MB. Every megabyte matters most for visitors on mobile data, older phones and patchy rural signal.
How do I check my page size?
- Open the page in Chrome and press F12 to open DevTools.
- Go to the Network tab, tick Disable cache, then reload.
- At the bottom, read the summary: number of requests, transferred (bytes over the network, after compression) and resources (uncompressed size).
- Click the Size column header to sort largest first.
- Use the filter buttons (Img, JS, CSS, Font, Media) to see totals per type.
The "transferred" figure is what the visitor downloads. The "resources" figure is closer to what their device has to parse and process, which matters for JavaScript in particular.
How do I reduce image size?
Images are usually the single biggest win.
- Resize to the displayed size. If an image displays at 800 pixels wide, a 1,600-pixel version covers high-density screens. A 5,000-pixel original from a camera wastes most of its bytes.
- Convert to WebP or AVIF. Both are supported by all current major browsers and are usually much smaller than JPEG or PNG at similar quality.
- Compress sensibly. A quality setting of around 75 to 85 is rarely visibly different from 100 for photos.
- Serve responsive images with
srcsetso phones download a smaller file than desktops. - Lazy load images below the fold, but never the main hero image.
<img src="shop-front-800.webp"
srcset="shop-front-400.webp 400w, shop-front-800.webp 800w, shop-front-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="800" height="533" alt="Our shop front on the high street">
Our guide to WebP and AVIF covers conversion tools and settings.
How do I reduce JavaScript size?
JavaScript is the most expensive byte on the page because it has to be downloaded, parsed and executed.
- Remove what you don't use. In Chrome DevTools, open the Coverage panel (Command menu, "Show Coverage") and reload. Red bars show code downloaded but never run.
- Uninstall unused plugins and apps. On WordPress and Shopify, each one can inject scripts on every page.
- Replace heavy components. Sliders, animation libraries and full icon packs are common offenders. A static image or a few inline SVG icons is far lighter.
- Load page-specific scripts only where needed. A booking widget does not need to load on your blog.
- Minify production files. Most build tools and caching plugins do this automatically.
How do I reduce CSS size?
Themes and page builders often ship a large stylesheet that covers every possible layout. Use the Coverage panel to see how much is unused, remove unused theme features, and minify. Some optimisation plugins can generate "critical CSS" for the top of the page and load the rest later, which also helps with render-blocking resources.
Do web fonts add much to page size?
They can. Each weight and style is a separate file, so a design using four weights in two families can mean eight font files. Cut to the weights you actually use, serve WOFF2 only, and subset fonts to the character sets you need. A variable font can replace several static weights with one file.
Should I remove video from my pages?
Not necessarily, but avoid self-hosted autoplaying background videos on the home page, which can be several megabytes. For embedded YouTube or Vimeo videos, use a lightweight "facade": a thumbnail image that loads the real player only when someone clicks play. Always set a poster image for HTML5 video and use preload="none" or preload="metadata" where possible.
Does compression reduce page size?
Yes, for text files. HTML, CSS, JavaScript, JSON and SVG compress very well with Gzip or Brotli, often to a fraction of their original size. Compression does nothing for JPEG, WebP, AVIF, WOFF2 or video, which are already compressed. Check the content-encoding response header in DevTools to confirm it is on.
Do third-party scripts count towards page size?
They do, and they often weigh more than your own code. Chat widgets, tag managers, heatmaps, social embeds and ad scripts each pull in their own JavaScript, sometimes hundreds of kilobytes. List every third party, ask who uses it, and remove anything without a clear owner. The MakeItFlow technology detection check shows which tools and scripts your site is running, which is a useful starting list.
What is a performance budget?
A performance budget is a limit you agree in advance, such as "no page over 1 MB" or "no more than 300 KB of JavaScript". It stops a site from slowly getting heavier as new features, images and marketing tags are added. Write it down, share it with whoever edits the site, and check it after each change.
Frequently asked questions
Does page size directly affect SEO?
Google does not use page size as a ranking factor in itself. It matters because heavy pages tend to have slower Largest Contentful Paint and Interaction to Next Paint, which feed into Core Web Vitals. Smaller pages also help visitors on limited data plans.
What is a good page size for a small-business website?
There is no official figure. Under 1 MB for a typical page is a reasonable aim for a brochure site, and lighter is better on mobile. What matters more is that the content visible first loads quickly.
Will a caching plugin reduce my page size?
Mostly no. Page caching makes the server respond faster, but the page weighs the same. Many caching plugins also include minification and image optimisation, which do reduce size. See our guide to speeding up WordPress for setup advice.
Is minifying HTML worth it?
The savings are usually small once compression is enabled, because Gzip and Brotli already handle repeated whitespace well. Minifying JavaScript and CSS gives more benefit. Do it if your tooling makes it easy, but prioritise images and scripts first.
Why is my page size bigger on mobile than I expected?
Some themes load desktop-sized images on mobile, or load separate scripts for mobile menus on top of desktop ones. Responsive images with srcset and sizes fix the first problem. Test with DevTools in mobile emulation and check what actually downloads.
What to do next
Measure your heaviest page in DevTools, sort by size and deal with the three largest files first. That usually removes most of the weight in under an hour. Then run a free website audit with MakeItFlow to check that compression, image delivery and Core Web Vitals are in good shape across the site.
Sources
Written by the MakeItFlow team
We build the website audit these guides are based on. Every fact is checked against the primary sources listed above and this guide was last reviewed on 21 October 2026 . How we research and check
Check your own site in 30 seconds
Run a free audit covering speed, SEO, DNS, email authentication and security headers — and get a prioritised fix list.
