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 got handed a website that was beautiful to look at, but the website didn’t function 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, looking at it from the front end, but the structure in the background was broken. It is not a design flaw, as a designer’s job is to throw out the best design, but those who have been involved in SEO services for quite a while will see past the design and look at 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 like it as friendly and straightforward, and it starts with getting the best response from a website’s speed issues to maximise its SEO potential.
We will tell you more about my recent project before we go into this guide…
Upon first look, we noticed where most of the problems were taking place, and that was with the full-screen slider on the homepage that was showing off their products. They had taken the pictures straight from a camera and put them straight into the slider via the media library, and there were 5/6 of these pictures, all sliding in tandem, each being well over 1.5mb in size. The screenshot below is a scan on GTMetrix of when they first arrived on my desk. Ouch, this was going to be tough.
This got us into writing this guide because there are far more elements to speeding up a website than removing a few sliding images. Look above, for instance, a 10-second loading time, a total page size of 11.8mb, with 109 browser requests. It’s a beautiful website, but looking beyond its beauty, you realise something is broken within.
So as you can see in the image above, the actual size of the website is 11.8mb, and it takes a whopping 10.5 seconds to load from a server based in London. Please have a look at our website’s results with GTMetrix.
We have always taken site speed seriously because you could lose that one crucial customer because of slow loading times, and in some industries, one 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 too. 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.
Some images need to be compressed to the actual output size to reduce the capacity of the image without losing too much (if any) of the genuine quality of the picture. Suppose an image is transferred from a Samsung Galaxy S6 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 capacity of the image. 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.
Enabling Keep-Alive is a straightforward process. It requires all that is to insert a small piece of code into the .htaccess file found within your FTP’s root folder.
If it is hidden, try logging into your web host control panel (such as CPanel) and see if you can see it 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 might be possible it has not been started on your actual hosting server. You could pop a nice email over to them asking them to switch it on, but you may be turned 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.
Enable Gzip Compression
Much like Keep-Alive, Gzip compression needs to be activated on your server to take effect, so if you try not to prevail, contact your web host to see if they can start it on your server. 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 to output to a browser. You can shrink files by two-thirds, making transferring two or more files between a web server and a browser much easier and faster. The more you compress a file, the quicker it will likely move.
Before you do anything, check to see if it is already enabled first…
To enable Gzip compression manually, you can try the following code in 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 many alternatives, search Google for GZip Compression .htaccess or look for Mod_Deflate alternative.
Serve scaled images
This means that the coding of your website is shrinking an image before it sends it to a browser. Please make the picture the size the coding wants to send it out as, which 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, where you can mount the image. If the theme were putting the idea out at a 25% reduction in size, I would alter the additional dimensions to match what the article is putting it out as.
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.
Interested in SEO Services in Newcastle? Get in touch today!