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.
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):
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:
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.
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.