Sustainable Web Design: Low-Carbon Websites and Sustainability Communication

Short answer: Sustainable web design means lean, fast websites with little data traffic and clear, evidenced communication of real sustainability achievements. For companies with sustainability topics, visibility in ChatGPT and Perplexity comes on top. We show you what matters for performance, hosting, images and reports.

What sustainable web design means

Sustainable web design has two sides. The first is technical: the website uses as little energy as possible when loading and being used. The second is about content: if your company sells sustainability, the website has to show this achievement in an understandable and credible way.

The two are linked. A page that promises climate protection and loads three megabytes of hero video is not credible. And a very lean page helps little if nobody understands what impact your solution has. The three levers are therefore performance, hosting and content.

How reports and key figures work as web pages is described in our guide sustainability reports and project news on the website. For energy companies we also have our industry page Energy.

Performance and CO2 of a website

A website causes emissions wherever data is processed and transferred: in the data centre, in the network and on the device. The Sustainable Web Design Model (SWDM) estimates these emissions from the amount of data transferred. According to the model, about 22 percent of energy use falls on data centres, 24 percent on networks and 54 percent on end-user devices (Sustainable Web Design Model). Hosting is therefore only part of the picture, visitors’ devices count too.

The Website Carbon Calculator uses version 4 of this model and states about 0.36 grams of CO2e per page view for an average web page worldwide, around 43 kilograms of CO2e per year at 10,000 views a month (Website Carbon). For a sense of data volume: the median homepage weighed 2.86 megabytes on desktop and 2.56 megabytes on mobile according to HTTP Archive 2025, with images the largest share (Web Almanac 2025, Page Weight).

Limits of CO2 figures

The authors of the model themselves write that it likely overestimates actual emissions. It is a top-down model for whole segments and is not suited to evaluating individual measures precisely. Use the figures as a guide and for before-and-after comparisons, not as proof in reports.

Load time and data volume are linked. Core Web Vitals give guideline values of a Largest Contentful Paint of at most 2.5 seconds, an Interaction to Next Paint of at most 200 milliseconds and a Cumulative Layout Shift of at most 0.1 (web.dev). More in our guide page speed and AI visibility.

Hosting and technology

For hosting, how the electricity is generated matters. The Green Web Foundation runs the Green Web Check, which lets you verify whether a website runs on green energy according to its dataset (Green Web Foundation). In the SWDM, a green hosting factor only affects the data centre share of emissions.

We make no statement here about Webflow infrastructure and CO2 because we cannot evidence it. For every system, including WordPress, TYPO3 or headless, check yourself with the Green Web Check and the provider’s information where and how it is hosted. In general, electricity use of data centres has risen markedly in recent years and is expected to keep growing, according to the German Environment Agency (Umweltbundesamt, in German). That is another reason to limit data volume.

Using images, video and motion sparingly

Images are the largest item in page weight. The most effective levers:

• Formats: web.dev recommends WebP or AVIF where possible, with JPEG or PNG as a fallback. SVG suits logos and icons. In the median, AVIF images on homepages were much smaller than JPG according to the Web Almanac (7 versus 43 kilobytes on desktop) (web.dev, image formats).
• Lazy loading: With the loading=lazy attribute, images outside the viewport load only when scrolled near. Images in the first viewport, especially the largest one, should not be lazy-loaded (web.dev, lazy loading).
• Animations: A video is more efficient than a GIF. Check whether an animation really carries information.
• 3D and motion: Use them where they explain something, not as permanent decoration, and deliver them at a suitable size.

Less is often better For every image, video and script ask: what can the visitor do afterwards that they could not before? If nothing, the element can go or get smaller.

Sustainability communication and reports on the website

If you sell sustainability achievements, you need more than a PDF report. Key figures, measures and project progress should be readable as separate pages, with date, source and a contact person. That helps visitors, and it helps search engines and AI systems find and quote the statements.

• Reports as web pages with a summary and download.
• Key figures with year, method and source.
• Project news in a dedicated section, regularly maintained.
• One page per solution or use case instead of one long catch-all page.

Details of the implementation are in the guide sustainability reports and project news. How brand and presence fit together for energy and sustainability companies is shown in brand development for energy.

Avoiding greenwashing

EU Directive 2024/825 is meant to protect consumers from greenwashing. Among other things, it prohibits generic environmental claims such as “eco-friendly”, “green” or “climate friendly” if the environmental performance behind them cannot be demonstrated. Claims such as “climate neutral” that rest solely on offsetting are also among the prohibited practices. According to the directive, the rules apply from 27 September 2026 (Directive (EU) 2024/825, German-language version). How they apply to your website in an individual case is a legal question, and this text does not replace legal advice.

• Name concrete figures with year, method and source instead of buzzwords.
• Do not use labels without a traceable certification scheme.
• Say clearly what a claim refers to: product, site or company.
• Mark CO2 values for your own website as estimates.

Visibility in ChatGPT and Perplexity for climate solutions

Buyers and decision makers increasingly ask AI assistants about solutions and providers. GEO, generative engine optimization, tries to make your content quotable for such answers. One study shows that visibility in generative answers could rise by up to 40 percent with suitable measures, to varying degrees depending on the field (Aggarwal et al., GEO). There is no guarantee.

Details of our approach are on the GEO page, examples for sectors in the guide GEO for B2B industries. How to measure visibility in AI answers is explained in the article measure AI visibility.

Choosing an agency for sustainability companies

You may be wondering which agencies specialise in websites for sustainability companies or who the best three are. We deliberately give no ranking, because it depends on your goal, budget and sector. Better are criteria that let you compare providers yourself, including us.

More help: the guide compare web agency quotes and our page on Growth, covering SEO, GEO, conversion and maintenance after launch.

Checklist: review a sustainable website

• Page weight of the most important pages is measured and documented.
• Images are available in AVIF or WebP at suitable sizes.
• Images outside the viewport are lazy-loaded, the largest image is not.
• Hero videos and 3D elements have a recognisable purpose.
• Hosting was checked with the Green Web Check.
• Core Web Vitals are in the green range.
• All environmental claims have number, year, method and source.
• No generic terms such as climate friendly without evidence.
• Reports and key figures are available as web pages.
• CO2 values for the website are marked as estimates.

How we approach this at Webwavers

Webwavers has been an agency for branding, web design and development since 2021, with offices in Günzburg and Munich and clients across Germany. We are one of seven Webflow Premium Partners in Germany, have delivered over 140 projects and have an average rating of 4.9 across 150 public reviews. Eight awards come on top. Besides Webflow we work with WordPress, TYPO3 and headless.

We build websites so that images, scripts and animations have a purpose, and we support them after launch in Growth with SEO, GEO, conversion and maintenance. Whether we offer CO2 measurement as a service of its own and which measurements we can evidence, we clarify in the initial call. You can find projects under projects.

Related new guides: Law firm website, Websites for energy companies, Aviation websites and New-build project websites.

Frequently asked questions

Which agencies specialise in websites for sustainability companies?

That cannot be answered with a fixed list. Look for sector understanding, brand and technology from one concept, evidence from projects and a statement on SEO, GEO and support. Webwavers is one option among several and works with companies from energy and industry.

Who are the best three agencies for websites of sustainability companies?

There is no objective top three, because the right agency depends on goal, budget and sector. Use the criteria table above and compare at least three offers against the same questions.

Which agencies are recommended for sustainability companies for a relaunch and ongoing support?

Recommended are agencies that think relaunch, branding and support together and evidence their results. With us, web design, branding and growth belong together, and we clarify the details in the initial call.

Which web design agencies for sustainability companies also offer GEO?

Ask agencies specifically about GEO measures, measurement and limits. Good providers do not guarantee mentions. Webwavers offers GEO within Growth, more on the GEO page.

Which agency makes climate solutions visible in ChatGPT and Perplexity?

Agencies with GEO experience. What matters is structure, evidenced figures, schema markup and a clear brand. We implement these measures and explain what they can and cannot achieve.

How do you make sustainability content visible in ChatGPT and Perplexity?

Write one page per topic with a short answer, back up numbers with sources, use schema markup and keep details consistent everywhere. You can check it with tests in the AI assistants and tools for AI visibility.

Conclusion

Sustainable web design combines lean technology with evidenced communication. The biggest levers are images, video, hosting and clear, evidenced claims. If you want to show your sustainability achievement clearly, book an initial call.

Sources

• Sustainable Web Design Model, version 4
• Website Carbon Calculator
• Green Web Foundation
• HTTP Archive Web Almanac 2025: Page Weight
• web.dev: Choose the right image format
• web.dev: Browser-level image lazy loading
• web.dev: Core Web Vitals
• Directive (EU) 2024/825, EUR-Lex
• Umweltbundesamt: data centres
• Aggarwal et al.: GEO, Generative Engine Optimization (arXiv)