I built this site to be as small as possible in size and still realistic to manage. A smaller size means that less energy is required to view it. Although this is not the only aspect of sustainable web development, it is an important one: striving to a minimal page size from the start is essential.
In this post, I explain how this site was built. I try to do it in a non-technical way. But I can not promise anything. So hang on, here we go.
A bit about how websites are built
We need to start with some background information on how a web page is made and displayed in a browser.
A web page is built using HTML. It is a markup language to, obviously, “mark up” the pieces of information that are displayed on a page. So, you can have a paragraph of text, a title or an image. In fact, HTML gives semantic structure to a page, so Google and the browser know what kind of information is there.
Besides the structure, we add styling using CSS. Technically, we could drop it almost completely, but CSS makes a page visually unique.
So, the combination of HTML, CSS and perhaps some JS makes up a web page. We do not need to know more for now.
A bit about how websites are displayed
Well, we have all this HTML and CSS, and perhaps some JS, so what? These are mostly separate files, stored on a server. They have to get to your browser. This is what happens when you click on a link or type in a URL. These “assets” are transferred to your device. The more files are transferred and the further they travel, the more energy is used.
Happily, we have a couple of important ways to reduce all this transportation.
- Browsers “cache” content. They remember stuff they already have downloaded. This means that if you visit different pages of a website, the content that is repeated, for example a logo, is not transferred for each page again and again. Cool, great save.
- Files are ideally transferred in a format that has reduced size. The browser then unpacks these files and uses them in their original formats.
I also have to note that HTML is often generated dynamically. This happens in the case of content management systems, like WordPress. This means that the elements on the web page are obtained from a database. For example, if you write a blog post in WordPress, just like this one, the content and HTML markup for it is stored in the database. Simply said, WordPress generates the final HTML to be sent to your browser when it is requested by your browser.
Ok, I think we know enough about websites. It is simple from here:
We have to minimise the sizes of all these files and send them in a compact form to our visitor, from as nearby as we can. And we can not forget about the goal to make the website manageable for a user, to make it a real life example.
Built to be as small as possible, from the start
It is very important to start with this in mind: we only need as much HTML as necessary, to create a semantic structure. This often means avoiding frameworks that readily provide markup that is too verbose. Frameworks are great to make websites quickly, I tend to use them to make working prototypes. Frameworks often use a lot of indented structure (a lot of divs, for us developers) that is not always necessary. You could have you own minimal framework to start with.
Convenient, using WordPress
I wanted the site to be a real life example. Something that I and perhaps other people can use to blog about global warming. It is not that hard to build something minimal that is then hardly manageable and useable in the long run, like the original version of this site. Therefore, I rebuilt it on top of WordPress.
Popularity, usability and manageability
WordPress is the most popular content management system (CMS) at this moment. It powers over 34% of the top 10 million websites worldwide. Its popularity originates from its user-friendliness, for website owners as well as for web designers. WordPress enables website owners to manage the content of their site. Moreover, it is relatively easy to design websites on top of WordPress and to develop extensions (plugins) for it to create sites with additional functionalities.
WordPress is my favourite CMSs as well, so it seemed a good idea to use it to make the following point:
You can build a manageable, but slim website on top of WordPress.
This is actually obvious. Jack Lenox has done this already when creating SustyWP, a very slim WordPress theme, about 7 kb per page load. The most important point is that a WordPress site does not need to be heavy in size. A lot of WP sites are, but that is due to the bloated themes and page builders they use. There is no reason that they should be (except commercial ones, because, unfortunately, a lot of themes want to do everything).
I wanted to point out that it is not WordPress that is bloated. Although WordPress adds additional stuff to the HTML markup, it is mostly to enable to build sites that are flexibel to style and hook into by extensions (called plugins). When you build a site for yourself or for a client, a lot of these stuff is not necessary. The same goes for plugins.
This site comes in larger than SustyWP. Why? Because of convenience and support for Gutenberg, the new block editor (see below). It is also less minimal in the use of animations and images.
Currrent WordPress standards
I built the site using current WordPress standards and functionalities. I based the site on the popular _s (Underscores) “starter theme”, a minimal starting point to build WordPress websites (= themes). It contains basic WordPress functionalities for pages and blog posts, and the main, repeating parts of a site, like a header (top part), a footer (bottom part) and the navigation. WordPress has a new block editor that enables users to build richer layouts. All its core functionalities are supported by this site. This means that we can add and style galleries of images, quotes, columns, and so on. Of course, only when we need them.
If you want to know all the nifty details of how the WordPress site was built, check out this more technical post on my blog.
Simple and effective
Besides being small in size, a website needs to be simple and effective. What I mean by that is that it has to deliver its message clearly. For this, we need a simple navigation and a page layout with the main content without overloading it with (un)related content. This will allow the visitor to find the information (s)he needs as quickly as possible. This means that less energy is used when searching for the information. A win-win.
Ok, that was about it. To summarise:
- Minimising file and transfer sizes
- WordPress as a convenient tool to manage the site
- A simple, useable site
I hope you agree with these points. There are more advanced things, but more about those later.
This page is loaded in about 27 kb.