Agency7's full architectural guide — from AI lead generation to autonomous financial operations.
Sustainable and Eco-friendly Web Design in Edmonton: A Practical 2026 Guide
The internet emits about 3.7% of global greenhouse gases — roughly the same as the aviation industry. That number keeps rising as data centres, AI workloads, and bloated websites consume more electricity. A single page view on a typical commercial site emits 0.5-4.6 grams of CO2. A company with 100,000 monthly visitors quietly produces 1-5 tonnes of carbon per year just through its website.
For Edmonton businesses thinking about sustainability — whether driven by values, B-Corp goals, government RFP requirements, or customer demand — web design is an overlooked lever. This guide covers what "sustainable web design" actually means in 2026, how to measure your current site, and what concrete choices reduce footprint.
What actually causes website emissions
Three sources, in order of impact:
1. Data centre electricity (50-70% of total emissions)
Every page load runs compute in a data centre somewhere. The cleaner the grid powering that data centre, the lower the page emissions. Alberta's grid is still coal- and gas-heavy in 2026 (though decarbonizing), so a site hosted in Alberta emits more per kilowatt-hour than one hosted in Quebec, Ontario, or parts of the Pacific Northwest.
2. Network transmission (15-25%)
Data moving from the server to the user's device burns energy every mile. A 5 MB page emits roughly 5× more than a 1 MB page just in transmission.
3. End-user device (15-25%)
The phone, laptop, or desktop rendering your page consumes power. Heavier pages make devices work harder. On mobile, this also drains batteries and forces faster charging cycles.
The short version: smaller pages + cleaner hosting = lower footprint. Every other "green web design" claim filters back to these two.
How to measure your current site
Website Carbon Calculator (websitecarbon.com) gives a rough grams-per-page-view estimate based on page size, host location, and grid mix. Free to use. Run your homepage and a few top pages.
Ecograder (ecograder.com) gives a letter grade and specific recommendations.
PageSpeed Insights (pagespeed.web.dev) — already used for performance — is a strong proxy for sustainability because fast sites are almost always efficient sites.
Baseline you're aiming for:
- Under 1 MB page weight (excellent)
- Under 2 MB (good)
- Under 4 MB (average)
- Over 4 MB (heavy — room to improve)
Edmonton business sites commonly run 3-8 MB because of unoptimized hero images, embedded video, and too many third-party scripts. The easy wins are usually concentrated there.
What actually reduces emissions
1. Image optimization (biggest lever)
Images account for 40-60% of the average web page's weight. Practical fixes:
- Serve WebP or AVIF, not PNG/JPG. Same visual quality at ~30-60% smaller file size.
- Compress aggressively. A 3 MB hero image shrinks to 200-400 KB with minimal visible loss.
- Lazy-load below-the-fold images. Don't download images users haven't scrolled to yet.
- Use
srcsetfor responsive images. Mobile devices shouldn't download desktop-sized images. - Stop using stock photos as decoration. Real photos of real people convert better AND weigh less (if you compress them).
One compressed hero image often cuts total page weight by 50%.
2. Font efficiency
Custom fonts are beautiful and expensive in bytes. Each additional weight (regular, bold, italic) adds 50-200 KB per file. Options:
- Self-host fonts with
font-display: swap— faster and more reliable than Google Fonts CDN. - Use variable fonts — one file covers all weights at ~20-30% of the combined size.
- Subset fonts — only load the characters you actually use.
- Fall back to system fonts for body text. They're free, universal, and render instantly.
3. Minimal JavaScript
Every KB of JavaScript ships to every user, gets parsed by their device, and burns energy. Heavy JS frameworks used for simple content sites are a major source of waste.
- Static sites where possible. For brochure/marketing sites, static generators (Astro, Eleventy, Hugo) ship a fraction of the JS of a Next.js or React SPA.
- Progressive enhancement. Base content works without JS, interactive features load on top.
- Audit third-party scripts. Most sites run 5-15 third-party scripts (analytics, chat, heatmap, A/B test, social, tracking). Each one adds weight and privacy cost. Remove what you don't actively use.
4. Host on a clean grid
Data centre location matters. Roughly ordered from cleanest to dirtiest (Canadian options):
- Quebec — 99% hydro (cleanest grid in North America)
- British Columbia — 95% hydro
- Ontario — 92% low-carbon (nuclear + hydro)
- Alberta — 30-50% renewable, the rest gas and some coal (improving, but middle of the pack)
Cloud providers expose region choice:
- Vercel / Netlify — default to US regions but offer global edge networks; Canadian/European POPs are increasingly used
- AWS (ca-central-1) — Montreal, Quebec — clean grid
- Google Cloud (northamerica-northeast1) — Montreal — clean grid
- Cloudflare Pages / Workers — distributed globally, runs on cleaner grids in many locations
For most Edmonton businesses, deploying to a Canadian region on a hyperscaler (or a static site on Cloudflare/Vercel) reduces hosting-related emissions by 30-60% compared to default US-East deployments.
5. Dark mode option
Dark mode isn't required, but OLED screens (most modern phones) consume noticeably less power rendering dark pixels. Offering a dark mode toggle reduces user-device energy use for a growing share of visitors — especially those browsing at night.
6. Cache aggressively
The cheapest page load is the one that doesn't happen. Proper cache headers mean returning visitors don't re-download assets that haven't changed. This is a standard practice for performance — it's equally a sustainability practice.
What's mostly greenwashing
"Carbon neutral hosting." Many providers offset emissions rather than reduce them. Offsets are better than nothing, but actual clean-grid electricity is meaningfully better than coal-power-plus-planted-trees.
"Eco-friendly CMS." The platform isn't really the sustainability lever; the content and configuration are. A well-optimized WordPress site beats a bloated static one.
"Sustainable template." Unless the claim is backed by specific page-weight or carbon numbers, it's marketing copy.
"Green SEO." Not a thing in any meaningful sense. Good SEO is efficient, and efficient pages are lower-carbon — but branding SEO services as "green" is usually cover for standard SEO with a sustainability logo.
Look for specifics: CO2/page, page weight in KB, host grid mix. If a vendor can't produce numbers, the claim isn't real.
Edmonton-specific considerations
Alberta's grid reality
Alberta's grid is improving but still significantly fossil-fuel-based. If the carbon footprint of your site matters to your brand, hosting outside Alberta is the fastest win. Vercel, Netlify, Cloudflare, AWS ca-central-1 (Montreal), and Google Cloud northamerica-northeast1 all provide cleaner grids than Alberta-based hosting.
There's no performance penalty — Edmonton visitors will see millisecond-level differences between Alberta-hosted and Quebec-hosted sites due to content delivery networks and edge caching.
City of Edmonton sustainability ecosystem
Edmonton has a growing sustainability ecosystem — Edmonton Climate Innovation Fund, B Corp community, NAIT's sustainability programs, and various green-economy initiatives. For Edmonton businesses responding to RFPs from the City, AHS, or other public sector buyers, website sustainability is increasingly asked about in procurement questionnaires. A measured carbon footprint and specific reduction commitments differentiate your proposal.
B Corp and similar certifications
If your business is pursuing B Corp certification, your website is part of the operations assessment. Reducing page weight, hosting on clean grids, and displaying your carbon data publicly all score points. It's a small part of the overall cert but aligns with the broader message.
A 30-day sustainable redesign plan
Week 1 — measure
- Run Website Carbon Calculator on homepage + top 5 pages
- Run PageSpeed Insights on same pages
- Record current page weight per URL
- Check current hosting region
Week 2 — quick wins
- Compress all images to WebP
- Add lazy-loading on below-fold images
- Remove unused third-party scripts (usually 2-5 easy removals)
- Self-host fonts with variable format where possible
Week 3 — deeper work
- Move hosting to Canadian clean-grid region
- Add proper cache headers
- Audit JS bundles, remove dead code
- Set up Lighthouse CI to prevent regression
Week 4 — report and commit
- Re-measure; typical improvement is 50-80% lower gCO2/page
- Publish a "sustainability" page with your numbers and what you did
- Set a reduction target for the next year
What a sustainable Edmonton site looks like in practice
- Under 2 MB homepage weight
- Images compressed to WebP/AVIF
- Hosted on Canadian clean-grid region (Quebec/Ontario preferred)
- Minimal third-party scripts (analytics + essential tools only)
- Core Web Vitals in the green
- Published carbon footprint with annual reduction target
- Accessible (WCAG AA) — accessibility and sustainability share a surprising amount of overlap
For most small Edmonton businesses, getting from a typical 5-8 MB site to a sustainable 1-2 MB site costs $3K-$10K and cuts website emissions by 70-90%. The same work usually improves conversion rate (faster sites convert better) and search ranking (Core Web Vitals factor in).
Frequently asked questions
How do I measure my website's carbon footprint?
Use Website Carbon Calculator or Ecograder. Both are free, give grams-of-CO2 estimates per page view, and identify the biggest contributors. Run your top 10 pages and average them for a site-level number.
Does sustainable web design hurt performance?
The opposite — sustainable design practices (small page weight, efficient code, clean caching) directly improve performance. A page that loads in under 2 seconds on mobile is almost always a low-carbon page. The two are tightly correlated.
Is green hosting really different?
Yes. Providers running on hydro or nuclear grids (Quebec, Ontario, BC) emit a fraction of the CO2 per kilowatt-hour compared to coal/gas grids (Alberta, Saskatchewan). The difference is real — typical 30-60% reduction in hosting-related emissions just by moving region. Same latency for Edmonton visitors due to CDN.
What about AI and its energy cost?
AI inference (and especially training) is energy-intensive. If you run AI features on your site — chatbots, voice agents, image generation — the server-side energy adds to your footprint. Mitigations: use efficient smaller models where they suffice, cache responses, batch requests. This doesn't mean avoiding AI — but be honest in any sustainability claim that includes AI-powered features.
Is WordPress sustainable?
Can be, but requires intention. Default WordPress ships heavy by default (multiple scripts, unoptimized images, plugin bloat). A careful WordPress site with a lightweight theme and minimal plugins can hit 1-2 MB page weight. Static site generators (Astro, Eleventy) hit these targets by default with less effort.
Should small Edmonton businesses care about this?
Depends on your customers. If you sell B2B services to organizations with sustainability mandates (government, education, healthcare, larger corporations), yes — it shows up in procurement and due diligence. If you sell B2C to customers who care about climate, yes — it's a trust signal. If neither, you'll still benefit from the performance improvements that come along with the sustainability work.
How does this affect my SEO?
Positively. The changes that reduce carbon (smaller images, less JavaScript, faster hosting, better caching) are the same changes Google rewards through Core Web Vitals. "Green" and "fast" are almost the same page.
What's the most overlooked issue?
Embedded third-party content — especially video. A YouTube embed adds ~1 MB of overhead per page even before the video plays. Lazy-load video embeds (only load on click) or use lighter alternatives for marketing-site video.
Want a sustainability audit for your site? We measure carbon footprint, identify top emissions sources, and quote specific reductions. Book a free audit. Agency7 builds sustainable sites on Next.js and Cloudflare — our own homepage runs under 500 KB with a grade-A carbon rating.
Get the Autonomous Enterprise Blueprint
A 14-page architectural guide covering the Agency7 mandate, the fractured pipeline, agentic ledgers, and the generative engine optimization playbook — delivered as a PDF to your inbox.