“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 photos, the typography and the 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 four runs.
The businesses are fictional. The numbers are not.
The three sites
Levain — artisan bakery, Lisbon. Warm cream and terracotta, a serif display face with an italic accent, five photographs, an arched hero image with a rising-steam card, a rotating “wood-fired · stone-milled” seal, a scrolling trust strip, a menu with dotted price leaders, a parallax interior shot, neighbourhood quotes. bakery.leavsy.com
Halden & Roe — commercial law firm, Dublin. Navy and gold, editorial serif headings, a dark full-width hero with a “first conversation is free” card, four practice areas, a process section, a fees-in-one-paragraph block, three photographs, a call-back form. law.leavsy.com
Brightwire — electrical services, Dublin. Graphite and amber, bold grotesque type, an icon set for six services, an emergency call-out band with hazard striping, an EV-charger section with parallax, a quote form, and a sticky call bar that follows you on a phone. services.leavsy.com
None of them is a minimal page. All three have entrance animations, scroll-driven reveals, hover states and a mobile menu.
The numbers
| Score (mobile) | Main content visible | Page weight | CO₂ per visit | |
|---|---|---|---|---|
| Levain (bakery) | 98 | 1.8 s | 250 KB | 0.085 g, A+ |
| Halden & Roe (law) | 98 | 1.8 s | 199 KB | 0.07 g, A+ |
| Brightwire (electrician) | 99 | 1.5 s | 121 KB | 0.04 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. The three demos are between a tenth and a twentieth of the median weight.
Two of these pages carry the same first screen your eye would call “heavy”: a large photograph, a serif headline, something moving. Weight isn’t a matter of how a page looks. It’s a matter of what it downloads.
Where the kilobytes went
Here is the bakery page, the heaviest of the three, broken down on a phone:
- Hero photograph — 69 KB. Served at the width a phone actually shows (660 px), not the desktop size.
- Three gallery photographs — 75 KB together, loaded only as they scroll into view.
- Fonts — 59 KB for three files: the display face in the two weights the page uses, its italic in one weight, and the text face.
- Stylesheet — 9 KB after compression.
- HTML — 8 KB.
- JavaScript — 0 KB.
That last line is the one people don’t believe. A page with a rotating seal, animated steam, a marquee, scroll reveals and a parallax photo ships no JavaScript at all. Every one of those effects is CSS, which the browser already knows how to run.
The six 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 three or four widths at build time, and the browser picks the one that matches the screen. A phone never downloads the desktop version. Images 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: for the bakery, that meant three files instead of a “whole family” download, which alone saved 23 KB per visit with no visible change.
3. No JavaScript framework for a page that doesn’t need one. The pages are plain HTML generated in advance. Interactive bits that genuinely need code — the live meter on our own homepage, for instance — are small, hand-written scripts, not a 100 KB runtime.
4. Motion in CSS. Entrance fades, scroll-linked reveals, parallax, the rotating seal: all CSS animations and transitions. They cost a few hundred bytes of stylesheet and run on the graphics processor. They also switch off automatically for visitors who have “reduce motion” enabled.
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, nothing to hack, 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 four times with the median reported, on the live address. Page weight is the total transferred on the first visit as PageSpeed counts it; CO₂ is that weight through the Sustainable Web Design model — the same maths behind the meter on our homepage and the badge in our footer.
We re-measure after every change. When the bakery’s redesign added a richer typeface and larger photo, it dropped from A+ to A; trimming the font weights and sizing the hero image for phones brought it back without touching the design. 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 instantly. The three demos above have more visual richness than most small-business templates and weigh less than a single unoptimised photo on them.
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.