Category: Uncategorised

Putting two years of low carbon website lessons into practice

Sustainability is a process and progress isn’t always linear. First you realise the need to act more sustainably and learn what you need to do to start that process. Then you take the first steps towards changing the way you live and/or work. After that, you go deeper, learning more and changing more things. Ultimately, you then repeat that last step over and over and over again!

My low carbon website building method and process has followed this pattern. Two years ago I started to focus on building low carbon websites using sustainable web design methods. Since then I’ve been learning and iterating towards a method that I’m happy with.

In the last couple of months I’ve made some breakthroughs in how I build low carbon WordPress sites. These have allowed me to further reduce the page weights of the sites I’m working on.

These discoveries have coincided with a need to change what I offer on my own site and how I talk about what I do. I found myself with a bit of time to revamp my website to be more engaging and lighter weight, and after a few weeks of coding, collaborating and iterating, my new site is here.

Putting my website on a diet

At its heaviest, my old landing page was 876.52kbs on first load. While this is much lower than the global average of 2292kbs (data from September 2022) it’s still much higher than I’d like.

When I tested the new page this morning, it came in at 88.83kbs which is a nudge under a 90% reduction compared to Sitegeist 1.0.

How I reduced the size of my landing page

Before going into any technical details, I changed the way the page is designed. Keeping the layout and sections super simple and clear, I focused on the following core messages:

• who I am
• what I do
• why I do it
• what it costs
• how to contact me

After that, I concentrated on a clean, clear design with easy to read copy and a high level of accessibility.

The geeky bit

As I’ve said in my articles recently, the main areas you can focus on to reduce page weight tend to be media (images and videos), fonts, scripts and if you’ve got the skills, coding.

Images and media

I’ve kept the images on the site to a minimum and optimised them before uploading them to the media library using the ImageOptim app. The images are then served to the browser in as small a file size as possible using WebP express. This means the images display as a .WebP file where the browser supports the format and the file size loaded is reduced.

A big thanks to Nick Lewis for his advice on this topic!

Fonts

In web design you have two choices when it comes to fonts: custom fonts and system fonts. Custom fonts come from places like Google, Adobe or commercial font repositories. The fonts are either loaded from the servers of the original source (Google and Adobe fonts often work like this) or from files on your sites’ server. Regardless of how the font is loaded, it adds weight to the page.

System fonts are widely supported fonts that are preloaded onto devices. Think Arial, Times New Roman, Georgia, Helvetica etc. If a site uses one of those fonts for its headings and copy, the device the site is being viewed on doesn’t need to load a font from somewhere else. The font is already available and less data is required to load the page.

Here I’ve used a system font stack, offering Helvetica Neue as the first font in the cascade. This means that the font displayed when you view the page is coming from your device and not downloaded from elsewhere. If a device doesn’t have Helvetica Neue preloaded, the device looks at the next font in the stack until it finds one it has.

It speeds up load times without sacrificing legibility or aesthetics.

Scripts

Or in this case a lack of scripts. I often use Javascript to add scrolling and fading effects to a page, add Google Analytics tracking codes and other scripts to take care of additional functionality.

On this site I’ve used only CSS and HTML code to make the site look and act as it does. The only scripts running are very lightweight and relate to things like the WebsiteCarbon widget and cookie banner.

Summary

Not all of the design decisions I’ve taken are suitable for other sites. A custom font can be vital for brand identity and impact. Additional images can make a site more visually appealing and effective. Scripts can make sites more impactful and interactive.

In my case, I wanted to strip the site back to just what is strictly necessary. A site that is lean and efficient without being boring and plain.

I hope I’ve struck the right balance for the site owner (that would be me), my clients (it could be you?) and my major stakeholder (our bloody lovely planet).

If you’d like a similar tune up for your site or a new low carbon website, send me an email to info@sitegeistwebservices.com.

If you read through my posts, blogs and articles you’ll see a theme, efficiency. Sustainable sites are efficient sites. Or to put it another way, efficient sites are sustainable sites. You say potato, I say potato. Hmm, that doesn’t work in written form does it? Never mind.

In this post I am going to talk about being efficient with your site content. You might need to cut some content out or you might need to add a little in. Either way I am going to help you improve the way your site works.

Spoiler alert – your site will be greener as a result.

Strip down your pages to the bare essentials.

There is no golden rule to this tip. The right amount of content is the right amount of content. Have a look at your page and get rid of elements you don’t need to make a sale or conversion. Nice one, your site is more efficient.

You’re right, we need a bit more information to do this. There might not be a golden rule but there are guidelines to follow. A really good one is the AIDA model.

AIDA is a centuries old advertising strategy that rings true today. The term was coined in 1898. It says effective marketing attracts attention, generates interest & creates conviction, in that order. If your marketing strategy does that, it encourages action.

What does it stand for?

Awareness – What are you talking about exactly?
Interest – Wow, that does sound good.
Desire – Really good actually, I must have it
Action – I can hold out no longer, I’m getting it.

AIDA is a way of mapping out a buyers’ journey. It works for all sorts of content including webpages and sites. With a webpage you can think of it like this:

A web page needs to grab a users’ AWARENESS. Get their attention and hold it. If you effectively engage a user and explain what the page is about you will draw a user in.

Now you want to stoke their INTEREST. Sell them the benefits. Tell them what problem it solves. Get them to think “I like the sound of that”.

Now things get serious. Your user is now interested but you want them to DESIRE the action your page is set up for. To move a potential customer from “I’m interested” to “I want it” you need to build trust.

Sell them on the way your business works and delivers. Tell the story of you and your product or service. Reinforce it with social proof. A testimonial would be great right about now. Lovely job.

Time for ACTION. Your user is ready to convert. Make it easy! Hit them with a nice clickable button or bright, bold, banner. Now you’ll see the order, subscription or booking hit your inbox and sit back knowing your site has your back.

My challenge for you is to choose a “sales” page on your site, then sit down with AIDA and have a look at it together.

Have you got elements on your site that don’t fit into the model above?

Are they filling space for the sake of it?

Well then wield the axe! Cut out some content and fine tune your sales process.

It doesn’t have to be a sales page. AIDA works with a landing pages too. Treat the action of clicking through to a relevant page as the action. Take a look at your landing page and check that it is taking people through the journey to another page.

How does this make things greener?

If I have sold this concept to you, you can see how this will increase site efficiency. How does it make things greener though?

You will find one of two things if you look at your site with AIDA in mind. One scenario is that your pages have too much content and aren’t focused enough. In that case you will be able to remove, copy, images, even sections that you don’t need. Less content means lower page file sizes. That means less storage, less to load and less energy required when a page loads.

In the second scenario you might actually need to add a little content. You might be getting attention but failing to hold interest. Or getting interest but not encouraging desire. Whatever is missing, you have users hitting the page but not converting. All those pages loaded for nothing. Sounds pretty inefficient to me.

Someone finds your site, clicks on a product, reads the page but doesn’t convert? What a waste of energy and effort! They still need to solve whatever problem they have. They wanted you to fix it for them. Now they have to go back to another site and start the process again! More pages loaded, more energy expended. If you’d just sold your vision to them, they would be a customer of yours by now. They’d have logged off, happy with their decision.

Have a look at your site and see what you think. If you’d like to discuss what you see, why not arrange a no obligation chat with me? We can invite AIDA if you want. She knows what she’s talking about.

Why should you strive to have a lower carbon site? You might experience a warm green feeling from doing good for the planet. That’s all well and good but there are other compelling reasons and tangible benefits to be gained.

---

Search Engine Optimisation

First up, green sites tend to have better SEO. Sorry if that made you snort a beverage onto your monitor. It does sound a little tenuous, but hear me out.

To build a green or sustainable website you need to carefully plan the site. You need to consider every aspect of every page. Every element of the site needs to be built with efficiency in mind. This translates into a site built and laid out using best practice. Sites are structured with the appropriate hierarchy aiding navigation. You lay out individual pages in an SEO friendly manner.

With your layout dialled in, you can look at page speed. Optimise the heck out of your site, images and code. Users love fast loading sites and so do search engines.

Search engines all favour:

• Pages that load quickly
• Efficient site structures
• Best practice for page layouts

Greener sites have better SEO!

---

User Experience (UX)

A lot of what makes green sites better for SEO also translates in to better UX. When you minimise the carbon footprint of your site, you scrutinise every aspect of the site. Along with being well structured, you should optimise your content. If your copy isn’t pushing users towards a conversion, do you need it?

Make sure your key messages are front and centre. Telling your story well engages your users. Every element on the page is there for a reason. It’s efficient web design.

Good UX comes down to:

• Well structured pages
• Economical, efficient use of content
• User engagement & getting your key message across

Greener sites have great UX!

---

Conversion rates

Now you have better visitors to your site through improved SEO. Your site visitors love the UX and engage with your story. The result is a better conversion rate. Users are on your site because your offering serves a purpose they need. They can easily navigate your well thought out site.

All this means that they can’t help but sign up for your newsletter. Or buy your product. Or book a discovery call about your service. Or follow you on social media. Or join your community group. Or, well you get the idea.

Greener sites convert your site visitors into customers!

---

Everyone wins

Taking steps to make your site more efficient is a win-win. People and planet win because you are reducing your digital carbon footprint. Your business wins because you win more work or sell more product.

My site audits are the perfect way of helping you make your site more efficient and greener. If you’d like to know more book a site audit discovery call. We can have a chat about how I can help you, your users and the planet.

The internet is a power hungry beast. Every time you search, browse or store something online there is a hidden carbon cost. If you would like to reduce your online carbon footprint there are three main areas you can make quick and easy improvements in.

Your website

If you host a website for your business, side hustle, brand or blog, you should think about how it is hosted. To get an idea of how “green” your site is check out Website Carbon to see how your site compares to the rest of the net.

My homepage is cleaner than 67% of sites tested which is great but there is still work to do!

If you are not happy with the results you can find out where to make improvements with Ecograder.  It will identify areas to make changes and provide a hit list to take to your web designer to open discussions. 

The biggest change you can make is to host with an eco-friendly hosting company.  All the sites I host are hosted on servers that use 100% renewable energy. It is the single biggest improvement you can make for your site. Better yet the improvement comes without changing a single line of code! 

Your Inbox

Have a look at your email account(s). How many unread emails do you have in there? Probably quite a few! The vast majority of us don’t pay anything for our email accounts. If you use Gmail or similar you basically have unlimited storage. If an email pops into your inbox you might leave it there rather than deleting it.  I know I used to!
The trouble with those unread emails is that they need storing somewhere and this has a carbon cost. Each stored email costs about 10g of carbon a year. So all those messages in your inbox start adding up. Take a few minutes to delete them. You’ll get a nice warm feeling from a cleaner inbox too!

If you use Gmail and want to find and delete all your unread mail this is a handy guide.

The second thing you can do is stop getting unwanted emails. Did you know that only 10% of email newsletters are ever opened. Of course you didn’t, no normal person would. If you think about all those emails trying to sell you something, or LinkedIn mails telling you about some ex colleagues’ work anniversary, it starts making sense. Cleanfox.io is a great tool for some newsletter and inbox cleaning. 

Your Search Engine

This is the easiest of the lot.  Instead of using google, use Ecosia.  Ecosia is a search engine which uses it’s ad revenue to plant trees.  If 1 in 5 people used Ecosia instead of google they could plant enough trees to sequester (capture) all the annual global carbon emissions!  So, change your search provider to Ecosia.

In Summary

So there you have it. Three easy ways of reduce your online carbon footprint.

• If you run a website, check where it is hosted.
• If you have an inbox, get rid of those unwanted emails.
• If you have a question, use Ecosia, not google

Want to know more? Get in touch!