Updated 19 October 2026: all three demos were redesigned and re-measured. The figures below are the new ones.
“Fast and green” is easy to say. We’d rather show it. So we built three complete small-business websites — a bakery, a commercial law firm and an electrical contractor — with the photography, typography and motion a real client would expect, and then measured them with the same tool anyone can use: Google’s PageSpeed Insights, on mobile, median of three runs.
The businesses are fictional. The numbers are not.
The three sites
Levain — artisan bakery, Lisbon. Dark rosewood and coffee with lemon-cream type and bands of Lisbon-tile blue. Seventeen photographs, starting with hands dusting flour over a loaf. A menu with prices and allergen marks, a “two days in the life of a loaf” section that follows the dough from mill to oven, and a walking route that draws itself to the door. bakery.leavsy.com
Halden & Roe — commercial law firm, Dublin. A pale editorial page with a fine serif. Every photograph is black and white except for one colour, the firm’s wine red, so the only red on the opening image is a Georgian front door. A sample fee letter slides out as if from a printer, and the main statement lights up word by word as you read it. law.leavsy.com
Brightwire — electrical services, Dublin. A dark blueprint grid in electric blue, with orange kept for the call buttons. A fuse-board photograph with callout lines drawn onto it, a dial showing the next free call-out slot, job cards that stack as you scroll, and current that runs along a map of the areas covered. services.leavsy.com
None of them is a minimal page, and none of them shares an animation with another: each site has its own set of 17 to 19 effects, from the bakery’s floating menu bar to the law firm’s shutter-style photo reveal to the electrician’s letters that assemble into the headline.
The numbers
| Score (mobile) | Main content visible | Page weight | CO₂ per visit | |
|---|---|---|---|---|
| Levain (bakery) | 96 | 2.4 s | 283 KB | 0.097 g, A |
| Halden & Roe (law) | 98 | 1.8 s | 195 KB | 0.067 g, A+ |
| Brightwire (electrician) | 97 | 2.0 s | 186 KB | 0.063 g, A+ |
| Median web page | — | — | ~2.4 MB | ~0.8 g |
The median figures are from the HTTP Archive and the Sustainable Web Design model that calculators such as Website Carbon use; A+ on that scale means under 0.095 g per visit, A under 0.186 g. The three demos weigh between an eighth and a fourteenth of the median page.
All three open with a large photograph, and all three move. Weight isn’t a matter of how a page looks. It’s a matter of what it downloads before you start scrolling.
Where the kilobytes went
Here is the bakery page, the heaviest of the three, as Google’s test downloads it on a phone:
- The opening photograph — 170 KB, in a phone-sized version. It is the only photograph loaded up front; the other sixteen arrive as you scroll towards them.
- Fonts — 88 KB for three files, trimmed to the weights the design uses and the characters the page actually prints.
- HTML — 13 KB.
- Stylesheet — 10 KB.
- JavaScript — 3 KB.
The law firm comes to 195 KB and the electrician to 186 KB, with the same pattern: one photograph and the fonts make up most of the weight, and the code that runs the animations is 2 to 3 KB.
The habits that produced these numbers
None of this is clever. It’s a short list of defaults applied to every page.
1. Every image is sized for the slot it fills. Each photo is generated in several widths at build time, in modern formats, and the browser picks the one that matches the screen. A phone never downloads the desktop version. Photos below the first screen wait until the visitor scrolls towards them.
2. Fonts are self-hosted and trimmed. No requests to Google’s font servers, only the weights the design uses. We also set the backup font that shows for a split second while the real one loads to the same width, so the text doesn’t jump when the font arrives.
3. No JavaScript framework for a page that doesn’t need one. The pages are plain HTML generated in advance. The few things that genuinely need code, like the bakery’s open-now status or the law firm’s cursor preview, are small hand-written scripts.
4. Motion mostly in CSS. Scroll-linked reveals, the stacking cards, the drawn route, the shutter reveal: CSS animations that the browser runs on the graphics processor. They switch off automatically for visitors who have “reduce motion” turned on.
5. Nothing third-party on the page. No analytics script, no pixel, no chat widget, no fonts or maps from another domain. If a client needs one of those, it’s added deliberately, loaded after the page is visible, and, where consent is required, behind a proper banner.
6. Static hosting on a global network. The finished pages sit on Cloudflare’s edge, so a visitor in Lisbon or Dublin loads from a nearby city rather than a single server. No database, nothing to compute per visit, and no monthly hosting bill for sites this size.
What we measure, and how
Every figure above comes from Google PageSpeed Insights on the mobile setting, run three times with the median reported. Page weight is what PageSpeed counts on the first visit; CO₂ is that weight through the Sustainable Web Design model, the same maths behind the meter on our homepage. Put any of the three addresses into that meter and you’ll get the same figures.
We re-measure after every change, and the redesign showed why. With seventeen photographs, the bakery’s opening photo first appeared at 2.8 seconds on Google’s test, over the 2.5 seconds our own launch guarantee allows. Loading the lower photographs later, trimming the fonts and adding a phone-sized version of the opening image brought it to 2.4 seconds without changing the design. On the electrician’s site, the headline jumped while its font loaded; a backup font set to the same width fixed it. Measuring is what makes the “fast and green” claim honest rather than hopeful.
What this means if you’re choosing a builder
The practical lesson is that you don’t have to choose between a site that looks like a real business and a site that loads quickly. The three demos above carry more photography and motion than most small-business templates and still download less than a single unoptimised photo.
Ask anyone quoting you for a website for the PageSpeed score of something they’ve built. If they can’t show one, that tells you something. Ours are above, with the links. Run them yourself on PageSpeed Insights or through the meter on our homepage, and then run your current site next to them. If you’d like us to do that comparison for you and explain the gap, a 24-hour audit is free.