The ‘mystery’ of website speed, like most concepts in the design world, is in-fact easily accessible. However let’s get this out the way first: Pingdom speed scores and so forth aside, the only variable that matters to users is “seconds” or time taken to load a website. It’s that simple, and once you deal with that you have “Speed”.
Why do you need speed?
Everything is getting faster, but websites, in general, are getting slower. Why, because designers have more tools on hand than ever before and website designs are guided by their owners and not their users. Speed sets the stage for great user experience, users want speed!
The Case for Speed
Regardless of Country, mobile data is blazingly fast at times and incredibly slow at others, wouldn’t you like your website to load quickly regardless of mobile signal quality? Here are various studies confirming the fact that you should have a super-fast website if you want to have a successful online business:
- Google and Bing both reported that even half-second delays in load time resulted in measurably lower conversion metrics (number of searches and revenue per user).
- A Mozilla experiment which found that reducing the page load time by 2 seconds led to 15% higher conversion.
- Google found that increasing the load time of its Results Pages by half a second resulted in a 20% higher bounce rate.
- Google found 53% of mobile visits ended if a page took longer than 3 seconds to load.
- Akamai aggregated data from 17 retailers (7 billion pageviews) and found that conversion rates were highest for pages that loaded in less than 2 seconds; longer load times correlated with 50% drops in conversion rates and increased bounce rates, especially for mobile visitors.
- BBC found that for every extra second of page load time, 10% of users will leave.
On top of this, I live in a country where the majority of people are on prepaid data and pay massive premiums for their data. South African prepaid data costs or out of bundle can be as high as R1 a megabyte! So making your website “small” is a huge part of being kind to people viewing it and making it accessible.
This is how we trimmed the fat from our WordPress website
Try it for yourself: www.chuffed.co.za is blazing fast! While all the pages are optimised to some extent, the landing page is the fastest and most optimised. This is the page that gives our visitors a first impression of the website and business.
The Theme.
We went with the default WordPress Twentytwenty theme. It’s super solid and receives great updates and support. Plus it’s free!
The Hosting
Nothing special here, just a basic hosting packing from xneelo.co.za for R99 a month.
The Design
- We used the built-in theme options and the default WordPress block editor for the layout.
- The PNG-8 image format for the large header image. Having simple colours allowed us to get this big image down to 7kb! Most image programs can output in PNG8 format or compressed JPG (a compression level of 70 is a good compromise most of the time)
- No icons: Icons can be great for guiding users, but they are really just overused for most websites and adds bloat if it’s just for showing off your services. Loading Icon fonts, consisting of hundreds or thousands of characters, adds huge bloat to your website!
- Only one Google font: Google fonts can take ridiculously long to load, and usually slow down your site significantly. We used “Playfair bold” for the headings and the rest we stuck with ol’ easy-to-read Arial. Arial is a system font for any device and so will not slow down your website. Also, beware of the size of the font file you are loading, they can vary from a few kilobytes to over a megabyte.
What Plugins we used (Free!)
All of the Plugins used are free and available to install from the WordPress.org repository.
Plugins List
| Plugin | Description |
|---|---|
| Autoptimize | Makes your site faster by optimizing CSS, JS, Images, Google fonts and more. Also useful for lazy loading, better than the WordPress built-in lazy load. |
| Code Snippets | We use this for when we just need some quick code changes. Avoids making changes to the theme files and negates the need for a child theme, which slows down your website. |
| Disable Comments | Totally removes comments functionality, best to keep this to your communication platforms. Saves on speed. |
| Email Address Encoder | A lightweight plugin that protects email addresses from email-harvesting. We use email addresses to enable direct contact instead of over-bloated contact form plugins. |
| Far Future Expiration Plugin | This plugin will add a “far future expiration” date for various file types to improve site performance. |
| Imsanity | Easy way to optimise your images and avoid having massive page loads. Images are the main culprit in slow websites. |
| Join.chat | Connects a WordPress chat with WhatsApp. Doesn’t save on speed, but a lightweight plugin that replaces the need for a speed-draining chatbot or live chat that usually don’t get used. |
| Twentig | Allows us to strip some of the unneeded options from the twenty twenty theme while adding others. A very lightweight plugin. |
| WP Statistics | Traffic Stats without the bloat of Google Analytics or Jetpack. |
| OMGF | Lowers load times by saving Google Fonts to your server and removing external Google Fonts requests |
The Results
Using webpagetest.org here are our test results: Link
Test Summary
| Page Load time | 1.149s |
|---|---|
| Page Size | 200kb |
| Server Response Time (TTFB) | 0.518s |
| Requests | 9 |
While there are further opportunities for improvement and tweaking, for quick optimisation and mobile speed, this landing page load time is right up there with some of the quickest. For users on mobile this means that even with the weakest of data signals, this website should load quickly,
What about my Ecommerce website or niche website, that requires more features?
All of the tips here will work, but as you add features, your site will slow. If speed is the goal, the plugins or code you have used need to be given the speed treatment. Give us a call or email and we can discuss how we can help you speed up your website.
Some of our inspiration for this post: