Eco-friendly Web Design

created Jul 12, 2018

Web bloat shaming. Hilarious. Accuse owners and creators of bloated websites that they are destroying the planet.

Bloated websites consume more energy due to the crapware that readers are forced to download and execute on their computers, draining batteries and red-lining CPUs.

https://css-tricks.com/delivering-wordpress-in-7kb/

The web in a warming world

As a brief recap, I attended MozFest in London last year. In between sessions, I was scanning a noticeboard to see what was coming up, and I spotted a session entitled, "Building a Planet-Friendly Web." I felt a little dumbstruck. What on Earth was this going to be about?

I attended the session and the scales fell from my eyes. In what now seems obvious — but at the time was a revelation — I learned of the colossal energy demand of the Internet. This demand makes it the largest coal-fired machine on Earth, meaning that its CO₂ emissions are probably at least equivalent to global air travel. More and more people are coming online, but this, coupled with the rise of ever more obese websites, means that the Internet's energy demands are growing exponentially. Every additional byte transferred means more energy, which in most countries means more CO₂.

It is widely accepted that we should avoid printing emails to save trees, but this leads to a false assumption that the web is a green medium. I'm afraid to say, it is not.

The good news is, it needn't be this way. Since 2009, Greenpeace has been auditing Internet companies on their energy usage, and lobbying them to improve by way of their Clicking Clean campaign. The Green Web Foundation has an ever-growing database of hosting companies who use renewable energy, or who are at least committed to being carbon neutral. And new tools are emerging to help those working on the web measure the environmental impact of our products.

There are also some great resources out there such as Tim Frick's Designing for Sustainability, three year's worth of talks from the SustainableUX conference, and peripheral material that, while not explicitly focused on sustainability, can help us build lower carbon websites.

And so, sustywp.com is born. With its accompanying theme, Susty. I'm rather chuffed to say I managed to get the load of the homepage down to 7KB of data transfer. I did actually get it down to 6KB, but the meta stuff added by Yoast bumped it up almost a whole KB! 😛 However, given I'm trying to spread a message, I deemed this to be an acceptable trade-off.

The remarkable thing about this is actually how mundane it is. Heavily inspired by Heydon Pickering's evangelizing about writing less damn code, and projects like Brad Frost's Death to Bullshit, I embarked on a root and branch pruning of Underscores, removing everything I possibly could. And to be clear, it's not as though Underscores is full of cruft. It's a very lean starting point for building a theme. I'm a great admirer of it and thoroughly endorse using it. However, it includes certain assumptions that didn't chime with my spartan goal of making the smallest possible WordPress site.

Given the constraints I had set, anything making it to the DOM had to have a very good reason to be there. With this being an experiment, I took the somewhat radical approach of relegating the navigation to its own page. This is wonderfully liberating and means I didn't have to go through the almost always disappointing dance of wondering how I would make it look presentable, hide it for the many users who won't care, make sure it's robust enough to be infinitely long with never-ending dropdowns, etc.

This means less HTML, less CSS, and definitely no JavaScript! Win, win, win.

Holy guacamole. This might be the best thing that I have read thus far in 2018.

More excerpts:

As for the sidebar? Well I've always had an aversion to sidebars, so that was an easy thing to remove. Susty has no widget area. I'm sure it'll get over it.

Is there more fat we can trim? Well, if we're going to have hardly any HTML, and we want minimal CSS, do we really need all those classes? I wanted to try my hand at writing CSS in the way it was intended to be used, instead of bowing to the class-ititis and div-ititis that pervade the industry.

Alongside images, video and JavaScript, the other item that has become a significant factor in bloated websites is web fonts.

I rely on system fonts at sawv.org.

Almost every device these days has a half-decent set of fonts installed, so why not compose a stack of potential fonts you'd like to see, ending with either “serif “ or “sans-serif." Or embrace those default fonts altogether with a system font stack.

Bingo.

Wide spread acceptance of the above ideas in web design would be similar to simplifying our tax code or ending the alleged war on drugs: a lot of people would be out of work.

More excerpts from the article:

Susty is an example of taking sustainable design techniques to an extreme. I'm not suggesting that we should all start building websites with this exact method. But I do think sustainability should be a much higher priority in the web design industry. It's good to think about saving any kilobytes we can, and to think in terms of kilobytes rather than megabytes. If you do want to use a JavaScript interface library, why not try out Choo.js, which has React-like features and comes in at just 4KB. Remember, NASA managed to put a man on the moon with about 50KB of data storage at their disposal.

The best thing about all this is that efficient websites means faster websites, which means:

  • Happier users
  • Better search engine placement
  • Happier servers

Related links

sawv.org

It's hosted on a Digital Ocean "Droplet" virtual private server.

https://www.thegreenwebfoundation.org

https://www.thegreenwebfoundation.org/green-web-check/?url=sawv.org

Unfortunately, this website is hosted grey or we are not sure about the greenness of the hoster. For the check to work, (technical) information about green hosters worldwide is needed. This information is stored in the Green Hosts database.


https://www.websitecarbon.com/website/sawv-org/

Claim by websitecarbon.com:

Do websites really contribute to climate change?

The internet consumes a lot of electricity. 416.2TWh per year to be precise. To give you some perspective, that’s more than the entire United Kingdom.

From data centres to transmision networks to the devices that we hold in our hands, it is all consuming electricity, and in turn producing carbon emissions.

6.8grams CO2

That’s the average amount of carbon dioxide emitted every time a web page is loaded. You read that right, every time!

Click, 6.8 grams, click, 6.8 grams, click….aaarrghh!

In total, the internet produces 2% of global carbon emissions, roughly the same as that bad boy of climate change, the aviation industry.

From the site:

The world’s lowest carbon websites as tested by our website carbon calculator tool

Top 10

Rank    Website URL        CO2/page view*
#1      davidandkay.me.uk  0.004g
#2      johnburkhard.com   0.004g
#3      global-warning.littlebigthings.be 0.007g
#4      muskfoundation.org 0.009g
#5      blog.artemix.org  0.011g
#6      sustywp.com       0.011g
#7      berkshirehathaway.com     0.011g
#8      porkhead.org      0.011g
#9      corewar.co.uk     0.015g
#10     simonsmith.co     0.016g

https://ecograder.com for sawv.org

http://bit.ly/2N8zcdY

what???

I got green marks for:

I got red marks for:

https://ecograder.com/results/sawv.org/#mobile-optimization

Your site does not appear to be designed for use on mobile devices.

WTF? sawv.org displays well on small screens. I use a large, comfortable font size. How in the hell does this ecograder testing site determine mobile web design?

Okay. This has entered the B.S. category. The testing tool provided ZERO examples of how sawv.org is not mobile-friendly.

My site displays better and loads faster on mobile devices with slow connections than most websites.

This is bogus too. https://ecograder.com/results/sawv.org/#shared-resources

Your site does not appear to use very many shared resources.

Switching to local resources is a fairly straightforward process, so check out our tips and consider giving it a shot!

When you surf the web, many of the sites you visit pull resources from common frameworks. Enabling your browser to access any resources that are already cached—rather than re-downloading them—saves time, energy and bandwidth.

Using shared resources is the digital equivalent of buying local produce; you're picking up cucumbers from a neighborhood farm instead of buying cucumbers shipped from Brazil.

Shared resources means assets. I don't use external assets at sawv.org. I'm not using a shared JavaScript library because I don't use JavaScript in my web pages.

Since sawv.org does not use JavaScript, the ecograder testing site penalized my site. ???

My CSS is inline in each page. sawv.org is extremely lightweight. Man, the creators of the ecograder testing service have a whacked view.

https://ecograder.com/results/sawv.org/#mozrank

Good grief. I don't care about search engine optimization.

Your findability score is 1.5.

We use MozRank to help score findability on a scale from 1 to 10. Your score is calculated by the number and quality of other pages that link to you. The higher the quality of incoming links in terms of authority and keywords, the higher your findability score. Your rank reflects the importance of your web page on the Internet.

What in the hell does that have to do with being eco-friendly? I infer that the ecograder testing website believes that if the findability score is too low, then maybe the website should not exist at all, which leads to less strain on the environment.

The Shared Resources and Mobile Optimization scores are bogus. Something is seriously wrong with their thinking.

I used ecograder to test another website that I own: soupmode.com, which is a private, web-based messaging app. It uses JavaScript for the menu.

http://bit.ly/2N7a3Aj

All green except for the Green Hosting and the absurd category Findability.

I host sawv.org and soupmode.com at Digital Ocean.

ecograder penalized sawv.org for not using JavaScript. Having zero external resources or assets is equal to not using shared resources. Holy hell.

And I don't know how soupmode.com is more mobile friendly than sawv.org.


From the article that started my post.

https://css-tricks.com/delivering-wordpress-in-7kb/

Before I get into the nuts and bolts, I just want to share a few headline facts:

https://www.webpagetest.org/result/180712_V0_0c3ed218d366a0dc92cd7bc862b749ef/

Web Page Performance Test for
sawv.org
From: Dulles, VA - Thinkpad T430 - Chrome - Cable
7/12/2018, 4:28:21 PM
First View Fully Loaded:
Time: 0.232 seconds
Requests: 2
Bytes in: 5 KB
TTFB: 0.112 seconds

Google Lighthouse is a Chrome extension that can be used to test multiple issues for a webpage.

sawv.org is not a PWA - Progressive Web App. Lighthouse gave sawv.org a PWA score of 42 out of 100. That's fine. I don't see the point of making sawv.org a PWA.


https://www.webpagetest.org/result/180712_HT_1f9a64ca2b585cd3176824bdbd27f12a/
https://www.codesections.com
From: Dulles, VA - Thinkpad T430 - Chrome - Cable
7/12/2018, 7:07:39 PM
TTFB: 0.150 seconds
First View Fully Loaded:
Time: 0.259 seconds
Requests: 2
Bytes in: 4 KB

https://www.webpagetest.org/result/180712_0C_56bb2072e952b7fdc2fe543f4a63f99a/
sawv.org
From: Dulles, VA - Thinkpad T430 - Chrome - Cable
7/12/2018, 7:08:51 PM
TTFB: 0.114 seconds
First View Fully Loaded:
Time: 0.244 seconds
Request: 2
Bytes in: 6 KB


October 2018 - possibly related but debatable.

Why Do Computers Use So Much Energy? (scientificamerican.com)
https://blogs.scientificamerican.com/observations/why-do-computers-use-so-much-energy/
https://news.ycombinator.com/item?id=18139654


Oct 5, 2018 - Today I saw Community Memory mentioned in an HN thread.

https://en.wikipedia.org/wiki/Community_Memory

Community Memory (CM) was the first public computerized bulletin board system. Established in 1973 in Berkeley, California, it used an SDS 940 timesharing system in San Francisco connected via a 110 baud link to a teleprinter at a record store in Berkeley to let users enter and retrieve messages. Individuals could place messages in the computer and then look through the memory for a specific notice.

While initially conceived as an information and resource sharing network linking a variety of counter-cultural economic, educational, and social organizations with each other and the public, Community Memory was soon generalized to be an information flea market, by providing unmediated, two-way access to message databases through public computer terminals. Once the system became available, the users demonstrated that it was a general communications medium that could be used for art, literature, journalism, commerce, and social chatter.

The creators and founders of Community Memory shared the values of northern California counterculture of the 1960s, which included the celebration of free speech and the anti-war movement. They were also supporters of ecological, low cost, decentralized, and user-friendly technology.


September 2018 - lowtechmagazine.com - How to Build a Low-tech Website?

https://news.ycombinator.com/item?id=18075143

About the website:

This is a solar-powered website, which means it sometimes goes offline

Our new blog is designed to radically reduce the energy use associated with accessing our content.

From the article:

We were told that the Internet would “dematerialise” society and decrease energy use. Contrary to this projection, it has become a large and rapidly growing consumer of energy itself.

In order to offset the negative consequences associated with high energy consumption, renewable energy has been proposed as a means to lower emissions from powering data centers. For example, Greenpeace’s yearly ClickClean report ranks major Internet companies based on their use of renewable power sources.

However, running data centers on renewable power sources is not enough to address the growing energy use of the Internet. To start with, the Internet already uses three times more energy than all wind and solar power sources worldwide can provide. Furthermore, manufacturing, and regularly replacing, renewable power plants also requires energy, meaning that if data traffic keeps growing, so will the use of fossil fuels.

To start with, content is becoming increasingly resource-intensive. This has a lot to do with the growing importance of video, but a similar trend can be observed among websites. The size of the average web page (defined as the average page size of the 500,000 most popular domains) increased from 0.45 megabytes (MB) in 2010 to 1.7 megabytes in June 2018. For mobile websites, the average “page weight” rose tenfold from 0.15 MB in 2011 to 1.6 MB in 2018. Using different measurement methods, other sources report average page sizes of up to 2.9 MB in 2018.

1.7 megabytes seems too low of an average. Maybe that's because I only test obviously bloated websites. From my testing, 1.7 megabytes is getting to be the average size for only the JavaScript that's forced upon unsuspecting users.

The growth in data traffic surpasses the advances in energy efficiency (the energy required to transfer 1 megabyte of data over the Internet), resulting in more and more energy use. “Heavier” or “larger” websites not only increase energy use in the network infrastructure, but they also shorten the lifetime of computers — larger websites require more powerful computers to access them. This means that more computers need to be manufactured, which is a very energy-intensive process.

A second reason for growing Internet energy consumption is that we spend more and more time on-line. Before the arrival of portable computing devices and wireless network access, we were only connected to the network when we had access to a desktop computer in the office, at home, or in the library. We now live in a world in which no matter where we are, we are always on-line, including, at times, via more than one device simultaneously.

The Slow Web Movement would help.

Low-tech Web Design

Our new web design addresses both these issues. Thanks to a low-tech web design, we managed to decrease the average page size of the blog by a factor of five compared to the old design – all while making the website visually more attractive (and mobile-friendly). Secondly, our new website runs 100% on solar power, not just in words, but in reality: it has its own energy storage and will go off-line during longer periods of cloudy weather.

The Internet is not an autonomous being. Its growing energy use is the consequence of actual decisions made by software developers, web designers, marketing departments, publishers and internet users. With a lightweight, off-the-grid solar-powered website, we want to show that other decisions can be made.

Static websites are thus based on file storage whereas dynamic websites depend on recurrent computation. Static websites consequently require less processing power and thus less energy.

The main challenge was to reduce page size without making the website less attractive. Because images take up most of the bandwidth, it would be easy to obtain very small page sizes and lower energy use by eliminating images, reducing their number, or making them much smaller. However, visuals are an important part of Low-tech Magazine’s appeal, and the website would not be the same without them.

Instead, we chose to apply an obsolete image compression technique called “dithering”. The number of colours in an image, combined with its file format and resolution, contributes to the size of an image. Thus, instead of using full-colour high-resolution images, we chose to convert all images to black and white, with four levels of grey in-between.

All resources loaded, including typefaces and logos, are an additional request to the server, requiring storage space and energy use. Therefore, our new website does not load a custom typeface and removes the font-family declaration, meaning that visitors will see the default typeface of their browser.

Instead of a designed logotype, which would require the production and distribution of custom typefaces and imagery, Low-tech Magazine’s new identity consists of a single typographic move: to use the left-facing arrow in place of the hypen in the blog’s name: LOW←TECH MAGAZINE.

With a self-hosted server, there’s no need for third-party tracking and cookies.

https://homebrewserver.club/low-tech-website-howto.html#server


Eco-friendly websites (lightweight, simple, fast-loading websites) are helpful too.

September 2018 post titled The Hurricane Web

As Hurricane Florence makes its way across the US southeast coast, many people are stuck in areas with severe flooding. These people rely on outside information, yet have limited bandwidth and power. To help them, news platforms like CNN and NPR provide text-only versions of their sites.

Text-only sites like these are usually treated as a MVP of sorts. A slimmed-down version of the real site, specifically for emergencies.

I’d argue though that in some aspects, they are actually better than the original. Think about it- that simple NPR site gets a lot of points right:

  • It’s pure content, without any distractions
  • It’s almost completely fail-safe
  • It’s responsive by default and will work on any device
  • It’s accessible
  • It’s search engine friendly
  • It’s machine readable and translatable
  • It has close to perfect performance scores:

Most importantly, it’s user friendly. People get what they came for (the news) and are able to accomplish their tasks.

This is the web as it was originally designed. Pure information, with zero overhead. Beautiful in a way.

The “full” NPR site in comparison takes ~114 requests and weighs close to 3MB on average. Time to first paint is around 20 seconds on slow connections. It includes ads, analytics, tracking scripts and social media widgets.

Meanwhile, the actual news content is roughly the same. The articles are identical - apart from some complementary images, they convey exactly the same information.

I recently read this great article by Alex Russel, in which he compares Javascript to CO2 - in the sense that too much of it can be harmful to the ecosystem.

Javascript enables us to do amazing things and it can really enhance the user experience, if done right. But it always has a cost. It’s the most expensive way to accomplish a task, and it’s also the most fragile. It’s easy to forget that fact when we develop things on a highspeed broadband connection, on our state-of-the-art devices.

That’s why websites built for a storm do not rely on Javascript. The benefit simply does not outweigh the cost. They rely on resilient HTML, because that’s all that is really necessary here.

That NPR [text] site is a very useful thing that serves a purpose, and it does so in the simplest, most efficient way possible. Personally, I’d love to see more distilled experiences like this on the web.

Figure out what the main thing is people want from your site and deliver it - using the simplest, least powerful technology available. Make it withstand hurricanes.

Links mentioned in that hurricane post:

infrequently.org - The “Developer Experience” Bait-and-Switch

JavaScript is the web’s CO2. We need some of it, but too much puts the entire ecosystem at risk. Those who emit the most are furthest from suffering the consequences — until the ecosystem collapses. The web will not succeed in the markets and form-factors where computing is headed unless we get JS emissions under control.

infrequently.org - Can You Afford It?: Real-world Web Performance Budgets

w3.org - The Rule of Least Power