Case Study: Eco-Friendly Website Development & Improvements

Making the marketing website more eco-friendly supports my principles and improves the site’s carbon footprint.

  • Project Type: Website Rebuild
  • Customer Type: B2B
  • Industry: Marketing
  • Year: 2023

Website Rebuild to Reduce Environmental Impact

In 2023, I wanted to go even further in my business in terms of improving my eco-credentials and ensuring that I reduced my impact on the environment and improved it where possible. I always have ethical and eco-friendly processes in the forefront of my mind when working on clients’ websites, but as is often the case with marketing agencies, your own website doesn’t get quite as much attention. So, to ensure that I am practising what I preach, I rebuilt my website to ensure it was faster, using less energy and, therefore carbon, while improving the usability and accessibility of the brand as a whole. I wanted to write this case study as a showcase of the progress I’ve made as a company but also to be transparent in my work. If you are familiar with my business, you’ll know that honesty is part of my ethos. If we can’t be honest about our own business, how can clients trust us with their own site?


Challenges

While I hadn’t built my original website with the environment in mind, I believed it to be a pretty slimline build already. It had minimal plugins, a well-rated parent theme for speed and no animations or video. But, when comparing my site using the Website Carbon Calculator, I realised the site was not as green as I would have hoped. Sadly, It scored 67% dirtier than other sites tested. This was the drive for things to change.


Considerations

Speed was the biggest consideration when it came to improving the site. Carbon used is directly linked to the size and speed of your web pages, so we needed to tackle this head-on. However, I still wanted to be true to the brand of Middleton Marketing and our emphasis on accessibility and inclusivity. Therefore, I wanted to consider a redesign from both making it environmentally friendly and socially conscious whilst still appealing to my clients.


Implementation

As with all projects, it needed to start with thorough research and a plan of action. Looking at a range of speed metrics and technical crawls, I determined the main issues with the site were heavy use of Images without good optimisations and overuse of JavaScript and CSS, which was tied to the theme and some plugins. The site also didn’t score well in terms of accessibility, and there were UX improvements I wanted to include in this rebuild too.

After researching a range of options, I selected a parent theme which was rated highly for speed. I also removed a large number of images from the site, with a plan to recreate imagery that was still relevant for context but optimised for speed and accessibility. Plugins were the next to be culled, with research on smaller, more efficient plugins which could do double duty. I also made the switch to Fathom Analytics as an alternative to Google Analytics. While there were ethical reasons I did this, it also meant I could remove Google’s scripts and a cookie-compliant popup.

In terms of improving the site’s usability, I looked at two key areas, brand colours and navigation. I updated my brand colours very slightly to improve contrast and readability throughout the site. Looking at fonts, I rolled back to some old-school fonts of Times and Arial to improve speed and make the text more readable on all devices. The biggest change was switching to a predominately dark theme. While I have plans to make a light theme which can be switched to in the future, at the moment, evidence suggests that darker themes use less energy, especially on more modern screens.

Results of Web Improvements

The results have been fantastic in terms of speed, accessibility and eco-credentials. The stats below come from the site’s homepage, but the rest of the website’s pages tell a similar story.

Middleton Marketing website Carbon score
Website carbon use after improvements
Middleton Marketing website carbon use before rebuild
Website carbon use prior to improvements

Speed & Carbon Calculator

The homepage was 67% dirtier than all sites tested prior to improvements; the homepage is now 98% cleaner than all sites tested

When tested on GMetrix, the site improved from a C score to an A score.


PageSpeed Insights

Desktop Scores – Old Vs New Site

  • Speed 69 Vs 100
  • Accessibility 94 vs 100
  • SEO 92 vs 100

Mobile Scores – Old Vs New Site

  • Speed 37 Vs 100
  • Accessibility 94 vs 100
  • SEO 91 vs

Technical Site Scores

Technical Crawl score improved from 83 out of 100 to 93 out of 100

Bounce Rate improved from 69% to 44%


Future Plans & Web Improvements

While I am impressed with the progress so far, there is definitely more work to be done. With the changing landscape of website technology, there will always be ways to improve your website; it’s never static. I would like to ensure that all pages are as fast as possible and accessible to the broadest range of people. A few things I plan on adding to the site.

  • Better images – instead of relying on stock imagery, I’d like to create unique graphics for my site which are fast, provide context and look good!
  • Additional Accessibility – I will be researching and implementing more ways to make my website accessible, from layout features to branding applications; I want to put my money where my mouth is regarding inclusivity.
  • Further speed improvement – There is still some technical work I would like to do to improve the speed of my web pages and ensure that all resources are used effectively and are relevant to the structure of the site.
  • Document Eco-improvements as a business – From the start of my business in 2020, I have been committed to my ethical and eco principle, but I haven’t always shouted loudly about what I’m doing. Going forward, I would like to document and highlight the environmental improvements I make in my business to inspire others to take action too.

Thanks for reading; watch this space.

Scroll to Top