Skip to main content

Is Reducing Page Weight Important For Website Speed?

· Updated on · 8 min read

Page weight is one of many metrics used to measure the performance of a website. It looks at how much data needs to be downloaded after opening a page.

This article looks at what factors contribute to high page weight, how you can optimize it, and what it means for SEO and page speed.

What is page weight or page size?

The download size of a web page states how many bytes of data need to be transferred over the network in order to load a website in the browser. Downloading more data means that the page takes longer to load for the visitor.

Network connections with more bandwidth can transfer more data in less time. A fast wifi connection might be able to load even a large website quickly, while loading the same page on a mobile 3G connection might take a long time.

This request waterfall chart shows an example of a website loading several different resources before starting to render.

Table showing network requests and response sizes

Common types of resources are HTML document, JavaScript application files, CSS stylesheets, images, and data files (for example JSON data).

What’s the average size of a web page?

According to the HTTP Archive, the average website loads 2.3 megabytes of data when opening a desktop site, split across 71 HTTP requests.

On mobile websites on average 2.1 megabytes of data are downloaded.

Both numbers are increasing. Five years ago, in 2018, the average desktop site weighed in at just 1.7 megabytes, and in 2013 the average was 0.9 megabytes.

Chart showing how average page weight has changed over time

We can also see that there’s a trend of mobile sites becoming more similar in page weight to desktop size.

What type of website resource contributes the most to page size?

Images contribute the most to overall page size, with almost one megabyte per page. An average web page also downloads half a megabyte of JavaScript code.

Chart showing a breakdown of overall page weight by resource type

What is a good web page size?

The size of different resources doesn’t impact page speed equally, so even a small site can be slow and a large site can be fast. However, as a general guideline, you can aim to load no more than 2 megabytes of data on each page.

A small page has a size of less than 100 kilobytes and will be very fast to download even on slower connections.

How does page weight impact site speed?

If a page loads more data it will generally load more slowly than a smaller website. However, different categories of resources will have a different impact on page performance:

  • Render-blocking resources need to load before any page content starts showing up and they should be kept as small as possible
  • Images and most JavaScript code are less critical and if they take a bit longer to load due to their size that’s often acceptable
  • Secondary page elements like chat widgets can be loaded after the main page content without having a big impact on user experience
  • Prefetched resources increase page size, but they are downloaded for future use and impact page experience immediately

Whether download size impacts performance mostly depends on whether the resource is render-blocking or is necessary for above-the-fold content like images that are responsible for the Largest Contentful Paint.

Take a look at these two rendering filmstrips as an example of the performance impact of page weight. Opening the Discord homepage downloads 2.7 megabytes of data, compared to 8.7 megabytes for the Uniqlo homepage.

While page weight is not the only thing that determines how fast a website loads, it is one important factor.

Two rendering filmstrips side by side with the second one taking longer to load

How do I reduce the page weight of my website?

To reduce the download size of your website you can:

  • Optimize your images and use modern image formats
  • Reduce third-party code
  • Use facades for videos embeds or chat widgets, only loading the full code when needed
  • Lazy load images below the fold
  • Use gzip and brotli compression
  • Use responsive images to load device-appropriate versions of an image

To get the best impact on performance you should also focus your optimizations on the most important resources on a page.

Example: Large HTML and JavaScript size

Let’s take a look at the request waterfall below to analyze how page weight impacts website speed. The waterfall only shows the first few requests, which are most important for user experience.

We can see two large requests:

  • The HTML document (149 kilobytes)
  • A JavaScript bundle file (618 kilobytes)

The request bar in the waterfall chart on the right is longer than those of other requests. That shows that larger files take longer to download. (Although the high Time to First Byte of the HTML document also contributes to the overall request duration.)

We can also see 4 font requests (the woff2 files). Although each one accounts for just 50 kilobytes they together make up 189 kilobytes of data.

Some page content starts to appear as soon as the HTML document has finished loading, but the full page only loads after the JavaScript code has been loaded and run.

Request waterfall with some large slow requests

What could be done here to optimize page size?

  • Reduce the size of the HTML document
  • Reduce the size of the JavaScript bundle
  • Load fewer web fonts

Alternatively, the preload for the fonts could be removed, allowing bandwidth to be used for more important resources early on. Currently the font download competes with downloading the more important HTML document, slowing down rendering.

A tool like the HTML Size Analyzer can be used to break down the HTML document size and identify how it could be optimized. In this case the HTML contains a lot of JSON data, rather than mostly consisting of HTML code.

Breakdown of HTML size by element

We can also sort the requests by size to see the biggest contributors to overall page weight.

List of largest network requests on a page

This shows us that large images account for a lot of data being downloaded. However, in this case we can see that the Largest Contentful Paint image (marked by the LCP badge) finished loading long before the Largest Contentful Paint occurs (marked by the red line). That means that the image download isn’t holding back rendering, rather the JavaScript code is.

The waterfall also shows various low priority requests, for example for Google Tag Manager (GTM). In the case of GTM its contribution to page weight does not have a significant performance impact as the request is made fairly late (3.2 seconds after opening the page).

How do I measure the page weight of my website?

You can use free tools like these to view the page size of a URL:

Page weight in the DebugBear Speed Test

After running a test the download size of your website is one of the 8 metrics shown near the top of the test result.

Page speed test result with page weight highlighted

Page weight in PageSpeed Insights

In Google’s Lighthouse and PageSpeed Insights tools you can find the page weight in the performance diagnostics section under the “Keep requests counts low and transfer sizes small” audit.

Page weight audit in Lighthouse

Page weight in Chrome Devtools

The DevTools Network tab in Chrome shows the size of the current page in the bottom left corner. To see how much data a new visitor would download you should disable the Preserve Log option and enable Disable cache.

Note that the page weight in DevTools maybe also include resources loaded by Chrome extensions.

Page weight in Chrome DevTools

Full resource size versus transferred size

Servers use HTTP compression when sending resources to the browser, so tools will often report both a full resource size and a compressed size.

You usually want to look at the compressed size, as this states how much data was downloaded over the network and determines how long the download takes.

Request waterfall showing transmitted and full response sizes

Does page weight impact SEO?

Google does not use page weight as a direct ranking signal, but high page size can negatively impact page speed and the Core Web Vitals metrics which are used as a ranking factor.

The ranking data is based on the real-user data Google collects as part of the Chrome User Experience Report, so you can focus directly on user experience rather than page weight.

Monitor page weight and Core Web Vitals over time

DebugBear continuously tests the performance of your website, showing you how page size and other performance metrics change over time.

You also get in-depth test results with recommendations for how to speed up your website.

Performance dashboard showing page weight and Core Web Vitals data

If you see page weight getting worse DebugBear will show you what files caused the change.

Dashboard showing changes in request size

Start a free 14-day trial today and optimize the speed of your website.

Get a monthly email with page speed tips