lean landing page

An earth on an orange circle. The land masses are partly displaced, the seas partly look as if they are overgrown with green moss. Overall, it feels friendly and warm on the one hand, somewhat dystopian on the other.

ABOUT

In today's digital world, websites are getting heavier and slower, often at the expense of the environment. My goal is to create beautiful, lean landing pages that are optimized for performance (<64kB total transfer size!) and minimal environmental impact.

I'm always experimenting and refining my techniques and plan to build new landing pages and add fresh insights regularly. Stay up-to-date by signing up for my newsletter. (Privacy policy – RSS will follow soon.)

WHY

When it comes to building websites, it's easy to fall into the trap of bloat. But too many unnecessary elements, large file sizes, and slow loading times can turn users away and harm the environment. I'm convinced that we can achieve both speed and minimal environmental impact, without compromising on usability or design.

To give you an idea of how this landing page stacks up against others, here's a comparison with an average website (comparison data from 2023-03-12):

Page weight (mobile)

54 kB vs. 2019 kB (source)

CO2 per visit

0.01 g vs. 1.76 g (source)

Time to interactive (mobile)

0.3 sec vs. 12.7 sec (source)

HOW

The Sustainable Web Manifesto gives a good overview of what I'm trying to do. Furthermore Jeremy Keith's take on Resilient Web Design influenced me a lot on how to develop. Especially this sentence: "[with Progressive enhancement] the resulting website will look different in different browsers. [...] And that's okay".

On top I more or less follow these principles:

Compare + compromise.

To optimize landing pages for speed and minimal environmental impact, it's important to compare and compromise on file formats, frameworks, file sizes and even content, while ensuring that the developer experience is not negatively affected. However, it's also crucial to not compromise on usability and accessibility.

Iterate + stop.

It's easy to get caught up in the pursuit of perfection and continuously iterate to make improvements. (Trust me, there are lots of enjoyable rabbit holes out there!) However, it's important to know when to stop and determine whether the improvements are worth the effort.

Expand + focus.

Broadening the focus to consider all aspects of performance, such as images, fonts, CSS, and JS, is critical. While some elements may have a greater impact on page weight (such as images and fonts), others may affect reactivity (such as JS). Keeping everything in mind, but focusing on one element at a time, helps to improve without losing sanity.

From a technical perspective, here's a breakdown of the technology used to build this webpage: I chose pure JS with no polyfills over JS frameworks, but used TailwindCSS for CSS styling because I enjoy working with it. The site was generated statically with Astro and deployed on green-hosted Cloudflare Pages. The accordions in this section were built with the native <detail>-element. Subscribing the newsletter is a simple fetch with a native alert for send confirmation. There's no tracking at the moment. The hero (AI generated) image was optimized using Image Tool+, and all fonts were subset using glyphhanger. Finally, all assets and HTML were minified and pre-gzipped.