Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sustainability 2022 #2910

Closed
6 tasks done
rviscomi opened this issue Apr 14, 2022 · 61 comments · Fixed by #2989 or #3132
Closed
6 tasks done

Sustainability 2022 #2910

rviscomi opened this issue Apr 14, 2022 · 61 comments · Fixed by #2989 or #3132
Assignees
Labels
2022 chapter Tracking issue for a 2022 chapter ASAP This issue is blocking progress help wanted Extra attention is needed
Milestone

Comments

@rviscomi
Copy link
Member

rviscomi commented Apr 14, 2022

Sustainability 2022

If you're interested in contributing to the Sustainability chapter of the 2022 Web Almanac, please reply to this issue and indicate which role or roles best fit your interest and availability: author, reviewer, analyst, and/or editor.

Content team

Lead Authors Reviewers Analysts Editors Coordinator
@ldevernay @ldevernay @gerrymcgovernireland @timfrick @mrchrisadams @cqueern @Djohn12 @fershad @camcash17 @4upz - @tunetheweb
Expand for more information about each role 👀
  • The content team lead is the chapter owner and responsible for setting the scope of the chapter and managing contributors' day-to-day progress.
  • Authors are subject matter experts and lead the content direction for each chapter. Chapters typically have one or two authors. Authors are responsible for planning the outline of the chapter, analyzing stats and trends, and writing the annual report.
  • Reviewers are also subject matter experts and assist authors with technical reviews during the planning, analyzing, and writing phases.
  • Analysts are responsible for researching the stats and trends used throughout the Almanac. Analysts work closely with authors and reviewers during the planning phase to give direction on the types of stats that are possible from the dataset, and during the analyzing/writing phases to ensure that the stats are used correctly.
  • Editors are technical writers who have a penchant for both technical and non-technical content correctness. Editors have a mastery of the English language and work closely with authors to help wordsmith content and ensure that everything fits together as a cohesive unit.
  • The section coordinator is the overall owner for all chapters within a section like "User Experience" or "Page Content" and helps to keep each chapter on schedule.

Note: The time commitment for each role varies by the chapter's scope and complexity as well as the number of contributors.

For an overview of how the roles work together at each phase of the project, see the Chapter Lifecycle doc.

Milestone checklist

0. Form the content team

  • May 1: The content team has at least one author, reviewer, and analyst

1. Plan content

  • May 15 The content team has completed the chapter outline in the draft doc

2. Gather data

  • June 1: Analysts have added all necessary custom metrics and drafted a PR (example) to track query progress
  • June 1 - 15: HTTP Archive runs the June crawl

3. Validate results

  • August 1: Analysts have queried all metrics and saved the output to the results sheet

4. Draft content

  • September 1: The content team has written, reviewed, and edited the chapter in the doc

5. Publication

  • September 15: The completed chapter and all required metadata and figures are converted to markdown and submitted to GitHub
  • September 26: Target launch date 🚀

Chapter resources

Refer to these 2022 Sustainability resources throughout the content creation process:

📄 Google Docs for outlining and drafting content
🔍 SQL files for committing the queries used during analysis
📊 Google Sheets for saving the results of queries
📝 Markdown file for publishing content and managing public metadata
💬 #web-almanac-sustainability on Slack for team coordination

@rviscomi rviscomi added help wanted Extra attention is needed 2022 chapter Tracking issue for a 2022 chapter labels Apr 14, 2022
@rviscomi rviscomi added this to the 2022 Content Planning milestone Apr 14, 2022
@rviscomi
Copy link
Member Author

@cqueern @gerrymcgovernireland you've expressed an interest in a sustainability chapter before. This chapter could use coauthors, reviewers, and analysts if you still have the interest and time!

@ldevernay has stepped up to author the chapter 🎉

@tunetheweb
Copy link
Member

@fershad
Copy link
Contributor

fershad commented Apr 14, 2022

@tunetheweb @rviscomi I'd love to put my hand up as an analyst, though will need guidance when it comes to querying the dataset.

@mrchrisadams would you also be interested in contributing?

@gerrymcgovernireland
Copy link

gerrymcgovernireland commented Apr 14, 2022 via email

@ldevernay
Copy link
Contributor

This enthusiasm is awesome!
I will look into the outline to offer some details today.

I'm really eager to work with you all!

@mrchrisadams
Copy link

Hi folks.

I'd be happy to contribute as a reviewer at least, given those timelines. I'll ask internally to see if there's anyone who might be able to contribute in other roles.

@cqueern
Copy link
Contributor

cqueern commented Apr 14, 2022

@cqueern @gerrymcgovernireland you've expressed an interest in a sustainability chapter before. This chapter could use coauthors, reviewers, and analysts if you still have the interest and time!

I'd love to support as a Reviewer. Thanks. Looking forward to working with everyone.

@bkardell
Copy link
Contributor

I'm curious what this will cover?

@ldevernay
Copy link
Contributor

In my opinion, the point would be to start with insights on the environmental footprint of digital then focus on sustainability applied to websites. Which tools to use to monitor/measure, where to find best practices (and how to prioritize them).
Based on this, analysis of the main proxy metrics for environmental impacts : page weight and number of request (most often use to calculate environmental indicators through various models), explore how to use proxy metrics (such as Core Web Vitals) and finally which other metrics could used to check on sustainability best practices (image format, inclusion of third-party, minification, compression, cache, lazy-loading, etc).

The idea would also be to highlight the links to other topics (Performance, Accessibility, Privacy, etc) and briefly explain how to go further (design reviews, measuring other metrics, setting an environmental budget, etc).

Also : state of the art regarding repositories of best practices and tools to calculate the environmental impact (and where to go from here).

@gerrymcgovernireland
Copy link

gerrymcgovernireland commented Apr 14, 2022 via email

@ldevernay
Copy link
Contributor

ldevernay commented Apr 15, 2022

Great points @gerrymcgovernireland !
Here is the complete outline :

Introduction
Environmental impact of digital
Understanding the impact
Main figures, resources
Studies :
https://www.greenit.fr/environmental-footprint-of-the-digital-world/
https://www.greenit.fr/wp-content/uploads/2021/12/EU-Study-LCA-7-DEC-EN.pdf

Most of the impact comes from user devices, mostly because their fabrication is very impactful. What we can do about that is to reduce the impact of digital services (and change the way we think about digital as being immaterial and environmentally friendly by default).
Bonus : Insights from Gerry McGovern (World Wide Waste)

Evaluating the environmental impact of websites
Tools (EcoIndex, website carbon, etc) : https://marmelab.com/blog/2022/04/05/greenframe-compare.html
=> Understanding the choice of metrics + what’s to expect from tools in the coming years

Reducing the impact
Coupling best practices and measuring (via tools).
Repository of best practices (115 best practices, INR, etc).
Books and websites (sustainablewebdesign.org, etc)

Analysis by Metrics
Monitoring the impact
Page Weight
Number of requests (and their distribution)

Checking for the usage of sustainability best practices on the web
Cache
Image Optimization => Lazy-loading, responsiveness, format, quality
JS/CSS :Compression/minification, Unused code
Video : preload, etc.
Animations?
"Those pages people will never open"?
Third parties
Bonus : web performance VS sustainability. Where they meet, where they differ
Conclusion

This covers most of your points, I think.

On best practices, we should add "limit/avoid animations" with a focus on avoiding JS in favor of CSS for "essential" animations.

@ldevernay
Copy link
Contributor

I sent a message to Tom yesterday and another to Tim this morning, hope they will have some time for this!

On the impact being mostly on devices, I totally agree and that's what the studies mentioned on my previous comments illustrate.
This is why, in the company where I currently work, we also gather metrics on real devices. On smartphones, this is a good way to measure the depletion of the battery, which allows us, through an environmental model, to evaluate the global environmental impact of a digital service and the share that is due to device manufacturing.
As of today, this is still (unfortunately) a proprietary methodology and model. More details here : https://greenspector.com/en/environmental-footprint-methodology/

@timfrick
Copy link

Hi All,

Just getting caught up here. Look forward to collaborating with you all. Per some of the points brought up earlier in this thread:

For the Sustainable Web Design model, we based our consumer device use numbers mostly on the Andrae study, which estimates that at 52% of the system with repeat visitors using 25% and loading 2% of data: https://sustainablewebdesign.org/calculating-digital-emissions/

I believe this is reflected in the Green Web Foundation's CO2.js as well, correct @mrchrisadams?

Per @gerrymcgovernireland's suggestion to tag waste, we're doing this in the new version of Ecograder by identifying how much of a page's emissions impact is due to uncompressed images, unused code, animations, etc. Happy to discuss details if anyone's interested. Our goal is to launch that a week from today, though work on this will be ongoing.

@ldevernay
Copy link
Contributor

@timfrick : great to have you onboard!

This new feature from Ecograder sounds awesome! I would love to have more info on this.

I somehow missed the article on calculating digital emissions, I will read this.

@ldevernay
Copy link
Contributor

Dear contributors, here is the document containing the outline (WIP) : https://docs.google.com/document/d/1g1ACWRTAzTlcaKKODNASLkXe4zquF-XR5oHh0GfayP8/edit#heading=h.orr5h1m9v3cm
You should request edit access since we will be working on this document to write this chapter.

@cqueern
Copy link
Contributor

cqueern commented Apr 15, 2022

Hello All.

Most of the impact comes from user devices, mostly because their fabrication is very impactful.

Are we suggesting an analysis and discussion of the sustainability or environmental impacts of hardware used to browse the web? I don't believe that would be in scope as the Archive focuses on how websites are built. We don't collect and have data about the fabrication of user devices (or even user agent data) for us to comment on.

But perhaps I misunderstand your suggestion.

@ldevernay
Copy link
Contributor

This should not be the aim of the analysis (other studies do that pretty well) but we should keep this fact in mind because it is a huge part of the reason why digital services should be as sustainable as possible.

The reasoning here is :

  • Most of the environmental impact of digital comes from manufacturing our devices
  • This gets worse because people around the world own lots of devices and change them too often
  • Why do we change our devices? Most of the time, because they lag
  • How do we prevent that? By making digital service more sober and efficient => sustainability

This makes Web Almanac the best place to study if websites today are sustainable and show how to reduce their environmental impact with sobriety and efficiency considerations.

@gerrymcgovernireland
Copy link

gerrymcgovernireland commented Apr 15, 2022 via email

@gerrymcgovernireland
Copy link

gerrymcgovernireland commented Apr 15, 2022 via email

@gerrymcgovernireland
Copy link

gerrymcgovernireland commented Apr 15, 2022 via email

@timfrick
Copy link

Happy to chat about that at any time, @gerrymcgovernireland

@fershad
Copy link
Contributor

fershad commented Apr 17, 2022

For the Analysis by Metrics section of this chapter, I feel we could also look at aligning with the CMS, eCommerce, and Jamstack chapters to examine how the different (top??) platforms in those categories perform in terms of sustainability. Could look at median size of pages, and also hosting options (can self-host? does managed hosting use known green web hosts?).

@rviscomi
Copy link
Member Author

FYI we've created a #web-almanac-sustainability channel on Slack if you'd like a higher bandwidth place to brainstorm content.

I'd also encourage everyone to request edit access to the planning doc and iterate on the chapter outline there.

@radum
Copy link

radum commented Apr 20, 2022

This should not be the aim of the analysis (other studies do that pretty well) but we should keep this fact in mind because it is a huge part of the reason why digital services should be as sustainable as possible.

The reasoning here is :

  • Most of the environmental impact of digital comes from manufacturing our devices
  • This gets worse because people around the world own lots of devices and change them too often
  • Why do we change our devices? Most of the time, because they lag
  • How do we prevent that? By making digital service more sober and efficient => sustainability

This makes Web Almanac the best place to study if websites today are sustainable and show how to reduce their environmental impact with sobriety and efficiency considerations.

I think you are making some assumptions here that have no research to back them up. People don't always change devices because of lag. I think the regional factors and many other have an important role. So IMHO this assumption is just speculation.

Making your digital service, in our particular context here the web, more sober and efficient doesn't translate into improved sustainability.

I think we need a proper definition on what sober and efficient actually means. Or what do we mean exactly by sustainability.

@timfrick and the team behind https://sustainablewebdesign.org/calculating-digital-emissions/ are able to calculate a number based on volume of data over the wire. I think this is wrong.

If you build the most performant website with LH scores in 100s and under 2s load time for 3G connections doesn't mean that is sustainable.

Sustainability is the ability to maintain or support a process continuously over time. This is not just about CO2 emissions. It is about everything. You can be performant, but if each change to the digital service requires a full rewrite, that means is not sustainable. And so on, this can be applied to the entire life cycle of a digital service.

If we are to think about CO2 emission, because this is where most people look at when they think about sustainability, I think we are focusing on the wrong thing. As I mentioned above, data volume over the wire doesn't have a direct correlation with energy consumption.

A persons router uses more or less the same amount of energy under heavy traffic vs normal / idle. Even the Anders-Andrae study says that.

From 2020 the improvement of kWh/unit/year for devices is assumed 3% as in [10]. The difference is
that Wi-Fi is added to the consumer devices section. Wi-Fi is overestimated in [3] as the Wi-Fi modems electric
power use is actually rather independent of handled traffic

There is also a study from Cisco that reaches the same conclusion, volume of data is not a major factor in energy consumption.

There have been articles around how Netflix is killing the planet using the same metric of volume of data over the wire, that have been debunked .

@ldevernay As you said most of the environmental impact of digital comes from manufacturing our devices among many other things.

When thinking about the actual digital service, a website, the device screen is the biggest energy consumer. Which means in a simplistic way that there are only 2 ways to fix it, improve the energy consumption of those screens or keep your users away from them.

First can't happen in a "sustainable way" due to adoption and cost, the other it is in our hands to fix. And this is where web performance is critical. Make it fast and you are one step closer. But if your UX is poor you are negating your performance improvements, as the user spends more time using that digital service to fulfil a task. Fixing the UX also is not the end of the road as there are other factors in play.

Imagine if TikTok was a web app, highly optimised with an amazing web perf grade (images and videos compressed in an ideal world). Would we call that digital service sustainable for the environment (energy consumption to be more precise)? I would say not, because spending hours with your screen ON watching videos drains your battery and so on.

On the same note, if I have a poor performant web site, but all my users power their devices with solar, would you still consider it as performing poorly on a sustainability index? All studies done in the past, don't factor enough how energy production looks like in the future. And when they do they need to guess what will happen. For the first time, wind power eclipsed both coal and nuclear in the U.S for 1 day in March. In the UK is happening more often.

IMHO Sustainability should not be a chapter in itself for web almanc. Perhaps it can be included into various chapters in that particular context.

@radum
Copy link

radum commented Apr 20, 2022

Another example where I think that volume of data over the wire is wrong

@gerrymcgovernireland posted this a while back https://twitter.com/gerrymcgovern/status/1494225017839697920

An analysis of top 1 million websites found 21 million tracking cookies belonging to 1200 companies. Every month, 197 trillion cookies move across this deceitful network, resulting in 11,442 monthly metric tonnes of CO2 emissions. Just cookie CO2.
https://carbolytics.org

The assumption here is that if those tracking cookies disappear overnight 11442 metric tonnes of CO2 emission would be gone. This is unrealistic considering the devices that were moving those cookies behind the scenes will still be using the same amount of energy because as it was said before electric power use is actually rather independent of handled traffic.

@tpgreenwood
Copy link

Hi, thanks for the invitation @ldevernay - I'm just putting my name forward here that I may be able to assist as an author and/or reviewer. I am very short of time at the moment so I can't promise my availability, but would like to help if I can.

@ldevernay
Copy link
Contributor

@mrchrisadams @cqueern @Djohn12 @tpgreenwood : Don't forget to add yourself to the google doc and to join #web-almanac-sustainability on Slack:
https://docs.google.com/document/d/1g1ACWRTAzTlcaKKODNASLkXe4zquF-XR5oHh0GfayP8/edit#heading=h.orr5h1m9v3cm

(for those of you who want to join as authors, I don't think it is necessary to join as a reviewer too, it is implied)

We seem to have a full team, thanks everyone!
As soon as everyone has joined Slack and updated the google doc, we will work on the outline.

(I will be off for a few days starting today + business trip next week so my response time might be a little disrupted)

@hanopcan
Copy link

Hi folks, I'd like to offer some time as a reviewer if I'm not too late.

@ldevernay
Copy link
Contributor

@hanopcan : this would be great!
Please join the Slack channel and add your name on the google doc!

@ldevernay
Copy link
Contributor

Hi, we're having a kickoff meeting next week to get to know each other and work on the outline.
If you haven't yet, don't forget to join the slack channel and add you email address on the google doc until then, so that I can invite you!

@camcash17
Copy link
Contributor

If possible, @4upz and I would like to volunteer as Analysts.

@tunetheweb
Copy link
Member

Excellent. Invited you to the project there.

@tunetheweb
Copy link
Member

@ldevernay I think we're good to tick off Milestone 1 in the initial comment? We've a good solid outline there, and although it may change still I think we've enough to say we've reached the milestone.

@ldevernay
Copy link
Contributor

That's true, thanks @tunetheweb !
I will take some time today or tomorrow to clean the google doc and make sure the global structure is appealing to readers and that the content for every section seems clear.
We can then think about who wants to write what.

@tunetheweb
Copy link
Member

Hey all, apologies I've been a bit quiet lately, but been travelling and not had too much Almanac time lately.

How are we looking now? Milestone 2's date has passed by quite a bit now, but the crawl is still going on (not sure if you saw Rick's update on Slack in the Web Almanac channel?), so that gives us a bit of time to catch up.

We didn't need to add any new Custom Metrics for this chapter, so we just need to open a draft PR with a list of queries to write to complete that Milestone (note you do not need to have the queries written to complete Milestone 2 - just have a list of them). You can see example open PRs for the other chapters already open.

It looks like you've a list of them in the Doc, so just need to firm up the exact metric we want for each of them, and then create a draft PR with the checklist.

@fershad @camcash17 @4upz as the analysts for this chapter can one of you do this? This will also focus you to question the rest of the chapter team as to exactly what's wanted if a metric is vague, unclear or ambiguous.

@ldevernay
Copy link
Contributor

Hey @tunetheweb : as soon as this is done, we can settle to see who writes what. Even without the metrics, we should be able to give some flesh to this chapter.

@tunetheweb
Copy link
Member

@fershad @camcash17 @4upz any progress on that draft PR? most of the other chapters have theirs up now.

@4upz
Copy link
Member

4upz commented Jun 17, 2022

Hi @tunetheweb, sorry we've been away for most of this week. But currently still working on it, and hoping to have a draft done by early next week!

@tunetheweb
Copy link
Member

Ok, just to be clear the current Milestone is just to have the list of queries - not the queries written themselves. You’ve a little more time for them. Just want to make sure everyone’s clear on what queries need written.

@camcash17 camcash17 linked a pull request Jun 23, 2022 that will close this issue
21 tasks
@tunetheweb
Copy link
Member

Hey all, I see #2989 has been raised. Think we're ready to check off milestone 2 @ldevernay ?

Also just to make you aware the data is all i there now (apart from parsed_css if looking for CSS data) so you're good to start querying @fershad @camcash17 @4upz ! Do reach out if you need any help with queryies.

@ldevernay
Copy link
Contributor

@tunetheweb : yes, I think we can check milestone 2.

@tunetheweb
Copy link
Member

OK I've completed the review of the request PR, made a few tweaks (took a couple of liberties, but think it's for the better!), ran (or reran where necessary) all the queries, saved the data, created some charts I think presents the data nicely (though let me know if you want other charts).

So I think we're all done with the analysis phase. Over to the writers to copy and past in the charts or data they want to use, and finish writing the chapter!

@tunetheweb tunetheweb reopened this Aug 19, 2022
@ldevernay
Copy link
Contributor

@tunetheweb : this looks awesome!
I'll try to take some time this week to check on this and work on the chapter.

@rviscomi rviscomi added the ASAP This issue is blocking progress label Sep 3, 2022
@tunetheweb
Copy link
Member

The chapter has been converted and edited and is available in the below staging links:

Last call for any changes before it's merged!

It's looking great so well done all involved.

@cqueern
Copy link
Contributor

cqueern commented Sep 19, 2022

The chapter looks great. Hats off to all the Authors.

I especially like the Actions You Can Take section. A great list for site owners to get started on, added to the backlog, and make the impactful change for a more sustainable web we are hoping for.

Great work All.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
2022 chapter Tracking issue for a 2022 chapter ASAP This issue is blocking progress help wanted Extra attention is needed
Projects
None yet