Web eco-design

Developing with Concrete
1

Hello everyone,

I’m working on a ConcreteCMS project with a strong focus on web eco-design: limiting the environmental footprint by reducing the site’s size, number of requests, and unnecessary dependencies.

While Bedrock is a great tool for consistency and developer experience, I’ve noticed it tends to load many assets (Bootstrap, jQuery, helper scripts) even when they’re not needed on the front end — especially for visitors.

My goal: clean, fast-loading, minimal CSS/JS for the visitor, while keeping ConcreteCMS editing capabilities for admins.

Has anyone here explored this approach?

Any tips or blockers I should expect with blocks, toolbar, or Express?

Thanks in advance!

P.S.

I noticed that the environmental performance score of concretecms.com is not optimal (56/100 according to EcoIndex).

concretecms.org performs slightly better with a score of 65/100.

You can test your own pages here: EcoIndex.fr: Test a website
Improving performance isn’t just good for the planet — it’s also good for SEO :wink:

2

Being picky, counting requests and file size only matters on first load. After that files should be cached. The same applies to SEO metrics such as Lighthouse.

Server and device CPUs are running in loops no matter what, so unless a process is moved to an eco-core on a CPU, on a single-site scale I am sceptical whether this can be measured.

I would be interested to see an experimental comparison of web pages scoring A…G on this index against actual device power consumption and actual server power consumption. Unless a positive correlation can be demonstrated, it remains unproven theory.

On the other hand, on a macro scale when the cumulative size of millions of web sites results in more web servers and more network infrastructure being installed, then cumulatively every byte of storage and transfer, and every CPU instruction makes a difference.

I can give myself a pat on the back here because my own support site runs (slowly) on a cheap shared hosting package and I leave mobile data disabled on my bottom of the range android phone.

Now speculating, I would argue that search engines and AI are by far the biggest consumers, not individual web sites, even when compared to individual sites aggregated in their millions.

But even then we need to put this in context. Walking to the shops rather than driving a car to the shops makes a far bigger difference.

Concrete CMS

Getting into Concrete CMS specifics, third party assets such as jQuery served by the Concrete core could be served from a CDN. So a change to the Concrete core to have a CDN option for third party JS and CSS, and hence facilitate browser caching across many sites, could help for both Eco credentials and SEO.

Taking that further, a centrally managed scheme for Concrete Core and Marketplace package assets to be served through a CDN and hence be shared across many sites could be a business opportunity for Portland Labs.

In all cases this would need to be a site configuration option. Some locations don’t play nicely with CDNs. Some sites have security requirements that preclude the use of CDN assets.

1 Like
3

Thank you for your detailed and constructive reply — I appreciate the thoughtful skepticism.

That said, I think it’s important to avoid using the imperfections of tools like EcoIndex or Lighthouse as a reason not to act. Yes, they mainly measure the first load, and yes, modern caching makes things better on subsequent visits. But in practice, clients judge us based on these tools. These metrics have become part of the visible quality benchmarks for websites — whether we like it or not.

Explaining to a client that “the score is low, but it’s fine after caching” doesn’t fly. Most of them won’t test the site twice. And even if they do, first impressions matter — both for users and for SEO.

So while I agree that real energy impact would require deeper measurements (server-side CPU, device-level power usage, etc.), I still believe that improving EcoIndex or Lighthouse scores is a pragmatic and meaningful goal. It leads us to cleaner code, smaller files, fewer dependencies, better UX — and cumulatively, that does matter.

Also worth mentioning: there is another widely known tool among English-speaking developers — WebsiteCarbon.com — which offers similar insights and even allows you to display a badge on your site to show your estimated environmental impact. It’s a simple but visible way to raise awareness.

I’d also love to hear from others in the community :
Has anyone designed and built Concrete CMS themes that achieve particularly good scores on WebsiteCarbon.com or EcoIndex.fr?

4

I agree with John here, the implications are a little bit out-of-scale from the big perspektive. Nowadays where every Google Search and every WhatsApp message triggers an AI event, webhosting will be the very much low-tier of the energy consumption of the Internet.

I have tested a few projects that I’ve built and they range between B and E on the scale, while number of requests seems to be the most factor for multilingual pages.

I dont think that “number of DOM Elements” is something to optimize unless the Ecostamp is the goal of the whole design.

Pagesize and Number of requests seems the most useful optimization, so either CDN or combining of files should help to do the trick.

The latter can be depending on the theme design and what JS and CSS is combined or called, i believe that could be an overall win if it is implemented properly.

For example, if you are using block templates, and a custom theme, it is better to compile the templates CSS into the Theme CSS instead of loading them as separate files. Same for JS.

But that will only be applicable for theme builders and if you stick with the block templates that are built into the theme - as soon as you install another block, it will be a separate request.

I will try to implement that on the next upgrade I’m doing on a theme and see how it compares.

5

I didn’t want to start an ideological or political debate about the usefulness of eco-friendly web design. I’m going to think about and test technical ideas while creating my theme (with or without Bedrock).

6

Well yes, you can easily pin it down to a few rules when building a site:

  1. Use as little as possible DOM Elements (no unnecessary divs, avoid nesting), reduce the site structure to the necessary
  2. Optimize Images and assets as good as possible and use them as sprites instead of single images where you can
  3. Combine assets where possible
  4. Use CDN if possible
  5. Use System-Fonts instead of Webfonts (Arial instead of Lato)

If you follow these concepts, you should be within the “A” section of a test like this. Not all of it will be achievable but most of these things are generally good ideas if you want a speedy website.

2 Likes
7

Hi,

There is a «sustainable» core running on a few sites, afik without Bedrock, skimmed to basics.

I worked on it for a few months at my former employer. I don’t know if the project is still active.

See this thread: Eco-Label "Blauer Engel" sustainable software | resource- and energy-efficient applications

8

Some interesting ideas being shared here. In the past, the drive to build lean, efficient pages was centered around SEO and conversion optimisation. The faster the page load, the more likely the customer will stick around and buy.

But now, when looking from an environmental impact, it’s a different game. Still similar to lean, fast-loading pages as before, but with more things to consider behind the scenes. The elephant in the room I’d imagine is the web hosting company - how do they generate the electricity used to power their servers. If you choose one based on renewable energy, then that would have a much smaller carbon footprint than the exact same page on a “conventional” hosting provider.

It’s a matter of prioritising what things are easier to control and make the biggest difference.

I feel some of these tweaks would be extremely small compared to other areas in life that have a bigger carbon impact (such as food we eat, transport, heating/cooling homes and offices, etc). But when web design is your forte is makes sense to focus on this area.

When it comes to creating lean, efficient pages, I’ve found the Pico CSS framework is the best from dozens that I tested: https://picocss.com/
I’ve used it on a couple projects and have been happy with the results. This could be part of your solution to avoid relying on 3rd party libraries like jQuery and Bootstrap (which is pretty bloated).

I hope this suggestion helps. :slight_smile: