Skip to content
Insights

Lighter websites

How to Check Your Website's Page Weight in Five Minutes

Three ways to see how much data your page sends: Chrome DevTools, PageSpeed Insights and a GreenTracer check, plus what the numbers mean for your grade.

Sol Rudd6 min read

Diagram: a web page beside a list of transferred data by type — images, scripts, fonts and other files — under a magnifying glass

“Page weight” is the amount of data a visitor's browser downloads to show one page: the HTML, images, scripts, stylesheets, fonts and anything loaded from other companies' servers. A website carbon estimate starts from this number, so it's worth knowing where to find it. You don't need to be a developer. Here are three free ways to see it, each taking a few minutes, and how to read what they tell you.

Method 1: Chrome DevTools

Chrome has a built-in panel that lists every file a page downloads. It shows you the page as your own browser sees it, which makes it the best tool for finding out what is heavy.

  1. Open the page in Chrome. Press F12 (or right-click and choose “Inspect”) to open DevTools.
  2. Choose the Network panel. Tick Disable cache. Google's documentation describes this as the way to emulate how a first-time visitor experiences your site.
  3. Reload the page. DevTools only records requests made while it is open, so the reload matters.
  4. Look at the status bar at the bottom of the panel. It shows the number of requests and two sizes: transferred and resources.

The two sizes answer different questions. Transferred is what actually travelled over the network, after any compression the server applied. Resources is the size of those files once the browser has uncompressed them. For a carbon estimate, transferred is the one that matters, because it is the data the network carried. If resources is much bigger than transferred, compression is doing its job.

To see where the weight comes from, use the type filters (Img, JS, CSS, Font and so on) and sort by the Size column. That shows at a glance whether a few large files account for most of the total.

Method 2: PageSpeed Insights

If you'd rather not open DevTools, paste your address into PageSpeed Insights. Google says it uses Lighthouse to analyse the page in a simulated environment, and reports on both mobile and desktop. The mobile test simulates a mid-tier phone on a mobile network; the desktop test emulates a desktop with a wired connection.

In the performance section, look for the audit called “Avoid enormous network payloads”. It shows the total size of all resources the page requested, and lists the largest requests first, which is a quick shortlist of what to look at. Check both the Mobile and Desktop tabs: they can differ, often because larger images are sent to wider screens.

One detail trips people up. Lighthouse reports sizes in kibibytes (KiB). A kibibyte is 1,024 bytes, while a kilobyte (kB) is 1,000 bytes, as NIST explains. So 1,000 KiB is 1,024,000 bytes, or about 1.02 MB. The difference is small, but it explains why two tools can show slightly different figures for the same file.

Method 3: a GreenTracer check

A GreenTracer check runs PageSpeed Insights for you, on mobile and desktop, and takes the page weight from the same Lighthouse total. It then uses the heavier of the two runs to estimate emissions with the Sustainable Web Design Model v4. Like the other two methods, it measures one first visit with nothing cached. It doesn't scroll, click or accept cookie banners, so lazy-loaded images and tags that wait for consent aren't counted.

The advantage is that the report puts the bytes, the estimate and the grade side by side, and “How we estimated this” shows the calculation. Our guide to reading a website carbon report explains each part.

What the numbers mean for your grade

GreenTracer works in decimal units: 1 MB is 1,000,000 bytes. Under the model, each megabyte transferred comes to about 0.148 g CO₂e per page view on a standard host. Because the estimate is proportional to data, each grade corresponds to an approximate page weight:

  • A+: up to about 270 kB
  • A: up to about 533 kB
  • B: up to about 978 kB
  • C: up to about 1.41 MB
  • D: up to about 1.88 MB
  • E: up to about 2.42 MB
  • F: anything heavier

On a host listed as green by the Green Web Foundation the estimate is about 18% lower per megabyte, so each band stretches further: from about 331 kB for A+ up to about 2.97 MB for E. Our article on what green hosting changes explains why.

As an illustration, a page that transfers 1.6 MB sits in grade D on a standard host. Bringing it under 978 kB would put it in B. That is a useful way to set a target: pick the grade you want and you know the weight you're aiming for. These are estimates from a model, not meter readings.

When the numbers don't match

  • Different conditions. Your browser, PageSpeed Insights' simulated phone and its emulated desktop are separate visits on different settings, so pages that send different images or adverts to different screens will show different totals.
  • Cache left on. If “Disable cache” isn't ticked, files already in your browser aren't downloaded again and the transferred figure drops.
  • Scrolling and clicking. In DevTools, anything you do after loading (scrolling, opening a menu, accepting cookies) adds requests to the total. Read the figure straight after the reload.
  • KiB versus kB, as above.

Once you know your number, start with the largest files. Images are usually the quickest win, followed by fonts and third-party tags. Then check again after changes and keep the report link as a before-and-after record.

Sources

All articles

Check your own site

See the estimated carbon of one page view on your page, its grade, and whether your host is listed as green. It's free.

Check a website