Abstract
Did you know that more than 250 000 websites are published every day? The majority uses too heavy fonts, too large/unnecessary images or utilises redundant libraries. These and other factors generate the carbon footprint. Actually, one view of an average website emits 4.6 g CO2 which sums up to 553 kg CO2 annually. Unfortunately, current solutions optimise only already existing websites.
ec0lint is a tool for frontend developers that mitigates the carbon footprint of websites. It shows tips advising how to create a more climate-friendly code. Thanks to code optimization ec0lint can help in reducing CO2 emissions per one view from 4.6 g to ~0.2 g saving 529 kg CO2 (-96%!) annually.
In the keynote, we want to share our knowledge about digital ecology with the audience, tips and tricks on how to mitigate digital footprint and information about the tool we created.
Our website (active from the official release day 07.06.22): ec0lint.com
An article with tips written by me: https://www.linkedin.com/pulse/change-your-online-habits-mitigate-climate-crisis-katarzyna-wojdalska/
An article about digital ecology written by me: https://www.linkedin.com/pulse/have-you-ever-wondered-how-much-carbon-emissions-your-wojdalska/
Our GitHub: https://github.com/ec0lint/ec0lint
Transcript
This transcript was autogenerated. To make changes, submit a PR.
Jamaica real
time feedback into the behavior of your distributed systems
and observing changes, exceptions.
Errors in real time allows you to not only experiment with
confidence, but respond instantly to
get things working again.
Code hi.
Today I'm going to talk about digital ecology and
how to mitigate the carbon footprint of websites.
Let's begin. What is digital ecology?
It is a field of study about the interdependence of digital systems
like the Internet and the natural environment. So, long story
short, everything we do online and what we do offline with
our devices generates carbon footprint. But to be
clear, digital ecology is not about taking a step back.
It's not stopping people from using the Internet. It's all
about introducing more sustainable,
greener habits and routines.
You might wonder now, how does the Internet emit co2?
It starts with data collection. So with servers, with data centers
and the cloud. And if we think about the cloud, we might think about something
white, light, bright or in the sky. But the truth is
that storing data in the cloud means storing data
in these large facilities called the data centers,
which have to be powered up and cooled down 24 hours,
seven days per week. For example, storing 100gb
of data in a data center emits 0.2
fonts of co2 per year. And this
is 700,000 times more than if
you would be storing this data on your hard drive.
Another fact is that data centers are responsible
for 1% of world's electricity consumption.
Next, data transferring via the infrastructure,
via the telecom infrastructure. So power lines and everything here
has to be powered up as well. And last but not least,
end devices. So, for example,
charging smartphones, the energy that is needed for that overtook
the energy that is needed for charging laptops and pcs in
2020. And producing and charging smartphones is
actually responsible for 1% of all global
emissions. Pretty impressive.
And I'm not even mentioning these natural resources that
are needed for manufacturing our smartphones.
So is it important? It quite is. The ICT
industry stands for 4% of all greenhouse
gases. And if we go back to
the cloud by 2025,
we predict that in the cloud we're going to be storing 100
zetabytes, which will be emitting 200 billion
tones of co2 per year.
What can we do about it?
These are some simple techniques that you can be using in your daily
life. So let's start with emails. By 2023,
the predictions are that every day there's going to be 347,000,000,000
emails sent out every day. And sending one email results
in existing 4 grams of co2.
Another factor is that storing emails emits
19 grams of co2. So deleting
emails or just sending them less really makes some sense.
And one average user stores 10,000
emails on a mailbox.
So deleting emails,
unsubscribing to spam, and using
alternative messaging tools like slack or the
old sums is really important.
And if we think about the size of emails, you can, for example,
try to remove an image from your footer to decrease
these size and thus emit less co2.
When it comes to browsing, there are some alternative
to Google. So to our most favorite
search engine. So for example, there are search engines like Ecosia
or Lilo, which are more eco friendly, let's say.
And there is also the DuckDuckgo, which is much more ethical.
Another factor is closing tabs, because if they still remain open,
they still have a connection with the servers. If you
remember the address, write it directly in the
tab. Think about marking some of your favorite pages
by adding bookmarks and briefing the keywords that you use.
It's also important to erase from time to time your
old media on social media platforms.
And when it comes to devices, changing smartphones
or computers left often is very good
for the environment. So imagine that, for example,
replacing every 6th year instead of every fourth year,
your computer emits 190
kilos of co2 less. So this is quite
a large change. It's also about deleting
mobile apps that you don't use, about disabling mobile
notifications. And for example, you can try also unplugging
your router for the night.
Let's go now to the main topic of today's speech. So,
websites, did you know that every day 250,000
new web pages are being published and each
of them generates 1.8 grams of co2,
what sums up to 216
annually. And this assumes that a web page is being
visited 1200 times monthly
and this number, so 216
less this much as for driving almost 1000
gasoline car. So how much co2
does your website produce? Have you ever wondered that?
To check it out, you can use this popular tool
online called the website carbon Calculator.
It is very clear about how to calculate the carbon
emissions. It's very transparent, so I can strongly recommend it.
And here it's enough to just copy paste your URL here
and click the calculate button. So how
to calculate the co2 emissions of these website?
First we have to consider the data transfer of an average
visit. So according to carbon calculator,
the data transfer of the first visit stands only for 25%
of all visits. And the data transfer of the returning
visits stands for 75% and it is
equal these energy of the website multiplied by 2% because
already some data was cached before. So during the first visit
then we have to consider the energy of the website,
which is equal to the website size multiplied by the end
user traffic, and the end user traffic here is equal to
almost 1.
Last but not least, the emissions of zero to
per one visit. So this is equal to the data transfer
of an average visit multiplied by the energy emissions.
And the energy emissions vary from country to country.
So what this web page is using and what we
are using in the tool is 442
grams/kw hour. So this is the global average
of energy emissions.
So to sum it up, the emissions of co2 per
one visit are equal 75% multiplied
by the website size, plus 25% multiplied
by 2% multiplied by the websites.
And this is multiplied then by the end user trapping
and by the energy emissions.
So what can we do to create more sustainable websites?
First, let's think about the programming language.
I assume that you are all coding your websites in
either JavaScript or typeScript. And here, as you can
see on the graph, JavaScript is a little bit better than typescript
and much much better than for example Ruby,
Python or of course the worst.
But of course if we talk about websites, it's much better
to use JavaScript or typescript than platforms like
Wix or WordPress. Because then we have more
control over the code. We can more easily remove some largeunnecessary
parts and implement any changes.
When it comes to libraries. Here you can see some of
the most popular ones with
their emissions. So for example,
you can rethink if all of the libraries that you're adding are really
needed. Because for example for load you could maybe try using
just plain JavaScript, or you could use the already built in fetch
instead of adding some largeunnecessary libraries when
it comes to calls to external APIs, think about
reducing the number of calls. So basically rethinking the logic
of your call about caching data both on the frontend
and on the back end side. And as I already mentioned,
just using plain JavaScript or lighter libraries.
When it comes to resources, there are three most important factors
that you have to consider. So images, videos and
fonts. When it comes to images, it's best to save them in
SVG or Webpy. Webpy is a
very highly compressed format and SVG is
a vector format. So all of them,
the file sizes of images saved
in these formats are much less than
if these would be saved in for example pNg. So here
you can see like 95% of a difference. And here you can see
again a table with the corresponding
co2 emissions based on the file format for this image
shown on the left side. When it comes to
videos, a sibling format is Webm.
So it's also a highly compressed format which I strongly recommend.
And when it comes to fonts, it's of course better to
use the system fonts than these hosted online.
And if we think about the formats then the most
popular format is TTF, but it's also
the less sustainable one,
so it's better to use wof two. And here you
can see that by just changing these font format we can get up
to -70% of co2 reductions. And of
course a user will not see the difference. So all these changes
will not influence the quality of your website.
Talking about colors, it's really good if you could enable a
dark mode of your website. And here you can see what is
the energy efficiency of different colors on all emits
screens hosting
so every time you pick a hosting provider, take a look
at the power user usage effectiveness. So Poe
of the data center that your hosting provider is using,
the lower the number the better. Think also
about the policy of your hosting provider because
some of them are using for example green employee behavior policies,
they are planning to plant trees and so on and so forth.
So they are doing much more than just using some
less power user effective data
centers. And it's of course good to
use a hosting provider that uses renewable energy.
And if you don't know where to look for a green existing provider,
I recommend to open the green web foundation website
and take a look at some options there.
Last but not least, user data collection. So it's
about tracking users, it's about personalized
ads and collecting the data. And here is an
example of USA Today which was a web
page, which still is a web page, but after the
EU introduced these GDPR policy,
it started to run faster.
So actually it was loading 91% faster,
so it became these much lighter.
And why should we be doing all this? So first of course we can
mitigate the carbon footprint and thus we can also save electrical
energy. This results also in shorter loading time,
which is really essential for uses. And for example,
here's a statistic that 53% of users
can be lost if a website loads longer than in 3 seconds.
And with shorter loading time we can improve SEO as well.
So you don't have to remember all these techniques
by heart. But if you want to please read this presentation
once more. You can also read a book called sustainable
web design. I can strongly recommend this one. It's written by Tom Greenwood.
But together with my team I developed a tool
called eclint. Eclint is Alvinter.
It works very similar like Athlint,
but what it does, it proposes possible code improvements to mitigate
the carbon footprint of websites and makes them basically more sustainable.
And it contains of two elements. So eclint
and this is more or less like s eclint and eclint style
which can be compared to for example, stylint. Hope that you know
these tools and eclint style is for CSS
and CSS like languages. And underneath here
you can see an example of how you can be using eclint, what kind
of command it was and what change did it implement.
This is the list of features that we want to implement by the end of
the year. And them ones marked in blue are the
ones that we already implemented and the violet ones are the
ones that we are still working on. And what
we hope to achieve is that we can reduce with eclint
the emissions even by 88%. So according to our
calculations, we hope this would be doable after
comparing some heavy websites
to the lighter ones. And for example, so I mentioned in
the beginning that every day 250,000 new
websites are being published. So assuming that they would be visited
10,000 times a monthly, this would emits
54 million annually.
And this is equal to driving 220,000,000
gasoline can by reducing this number by 88%,
suddenly we get 26 million kilometer only.
So how to get started with Eclint?
First of course you have to have node installed. Then you have
to install eclint, eclint style and eclint style
with the recommended config. Then you have to initialize the project
with the recommended config and you have to run
it. So run eclint and eclint style.
We are still working on IdE.
So soon it is going to be even much easier
to start using Eclint. And as this is an open
source tool, it's completely free to use. And if
you think that this project sounds interesting to you, we strongly recommend you
to just text us and start collaborating.
Here is the list of references and
this is me Katajana. I'm the co founder and CEO of eclint.
Feel free to reach out to me on LinkedIn or just text us
by using the website. By using the email you
can also check our LinkedIn profile and
if you like what we are doing, please leave us a store on GitHub.
Thank you so much for your attention.