Green your website: A Guide to reducing your carbon footprint

Today is all about the colour green. Of course, it’s St Patrick’s day and where I come from if you’re not wearing green you risk being pinched! Our puppy Julip knows better. But seriously, today we want to talk about ways business owners can tweak their company websites to reduce their carbon footprint.

A primary contributor to CO2 emissions is data transfer. This is the act of sending data between two points via networks or the internet. Every time someone visits your site or downloads content from it, there is an increase in data transfer, which generates more CO2 emissions. By incorporating eco-friendly design principles into the development of a website we can help reduce this footprint. And speed a website up at the same time. Here are a few ways this can be done with your Squarespace website:

Image formats

In an earlier blog we talked about image formats. New formats such as webp and avif will significantly reduce download speeds as well as file sizes. But these formats aren’t widely used yet, are hard to find, and not accepted (currently) as an input in your Squarespace image blocks. But there are other approaches to reducing your data transfer loads.

Graphics

You can use fewer graphics without any impact to your design! The new Squarespace fluid comes with a lot of built in features that we used to have to use images to create. For example, we’d use a graphic to create a wavy section border or to create a coloured background in a simple block. If your site is a few years old, talk to us about replacing those images with native ‘fluid’ functions!

File Sizes

Some of you might remember the ‘olden days’ when we had to prep every single image for websites - sometimes both a thumbnail and a large size. Well, Squarespace, and other CMS systems, changed all that. These days you don’t need to do any prep to an image - you can just upload it and it will look great. And that’s what many of us do. However, it would still be better to optimize the images before uploading. Reduce their size to no bigger than 1500 pixels wide and no greater than 150dpi. A typical monitor won’t present images any bigger than this, so the image doesn’t need all those extra pixels and dots. And it will absolutely improve your website speed and reduce your data transfer loads.

Custom Fonts

A few years back, we would often upload custom fonts to our web designs. But these days Squarespace font menus include 600 Google fonts and 1,000 Adobe Fonts as well as their own selection so there’s no need for custom fonts. All websites we build today use resident Squarespace font families to save on speed and data transfer loads.

Custom CSS

CSS refers to the code we use to customize your website’s design. Coding has always been one of my personal delights when it comes to designing a unique and beautiful website for my clients. But this is a thing of the past. The new Squarespace Fluid engine allows us to do pretty much everything I used to have to use code for. And I’m ok with it!

Test your website!

If you want to test your website’s carbon footprint you can type it’s url into one of these online graders:

ECO GRADER
https://ecograder.com/


WEBSITE CARBON CALCULATOR
https://www.websitecarbon.com/


We found out that our goodwincreative.ca website emits the amount of carbon that 3 trees absorb in a year. So we’re glad we’re also planting trees with our reforestation partner One Tree Planted.

Be sure to call Goodwin Creative for a Green Website Audit - it will be great to hear from you. And until then -

HAPPY ST. PATRICK’S DAY!

 

Shaving off a single kilobyte in a file that is being loaded on 2 million websites reduces CO2 emissions by an estimated 2950 kg per month."

Danny van Kooten, CO2 Emissions on the Web

"Digital activity is emerging as the next frontier in the sustainability movement…Expect data sustainability to be a major keystone in companies’ climate-change goals over the next decade."

Wunderman Thompson Intelligence, Digital Sustainability

Previous
Previous

Maximizing Website Traffic: The Crucial Role of User Experience

Next
Next

Hack your website: A Guide to Manipulating Text