Overview
So you are hosting your website at a hosting company in South Africa and you have done a few optimization tasks on your WordPress website and have cut down on plugins, and optimize all your Images but still, your website is loading between 7 and 8 seconds on average.
Well, I have done a lot of WordPress development in the last 10 years, played around with a few services, and found the perfect combination. It is down to five principles that correlate over to services and specific plugins you use and actions you take to get fantastic loading times, and Core Web Vital Scores.
Get this type of performance...
Five (Steps) principles to Speed up WordPress
👉 Get a proper CDN in place. (Cloudflare)
👉 Develop Lightweight – Use compact themes and as few as possible plugins. (Hello, Elementor)
👉 Get a proper hosting Server that is optimized for WordPress. ( Kinsta )
👉 Spend time getting Image sizes correct and save them as small as possible in file size.
👉 Compress CSS and JS
1. Get CloudFlare
Well in short you can get Cloudflare for free, and start off by updating your Name Server records at your current hosting company.
The most important step to take here is to make sure you carry the existing DNS records over to CloudFaler before updating the name server records.
This will prevent downtime on your current e-mail setup and downtime on your current website.
When updating Name Server Records it can take up to a few minutes to 48 hours. The CloudFlare dashboard will show an active indication once the Name Server records have been updated successfully.
Cloudflare is a CDN (Content Delivery Network) with added features to get extra features you need to upgrade to a subscription to get more advantages and performance.
On a free subscription, you will already get your website highly available and cashed on a global network.
CloudFlare does offer support to help you set up your DNS records and get going, I will not dive too deep into the technical setup this can be a whole topic on its own, If you are not exactly sure what you need to do you will have to get a web developer on board to help you set it up.
Out of the box on your free account, you can go and experiment with settings straight away to improve your website performance. In most cases, you will be able to auto-minify JavaScript, CSS, and HTML with out damaging your website’s frontend look and feel, but testing is required.
You can also scroll down and switch on Brotli and Early hints, Brotli is a type of server-side compression and early hints enable browsers to download your web pages before a status code of 200 is received.
You can also see if your website can handle JavaScript optimization with Rocket Loader.
For now, you are all set if your website displays as normal and everything is working as normal it means that you have gained some loading speed and can see an improvement just by browsing your website without doing any testing it will be noticeable.
2. Build a lightweight WordPress website.
If we are looking at the latest trend in the WordPress ecosystem we will find that Elementor is dominating the industry, and are updating its plugin weekly, the reason why it is so popular is because of the ease of use ease to set up, and design and you will find a lot of online courses and YouTube videos on how to design in Elementor.
Elementor is compatible with a few other existing Templates like BeTheme, The7th, and a few more, this page builder gives you the freedom to design what you want, and the ability to design headers and footers over your existing templates.
With this type of freedom, you do not need an expensive theme that is all bloated up with code and extras that you don’t need, so in this case, you can cut down and install the Hallo theme from Elementor that is like a blank canvas, it is like filling the function of a theme, just so that you can carry on the design with Elementor page builder.
By doing this you are initially building a lightweight website and if you can keep your use of more plugins to a low you will be ok, install only the stuff you need.
The Hello theme is free on the WordPress theme depository!
For SEO you can install RankMath, this SEO plugin can handle all your on-page needs and handle a few technical tasks for you like doing 301s and a few other tasks.
3.Get a good hosting server...
A normal Apache server or a c-panel server is not going to do the trick, you need server-side caching and proper integration with Cloudflare also you can do server-side compression on CSS, JavaScript, and HTML it is an added bonus.
The type of server also plays a role and the location, with Cloudflare in front of your server you are already at a good place now you need proper supply with a good response.
My go-to hosting provider is Kinsta, Kinsta is built on Google Servers and is running NGINX.
Kinsta does come with a whole lot of tools, they have developed a very neat and easy-to-use dashboard, making it easy for users to clone websites to a development environment without all the hassles of diving into PHP files and editing SQL files.
The search and replace tools are easy to use and you can make development updates quickly, also test out new plugins and updates without braking your live website.
With Kinsta you get 3 types of added caches, one on the server, then a CDN cache that integrates with Cloudflare and now the latest added feature Edge Caching.
Edge Caching.
With the APM tool, you can easily find out what is holding your website back, and find a work around or replacement plugin for the problem.
4. Optimise Images
Spend time on your Images, if the image does not need to be a full-width Image make it a smaller image, and make sure the images fit the frame.
I like to use the plugin Imagify, it speeds up the process of compressing images and also does the process automatically each time you upload something new.
You have 3 different types of image compression to choose from, most of the time I will only compress to lossless compression.
Imagify account is also not that expensive at 9.99USD per mo.
5.Compress CSS, JS , and HTML
At this stage, you are compressing CSS, JS, and HTML on Cloudflare and on your Kinsta server.
Now you can go ahead and look at two other plugins to help speed up your website a bit more.
- Wp-Rocket
- Flying Pages
Wp-Rocket is a amazing plugin for WordPress, you will need to buy the plugin, it is not a free plugin.
This plugin supports page caching and preloading, the preloading is built up by using your website XML sitemap to build up a cache.
This plugin works well with Imagify.
Flying Pages is also a good internal WordPress cache to consider.