“Your home page is too heavy” is one of the first things a developer tends to say about a slow site. Speed tools put it differently, as “Total page size”, “Total byte weight” or a warning about “enormous network payloads”, but the idea is the same: a figure in megabytes. You can see the number, but not what it is made of or whether yours is unusually large.
So, what is page size? It is the total amount of data a browser has to download to show one page: the HTML, plus every image, stylesheet, script, font and video file the page asks for, including files from other companies’ servers. People use page size and page weight to mean the same thing. This post explains what goes into that figure, how to see the breakdown for your own pages, which items are usually the heaviest on small business sites, and why the total matters less than what loads first.
What makes up page weight
Think of a page as a parcel made up of several boxes. Each type of file is a box, and they vary enormously in size.
Images
On most small business sites, images are the largest share. Photos are naturally heavy, and they are often uploaded at far larger dimensions than they are shown at, in older formats, with little compression. A single phone photo uploaded straight to a page can outweigh all of the page’s code combined. Our post on how images slow a website down goes into spotting and fixing them.
JavaScript
Scripts power menus, sliders, forms, popups, analytics and every third-party widget. They matter twice over: they have to be downloaded, and then the visitor’s device has to process and run them. A modest-looking script file can cost more time on a budget phone than an image several times its size, because images do not need to be executed.
CSS
Stylesheets tell the browser how everything looks. Themes and page builders often ship large stylesheets covering every possible layout, much of which a given page never uses. CSS is usually smaller than images or scripts, but it tends to block the page from appearing until it arrives, so its size matters more than its share suggests.
Fonts
Each font family and each weight (regular, bold, italic, light) is a separate file. Two families in four weights each means eight font files. Icon fonts, which pack hundreds of icons into one file when the site uses a dozen, add more.
Video and audio
A background video on a home page can be the heaviest single thing on the whole site. Embedded players from video platforms also bring their own scripts and preview images, even if nobody presses play.
The HTML itself
The page’s HTML is usually small, but page builders can produce very long HTML with many nested elements, and some plugins put large blocks of data straight into the page. It is rarely the main problem, but worth a glance if it looks unusually large.
Third-party files
Analytics, ad tags, chat widgets, review badges, maps and social embeds all download files from outside servers. They count towards page weight exactly like your own files, and you control them only by choosing whether and when to load them.
Transferred size and actual size
Many tools report two figures, and the difference confuses people.
- Transferred (or “over the wire”) is how much data actually crossed the network. Text files such as HTML, CSS and JavaScript are usually compressed by the server before sending, so this figure is smaller.
- Resource or uncompressed size is how large the files are once the browser has unpacked them.
Transferred size is what your visitor’s connection and data plan pay for. Uncompressed size gives a sense of how much code the browser has to read and process. A big gap between the two for scripts and stylesheets is a good sign: compression is working. Images and videos are already compressed in their own formats, so for them the two figures are close.
When people talk about page weight, they usually mean the transferred total.
What is page size on your own site? How to see it
You do not need special software. Any of these will show you the figure and, more usefully, the breakdown.
- Chrome DevTools. Open the page in an incognito window, press F12, choose the Network tab, tick “Disable cache” and reload. The status bar at the bottom shows the number of requests, the transferred size and the uncompressed size. Sort the list by the Size column to see the heaviest files at the top, and use the type filters (Img, JS, CSS, Font, Media) to see each category on its own.
- PageSpeed Insights and Lighthouse. The report lists the total byte weight and the largest files when the page is heavy. Lighthouse reports also offer a treemap view of the page’s JavaScript, which shows which scripts take up the most space.
- GTmetrix and WebPageTest. Both show the total page size and break it down by content type, often as a chart, so you can see at a glance whether images, scripts or fonts dominate.
- Our free page speed checker gives a quick reading for any URL as a starting point.
Check the same few pages each time: home, a typical inner page, a product page if you have one. Different templates can differ hugely in weight. Use one tool consistently, with the conditions written down, as described in our guide to a consistent speed testing routine, so that next month’s figure can be compared with this one.
The usual heavy items on small business sites
On slow small business sites, the breakdown tends to show the same culprits:
- A hero or banner photo uploaded at full camera resolution, sometimes several of them in a slider.
- Gallery and team photos at full size, shown as small thumbnails.
- A background video that plays on the home page, on mobile too.
- PNG files used for photographs, where a modern format would be far smaller.
- Page builder and theme scripts loaded on every page, including features nobody uses.
- A full icon font loaded for a handful of icons.
- Several font families with many weights each.
- Chat, review and social widgets, each bringing its own scripts, images and styles.
- Animated GIFs, which are very inefficient compared with video formats.
Images are usually the quickest win. Resizing and compressing them before upload helps immediately; our free image compressor handles that in the browser for individual files.
Why the total is not the whole story
A lighter page is generally a faster page, but two pages of the same weight can feel very different. What matters as much as the total is what loads when.
A large image at the very bottom of a long page, loaded lazily only when someone scrolls near it, does little harm to how quickly the page first appears. A medium-sized stylesheet and script in the page’s head, which the browser must fetch and process before showing anything, can do more damage than its size suggests. And a few hundred kilobytes of JavaScript can cost a budget phone more time than several times that amount of images, because of the work of running it.
So when you look at page weight, ask three questions about each heavy item: does the visitor need it at all; do they need it straight away, or could it load later; and could it be smaller? Weight is one dimension; the number of separate files is another, which we cover in reducing HTTP requests.
Why page weight matters to visitors
Every byte has to travel over the visitor’s connection. On fast home broadband a heavy page may still feel fine. On mobile data in a crowded area, on a train, in a rural area, or on an older phone, it is often a different story. Many visitors on prepaid mobile plans also pay for data, and a heavy site quietly costs them money.
Page weight is not one of the Core Web Vitals and does not feed the Lighthouse performance score directly; it shows up indirectly, through slower loading metrics. That is a reason to treat it as a cause to investigate rather than a target in itself.
Setting a limit
We will not give you an “ideal” page size, because it depends on what the page is for. A photography portfolio has a good reason to be heavier than a plumber’s contact page. What works better is agreeing a limit for each type of page on your own site, based on where it is now and what it needs to do, and checking new pages against it. That idea, a performance budget, is set out in our post on setting a website performance budget. For the wider view of how weight, requests, server and scripts fit together, the site speed guide is the place to start.
Frequently asked questions
What is a good page size for a small business website?
There is no single correct figure, because a gallery-heavy site and a simple service site have different needs. A better approach is to compare your page with what it actually needs to show, trim anything unnecessary, especially oversized images and unused scripts, and set your own limit for each type of page so new content does not push it back up.
Does page size include files from Google Analytics and other tools?
Yes. Page size counts every file the browser downloads to show the page, wherever it comes from, so analytics, ad tags, chat widgets, fonts from external services and embedded videos all count. Tools that show the breakdown by domain make it easy to see how much of your total comes from third parties.
Why does my page size differ between speed tools?
Tools load the page at different times, from different places and with different devices, so third-party scripts and ads may send different files on each run. Some report transferred size and others uncompressed size, and some stop measuring at a certain point in the load while others wait for late requests. Compare each tool only with itself.
Will lazy loading reduce my page size?
It reduces how much is downloaded at first, because images further down only load as the visitor scrolls towards them. A visitor who scrolls to the bottom still downloads everything. Lazy loading helps the first view load faster, but it does not replace resizing and compressing images, and it should not be used on the main image at the top.
Theme scripts, builder bundles and third-party widgets are the heavy items owners find hardest to remove on their own. Trimming them safely is part of our speed optimisation work, with page weight compared before and after.
Next in this series: Reduce HTTP Requests: Which Ones Actually Matter
