Page Weight
What Makes Up Page Weight
Page weight is the total number of bytes a browser downloads to display a web page, including the HTML document and every file it loads. It is usually measured in kilobytes (KB) or megabytes (MB), and it is normally counted for a first visit, when nothing is stored in the browser's cache.
Several types of resource make up most of the total:
- Images are often the largest share, especially photographs and banner graphics. The image optimization article covers how this is reduced.
- JavaScript adds weight directly, and each script must also be run once it has downloaded.
- CSS stylesheets are usually small, but large frameworks can add up.
- Fonts can be significant when several weights or styles are loaded.
- Video and embeds can add a lot of data when they start automatically.
- HTML is usually small, though very large generated pages can be heavy.
Why Bytes Matter Most on Mobile Networks
A larger page takes longer to download, and the effect depends on the connection. On a fast fiber line, a few extra megabytes may add little delay. On a slower or congested mobile network, the same download can take many seconds, and it uses more of the phone's battery to receive.
Pages have grown heavier over the past decade, with images and JavaScript as the main drivers. Long-running public datasets such as the HTTP Archive track this trend over time.
Weight also has a cost after the download finishes. The browser must decode images, parse and run scripts, and lay out the content. Heavy pages can therefore feel slow on phones with weaker processors, even when the network is fast.
Weight is a reasonable first check because it is easy to measure, but it does not tell the whole story. A page of a few well-placed resources can load faster than a smaller page that makes many requests in sequence. Page weight is most useful alongside request counts and timing data.
A Small Business Homepage
A homepage shows a 4 MB hero image at full resolution, a video that starts automatically and several large slider scripts. Most of the weight comes from the image and the video, while the scripts add extra work for the phone once they download.
Looking at the total alone would show that the page is heavy but not where the weight sits. Breaking the total down by resource type shows which items deserve attention first. Teams that want to keep pages light often set a limit on total weight, as explained in the performance budget article.
Frequently asked questions
What is a good page weight?
There is no universal target. A suitable page weight depends on the audience, the purpose of the page and the connections visitors use. Many teams set a budget for their own pages and track it over time, rather than aiming for a single number that applies everywhere.
Does page weight include files loaded after the first screen?
It depends on how it is measured. Total page weight usually includes everything loaded during the test, including content below the fold and files loaded later. The weight needed before the first screen is a separate figure, and it is often more relevant to how fast a page feels.