Open Source Weekly #12 - A fast and sustainable web(site)

I spent the past two days rebuilding my website
from scratch, ditching Bootstrap, JQuery and custom fonts (you’ll be horrified to learn how much
traffic custom fonts are accountable for) in order to improve its performance, readability and computing resources usage.

I’m pretty satisfied with the effort: now, any page reliably loads in less than 1 second worldwide
without a CDN (yeah, even in Australia) and the theme overhead is approximately 10 KB.

As I’m not the only one concerned about my website performance and resources impact, let’s explore the world of extremely lightweight and sustainable websites.

Did you know

How to build an extremely fast and sustainable website?

First of all, dismiss the snake oil salesmen: Single page application frameworks (like React, Vue and all the derivatives. As the name implies they are good for applications, not websites), headless CMS, CDN....

They only add bloat which is the complete opposite of performance and sustainability. Furthermore, adding middlemen can only induce downtimes.

Just use old and boring technology: a static site generator with HTML, CSS and JavaScript.

While rebuilding my website I learned a few things:

• Use the default system fonts.
• HTML, CSS and JS takes time to parse. Experiment between adding the assets as external resources (thus requiring additional requests) and inlining them (thus they are loaded for each page).
• There are lightweight alternatives to JQuery which provide the same ease of development. I chose cash (see below).
• The fastest code is the one that does not exist. Instead of adding, remove, remove remove. Remove useless libraries, remove useless images, remove useless top bars.
• It took me less time to build it from scratch rather than integrating Bootstrap.
• Text compresses well (due to the low entropy) and images & fonts don’t (due to the high entropy).
• My budget for a page is 30KB for HTML + CSS + JS, almost half the size of the custom font I previously used.
• Don't worry about supporting Internet Explorer.

Articles

Longtermism
In an age of disposable smart devices and unrepairable electronics, there are few topics that occupy my mind as much as solutioning for technological resilience.

Off the grid
People choose to live off-grid for self-sufficience, resilience, or ecological reasons. For us, to live off-grid, is most of all letting go of the numbing culture of convenience.
These adventurers are living on a boat with constrained resources by choice. If we don’t abruptly stop our destruction of the environment, we will be forced to live by the same constraints in a few years. So better learn right now how to live sustainably.

Delivering WordPress in 7KB
Remember, NASA managed to put a man on the moon with about 50KB of data storage to play with.

How to Build a Low-tech Website
Our new blog is designed to radically reduce the energy use associated with accessing our content.

Sustainable Web Design (2013)
A growing number of industries are trying to reduce or at least curtail carbon footprints and energy use. Emissions standards have been set for the automotive, construction, and even telecommunications industries. Yet the internet’s carbon footprint is growing out of control: a whopping 830 million tons of CO2 annually, which is bigger than that of the entire aviation industry. That amount is set to double by 2020.

On Websites
The current web is strange. It seems to be governed by some silly rules: You want people to spend as much time as possible on your site, You want people to visit your site frequently, You want people to share your content...

A solar powered website
This website is a solar-powered, self-hosted version of Low-tech Magazine. It has been designed to radically reduce the energy use associated with accessing our content.

Build a JSON API With Hugo's custom output formats
How to build a JSON API with a static site generator 😅

Projects

hugo (Apache 2.0)
A simple and fast static site generator with a huge community who builds a lot of themes.
It’s my weapon of choice.

hugonews (GPL 2.0)
A lightweight Hugo theme that mimics Hacker News (demo).

zola (MIT)
A fast static site generator in a single binary with everything built-in.

Publii (GPL 3.0)
Publii is a desktop-based CMS for Windows, Mac and Linux that makes creating static websites fast and hassle-free, even for beginners.

Cash (MIT)
An absurdly small jQuery alternative for modern browsers.

Susty (GPL 2.0)
A tiny WordPress theme focused on being as sustainable as possible. Just 6KB of data transfer, or 7 with Yoast!

Security

A new attack against the Bluetooth specification itself was found, affecting Samsung, Apple, Qualcomm devices and much more.
https://francozappa.github.io/about-bias

Also other vulnerabilities have come out this week in LibreOffice, Ruby on rails, Red hat and Ubuntu’s kernels, PostgreSQL, Chrome OS and more. Update now :)
https://www.cert.ssi.gouv.fr/avis

Book

Designing for Sustainability: A Guide to Building Greener Digital Products and Services, by Tim Frick

Pixels use electricity, and a lot of it. If the Internet were a country, it would be the sixth largest in terms of electricity use. That’s because today’s average web page has surpassed two megabytes in size, leading to slow load times, frustrated users, and a lot of wasted energy. With this practical guide, your web design team will learn how to apply sustainability principles for creating speedy, user-friendly, and energy-efficient digital products and services.

Stay safe ✌️
Sylvain