Digital sustainability: why your home page’s score doesn’t tell the whole story

In short: CO₂ calculators give website home pages a harsh score, because they measure the first cold visit to the richest page you have. But the same site, one page further in, can go from F to A+. We verified it on four real projects. Digital sustainability isn’t giving up a striking image: it’s knowing where and how to serve it. This article explains what those numbers really measure and how we design pages that weigh little without sacrificing communication.

On the home page of Olinda there’s a giant snail crossing the Milan skyline. A dreamlike image, chosen with care for a social enterprise that has worked with people in vulnerable situations for thirty years: it communicates slowness, home, a city that slows down. For an opening, it says exactly the right things.

Then you take that same home page and paste it into an emissions calculator. The verdict is merciless: rating E, dirtier than 69% of the web pages tested. A score that seems to contradict all the work done on the digital ecosystem we built for Olinda, a system designed to be coherent, accessible and sustainable over time. How is it possible? And above all: is that score measuring what we think it’s measuring?

What a CO₂ calculator really measures

The most widely used reference for estimating the environmental impact of a page is the Website Carbon Calculator, which is based on the Sustainable Web Design Model, by now the industry’s open methodology. The principle is simple: emissions are estimated from the bytes transferred during a visit, distributed across four segments, namely the data centres that serve the files, the networks that transport them, the device that receives them and the emissions tied to manufacturing the hardware.

The figure that comes out is a number in grams of CO₂ per visit, accompanied by a score from A+ to F. As a term of comparison, the average global page produces around 0.36 g of CO₂ per view. Below this threshold you’re better than average, above it you’re worse.

Here the first dose of honesty is needed, the same we bring to what the Core Web Vitals really measure: these calculators give an estimate, not an absolute measurement. The tools’ own developers say so. Results vary from one tool to another because they use different models and assumptions, and they vary even between one measurement and another of the exact same address, because some inputs depend on load time, which is never constant. The number is a useful proxy for reasoning, not a verdict.

The same site, from F to A+: what the numbers say

To understand how much that proxy has to be interpreted, we tested four sites we know well, each time comparing the home page with an internal page. The results tell a precise story.

The clearest case is UXDay: the home page produces 0.95 g of CO₂ and gets an F, worse than 91% of the web. The programme page, on the same domain, on the same hosting, built with the same system, produces 0.04 g and gets an A+, better than 93%. It’s a difference of almost twenty-four times, within the same site. Olinda goes from 0.36 g (E) on the home page to 0.20 g (C) on its history page. VolumeBK goes from 0.37 g (F) on the home page to 0.18 g (C) on a product page.

And then there’s Gimme5, which overturns the rule and is for that reason the most instructive case: the home page produces 0.24 g and gets a D, but an internal page produces 0.39 and drops to F. Here the internal pages weigh more than the home. The lesson is exactly this: there’s no such thing as “the site’s footprint”. There’s the footprint of the single page, and what decides it is almost always what you put in the first screen, whatever page it is.

The home page rating is the worst case

Lined up, these numbers dismantle the idea that a home page’s score tells you the sustainability of a site. The home page is almost always the page with the worst rating, and there’s a structural reason. It’s the page that has to communicate the most: it welcomes, it moves, it sets the tone. To do that it mounts the most important and heaviest visual asset above the fold, the big image or the opening video. And it’s also the page the calculator measures in the most unfavourable conditions, on the first visit, with an empty cache.

But that user, after the home page, navigates. They visit lighter pages, with the cache now populated. They see the striking first screen only once. The E rating of a home page, in short, photographs the worst case and presents it as if it were the average experience. It isn’t.

There’s a second misunderstanding worth clearing up, because it touches closely on those choosing who to entrust a project to: the weight of green hosting. It’s a real factor, but its weight in the calculation is marginal. Among the four sites we tested, the three running on renewable energy (Olinda, VolumeBK, UXDay) get one E and two F. The only one on traditional hosting, Gimme5, gets the best score. The tool itself estimates that switching to green would save Gimme5 around 9% of emissions. For the calculator it’s a secondary detail compared to the weight of an unoptimised image; for us it remains a choice we make gladly, because that 9% is real and adds to everything else. But it’s good to be clear about the proportions: clean energy counts, but it’s the weight you send over the network that makes the real difference.

How we design a first screen that weighs little

If the problem is the weight of the first screen, the solution isn’t removing the image: it’s serving it well. It’s work we’ve done for a long time, and that has a limit case in the carbon-neutral project for Around The Blue, the portal that tells the story of Giovanni Soldini’s challenge on the health of the seas. There the narrative required a great many graphic and video elements, that is, exactly the assets that weigh the most. We used the SVG format for all the graphics and for the icon set, handled the deferred loading of videos with vanilla-lazyload, Andrea Verlicchi’s JavaScript library, and made sure the Vimeo players activated only on user click, not on page load. The dark palette has a function too: less light on the screen means less device consumption.

On Olinda the lever was different and touches sustainability in an economic sense too, a decisive point for a volunteer organisation. We built the ecosystem on a single WordPress Multisite installation resting on Flying, our infrastructure: a single system to maintain instead of many separate sites, updates and optimisations carried out once and reflected across all nodes, and theming managed through CSS variables that avoids multiplying redundant stylesheets. Hosting is on Kinsta, a partner that uses renewable-energy infrastructure.

In the concrete reality of every new project, the recurring techniques are few and tried and tested: loading="lazy" on everything below the fold, a targeted preload only on the asset that opens the page, modern image formats like AVIF and WebP instead of heavy JPEG and PNG, and real served dimensions, not enormous images shrunk via CSS. The web.dev documentation on lazy loading is a good starting point for anyone wanting to go deeper into the technical side.

A real limitation: we don’t promise A+ on every page

Olinda’s home page stays an E, and for us that’s fine. That snail over the city is a communication choice worth more than a calculator’s grade, and the same goes for the first screen of a creative brand or a cultural institution. Chasing the A+ on every single page would mean sacrificing what makes a site able to speak to people, in exchange for a letter on a scale that measures only the worst case.

What we offer, then, isn’t the promise of a perfect score everywhere, but control: knowing how much each page weighs, understanding why, and deciding with judgement where to intervene and where instead the impact is an acceptable, conscious cost. It’s a distinction that changes the way you read those numbers, from verdict to tool.

Sustainability, performance and accessibility are the same job

There’s a reason we keep coming back to these themes together. A lightweight first screen loads faster, and therefore improves the Core Web Vitals. It consumes less data, and therefore emits less CO₂. It’s almost always built more cleanly at the code level, and therefore tends to be more accessible. These aren’t three separate cost items to negotiate one at a time: they’re three names for the same technical work done well. We saw it clearly in the accessibility work on the Gimme5 site, where optimising for accessibility also meant cleaning up and lightening the structure of the pages. Whoever invests on one of these fronts is, in fact, already working on the other two, as we describe when talking about what an accessible, well-built digital product involves.

Where to start

Measure the right pages, not just the home. Take the three or four most visited pages of your site and test them individually: that’s where your users’ real experience plays out, not on the opening page alone.

Look at the first screen of each one. Almost always the heaviest asset is the image or video above the fold. Identifying it is half the work, because it tells you exactly where to act.

Serve better instead of removing. Before giving up a striking image, try converting it to a modern format, serving it at real dimensions and deferring everything below the fold with lazy loading. Often the gain is enormous and the image stays where it was.

Read the rating with judgement. Always compare the home page with a couple of internal pages before drawing conclusions: a low score on the home alone, by itself, says almost nothing about the overall sustainability of the site.

If you want to understand how much your pages really weigh

Digital sustainability isn’t an aesthetic sacrifice or a footer-badge trend. It’s a design skill: knowing where the weight hides, telling apart what should be reduced from what’s worth keeping, and reading the numbers for what they are. If you want an honest snapshot of how your pages are doing and where it’s worth intervening, we’re here.