We Declare A Climate Emergency rebuild

Project @ Leap

Reducing the weight and carbon impact of the site whilst keeping the design and adding functionality.

View website

Services

  • JavaScript
  • Low-carbon website
  • Sustainable development
  • SVG
We Declare A Climate Emergency homepage

Top level stats

1.2s Downwards facing arrow

Average decrease in page load time. The homepage reduced from 1.8s to 0.6s

178% Downwards facing arrow

Reduction in weight of the homepage from 1.3MB to 74.98KB

0.056g Downwards facing arrow

Reduced webpage carbon to just 0.056g per initial page view

The brief

The Leap team tasked me with reducing the weight and carbon impact of the We Declare A Climate Emergency website whilst keeping the design the same and adding new functionality.

The process

I started by running an audit of the current website. This allowed me to find out how it had previously been built and what was making it heavy.

I discovered it had been built with an off-the-shelf theme and page builder that loaded unused assets. I knew the best method for reducing the impact was to build from the ground up.

The outcome

Beginning with my custom WordPress starter theme, I quickly matched the homepage layout using a custom grid. Setting up key features and branding. I removed custom fonts and used system fonts instead. I removed unnecessary CSS from the theme to only load what was needed.

Using SVGs for the icon graphics helps to keep the weight down. I also removed the one standard image as it didn’t add to the context quite enough to warrant being included.

I then started adding the new feature to track the number of button clicks of the logo download button. Utilising JavaScript for the frontend interaction, the action is then localised and connected to the website’s database where it updates the stored number. This way the number can be cached at the server level rather than on anyone’s machine via local storage or cookies.