The festival of WordPress
January 22, 2021

This is an archive of the January 2021 event

Digital Sustainability: What It Is and How You Can Help

This talk is an introduction into digital sustainability, explaining how your website creates a carbon footprint, and what you can do to lower it.

Time: 11:00am UTC
Region: EMEA
Stage: BOH Stage

Good afternoon, morning, evening,

night, whatever time you’re watching

this and wherever you’re watching this.

I’d like to take the next 20

minutes or so to introduce you to

the idea of digital sustainability.

Explaining what it is,

what you can do to help.

Now I know this is weird as

you can’t ask any questions and

I can’t get instant feedback.

I’m also recording this as a single take

to try and make it as real as possible.

If you mess up on a stage, you

can’t edit it, so neither will I.

I will admit though that

this isn’t my first attempt.

Anyway firstly, a quick introduction.

I’m Chris, I’m the co-founder and

digital director of a small design

studio called Generate Space.

Um, I’ve been a developer, strategist,

designer, and solutions architect through

many different guises for over 12 years.

And have, yeah, I’ve used WordPress since

then and that, which was version 2.5.

And I’ve kind of been focused on

the idea of digital sustainability

for the past two years.

Okay.

Enough about me and straight into it.

Your website has a carbon footprint.

Now, this may come as a shock to,

this may come as a shock to everyone.

But every action online, it creates one.

For some, I know this will be

the first time hearing it, but

you can lower it quite easily.

Terminology like the cloud, wireless,

serverless make us think that the internet

is something completely ethereal and

doesn’t have a physical impact, but

nothing could be further from the truth.

This is 2,547 terawatt hours.

This number represents the

amount of electricity needed

to by the internet every year.

And that number is growing.

With more businesses and more data

and more users getting online, the

internet will continue to grow.

That number also represents 10% of

the world’s electricity consumption.

What this also means is that if the

internet was a country, it would be the

sixth highest polluter in the world.

And it would be on par

with the aviation industry.

Also recently I survey by Shopify plus

discovered that over 40% of consumers want

brands to be socially responsible, which

obviously includes having a lower impact

on the planet in some way, shape or form.

And digital sustainability

is one of the easier things

to kind of have control over.

So the internet users are electricity

in three different ways, the servers

where your website, your online shop or

your data sets and where it’s requested

from the network, transferring that data

from server to a device and the device

themselves read requesting reading and

rendering content, all use electricity.

So jumping straight into servers, one

of the easiest things that you could

do, or one of the first things that I

always do is make sure that the website

is hosted on a server that uses renewable

energy or is carbon neutral and migrating

to a provider that does there is, or

does use renewable energy if it isn’t.

If you can, obviously there

might be some other hard physical

necessities that your website needs.

That means that it can’t be done that way.

There are, there are now a plethora

of hosting providers that use

renewable energy or are carbon

neutral through offsetting.

The likes of Google Cloud,

Microsoft Azure, Hetzner, one.com.

and New Zealand at least raidboxer,

fasthosts, just to name a few.

The Greenway foundation

is a great resource here.

As it has a directory of hosting

companies that use renewable energy or

are carbon neutral three, or the methods.

You can go a little bit deeper.

You can go deep into this.

If you’re a little bit more technically

minded by looking at the software, the

software that’s actually running on the

server making sure that the version of

PHP is optimized kind of mySQL or any

database provider that you’re using.

But one of the simpler things that

you can do is actually look at caching

mechanisms to ensure that pages are

simply downloaded instead of generated

on the fly, which then lowers the

amount of electricity needed for the

website and also increases performance.

Can even take this a step

further and look at static sites.

WordPress has a few plugins to be able

to handle both of these But if you do go

down the static site route, there are some

features that you may need to rethink.

Such as search or contact forms, but

there are additional services to tap

into or ways of reworking working around

these such as using the JSON API to get

search results or does under contact form,

unfortunately with the amount of variation

in hardware and software on servers,

It’s impossible to

calculate the energy usage.

But one thing that we can measure hehe

accurately measure is network usage.

This is dictated by the number of requests

and the font size of each requests.

In very simple terms.

What we understand is that

data equals power equals CO2.

So the more data transmitted, the

higher the carbon footprint I’d

like to run through a few different

things, a few areas when it comes to

networking and some can get technical,

but even if you weren’t technically

minded, there is still things that you

can do, especially using WordPress.

So firstly images now images make

up the largest file type online.

Second to only video and audio for

the most part, images are also the

easiest to deal with having properly

resized and compressed images on your

website will instantly have a lower

carbon footprint than those that don’t.

Images also have multiple formats with

JPEG, one of the most popular, but there’s

been a rise of a not so new format called

webp, which is around two thirds of the

size of a JPEG with no loss of quality.

Unfortunately support is yet to catch up.

Although Safari now does support

webp, with the newest release in

Big Sur and it doesn’t work in all

the versions of internet Explorer.

Including Edge, some

older versions of Edge.

There’s also a new format called avif,

which is around half the size of a JPEG.

And is supported only in chromium

browsers at the minute.With these

new image formats, you can supply

multiple formats as a fallback so

if one isn’t supported, another one

is displayed, this then ensures that

everybody can see our images without

the life footprint that comes with that.

WordPress has a number of plugins

and services such as webpExpress

, shortpixel, smushit, just to name

a few that can compress and convert

and serve images that are the most

appropriate size for his location.

If you’re really brave, think about

whether you need images at all.

If you’re like me and you’d like

to topography and you like to

implement custom fonts , you

can do something about that.

Say whether you’ve had a developer do

this for you, or you’ve linked from

a third-party directly subsetting and

compressing the font can turn a 200

kilobyte file into a 10 kilobyte file.

It’s always a bit of a no-brainer.

Google fonts that allow you to do

using a special link, but they already

split up their charactet sets into

different files to handle this.

I’m not sure whether there is a

WordPress plugin that can handle this.

So if anybody finds one, please

do let me know, reach out to me on

LinkedIn or Twitter because I’d like

to give this talk again and I share it

.

 Again, if you’re brave, look at

using system fonts only, there are

still ways of making them beautiful.

Compress everything.

Now, there are a variety

of ways of doing this.

Whether you look to use something like

Broccoli or GZIP, you know, something

server-based you know, or compressing

code during development, ready for

production if you’re building from

scratch using build tools or additional

apps, whether that is Gulp, or Grunt

or Broccoli or webpack, or codeKit if

you needed a graphical user interface.

Having something like that as an

intermediary layer from your development

code to production means that you can

minify it and compress it, which then

instantly lowers the carbon footprint.

Again, there are a few WordPress

plugins that can that can handle this

after the fact such as autoptimize.

But there are a number of other

caching plugins that can do this too.

But what I would do is make sure

that you test them first on a staging

environment, if you can, as they

can break JavaScript dependencies.

Cache appropriately.

So if images CSS, JavaScript and

even pages that don’t change,

cache them, cache them infinitely.

But if there are pages that do need to

change set the expiry, you know kind

of caching appropriately, obviously

things like search or dynamic pages,

can’t really be cached that well unless

it’s for incredibly popular terms.

If you’re comfortable with it, you can

set the expiry headers in apache or nginx.

Modern versions of PHP- I’m thinking

mainly 7.0+ – have opcache baked in,

so you can cache output straight away.

If you don’t feel comfortable with

kind of tampering, server-side,

there is an abundance of plagins

that can handle this for you,

such as W3TotalCache or WP Rocket.

Again, test, test, test.

Always have a staging siteif you can,

just to make sure that nothing breaks

and also it allows you to do like

a really good comparison as well.

But anyway

.

 so when it comes to the devices, so by

reducing network traffic, you make things

easier on any device with less requests.

It means that there’s less to

request which that makes it easier,

but there are still a couple of

recommendations I can make here.

Really start to think about interactions

and animations , as they would help

reduce the amount of energy needed.

Question and interrogate anything that

you were given in, do things really need

to animate in if you’re a developer, you

know, if you are developer working in

an agency or as a freelancer, do they

really need to do this, make the case?

What value does it add?

Does that image really

need to be full screen?

Does that video really need to

be full screen again, be brave

about the decisions that you make.

Even outside er outside of your website.

There were still a couple of things that

you can do that I still class as digital.

Emails, for example, have

a, have a carbon footprint.

If you think about it, they are

still files that are sent from

server to server then to device,

and they can grow wildly in size.

You know, look at a signal, email images,

any signatures, and applying it to a

large amount of a large chain of emails.

If you can look at using plain

text instead of HTML, obviously it

doesn’t look as nice, but they are

still functional as pieces of text.

Again, look at your signature and

move on at any or necessary images.

If you are using HTML emails you can

use emoji’s just be careful with support

and always know that not everybody will

get the best experience from using them.

So you might be thin king what

are other company’s doing?

So companies like Google, Microsoft,

Apple, and Amazon have all come to

realize that their infrastructure is an

issue and have released statements and

pledges to lower that carbon emissions.

Google are carbon neutral and have

been through a while through the use

of carbon offsets, Microsoft have

pledged to become carbon negative by

all of that carbon from when there

were fo- first founded and they’ll be

doing that through a carbon offsetting.

Apple’s operations are carbon neutral

and plans for that product to be and

have plans for that products to be by

millions and millions into renewable

energy for their data centers and pledged

to be completely carbon neutral by 2040.

Automattic have started moving over

to becoming carbon neutral through

o-, through offsetting for now,

but may potentially look at moving

over to renewable energy services.

Well, renewable energy later

on further on down the line.

Well, this is all great it only

tackles part of the problem, which

is hosting for the most part with

devices for a couple, obviously with

the likes of Apple, for example.

But then that does kind of

lead me onto the next steps.

I mean, what else can we do?

I mean, events like these are amazing

as it allows people like me to speak

and to help build a collective, which

then gives each of us more power.

Learning from each other and pushing

for change by talking with what

matters, which is our money, choosing

suppliers based on their pledges

and goals for carbon neutrality will

force those that aren’t to change.

As part of this, I’ve been talking

to a few B Corp leaders about adding

companies, about adding a companies

digital carbon footprint to their impact

assessment as it’s getting more and

more important to think about every

aspect of an organization’s impact,

as well as pushing for change with

providers who don’t use renewable

energy to power their infrastructure.

If you don’t know er B Corporation

are an international organization

of businesses where they put..

their tagline is er “people

and the planet above profits’.

So they have a set ethical

standard of ways of working.

Again, To find that you

can use heavily online.

You can find out a lot more.

There’s a few B Corp leaders

that you can talk to locally.

If you want to find out more,

please find them, please reach out.

And also while I have the opportunity.

I’d like to run through some tools

that I’ve mentioned before and some

that I haven’t, that actually can

help . Digital Beacon and websitecarbon

a re both calculators that show

the carbon footprint of a webpage.

I’m hoping people have heard

of it, of website carbon.

That has been around for a

little while, a little while.

erm ShortPixel is an online

service and a plugin for

converting and optimizing images.

Squoosh is an online application that

allows you to compress and resize images.

And it’s developed by Google

hence the really strange name

.

The Green Web Foundation, as I mentioned

has a directory of hosting companies

around the world that use renewable

energy or are carbon offsetting, but it

also has a little tool on the homepage

that allows you to check whether your

website is using renewable energy or not.

Tran sfonter is a little online

tool that allows you to upload

or convert a file, a font file to

woff2, and allows you to subset it

so that you can use it straight away.

And WithCabin is an, an an analytics

platform that is focused on privacy.

Doesn’t use cookies, so you don’t

need a horrible cookie banner anymore.

And it actually also

measures the carbon impact.

It measures how much carbon is generated

from people visiting your website.

Lastly, some links these have been.

I mean, I’m going to try and get

all these together and share it with

Dan and so that they can be listed

somewhere because I think these

are really, really handy to read.

I mean, you can see right there,

but you know, there’s been articles

from the BBC and things like that,

you know, this is a big deal.

I’m going to,

I’ve no doubt that at this point,

you have an absolute ton of

questions on this on this subject.

And I’m glad you do, because it

means that you’re thinking about it.

And while you can track me down on

social media, and if you do have things

to share, please do I hope search

for these, the answer to all your

questions yourself, because then it

means that you could learn more than

I can teach you in this 20 minutes.

Well, in fact nearly 19 minutes.

But yeah, if you do have anything

to share, if you do have any more

information, any new information

that you’d feel I’d find- find

helpful, please do track me down.

But yeah, I mean with that.

Thank you for listening

and thanks for your time.

Share this session

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email