Supercharge The WordPress CMS Loading Speed
“Every visitor is vital!”
That is what you must tell yourself if you are serious about taking your website forward. We recently inherited a website that was beautiful to look at, but it didn’t function properly in the background.
Slow loading times, with 5 or 6 slider photographs transferred straight off a smartphone, WordPress plugins that were not needed (yet activated — thus creating more and more browser requests), and no compression enabled.
The design was impressive from the front, but the structure in the background was broken. It is not a design flaw, as a designer’s job is to create the best design.
However, those who have been involved in SEO services for quite a while will look beyond the design and focus on how the website functions. To put it simply, the website was too clunky!
Or, in SEO terms, it was not user-friendly…
We will always sacrifice design for loading times & usability if I have to. If it was one or the other… goodbye nice(r) design… hello usability.
Some people may disagree with me, but we prefer it to be friendly and straightforward, and it starts with addressing website speed issues to maximise its SEO potential.
We will tell you more about my recent project before we go into this guide…
At first glance, we noticed where most of the problems were occurring: the full-screen slider on the homepage that showcased their products.
They had taken the pictures directly from a camera and imported them into the slider via the media library. There were 5/6 of these pictures, all sliding in tandem, each well over 1.5 MB in size.
The screenshot below is a scan of GTMetrix from when they first arrived on my desk. Ouch, this was going to be tough.
The first thing we did was reduce the number of slider images to 3, which dramatically improved the website’s loading speed without requiring more than 2 minutes of work.
However, there was still work to do; it would not be easy. We advised the client to use single static images on category-specific pages and to improve the navigation to these categories from the homepage.
They had crammed all of their full-page scrolling adverts onto one page using a Javascript slider built into their Divi theme… on the homepage… on the one page they wanted me to optimise.
This led me to write this guide because there are far more elements to speeding up a website than simply removing a few sliding images.
Look above: a 10-second loading time, a total page size of 11.8 MB, and 109 browser requests. It’s a beautiful website, but looking beyond its beauty, you realise something is broken within.
As you can see in the image above, the website is 11.8 MB and takes a whopping 10.5 seconds to load from a server in London. Please have a look at the results on our website using GTMetrix.
We have always taken site speed seriously because you could lose a crucial customer due to slow loading times, and in some industries, a single conversion could pay for your marketing all year.
If anyone asked us if we would go for design or usability, we would 100% say all the time ‘usability’ because of being in the industry for quite a long time and learning to think like a potential client.
We like plain and practical, not attractive and complicated. That’s what most people who browse the Internet every day want to. They want it simple!
Here are some tips to ensure it doesn’t happen with your WordPress website. The techniques we picked up helped me release the website’s inner speed demons.
Image Optimisation
Some images need to be compressed to the final output size to reduce file size without losing too much (if any) of the picture’s genuine quality.
Suppose an image is transferred from a Samsung Galaxy phone to your website. In that case, the chances are that the photographs are around 1440 x 2560 pixels, where you may only need to use half of that, or even less, because WordPress automatically resizes them to the correct size.
However, this does not reduce the image’s capacity. Let’s say this image is 1440 x 2560 pixels and two mb in length, and WordPress automatically resizes the image to 700 x 1250 pixels… the capacity size of the image is still two mb.
We are keen WordPress fans, so we use it as an example in the ‘how to’ tutorial. A straightforward workaround would be to install the EWWW plugin for WordPress — a fantastic free plugin that will go through your media folders and compress each image to its proper output size.
Enable Keep-Alive
Keep-Alive, in a more common tongue, is a method that allows your browser to retrieve multiple files at once, rather than one per request, as it does when it is not activated.
We know it as a persistent connection that allows access to files such as HTML documents, Javascript and CSS, all within the same persistent request.
Enabling Keep-Alive is a straightforward process. It requires you to insert a small piece of code into the .htaccess file located in your FTP root folder.
If it is hidden, try logging in to your web host’s control panel (such as cPanel) and checking whether it appears in your file manager.
Just copy and paste the code below to enable Keep-Alive. Please note that if you run a scan on GTMetrix and it says Keep-Alive is not activated, it may not have been started on your hosting server.
You could pop a nice email over to them asking them to switch it on, but they may turn you down if it is against their policy.
Header set Connection keep-alive
Leverage browser caching
This command asks users to save and store files on their computers for later use, like cookies. It is particularly noticeable for high-traffic websites. To fix this, use the code below in your .htaccess file.
Make sure you back up your .htaccess before you overwrite it.
## EXPIRES CACHING ## ExpiresActive On ExpiresByType image/jpg “access 1 year” ExpiresByType image/jpeg “access 1 year” ExpiresByType image/gif “access 1 year” ExpiresByType image/png “access 1 year” ExpiresByType text/css “access 1 month” ExpiresByType text/html “access 1 month” ExpiresByType application/pdf “access 1 month” ExpiresByType text/x-javascript “access 1 month” ExpiresByType application/x-shockwave-flash “access 1 month” ExpiresByType image/x-icon “access 1 year” ExpiresDefault “access 1 month” ## EXPIRES CACHING ##
Enable Gzip Compression
Much like Keep-Alive, Gzip compression needs to be activated on your server to take effect. If you want to proceed, contact your web host to see if they can enable it.
However, your chances are much less if you are on a shared server, as it could damage other people’s websites.
So what is Gzip compression? Gzip is the method of compressing files for output to a browser. You can shrink files by two-thirds, making it much easier and faster to transfer two or more files between a web server and a browser. The more you compress a file, the quicker it will likely move.
Before you do anything, check whether it is already enabled…
The first method is to install a plugin called W3 Total Cache, but be warned, it has been known to break a few themes if you don’t see what you are doing.
W3 Total Cache deals with more than Gzip Compression; you can also minify CSS and JavaScript, set up a Content Delivery Network (CDN) and optimise your database. It’s an excellent plugin, but we don’t use it a lot as we speed up many sites’ manually.
To enable Gzip compression manually, add the following code to your .htaccess file. Keep a backup of your .htaccess file before you save any changes.
If this code doesn’t work for you, you can try alternatives: search Google for “GZip Compression .htaccess” or look for the Mod_Deflate alternative.
mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
Serve scaled images
This means that your website’s code shrinks an image before sending it to the browser. Please make the picture the size the code wants to send it out as; this is called scaling.
This is relatively easy to do in WordPress as the media library has an option where you can scale the images to the correct size. See the picture below to see where you can mount the image.
If the theme were to set the idea at a 25% reduction in size, I would adjust the additional dimensions to match what the article is presenting.
Minify CSS/HTML/JavaScript
To minify a file, eliminate all the white space and comment fields that are otherwise usually ignored.
I wouldn’t minify unless you plan to leave the CSS or JavaScript files alone; otherwise, finding the code to change can be a hassle.
It is probably better to use a plugin rather than manually, since you can switch it on and off. This can be done with a couple of free plugins, but most notably, it can be enabled and disabled with W3 Total Cache.
However, it is pretty easy to do manually. Once you FTP into your account, you must find all the JavaScript and CSS files your theme links to.
You can see these by right-clicking on your website and choosing ‘View Source’. This will show you the source code of your site. Now, if you press CTR+F and search for either .js or .css (don’t forget the dot), you will find all the JavaScript files and CSS files the theme links to.
Now, FTP into your website and find those files, download them to your desktop, create a backup folder, and download some backup files there.
Minifying them is very easy. Open the files with either Notepad or Notepad ++ and highlight all the code, then pop over to either https://jscompress.com/ or https://cssminifier.com/ and paste the code into there, click start and Voila… your minified code.
Just overwrite the files, save them and overwrite the old file with the new one.
Defer Parsing of JavaScript
Sometimes JavaScript files can be huge, depending on what plugins you are using, and if these JavaScript files load first, it could affect the loading times of the rest of your files.
If you place JavaScript files after other vital files, the critical aspects of your website will load first, such as web content and images.
In WordPress, some plugins can help you with this, such as WP Deferred and Head Cleaner, but use them at your peril, because they can change the shape of your WordPress theme.
Check the front end of your website for any noticeable changes, and deactivate the plugin if it interferes with JavaScript sliders or similar elements.
I have also noticed that it can affect Google Analytics tracking, as Google Analytics uses JavaScript-based cookie tracking.
Interested in SEO Services in Newcastle? Get in touch today!
Written by Terry Burrows, an experienced freelance SEO consultant. I have been helping businesses improve search visibility through practical, data-driven optimisation since 2002. My work focuses on measurable results, ethical SEO practices, and strategies that support sustainable long-term growth.
