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.
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.
Holy guacamole. This might be the best thing that I have read thus far in 2018.
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.
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.
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:
The best thing about all this is that efficient websites means faster websites, which means:
- Happier users
- Better search engine placement
- Happier servers
- https://ecograder.com - How green is your website?
- http://www.sustainableux.com - design for a warming world
- https://vimeo.com/190834530 - writing less damn code
It's hosted on a Digital Ocean "Droplet" virtual private server.
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.
- 0.02g of CO2 per page view
- It is cleaner than 98% of all websites tested
- This website appears to run on bog standard electricity
- Over a year, with 10,000 monthly page views, this website produces 2kg of CO2 equivalent. The same weight as 0 sumo wrestlers and as much CO2 as boiling water for 290 cups of tea.
- In volume, this amounts to more than 2.3 billion bubbles of CO2 that make your cola fizz. That’s enough gas to fill 153 balloons.
- In energy, this website uses 4kWh. Enough electricity to drive an electric car 28km.
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.
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
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
- YOUR SCORE 47 OUT OF 100
I got green marks for:
- Page Speed: Google Page Speed Insight Score
- Page Speed: HTTP Requests
- Design and User Experience: Avoids Flash
I got red marks for:
- Page Speed: Shared Resources
- Findability: MozRank
- Design and User Experience: Mobile Optimization
- Green Hosting: Green Hosting
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.
My CSS is inline in each page. sawv.org is extremely lightweight. Man, the creators of the ecograder testing service have a whacked view.
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.
- YOUR SCORE 69 OUT OF 100
All green except for the Green Hosting and the absurd category Findability.
I host sawv.org and soupmode.com at Digital Ocean.
And I don't know how soupmode.com is more mobile friendly than sawv.org.
From the article that started my post.
Before I get into the nuts and bolts, I just want to share a few headline facts:
- sustywp.com scores 100/100 on performance via Google's Lighthouse.
- It gets straight A’s on webpagetest.org.
- It devastates most benchmarks, with an average time to first byte (TTFB) of about 0.15s, and fully rendered within 0.5s.
- It's hosted in a data center which is 100% powered by renewable energy.
Web Page Performance Test for
From: Dulles, VA - Thinkpad T430 - Chrome - Cable
7/12/2018, 4:28:21 PM
First View Fully Loaded:
Time: 0.232 seconds
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.
- Accessibility 100/100
- Best Practices 87/100
- SEO 90/100
- Performance 92/100
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
Bytes in: 4 KB
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
Bytes in: 6 KB
October 2018 - possibly related but debatable.
Why Do Computers Use So Much Energy? (scientificamerican.com)
Oct 5, 2018 - Today I saw Community Memory mentioned in an HN thread.
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?
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.
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.
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.
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
infrequently.org - Can You Afford It?: Real-world Web Performance Budgets
w3.org - The Rule of Least Power