Supercharge The WordPress CMS Loading Speed
“Every visitor is vital!”
That is what you need to be telling 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 just didn’t function in the background. Slow loading times, coupled together with 5 or 6 slider photographs transferred straight off a smartphone, WordPress plugins that were not needed (yet were 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… bye nice(r) design… hello usability. Some people may disagree with me, but we like nice and simple, and it starts with getting the best response from a website’s speed issues to maximise the website’s SEO potential.
We will tell you a little 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 were showing off their products. They had taken the pictures straight from a camera and put straight into the slider via the media library, and there were 5/6 of these pictures, all sliding in tandem, with 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 couple of 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 that something is broken within.
So as you can see in the image above, the actual size of the website is 11.8mb in size and takes a whopping 10.5 seconds to load from a server based in London. Have a look at our websites results with GTMetrix.
Site speed is always something that we have taken seriously because you could lose that one important customer because of slow loading times, and in some industries that one conversion could pay for your marketing all year. If anyone asked us would we go for design or usability, we would 100% say all the time ‘usability’, and that is 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 make sure that it doesn’t happen with your WordPress website. Techniques that we have picked up that have helped me to 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. If an image is transferred from a Samsung Galaxy S6 straight to your website, then the chances are that the pictures 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 2mb in size, and WordPress automatically resizes the image to 700 x 1250 pixels… the capacity size of the image is still 2mb.
We are keen WordPress fans, so we are using it as an example within the ‘how to’ tutorial. One simple workaround would be to install the EWWW plugin for WordPress — a fantastic free plugin for WordPress that will go through your media folders and compress each image to its proper output size.
Enabling Keep-Alive is a very simple process. It requires all that is to insert a small piece of code into the .htaccess file that is found within your root folder of your FTP.
If it is hidden, then 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, then it might just be possible it has not been activated 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.
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
Leverage browser caching
This is a command that asks your users to save and store files on their computer for later use, sort of like cookies. It is particularly noticeable for high traffic websites. To fix this, you can use the code below in your .htaccess file. Make sure you backup your .htaccess before you overwrite it.
## EXPIRES CACHING ##
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 application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
## EXPIRES CACHING ##
Enable Gzip Compression
Gzip compression, much like Keep-Alive, needs to be activated on your server to take effect, so if you try to no prevail, simply contact your web host to see if they can activate it on your server. Your chances are much less however 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, which makes it much easier and much faster to transfer two or more files between a web server and a browser. The more you can compress a file, the faster it is likely to transfer.
To enable Gzip compression manually, you can try the following code in your .htaccess file. Make sure you keep a backup of your .htaccess file before you save any changes. If this code doesn’t work for you then you can try many alternatives, just run a search on Google for GZip Compression .htaccess or look for Mod_Deflate alternative.
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_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
Serve scaled images
This means that your websites coding is shrinking an image before it sends it to a browser. It would be better if you could make the picture the actual size that the coding wants to send it out as, which is called scaling. This is quite 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 scale the image. If the theme was putting the image out at a 25% reduction in size, then I would alter the additional dimensions to match that what the theme is putting it out as.
Now, FTP into your website and find those files, download them to your desktop and create a backup folder, and download some backup files into there. Minifying them is very easy, just open the files with either Notepad or Notepad ++ and highlight all the code, then pop on 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 as and overwrite the old file with the new one.