Global Warning: a WordPress blog with a tiny footprint

In a previous post, I explained how I created a site about global warming a couple of years ago that loaded in as little as 7 kb per page.

I decided that I wanted to make more of the idea of a slim website and its minimal impact on the environment.

Global warming is an urgent matter, but there seems to be no sense of urgency. Our climate is changing and we do not even fully realise that we have to do something right now. There is a lot said about it in the news, but we are still looking for a way to put the changes in practice and to change our life styles and thinking.

Above all, the impact of the internet and related technologies on climate change is not generally known. The internet has a footprint as large as the aviation industry and it is growing rapidly. It consumes a lot of energy that mostly does not originate from renewable resources. Most people are surprised when I tell them about this. We all are using social media, visiting websites and so on, always and everywhere, without realising what the consequences are for our environment.

So I came up with the idea to start a blog about the impact of the internet on our environment, called Global Warning (globalwarning.blog). Ironic? You can read more about why and how I made the blog in the first place. Here, I will explain how I built it using WordPress, in some more technical detail.

Global Warning: the blog

The blog Global Warning is a site built on top of WordPress (WP). I based it on the design of the original site, while supporting WP features to make it easily manageable. This basically means having

• the blog functionality
• the possibility to build rich posts and pages (with support for Gutenberg, the block editor)
• plugins to optimise the site
• the possibility to easily co-operate with writers/developers, interested in writing for this blog.

Well, let me tell you how I built it.

Starting from scratch (well kind of)

I used the _s (underscores) starter theme as a starting point. This is a minimal WP theme that contains essential WP functionalities and hooks.

On the other hand, I started from scratch with regard to styling (CSS) and specific functionalities. The _s theme allows me to start with what I really need and only include additional things if necessary.

Built in a minimal way

For this project, I ended up excluding some stuff, even from this minimal starting point.

Simplify

I did simplify some things:

• I removed the sidebar. A footer widget area could be great, depending on how using widgets will evolve once they are completely rebuilt and supported by Gutenberg.
• I removed a lot of styling and started over, adding support for the core blocks (see further).
• I did not add anything that I did not need. 🙂

Simple navigation

Navigation on a website is important, it needs to be clear and simple. I have included support for the WP navigation menu feature in 2 locations:

1. Main navigation on the top.
2. Footer navigation for standard links like contact, privacy policy and so on.

You can set up navigation menus in the Customizer. They work as they should out-of-the-box in WP. However, I did simplify the markup for the navigation menus to slightly reduce loading size.

WP includes an additional <div>, which you can remove by specifying 'container' => false when adding the menu location. You can see here how the main navigation menu is added in the theme:

<?php wp_nav_menu( array(
	'theme_location' => 'menu-1',
	'menu_id' => 'top-menu',
	'container' => false,
	'depth' => 1
)); ?>

WP also adds a lot of classes to the navigation menu links. This enables styling of the different menu links, but for most sites it is overkill. I removed most of them, but kept the essential ones, for example, to enable styling the current page:

/*
 * Remove unnecessary classes and ids from the navigation menus
 */
function prefix_wp_nav_menu_attributes_filter($var) {
	return is_array( $var ) ? array_intersect( $var, array( 'current-menu-item', 'current_page_parent' ) ) : '';
}
add_filter( 'nav_menu_css_class', 'prefix_wp_nav_menu_attributes_filter', 100, 1 );
add_filter( 'page_css_class', 'prefix_wp_nav_menu_attributes_filter', 100, 1 );
add_filter( 'nav_menu_item_id', 'prefix_wp_nav_menu_attributes_filter', 100, 1 );

Disabling emojis 🙁

Emojis are cool, but supporting them is not necessary for all websites. By default, a significant amount of code is added in the head section of your pages to support them. You can include this piece of code to disable emojis completely:

/*
 * Disable using emojis
 */
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );

Support for WP features

Some WP features and customisations are supported to enable easily managing the site.

• WP navigation menus (see details above)
• Header image: currently, the image of the earth
• I had to remove WP’s support for responsive images. I only use png images and when these are optimised before uploading them, the lower resolution versions generated by WP are larger in size then the original! On the brighter side, this also saved some markup.
• The simple counter that enables counting the number of people who join the fight against climate change is based on the WP commenting system.

The details of building the counter is not relevant for a slim site. However, it is interesting to mention that the form for the counter is validated by the browser’s native validation. To achieve this, I had to remove the novalidate attribute from the WP comment form that is added by default for HTML5 forms. This native validation saves us some Javascript and a trip to the server when compared to server-side validation using php (which is of course also present).

I did not need more: having the blogging functionality and the great experience of writing in the editor made WP a great choice for me as a content management system.

Support for the block editor

The site supports the core features of the Gutenberg block editor. It does that in about 8 kb of CSS, including the site’s main styling. The following CSS files are loaded in the front-end:

• the main style.css file of the theme
• the style.min.css file included by the editor itself to support its core features.

There could be an additional CSS file to support less essential styles added by Gutenberg but I have not enabled this. This could be enabled using:

// Adding support for core block visual styles.
add_theme_support( 'wp-block-styles' );

It is not necessary, because most of these styles would be overwritten to match the theme’s design.

Supported editor features

The theme supports the following core features of the block editor:

• wide and full alignment
• editor styles to match the back-end with the front-end
• responsive embeds (although I am in doubt supporting this not yet having used it and since it add some additional bytes to the page size)
• editor color palette without supporting custom colours
• editor font sizes without supporting custom font sizes

Support for these features means that their use results in a styled and well-designed back- and front-end. I try to keep up with the continuous and rapid development of Gutenberg and add support for all of the (new) core features.

Plugins

I am using 3 plugins that enhance the sites performance.

Caching

I cache pages using WP Super Cache. It would not be that minimal to always go via the database to generate the data and re-create the pages. I use just the basic settings, nothing fancy.

SEO

A tiny site is great, but if it is not findable, it misses its purpose. I needed to optimise for SEO. I opted for Slim SEO instead of the popular Yoast SEO. It has basically no settings, it seems to work well out of the box.

Analytics

Of course, we think we need to know whether the site is visited. So I blindly installed Google analytics (GA) first, but without a plugin and not via the usual way. I used the minimal Google analytics snippet by David Künnen. This snippet has a small size and it is loaded inline in head section of each page. This increases the document size slightly, but does not impact the loading of the page significantly. It is a great alternative if you need GA, without cookies (and that annoying cookie-banner).

Update 2021: Recently, after getting more involved in web privacy, I switched to the privacy-friendly Plausible Analytics and I love it: it is lightweight and the interface is much easier to understand. I highly recommend it. It is easy to install using their official plugin.

Compared with the original version

So let’s compare the stats are of the WP version of the site with the original version. I looked at the page about the facts as an example.

WP version	Original version
4.5 kb for the document (HTML file)	2 kb for the document (HTML file)
11.5 kb of CSS	2 kb of CSS
4.5 kb of images in png format	2 kb of images in svg format
2 kb of JS	some minimal amount of JS
no web fonts (system font)	no web fonts (browser font)

The WP version is about 3 times the size of the original version. That is still less than 25 kb! This growth can be attributed to

• A larger document size due to inlining a Google analytics snippet (see further) and a slightly more verbose markup.
• More CSS to support the editor features. This enables the creation of richer pages and posts.
• The use of pixel-based images, since WP does not allow to simply upload svg images by default.
• Some additional JS to support some analytics because I am curious…

Conclusion

Well, that is a whole lot of things to make a small site. 🙂

The most important things seem for me the following:

1. Think before you start. Consider and include only what you need. Some additional work (or time) while planning can save you a lot of time when building or modifying the site later.
2. Try to start from the bare minimum, but not from scratch. Do not use libraries (CSS and JS) you do not need. You do not need jQuery or the latest JS framework for a site. Do you really need Bootstrap or that bloated WP theme for your next project? I am not sure.
   Often are budget and time limited. In those cases it can help to have your own minimal starting point that you know well and can build on quickly.
3. WP is not bloated, but most themes are. This is nothing new: Susty WP by Jack Lenox proved this already.
4. The block editor enables the creation of richer web pages without significant bloat. Gutenberg core is clean on the front-end. It adds only the essential markup that is needed. This is in contrast to most page builders. I believe that the block editor in WP is a great step towards more semantic and cleaner web pages under the hood.
5. Make websites with love. Have an eye for detail. Remember why you started doing this and keep doing it the right way.