A site with a tiny footprint about global warming

A couple of years ago, I participated in a contest called 10k apart. The purpose was to build a site that is useable, accessible, compatible with older browsers and can load in less than 10 kb.

In this post I tell you the story of the site I created.

The initial idea

My entry was a website about global warming. The internet has a large ecological footprint and it is growing rapidly. We make web pages that load in more than 2 Mb. We use bloated frameworks, a lot of images, videos, and a lot of JavaScript (JS) and we are forgetting about how the web is basically built with HTML, CSS and maybe some JS. This increases the energy usage of the world wide web. So, I thought this subject could be right for a website with a tiny footprint.

The original version

The original version for the contest was built as a static website. Well, I actually used PHP to enable re-using repeating parts of the pages, like the header and the footer. You can view the code on GitHub.

It came out to be around 7 kb per page load! I admit that this required a lot of optimisation.

Making it as tiny as 7 kb

I used as little HTML as I could, while still being semantic and accessible. The CSS is as efficiently as possible, I restructured it a couple of times. I added some JS, just to demonstrate that it is completely unessential: if it wouldn’t load, nothing would be broken. I followed the idea of progressive enhancement: make the essentials useable and then add extras for supporting browsers.

Of course, I minimise the files and gzip them for optimal transfer sizes. 7 kb is not bad for a site with some images, animation, and you might even say with a design that pictures the subject of the site.

In more detail, the transfer size of the site consists of

• 2 kb of HTML of document file
• 2 kb of CSS
• 2 kb of images in svg format
• a minimal amount of JS

I did some things to avoid loading large files and assets.

No web fonts

I did not use web fonts, but opted for fonts already available in the browser using simply font-family: sans-serif.

Cut back on images

I did not use pixel-based images. Instead, I used svg vector images and “images” made purely in CSS like the sunbeam in the header:

#element:before {
    animation: sun 6s ease-out forwards;
    background: #fccf0a;
    border-radius: 0 0 50% 50%;
    box-shadow: 2px 2px 64px 8px #f59d00;
    content: " ";
    display: block;
    margin: -3em -7em .67em;
    padding: 3em .5em;
    position: relative;
    top: 1em;
}

/* Animation keyframe */
@keyframes sun {
    from {
         box-shadow: none;
    }
    to {
        box-shadow: 2px 2px 64px 12px #f59d00;
    }
}

The code above creates the sun as a pseudo-element of the title element and adds some sunshine animation to it using CSS only.

CSS only animation

A lot of animation can be done using CSS with great browser support. I did not need any JS.

For example, I created the movement of the earth by this little piece of code:

selector {
    animation: earth 60s linear infinite;
}

/* Animation keyframes */
@keyframes earth {
    0% {
        transform: translate(-100%,-20%) scale(.6);
    }
    50% {
        transform: translate(0,0) scale(1);
    }
    100% {
        transform: translate(100%,-20%) scale(.6);
    }
}

Great, but also practical?

That was about it. The site works fine and it emits only a small amount of CO2 per page view. Great! But is it useable in a real-life situation?

This way of setting up a site is only ideal for a website with static content that is managed by a web developer. It is not realistic for most cases. The most sites are developed, launched and then managed by their site owners. They need an easy way to add, change and remove content. Think of a blog, a news site, but even websites with static content that is modified occasionally. And I have to be honest, I do not like to write in a text editor either. I prefer to work with a content management system — like WordPress — to easily manage the content of my site, add functionalities and optimise its SEO.

But is it then possible to create an easily manageable website with such a small environmental impact? It is definitely harder and maybe more complex, but of course it is possible. I explain in another post how I turned this site into a WordPress blog, called Global Warning, with support for the new block editor.

Oh yeah, did I mention that I did not win the contest? 🙂
But I learned a lot!

Also, I was pleasantly surprised when Jack Lenox mentioned this little project in his talk at the 2019 SustainableUX conference and at WordCamps (WordCamp Bordeaux 2019 and WordCamp Europe 2019 — OK, he skipped it due to limited time, but I have seen the slide ;-)).