Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I love stuff like this, just imagine how much frustration from flat batteries we could save if the whole world went dark!
However there is something to consider from the environmental perspective that is even easier to do.
The average smart phone takes about 20 watts to charge fully. Lets assume that gives 6 hours continuous use and that the person using the phone spends an hour staring at your website that is a total of 3.333 watts of energy used by the phone during that time.
According to research I could find transferring 1GB of data uses about 5.12 kw of electricity.
So 1mb of data uses about 5.12 watts of energy.
As such if you can save about 650kb in page weight then one page load would save the same amount of energy that viewing a page for an hour would use.
All of this is assuming the screen uses 100% of the phones power - which it doesn't.
So lets be generous and assume a screen uses 50% of the battery, that means we only need to cut 325kb from our page size.
Now lets assume that we manage to half the energy usage on the screen by going to dark mode, that takes the total saving needed to 162.5kb (as we want to save the difference in energy used of dark vs light)
Now lets also be more realistic and assume someone doesn't stare at the same page for an hour but instead reads 10 pages on your site in an hour.
That means we need to but the page weight by only 16.25kb total.
So, in summary, spend 10 minutes shaving 16.25kb off your page size and you could save the planet :-P
The one thing that I realised in all of this is just how insanely efficient mobile phones are!
(numbers are rough and ready, I probably made mistakes!)
I mean if we all had dark mode websites and saved 16kb on each page load I would imagine that would add up to thousands of tonnes of CO2 saved.
I've been a professional C, Perl, PHP and Python developer.
I'm an ex-sysadmin from the late 20th century.
These days I do more Javascript and CSS and whatnot, and promote UX and accessibility.
That research is a decade old now - transfer costs have presumably continued to improve since then.
It's also very awkward to define. They're trying to come up with some global average, but it clearly doesn't take the equivalent of three space heaters to move a movie from one hard drive to another. Numbers like 5KW aren't useful unless they have a time component (this is why you get charged in "kilowatt-hours")
I'm a web developer, graphic designer, type designer, musician, comicbook-geek, LEGO-collector, food lover … as well as husband and father, located just south of Copenhagen, Denmark.
In general, "the cost of the internet" is difficult to measure, I guess.
The number 416.2twH pops up as "this is what the internet costs", but that's just the electricity to drive data-centers etc. There's also the cost of building data-centers (in terms of CO2 emissions, where 1kg cement === 1kg CO2) and the infastructure around it. And if we need to calculate the cost of downloading data to a device, we also need to measure the costs of our routers, modems, and ... it's ... difficult!
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I'm a web developer, graphic designer, type designer, musician, comicbook-geek, LEGO-collector, food lover … as well as husband and father, located just south of Copenhagen, Denmark.
Not to mention all the different energy-units! We're measuring emissions in CO2, but the energy that creates them in KwH/TwH, eV ... even calories! In meat-production, a cow needs to eat 6 calories to produce the meat-equivalent of 1 calorie for us to eat - but we measure the end-result in CO2 - phew!
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Haha - we should measure everything calories...I mean I don’t have a chance as I live in the UK so we measure food in calories, temperature in Celsius, oven temperatures in “Gas Marks”, fuel usage in miles per gallon....you get the idea!
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Yes the numbers vary wildly, websitecarbon.com/how-does-it-work/ gives 1.8kwH / GB - which means you need to save around 55kb a page - still easy for most sites.
And yes the numbers are imperfect but the idea of this was to show a) how little power screens actually use today (which I find astounding!) and b) show that saving kb is the way to be greener and the one that most people can do.
This doesn't take anything away from dark mode, I am currently using the site in dark mode and I am a big fan, but designing a site with darker colours to try and save the planet is not fruitful.
Also I love that Mads took the time to design an image calculator for working out the energy usage - I would love to see that integrated in a site like PSI as he said!
In fact I would love for Google to do it for a whole site including the background colours etc. It wouldn't be that hard to do either as they already gather screenshots for the site to calculate the “Speed Index” that are low resolution - so pixel sampling them in a similar way to how Mads did it could give the answer for "battery life saving" and "kwH used".
ps.s I always get confused on power usage units so thanks for pointing that out!
I'm a web developer, graphic designer, type designer, musician, comicbook-geek, LEGO-collector, food lover … as well as husband and father, located just south of Copenhagen, Denmark.
There's so much more to energy-savings than images, of course.
Getting a low page-weight and caching assets should be the first thing to do.
Having said that, the huge savings for Google Maps in dark mode is significant!
And regarding saving the planet: I've just read Bill Gates' "How to avoid a climate disaster" and Bjorn Lomborgs "False Alarm" ... it's SO hard to determine what to believe and which measures we should take!
Take Lomborg with a pinch of salt. He thinks only the perfect action that solves everything is the only action worth taking. But this type of action doesn't exist. We have good options now, getting better by the day. Don't let the perfect be the enemy of progress.
I'm a web developer, graphic designer, type designer, musician, comicbook-geek, LEGO-collector, food lover … as well as husband and father, located just south of Copenhagen, Denmark.
He likes to provoke! ... but most of his suggestions (in the last section of “False Alarm”) are mostly the same as Bill Gates' suggestions in “How To Avoid A Climate Disaster”, so I guess we'll see some of them implemenented in the future.
I love stuff like this, just imagine how much frustration from flat batteries we could save if the whole world went dark!
However there is something to consider from the environmental perspective that is even easier to do.
The average smart phone takes about 20 watts to charge fully. Lets assume that gives 6 hours continuous use and that the person using the phone spends an hour staring at your website that is a total of 3.333 watts of energy used by the phone during that time.
According to research I could find transferring 1GB of data uses about 5.12 kw of electricity.
So 1mb of data uses about 5.12 watts of energy.
As such if you can save about 650kb in page weight then one page load would save the same amount of energy that viewing a page for an hour would use.
All of this is assuming the screen uses 100% of the phones power - which it doesn't.
So lets be generous and assume a screen uses 50% of the battery, that means we only need to cut 325kb from our page size.
Now lets assume that we manage to half the energy usage on the screen by going to dark mode, that takes the total saving needed to 162.5kb (as we want to save the difference in energy used of dark vs light)
Now lets also be more realistic and assume someone doesn't stare at the same page for an hour but instead reads 10 pages on your site in an hour.
That means we need to but the page weight by only 16.25kb total.
So, in summary, spend 10 minutes shaving 16.25kb off your page size and you could save the planet :-P
The one thing that I realised in all of this is just how insanely efficient mobile phones are!
(numbers are rough and ready, I probably made mistakes!)
I mean if we all had dark mode websites and saved 16kb on each page load I would imagine that would add up to thousands of tonnes of CO2 saved.
That research is a decade old now - transfer costs have presumably continued to improve since then.
It's also very awkward to define. They're trying to come up with some global average, but it clearly doesn't take the equivalent of three space heaters to move a movie from one hard drive to another. Numbers like 5KW aren't useful unless they have a time component (this is why you get charged in "kilowatt-hours")
In general, "the cost of the internet" is difficult to measure, I guess.
The number 416.2twH pops up as "this is what the internet costs", but that's just the electricity to drive data-centers etc. There's also the cost of building data-centers (in terms of CO2 emissions, where 1kg cement === 1kg CO2) and the infastructure around it. And if we need to calculate the cost of downloading data to a device, we also need to measure the costs of our routers, modems, and ... it's ... difficult!
Difficult is landing a rocket on the moon, calculating the actual cost of the internet is impossible I would say as we don't have enough data 😋🤣
Not to mention all the different energy-units! We're measuring emissions in CO2, but the energy that creates them in KwH/TwH, eV ... even calories! In meat-production, a cow needs to eat 6 calories to produce the meat-equivalent of 1 calorie for us to eat - but we measure the end-result in CO2 - phew!
Haha - we should measure everything calories...I mean I don’t have a chance as I live in the UK so we measure food in calories, temperature in Celsius, oven temperatures in “Gas Marks”, fuel usage in miles per gallon....you get the idea!
Yes the numbers vary wildly, websitecarbon.com/how-does-it-work/ gives 1.8kwH / GB - which means you need to save around 55kb a page - still easy for most sites.
And yes the numbers are imperfect but the idea of this was to show a) how little power screens actually use today (which I find astounding!) and b) show that saving kb is the way to be greener and the one that most people can do.
This doesn't take anything away from dark mode, I am currently using the site in dark mode and I am a big fan, but designing a site with darker colours to try and save the planet is not fruitful.
Also I love that Mads took the time to design an image calculator for working out the energy usage - I would love to see that integrated in a site like PSI as he said!
In fact I would love for Google to do it for a whole site including the background colours etc. It wouldn't be that hard to do either as they already gather screenshots for the site to calculate the “Speed Index” that are low resolution - so pixel sampling them in a similar way to how Mads did it could give the answer for "battery life saving" and "kwH used".
ps.s I always get confused on power usage units so thanks for pointing that out!
There's so much more to energy-savings than images, of course.
Getting a low page-weight and caching assets should be the first thing to do.
Having said that, the huge savings for Google Maps in dark mode is significant!
And regarding saving the planet: I've just read Bill Gates' "How to avoid a climate disaster" and Bjorn Lomborgs "False Alarm" ... it's SO hard to determine what to believe and which measures we should take!
Take Lomborg with a pinch of salt. He thinks only the perfect action that solves everything is the only action worth taking. But this type of action doesn't exist. We have good options now, getting better by the day. Don't let the perfect be the enemy of progress.
He likes to provoke! ... but most of his suggestions (in the last section of “False Alarm”) are mostly the same as Bill Gates' suggestions in “How To Avoid A Climate Disaster”, so I guess we'll see some of them implemenented in the future.
This might be useful/interesting - just released info with some data.