Wordpress for the Developing World and Low Bandwidth Connections

tl;dr - This post is the tale of my pursuit of the sub-100kb, responsive Wordpress page / post in late-2016, with the purpose of providing organizations with audiences in the developing world with faster websites.

Why a special type of theme to reach this audience?

Recently I had a conversation with a US-based company whose primary audience was in parts of the developing world, namely, small villages in Africa and India.

They were in the process of reviewing web design agencies who could help them migrate from their existing Drupal site to Wordpress. But given their audience, the pages on their new site would need to have a light footprint, and as has oft been noted, Wordpress page sizes can tend to be pretty big.

In these villages, the company's existing, relatively-lean 250kb pages take a considerable, "finger-tapping" amount of time to download.

Consider this alongside the fact that standard themes packaged with Wordpress (TwentySixteen, etc.) serve pages out of the box in the 350kb+ range. It quickly becomes obvious that these themes were not developed with a focus on audiences accessing the internet on the low-bandwidth connections available to these parts of the world [1].

Interestingly enough given the low-tech internet connections, these folks do however, have smartphones, which means responsiveness is key.

It struck me as an fun challenge then to provide a general framework for such sites with average page sizes of 100kb or less, and to ensure they render beautifully on the wide range of devices available.

Why 100kb?

It seemed like a reasonable yet ambitious target given the requirements of providing a responsive grid, multiplied by media queries, and addressing the myriad input types & their various states, etc.

Choosing a baseline

Most websites won't stick with the default theme as their audience grows, so these themes are perhaps not a fair basis for comparison. Let's choose a more realistic starting point for many Wordpress developers - Bones.

Out of the box, Bones, is a "Mobile-First starter theme for rapid WordPress development." If I recall correctly, back when I started using Bones as a starting point to build Wordpress websites (in 2012? am I making that up?), it billed itself as being "bare bones" (thus the name), which to me implies small pages.

If in fact memory does serve, the focus seems to have pivoted from this initial stance to more of a "bare bones" layout vs. volume of code. Regardless, the point here is our starting file size for a blog post (or a page):

350kb

So, our mission is clear: remove 250kb+ from our new theme, without compromising user experience or precluding responsiveness. Or, more simply: a beautiful, responsive Wordpress template which maintains all of the essentials, while serving pages of, on average, under 100kb.

How essential is essential?

Do you have a Wordpress site? If so, pull it up, open up the source code in your browser. What percentage of either the markup, or the resources called by the browser to render any given page are actually essential?

And by essential I mean "could a user not possibly consume the information on the page and have a good user experience without either that markup or those resources?"

This was the question that guided my code- and resource-stripping.

When I first started writing this post, my intention was to describe each little block I tore out, but I don't think that's terribly interesting, and hardly earth shattering. If you're curious, you can pull up the source code and dig through yourself.

Instead, the point here is really the why: serving audiences in the developing world, and then just doing it.

By the by, I'm releasing the theme for free, so if you do care to take a look under the hood, I have open sourced the project (GitHub), and am in the process of getting the theme added to the Wordpress theme repo. And there are no backlinks to my site on the front end of the theme, only informational links to resources from wp-admin. If you do use the theme though, I'd love to know.

Planning for plugins

The literal first thing to go when stripping stuff out of the source code was jQuery. It's actually nowhere near as essential (see above) as you'd think, given it's prominence.

Many plugins, however, rely on jQuery, so if you want to use those plugins, you'll have to add it back. To do so, look for these lines in functions.php and either remove them or comment them out:

  
  
function dequeue_jquery() {  
  if ( !is_admin() ) wp_deregister_script('jquery');
}
add_action( 'wp_print_scripts', 'dequeue_jquery', 100 );  
  

This will add the 97kb non-minified behemoth that is jQuery, and the 10kb of jQuery Migrate back to your site, but will bloat your page size considerably.

I would argue however that the overwhelming majority of organizations for whom this theme is needed will get by just fine with the two plugins recommended by this theme: GA Google Analytics and Yoast SEO – neither of which require jQuery.

Images

Page sizes will obviously be increased by the number and size of your images.

You might say, "It's easy to hit sub-100kb with no images."

Evidently not, considering the 350kb page we started with did not include any.

Besides, the target audience here is not people who want their Wordpress website to be an Instagram clone or a photography gallery; it is businesses, non-profits and NGOs with third world audiences. I suspect these organizations will be savvy enough to not embed full-size, high-color images on their websites.

If they aren't, then they probably aren't tuned in enough to the idea of page size to be looking for a theme which delivers sub-100kb pages anyway.

Theme Features

There's a fairly detailed write-up of the features in the documentation, but here is a short version:

  • Responsive theme
  • Very SEO-friendly theme (and fast to boot)
  • SCSS, neatly organized
  • Ready-to-go Gulp-based CSS minification
  • RTL support
  • Flexbox layout (allows for substantial code efficiency vs floats)
  • Easy-to use menus

The Results: Faster than 100% of tested sites

Screenshot of the page performance results from Pingdom

At the end of the day, I was actually able to blow right past the 100kb target, and instead arrived to right around 60kb, with very few external requests.

Running the results through Pingdom you can see that the theme serves pages that are faster than 100% of tested sites. While I suspect that includes a sub-1% rounding error, I'm pretty pleased. You can also check the results out for yourself here.

For me personally, the most practical takeaways thus far have been:

  • I'm way better a flexbox now (finally!)
  • I have much more respect for optimal resource utilization i.e. a 1.4kb SVG is not basically the same thing as an 800 byte SVG (...and so forth).

Demo and download

I've thrown up a quick Wordpress server to host the theme, with sample content, menus etc., to give any prospective users a chance to see a populated version of the theme.

You can check out the goods and download the theme from sepalandseed.com.

Some questions I have

1. Is it wise to count on Flexbox for this project?

After my initial round of tearing out the most obvious, low-hanging fruit, I needed to figure out the best way to provide responsiveness. Flexbox is amazingly powerful at creating great layouts with very little code, though vendor prefixes nip away at this advantage.

But with Flexbox there is the obvious question of browser compatibility. CanIUse says yes (95%+), for both Africa and India, but I'm suspicious.

What would be great is some in-the-field feedback on how realistic it is to expect that modern browsers are being used. With self-updating browsers, perhaps its a given, but I'd love some confirmation.

2. What have I missed?

This was a quick little, proof-of-concept project based on an idea that piqued my interest. I do not submit it as the epitome of optimal resource usage, or the most beautifully designed theme in the world.

That said, I am interested to know if anyone has feedback on how I could speed things up even further.

One obvious way is dropping the 10 lines of code that deal with favicons (for crying out loud), and the extraneous files that go along with creating the "perfect favicon." For most of the very short time I spent developing this theme, I actually had stripped out all but the old school favicon, but once I saw I was at ~50kb, I decided to splurge.

Other notes

[1] Of course this would be the case, the audiences for these products are primarily in the west and other prosperous nations. And this is not a criticism of Automattic, or the countless developers who have contributed to making Wordpress over the years.

[2] Dandelion source image, copyright: relato / 123RF Stock Photo. Arrangement and typography is my own.

If you liked this article and want to hear more from me, look at this thing: