Page size breakdown

Every file has two sizes

There’s the size a file has on the network and the size it has once unpacked. Say your server compresses a 400 KB script down to 110 KB. The visitor pays 110 KB in download and mobile data, and their phone still has to read all 400 KB. This tool grades the first number, the transferred bytes, and shows the second next to it.

Bytes turn into waiting time fast. On the slow 4G profile Lighthouse uses for its tests, 1.6 megabits per second, a 2 MB page takes about ten seconds to download, and that’s before any script has run.

What gets downloaded

Once it has the HTML, the tool requests what a browser would request on a first load:

• stylesheets, and files announced with rel="preload" or modulepreload;
• scripts with a src, except nomodule fallbacks and script types a browser doesn’t run;
• images: for srcset and <picture> it takes the largest candidate a desktop browser would pick, and it reads data-src on lazy-loaded images;
• video posters, the favicon, and images in inline style attributes;
• fonts declared in @font-face rules (the WOFF2 file when there is one, twelve fonts at most) and stylesheets pulled in with @import.

A few limits keep the check short: 80 files, 6 MB per file, 15 MB in total. If a page goes past 80 files, the request count is shown as “≥”.

The grade scale

To give you an idea, the median mobile page measured by the HTTP Archive weighs about 2.3 MB, which gets a D here. So a page can be perfectly average for the web and still be slow on a phone.

What to do with the findings

Images over 200 KB

Nearly always an image served larger than it’s displayed. Export it at the displayed width, or twice that for high-density screens, and let srcset offer smaller versions to phones.

JPEG or PNG images

When the server allows it, the tool re-encodes the eight heaviest images as WebP (quality 80) and AVIF (quality 55) and shows the size of each result. That way the saving is measured on your own pictures. Serve the new format with a fallback:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="630" alt="…">
</picture>

Images without width and height

This one isn’t about weight. It’s why text jumps around while the page loads. Add both attributes.

Text files sent uncompressed

HTML, CSS, JavaScript or SVG above 1.5 KB that arrived without gzip or Brotli. The compression and cache audit has the server settings.

More than 1 MB of JavaScript, or 300 KB of fonts

Take out the libraries and plugins nobody uses, load the rest only on the pages that need them, and keep two or three font weights in WOFF2.

The carbon figure, and what isn’t counted

The estimate follows version 4 of the Sustainable Web Design model. It counts 0.300 kWh for each gigabyte transferred, which covers data centers, networks and visitor devices along with their manufacture, and multiplies that by a world average of 494 g of CO₂e per kWh. That comes to about 0.15 g per megabyte. The comparison with a gasoline car uses 170 g per kilometer. Take it as an order of magnitude, good for comparing two versions of a page.