Reserch paper: Understanding and mitigating web page data bloat

Abstract: Web pages have grown in size, leading to increased energy and resource consumption. ​ This study analyzes 10,000 popular web pages to find ways to reduce data usage while retaining essential content. ​ Significant web page data savings, up to 50%, can be achieved, promoting environmentally sustainable digital services. ​

Authors: Aleksi Saarinen, Matti Pärssinen, Muhammad Zubair Farooqi, Jukka Manner ​ Aalto University, Espoo, Finland ​

Download the research paper

Why web page size matters

Ever noticed how websites seem to be getting heavier and slower? You’re not imagining things. Modern web pages have ballooned in size, and while they might look slick and interactive, this comes at an environmental cost.

The role of ICT in global energy use

According to forecasts referenced in the paper, the energy consumption of the ICT sector could use up to 20% of global electricity by 2030. In the worst-case scenario this will be 51%. That’s not just a tech problem, it’s a problem for our planet.

Methodology

To give them a large diverse data set, researchers looked at 10,000 of the most popular websites, analysing over 7,324 unique URLs using four device simulations:

• desktop
• scrolled desktop
• mobile
• scrolled mobile

Using Google Lighthouse, they evaluated each site’s performance and resource usage.

Tools like Wget and ImageMagick helped calculate data on image sizes and formats for pixel-level insights.

The importance of scrolled page testing

Unlike this study, many performance tools don’t account for what loads as you scroll.

This is important because modern websites use lazy loading. So, if you’re not scrolling, you’re not seeing the full weight of the page.

Breaking down the web page data bloat

What makes web pages so heavy?

Images (up to 58%): Images were by far the biggest offenders, making up 49% to 58% of total page weight. That’s more than half the data for most users!

JavaScript (up to 28%): JS was next, clocking in at 20% to 28% depending on the device. It’s essential for interactivity, but it’s also bloated with unused code and repeated libraries.

Third-party resources: Over half the average page size came from third-party resources like ads, analytics, and embedded content. Many users never see or interact with these, but they still increase data and energy.

Everything else (only about 22%): The rest was made up of stylesheets, fonts, documents, and media files. It was not small, but relatively manageable.

Images – the biggest source of data

The pixel problem

Most websites load images at much higher resolutions than they display. On mobile, over 96% of loaded image pixels were wasted. Imagine downloading an entire movie and only watching the trailer!

Usnig modern formats WebP and AVIF

Modern formats like WebP and AVIF make a big difference. The study found WebP files were 25% to 34% smaller than JPEGs, without noticeable quality loss. AVIF did even better and is now more widely supported.

Fixing image resizing

Resizing images to match display sizes saved up to 50% of image data. Combining resizing with WebP at quality level 90 cut image weight from 12.1 GB to just 3.5 GB.

JavaScript data

Repeating the same libraries

Many websites use the same JavaScript libraries – jQuery, React, Bootstrap – being loaded over and over. Sometimes multiple versions of the same library are downloaded on a single page!

• jquery (used on 4,349 pages)
• corejs (3,701 pages)
• react, bootstrap, and more

Using caching to save web page data

If common libraries were cached in the browser, a huge chunk of redundant data would never need to be re-downloaded. Theoretically, 6% to 9% of JS size could be cut this way.

Best practices from Google Lighthouse

Unused CSS and JavaScript

Lighthouse flagged 376–407 kB of unused CSS and JS per page. That’s dead weight, which if removed, would instantly speed things up.

Text and image compression techniques

Compressing images from 100% to 85% quality saved an average of 179–285 kB without visual downgrade. Even text compression helped trim the data.

Using caching for long-term savings

1034 kB of repeat data could be saved per page load if caching were properly implemented. That adds up fast for returning visitors.

Final numbers

12.1GB of images reduced to 3.5GB using WebP: That’s over 70% savings. With zero noticeable drop in quality when using WebP at 90%.

90%+ pixels wasted on mobile devices: This stat alone should make developers sit up. Most mobile users are burning through data for images their screens can’t even display fully.

The main environmental benefits from smaller pages come from reduced emissions on the server side and mobile networks.

Mobile networks are energy-proportional, so less data will save energy and create fewer emissions. Also, if the load on mobile networks drops or even grows more slowly, there is less pressure to increase capacity by installing new hardware that needs to be built and powered.

Why not start measuring your website’s carbon footprint?

Before you improve your website’s performance, start by measuring the carbon footprint – then you can report on the carbon footprint savings as you speed up your site.

FAQs

Why is WebP preferred over JPEG or PNG?

WebP offers smaller file sizes without sacrificing visual quality. Most modern browsers support it and is much more efficient.

What’s the biggest contributor to webpage size?

Images. They take up nearly half to more than half of the total size of most web pages.

Can caching really save that much data?

Absolutely. Proper caching can save hundreds of kilobytes per page load, for repeat visits.

Is resizing images always worth it?

Yes. Resizing alone can save up to 50% of image data, and it’s a low-hanging fruit for developers.

How does this affect SEO or user experience?

Faster load times improve SEO rankings and reduce bounce rates. Better performance = happier users = more conversions

Back to News & Insights