User experience has always been a massively important part of managing a site, as it is it vital to ensure that your site is performing to a high standard for your users, thereby making the site highly reliable. If a site isn’t easy to navigate and users are having trouble with its performance, that’ll affect key areas such as engagement, retention, and conversions.
One particularly pertinent part of a site’s performance and the user experience would be page speed. This essentially refers to the amount of time it takes for a page to fully load for the user. Website speed matters. A lot.
It’s great to have a site that’s easy on the eye and is well optimised in terms of keywords and content, though if it takes an age for it to actually load, users will lose interest and leave for an easier experience.
In a very recent study by Akamai – their State of Online Retail Performance for Spring of 2017 – there are some very noteworthy stats to digest:
– Just a 100-millisecond delay in load time hurt conversion rates by up to 7%
– A two-second delay in load time hurt bounce rates by up to 103%
– A two-second delay correlated with up to a 51% decrease in session length
– Optimal load times for peak conversions ranged from 1.8 to 2.7 seconds across device types
With regards to page load time, seconds can make the difference between a page converting well, and a page not converting at all – especially on mobile devices.
Here is another set of stats regarding some of the biggest names in the retailing game:
– Walmart saw up to a 2% increase in conversions for every second of improvement in load time. Every 100ms improvement resulted in up to a 1% increase in revenue.
– Staples improved page load times by 1-6 seconds and improved conversions by 10%.
With this in mind, it really is important to ensure that your site is performing well for users, and is loading quickly without any issues.
We’ll have a quick look at how you can actually identify speed issues with your site, as well as the common issues that tend to appear for sites and the improvements that can be made.
How to Identify Page Speed Issues
Before getting stuck into precisely how you can improve your page speed and the recommended best practices for doing so, you’ll need to get a better idea of the situation at hand, and the issues your site has regarding page speed.
There are quite a few tools out there which point out key page speed issues – it’s great to use these together, finding common issues that appear in all reports.
Google Pagespeed Insights
The standard choice here would be Google Pagespeed Insights. It provides a simple score out of a 100 for the page that you’ve submitted, while also providing a list of key issues + suggestions that can be made.
It has changed ever so slightly recently, providing a small snippet which sums up the performance of the site:
In terms of the suggestions that it provides, it tends to offer the more salient problems with a site, such as optimising image file size, reducing server response time, minifying JS/CSS/HTML, and leveraging browser caching. It’s good for a very general overview, though other tools will be able to offer more information and a wider range of suggestions.
GTMetrix
A personal favourite for identifying page speed issues would be GTMetrix. Their reports are more detailed than the ones you’ll find in Google Pagespeed Insights, covering a broader range of issues.
You’re provided two ratings out of 100, under two different sets of criteria, detailing the various issues that have been found on the page, with a provided priority level.
More in-depth information is included, such as the Time to First Byte (the time spent to receive the first byte of the response upon initial request), DOM Interactive Time (when the browser has finished loading the HTML, and the DOM (Document Object Model) has been built. The DOM is how the browser internally structures the HTML so that it can be rendered. DOM Content Loaded Time is created at the point when the DOM is ready and there are no style sheets blocking JavaScript execution.
GTMetrix also does a good job when it comes to informing the user about the issue at hand. For example, in the second image shown above, “Leverage browser caching” has been listed as a core issue. Clicking on that issue will provide a list of cacheable resources, as well as information about the issue itself, including a link to a more detailed description – particularly handy for detailing issues to clients.
https://gtmetrix.com/leverage-browser-caching.html
Varvy
Somewhat lesser known in comparison to the others, Varvy offers an overview similar to Google Pagespeed Insights, while offering plentiful amounts of information regarding the issue, similar to GTMetrix.
They cover a key core of areas that relate to page speed and load time, such as compression, server response time, browser caching, etc.
https://varvy.com/pagespeed/optimize-css-delivery.html
https://varvy.com/pagespeed/render-blocking-css.html
Google Analytics
Though a bit different from the other resources listed here, you can identify potential page speed issues in Google Analytics under the Content section, and the Page Timings and Speed Suggestions sections.
Here, you’ll get a quick report on how your pages are performing in terms of speed. You can also see the pages which are loading more slowly for users, possibly identifying issues with those pages in particular, with direct links through to Google Pagespeed Insights reports for them.
As mentioned earlier, you may not necessarily want to use just one of these tools – having a look at all of them and finding common issues between all reports would be a great way of identifying key issues with the site and how it is currently performing.
Improving Page Speed – Common Issues
Use Browser Caching
When somebody visits a page, the array of elements and resources such as CS/JSS need to be loaded. With browser caching, this essentially remembers these resources for a set amount of time, storing a copy of the page for the next time they visit; reducing the amount of time it takes for the page to load.
This won’t make an impact on first-time users but will make a massive difference for users who are returning to the site.
Here’s a guide to browser caching from Varvy, who were mentioned earlier.
Enable Compression
Something which is rather common among sites, though still crops up as an issue, is the use of compression. This essentially reduces the bandwidth of pages, minimising the size of browser-based HTTP responses by providing smaller file sizes via using GZIP.
For more information enabling compression – if you haven’t already – GTMetrix have a guide on it, detailing what to do based on whether your server is IIS or Apache. Our old favourites Varvy have a GZIP Compression Test for you to check out to ensure everything has been set up properly.
Reduce Image File Size
Before you add an image to your site, whether it be a photo you took on holiday or a hero shot of your latest product, you should consider resizing it to ensure that the file size isn’t too large. Oversized images will take longer to load, so you should keep the file size as small as possible, with them being properly scaled and cropped to the right size.
This is a rather common issue when it comes to page speed, often cropping up in reports provided by the tools listed above, mentioned as a high priority.
Remove Unnecessary Plugins
If you’ve got a site on a CMS like WordPress, there’s a good chance that there’ll be a list of plugins that aren’t really serving much of a purpose anymore and aren’t necessary. Maybe you tried something out that you didn’t particularly like, or have opted for a slightly different variant of the plugin. Some of these plugins will require the loading of various JS/CSS files – the act of which will take longer for the page to load.
With these inactive/unnecessary plugins, it’s recommended that they’re deactivated and removed entirely. Getting rid of them will also help out when it comes to the security of the site, as outdated plugins are a common opening for issues such as hacking.
Combine CS + JSS Files
Having several individual CS/JSS files may be easier to handle in terms of maintenance, but combining them into fewer files will have a positive effect on the speed of your site. Each file requires a portion of the load time, so minimising the amount of files will reduce the amount of requests, all without affecting how the files actually work.
This Stack Overflow thread has some great information on this, and of course, we have guides from Varvy on combining JS and CSS files.
So, in summary, speed really matters. A slow site can kill your site conversions, especially for mobile devices, and particularly for ecommerce sites. Implementing page speed improvements such as the ones listed above is highly recommended going forward, especially in conjunction with the creation of reports via the aforementioned tools.
A few fantastic resources have been linked in this post, but here are a few more for you get stuck into:
Why Page Speed Is Important – Podcast w/ Jon Henshaw
State of Online Retail Performance – Akamai
Web Page Test: Website Performance + Optimisation Tool
How to Improve Your Conversion Rates with a Faster Site – Moz
