Does this sound familiar?
You have an awesome looking website but your page speed is slow, you’re worried potential customers are leaving your site before they get to the good stuff and that means you’re leaving money on the table.
That’s right, not only can slow page speed reduce conversions on your site but it can also effect your Google ranking.
So how do you fix it?
Let’s jump right in.
To begin with you should test your page speed and see how fast your website loads using these three awesome tools:
- GT Metrix – https://gtmetrix.com/
- Pingdom – https://tools.pingdom.com/
- Google pagespeed – https://developers.google.com/speed/pagespeed/insights/
Most importantly the results generated from the above tests will provide you with information about the areas of your site that need improvement. Let’s take a look at the results generated from a GTMetrix test and see how you can use them to improve your page speed and make your site faster.
GT Metrix is a free tool that gives you insight on how well your site loads and provides actionable recommendations on how to optimize it. Visit their website and enter your URL. You will get a detailed table outling all the areas that need improvement. Here’s one I made earlier;
Taking a look at this website we can see that both the “performance scores” and “page details” have a low score and high page load time. Ideally we want to get page load time under three seconds interestingly, GT Metrix states that average page load time is six seconds.
So, if you really want to keep your users happy then aim for three seconds and below. Use the information provided under “page speed” and “YSlow” to optimise your site. Clicking on each link will open up further information about the areas of the site that need attention.
*Use the drop down menu to gain further insights into your page speed issues.
For additional insights into how long each network request is taking you can have a look at “waterfall”. The waterfall tells you the request start time, phases and elapsed time relative to the start request. Pay attention to the length of time it takes for the server to respond.
You will be able to see this as the load time next to your URL in the waterfall (the first one on the list). Google recommends a server response time of 200ms or less. It may be that you just need to migrate to a more robust server to fix your page load woes!
*Use the waterfall to check network request and load times for each element.
If your server is just fine and dandy then work your way through the GT Metrix list to try and optimise your page speed. The following plugins will help you on your merry page speed way.
It couldn’t be easier! W3 Total Cache improves the user experience of your site by increasing website performance, reducing download times via features like content delivery network (CDN) integration.
The only WordPress Performance Optimization (WPO) framework; designed to improve user experience and Search Engine Optimization (SEO). Recommended by countless web hosts.
W3 Total Cache is an awesome free (pro version is available) caching plugin. There are a significant number of settings available to optimise your site including; page caching, CSS/JS minification, database caching, object caching, browser caching, fragment caching and connection with your CDN (content delivery network). For a detailed explaination on the best settings for W3 Total Cache check out this awesome tutorial by WPMU Dev.
If W3TC doesn’t take your fancy then you could try one of the following caching plugins:
Lazy loading (also known as dynamic function loading) is a concept where we delay the loading of an object until the point where we need it. Lazy loading makes your site load faster and saves bandwidth.
This plugin replaces all your post images, post thumbnails, Gravatar images and content iframes with a placeholder and loads the content as it gets close to enter the browser window when the visitor scrolls the page. Also works with text widgets.
BJ Lazyload is super simple to set up and get instant results. The first thing to do is install and activate the plugin and then head over to settings. You can set which elements of the website that you want to be lazy loaded, add placeholder text for images and skip specific images by adding classes. Hit the save button and you are good to go!
Your WordPress database stores all the information your website needs to operate. This includes settings for themes and plugins along with post-types, pages, comments, links and entry items.
It’s simple. As your website grows so does your database. The larger your database the longer it takes for the server to query and retrieve that information and send it back to the front end. Optimising your database is therefore highly important and conducive to faster page speed.
WP-Optimize is an effective tool for automatically cleaning your WordPress database so that it runs at maximum efficiency.
- Removes all unnecessary data (e.g. trashed/unapproved/spam comments, stale data) plus pingbacks, trackbacks and expired transient options
- Compact/de-fragment MySQL tables with a button-press
- Detailed control of which optimizations you wish to carry out
- Carries out automatic weekly (or otherwise) clean-ups
- Retains a set number of weeks’ data during clean-ups
- Performs optimizations without the need for running manual queries
- Show database statistics and potential savings
- Mobile friendly and easy-to-use
- Translated into several languages
Make sure that you back up your database before you run WP Optimize. Making changes to your database can sometimes lead to problems so its always a good idea to have a backup that you can restore!
WP Smush is a wonder tool! Those super clever folks over at WPMU Dev always build the best plugins and WP Smush is definately one of them. Storing large images on your server can significantly slow down your page load time. There are two issues that you need to be aware of when uploading images to your website.
Firstly, you should always upload images to your site at the correct size. If you upload an image that is too large then the browser has to optimise the image size before it renders and this increases page load time. Second, images that are optimised for size can still be compressed without losing quality by using lossless compression. WP Smush does this for you!
Install and activate the plugin, head over to the media tab and select WP Smush. You can then run a test to see how many images can be smushed! The free version allows you to smush 50 images at a time. The pro version allows you to smush all images in one go and even has an option to increase smushing from 2x to 4x as well as smushing images outside of the media/uploads file – bingo!
Get this: when you load a webpage a page request is sent to the server which in turn has to be received and then rendered by the browser. Once the every element has loaded the browser will render the web page. The more content that you have (including stylesheets and scripts) the longer it will take for the page to load.
If you really want to have a look at all of the content that needs to load before a page is rendered by the browser have a look at the waterfall of a page in GT Metrix. One way to fix this is to move scripts and styles to load either in the footer or asynchronously.
Autoptimize does this and more and makes optimizing your site really easy. It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head and can move scripts to the footer. It also minifies the HTML code itself, making your page really lightweight. There are advanced options and an extensive API available to enable you to tailor Autoptimize to each and every site’s specific needs.
Critical CSS refers to the minimum amount of CSS required to render the content in the browser that is above the fold. In other words, anything you see immediately on the screen before you scroll down the page. If you want blazingly fast page speed then you shoud consider using critical CSS to make that happen.
This content has to be loaded before the page can be rendered and as such decreases page speed. Critical CSS allows you to load only the CSS that is critical to the content above the fold and thus speeding up page rendering and improving page speed.
It can be pretty tricky trying to fix render-blocking CSS and JS in above the fold content, particularly if you have a WordPress theme that you cannot edit easily. However, you can have a go at optimising the page speed by using the Autoptimize Critical CSS plugin.
This is a paid plugin but at just £2 a month it is unlikely to break the bank. If you would like to try a free version of a similar tool check out the Critical Path CSS Generator. You will need to play around with this tool quite a bit and edit your critical CSS so that there are no visbile errors when your page renders above the fold. Check out this handy video by WP Faster on how to go through the process of using Critical CSS.
In short you can see page speed has an important role to play in site abandonment, SEO and user experience. So give it a go! Take an organised and strategic approach to page speed optimisation using the aforementioned tools.
Assess your page speed first and get a good understanding of the areas that need improvement. Each time you add a plugin and activate its settings you should run the page speed test again for comparision. You may find that some plugins reduce page speed further or effect CSS.
If that happens then deactivate the plugin and try a something different. And remember, always make a full backup of your site before you add or change plugins!
Trust me you’ll be glad you did. Good luck and let me know how you get on!