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.
The first thing we did was to reduce the number of slider images to 3, which dramatically improved the website’s loading speed 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 into 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 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.
Image Optimisation
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.
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 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.
## 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, 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…
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 do many sites speed manually.
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.
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 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.
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 become a task, so it is probably better to do it with a plugin rather than manually, as you can switch it on and off. This can be done with a couple of free plugins, but most notably, it can be switched on and off 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 make it so that the JavaScript files limitation after other vital files, then the critical aspects of your website will load, 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 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.
Interested in SEO Services in Newcastle? Get in touch today!
