Commit b0945430 authored by Sylvain Kerkour's avatar Sylvain Kerkour

12

parent 272bf8ad
Pipeline #147975228 passed with stages
in 57 seconds
+++
date = 2020-05-20T01:00:00+01:00
title = "Open Source Weekly #12 - A fast and sustainable web"
tags = ["open source weekly"]
type = "post"
authors = ["Sylvain Kerkour"]
draft = true
[extra]
lang = "en"
+++
I spent the past two days rebuilding my website ([FatalEntropy.com](https://fatalentropy.com))
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](https://en.wikipedia.org/wiki/Content_delivery_network) (yeah, even in Australia) and the theme overhead is approximately 10 KB.
![website performance](fe_perf.png)
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 indicates they are good for applications, not websites), headless [CMS](https://en.wikipedia.org/wiki/Content_management_system), CDN....
They only add bloat which is the complete opposite of performance and sustainability. Furthermore, adding middlemen can only [induce downtimes](https://blog.cloudflare.com/tag/outage).
Just use old and boring technology: a static site generator with HTML, CSS and JavaScript.
While rebuilding my website I learned a few things:
* My budget for a page is 30KB for HTML + CSS + JS, almost half of the custom font I previously sent.
* 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 choose 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 high entropy)
<br />
## Projects
[hugo](https://github.com/gohugoio/hugo) (Apache 2.0)<br />
A simple and fast static site generator with a huge community who builds a lot of themes. <br />
It’s my weapon of choice to build my website.
<br />
[hugonews](https://github.com/spaghettiwews/hugonews) (GPL 2.0)<br />
A lightweight Hugo theme that mimics Hacker News ([demo](https://themes.gohugo.io/theme/hugonews/)).
<br />
[zola](https://github.com/getzola/zola) (MIT)<br />
*A fast static site generator in a single binary with everything built-in.*
<br />
[Publii](https://github.com/GetPublii/Publii) (GPL 3.0)<br />
*Publii is a desktop-based CMS for Windows, Mac and Linux that makes creating static websites fast and hassle-free, even for beginners.*
<br />
[Cash](https://github.com/fabiospampinato/cash) (MIT)<br />
*An absurdly small jQuery alternative for modern browsers.*
<br />
[Susty](https://github.com/jacklenox/susty) (GPL 2.0)<br />
*A tiny WordPress theme focused on being as sustainable as possible. Just 6KB of data transfer, or 7 with Yoast!*
<br />
## Articles
[Longtermism](https://wiki.xxiivv.com/site/longtermism.html)<br />
*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.*
<br />
[Off the grid](https://100r.co/site/off_the_grid.html)<br />
*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.* <br />
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.
<br />
[Delivering WordPress in 7KB](https://blog.jacklenox.com/2018/06/04/delivering-wordpress-in-7kb)<br />
*Remember, NASA managed to put a man on the moon with about 50KB of data storage to play with.*
<br />
[How to Build a Low-tech Website](https://solar.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website)<br />
*Our new blog is designed to radically reduce the energy use associated with accessing our content.*
<br />
[Sustainable Web Design](https://alistapart.com/article/sustainable-web-design) (2013)<br />
*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.*
<br />
[On Websites](https://manuelmoreale.com/on-websites)<br />
*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...*
<br />
[A solar powered website](https://solar.lowtechmagazine.com/about.html)<br />
*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.*
<br />
[Build a JSON API With Hugo's custom output formats](https://forestry.io/blog/build-a-json-api-with-hugo)<br />
How to build a JSON API with a static site generator 😅
<br />
## Security
A new attack against the Bluetooth specification itself was found, affecting Samsung, Apple, Qualcomm devices and much more.<br />
[https://francozappa.github.io/about-bias](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. ([https://www.cert.ssi.gouv.fr/avis](https://www.cert.ssi.gouv.fr/avis)) <br />
Update now :)
<br />
## Book
[Designing for Sustainability: A Guide to Building Greener Digital Products and Services](http://shop.oreilly.com/product/0636920043904.do), 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.*
<br />
Stay safe ✌️<br />
Sylvain
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment