Tips

8 Tips on How to Speed up your WordPress site

8 Tips on How to Speed up your WordPress site

During the build of our new website, I personally dedicated a lot of time on WordPress optimisation and server side scripts to ensure that our website loaded as quickly as it possible could.

It’s a sort of online myth that Google penalises your site if it’s not really fast. From my research your website has to be really slow before it starts affecting your search rankings. That being said, a fast website is better for your end user — and who likes to wait around?

Web Server Software

Since we began we’ve always served our websites using Apache. Apache is the most common server side software for Linux servers. It’s easy to set up and it’s pretty simple to get to grips with. Unfortunately due to the way that the modules integrate, it can get pretty bloated therefore slowing down your website.

I wanted to rectify this on our new site, so I took a look at NGINX. NGINX is an alternative to Apache released in 2004. It has grown in popularity due to its light-weight resource utilisation and ability to scale easily on minimal hardware. NGINX is also very good at serving static content quickly, and passes off dynamic requests to other software that is better suited to those purposes.

There’s a down side. It’s not as easy to pick up as Apache. We host our sites with Digital Ocean and they offer a wealth of tutorials and guides on setting up your VPS from scratch with many different softwares. So I decided to set up a test box, and give it a whirl.

It’s fast from the start, load time is drastically reduced, and the connection time between the browser hitting your domain and redirecting to the server decreased by at least 10%.

To increase speed further I then installed the mod_pagespeed module. This is where it starts to get complicated. With Apache, you can just download and add this module on, whereas with NGINX effectively you are required to build an installer with the module included and then install NGINX. Luckily Google provide a tool that does much of this for you. Watch out for where it installs NGINX in your system as you may need to set up a symlink.

HTTP Strict Transport Security (HSTS)

SSL has been known to potentially have marginal effect on your site’s SEO, and you can now get free SSL Certificate with Let’s Encrypt. So I thought, why not? Let’s secure our site.

However add an extra wait time when a browser requests your domain. This is because your site will be redirecting from HTTP to your HTTPS domain. That’s bad right?

Here’s where HSTS comes in. HSTS is a list of domains embedded right into Chrome to be known as HTTPS only. Most major browsers such as Chrome, Firefox, Opera, Safari, IE11 and Edge now have HSTS preload lists based on the Chrome list. This tells the browser that our site is now served from HTTPS and to go directly to that, rather than redirecting from HTTP. That eliminates the wait. Pretty cool huh?

Content Delivery Network (CDN)

A content delivery network is a network of servers in various locations across the world. When someone connects to a website that’s using a CDN it figures out which server is closest to the user and serves the assets (normally JavaScript, CSS and images) from that location. This helps page load time as the assets have a shorter distance to get to the user.

It’s probably overkill for our site, as many of our clients are based in the UK and only a few overseas. However it does provide the advantage of putting less load on the server and means that the browser can load it asynchronously. Sounds pretty fancy, but what does asynchronously mean?

When a browser visits a website it downloads each element of the page, and it does this one by one. As it can only make one request to the web server at a time. The advantage of using a CDN is that the browser is loading the files from a different server/ip address which means it can load the files at the same time significantly speeding up page load.

AJAX Page Loading

This was a big feature that we had on our to-do list before we even began designing our site. AJAX offers both a speed benefit, and a user experience benefit.

User Experience

AJAX allows us to refresh only the content that changes on the page when the user navigates to another page on the site. As the page isn’t actually being reloaded just injects the new content allowing us to add a nice fade/slide/whatever transition without the abrupt white screen reload.

Speed

A nifty feature of AJAX, and in particular SmoothState, is that when the user hovers over a link to another page, we can start preloading that page’s content in the background without the user even knowing. There’s around a 300 – 500ms delay between a user hovering over a link and actually clicking it — this is quite a lot in server time. Before they even click the link (depending on their connection) we could have almost preloaded the whole new page so the page load delay time is non existent, skilfully hidden in the user’s ‘hover’ time.

Responsive Images

With the advent of HiDPI devices such as iPhones and new MacBooks we’re having to serve higher resolution images for them to look sharp.

Images and video are the biggest drain on bandwidth when visiting a website. Even a highly compressed image with a retina resolution will still equate to around 150kb or probably higher. On the average connection that works out around a second per image downloaded. Most sites are pretty image heavy and that all adds up.

I hear you saying “do we really have to load in the highest resolution image available if someone is browsing from a mobile? That doesn’t make sense”.

You would be right, we don’t have to do that. In comes the responsive <img> tag as we can now save the image in a variety of different sizes, optimised for different screen sizes. This means we’re only loading the image that’s needed and thereby reducing the load time.

You can also pair this with lazy loading. Lazy loading only starts downloading the image just before it comes into the users viewport. So the page initially loads quicker with a very small resolution version of the image, and just before the image scrolls into view, the browser loads the correct resolution for your device.

Neat.

Combining files

This is a real frustration when I see other agencies developing websites and not combining their JavaScript and CSS files. When building a website you probably utilise an array of JavaScript libraries and probably a couple of CSS ones too.

All these files add up and I’ve seen sites with over 20 JavaScript files and a similar amount of CSS. Remember we spoke about asynchronous loading earlier? Well chances are you’re loading all the files from one server, so for each file the browser is having to open and close a connection to your server which introduces a wait. Normally that’s a few hundred milliseconds, but add that up 20 times, and you’ve got a few seconds.

How do we eradicate this? Well if you’re building using CodeKit or Grunt to compile your SASS and JavaScript files, you should only have 1 JS and 1 CSS file. However if you’re using WordPress plugins like Contact Form 7, this adds in its own JS+CSS files. We use a WordPress plugin called Better WordPress Minify, this combines the majority of your files into one JavaScript and one CSS file and also compresses it. Yes, it will take longer to download this file, but you’ve eliminated 99% of the wait caused by calling multiple files. BWP also has the added functionality of being able to control which default WordPress libraries are called and it will also push your files to your chosen CDN.

Caching your site

If you’ve never heard of caching you should be ashamed of yourself. But if you don’t, it’s a way of saving a ‘copy’ of your website on the viewers machine so that if they come back to it another time, it only loads items that haven’t changed from their computer which makes it very quick to load.

There are plenty of plugins that help you manage how your site should be cached but ones that we’ve tried and tested are W3 Total Cache, WP Rocket and WP Fastest Cache. We can thoroughly recommend all of them and it’s down to you which ones fits your needs best.

Static Files

WordPress runs on PHP, which is a dynamic language that runs the code when you load the page. Imagine your homepage has a heading and an image, when the user loads the page PHP tells the server where it can find that file/text in the database and then outputs the HTML for the browser to display. This is great, but serving dynamic content like this causes a wait and also imposes a load on the server.

Now unless you’re updating your site every minute, it doesn’t make sense to do this every time someone views your site. What if we could run the PHP once and save a copy of the outputted result and serve that to the user? Sounds like a dream, I know.

Fortunately we can do that. There’s a NGINX add-on for WP Rocket which allows us to serve previously cached files without calling WordPress at all. This makes load times lightning quick. It also does other bits like add headers to control browser caching.

This is just a brief overview and by no means comprehensive of how to optimise a WordPress site. Tools we’ve found very useful are Pingdom, Varvy and GT Metrix, and they can really help you determine where you can improve your site’s load time.

If you have any questions don’t hesitate to drop me a message at will@madebyfalcon.co.uk

You may also like