305 Wigan Road, Ashton-in-Makerfield, Wigan, WN4 9ST

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.

0*pIHpn3BfK1APue2X

The first thing we did was to reduce the number of slider images to 3, which dramatically improved the loading speed of the website without as much as doing 2 minutes’ work, but there was still work to be done, it would not be that 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 in their Divi theme… on the homepage… on the one page they wanted me to optimise.

Doh!

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.

0*kakmq1tRuYs2gJmY

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.

Image Optimization

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.

Enable Keep-Alive

Keep-Alive, in a more common tongue, is a method that allows your browser to grab over one file at a time, rather than one with each new 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 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 ##
<IfModule mod_expires.c>
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”
</IfModule>
## 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.

Before you do anything, check to see if it is already enabled first…

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 know what you are doing. W3 Total Cache deals with more than just Gzip Compression; you can also minify CSS and Javascript, as well as setup a Content Delivery Network (CDN) and optimize your database. It’s an excellent plugin, but personally, we don’t use it a lot as we do a lot of sites speed manually.

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.

<ifModule mod_gzip.c>
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.*
</ifModule>

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.

Minify CSS/HTML/Javascript

To minify a file, simply get rid of all the white space and comment fields that are otherwise usually ignored. I wouldn’t minify unless you plan on leaving the CSS or Javascript files alone, otherwise finding the code to change can become a task which is why it is probably better to do it with a plugin rather than manually as you can switch the plugin on and off. This can be done with a couple of free plugins out there, but most notably it can be switched on and off with W3 Total Cache.

However, it is quite easy to do manually. Once you FTP into your account, you need to find all the Javascript files and CSS files that your theme links to. You can usually 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), then you will find all the Javascript files and CSS files the theme is linking to.

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.

Defer Parsing of Javascript

Sometimes Javascript files can be huge, depending of course 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 make it so that the JavaScript files load after other vital files, then the important aspects of your website will load much faster, such as web content and images. In WordPress, there are plugins that 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 any JavaScript sliders, etc. I have also noticed that it can influence Google Analytics tracking, as Google Analytics uses Javascript based technology for cookie tracking.