This talk is an introduction into digital sustainability, explaining how your website creates a carbon footprint, and what you can do to lower it.
This talk is an introduction into digital sustainability, explaining how your website creates a carbon footprint, and what you can do to lower it.
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.
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.
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
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.
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.
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.