The speed of sound, the speed of light or the speed of your car are all ingrained in our mind. But page speed is a more abstract concept that effects websites and is becoming increasingly important for both Google (yes, we do realise that there are other search engines available) and users.
In this article we try and demystify some of the jargon and explain the what, why and how of all things page speed.
What is page speed?
Put simply - page speed can be considered as the time it takes between a user's request for a page and the time it takes for the (predominantly above the fold) content of the page to load.
There are a number of metrics used to measure page speed, which highlight different feedback milestones along the loading process. However, 'First meaningful paint' or FMP is popularly used as the primary metric for user-perceived loading experience on web pages. A phrase originally coined by Google; it refers to the time it takes for a page's primary content to appear on a user's screen i.e. important information. This information could be a banner and visible text for a blog post or product images on an e-commerce website.
Why you should care about page speed
A user’s first direct experience with your website is it’s loading speed. A report by Kissmetrics found that if a page took 3 seconds longer to load, over a quarter of users will click away. This can be frustrating to those that have poured so much time and effort into creating targeted and relevant on-page content.
Due to this, page speed directly impacts your conversion rate. Studies have consistently concluded that faster page speeds result in higher conversion rates. According to skilled.co, 47% of customers expect a webpage to load in under 2 seconds. Walmart, the retail giant, noted that for a 1 second decrease in page load time, they saw a 2% increase in their conversion rate. Additionally, Amazon are reported to of said, 1 second of additional load lag time would cost Amazon $1.6 billion in sales per year. Pretty crazy.
The link between page speed and SEO
Google has always been an advocate of fast websites, particularly on mobile devices due to traditionally slower connection speeds. Historically, however, Google only ever implicitly hinted that page speed was a ranking factor. However back in 2010, Google, for the first time, publicly confirmed that page speed was to have an impact on search ranking.
Even more recently, as we entered into the ‘mobile first’ age of ranking, Google announced that page speed will be a ranking factor for mobile searches, an update which rolled out to all users in July 2018. These continued updates suggest that there may be a greater status for page speed on the horizon and this is backed up by page speed now being ingrained in Google Search Console. Could we see Google rating website speed in the SERPs? We believe that this is both inevitable and due.
Page speed has a deeper impact on SEO than just ‘surface speed’ though. As we covered earlier, a slow page speed can result in disgruntled users. This often results in users clicking away from a page, increasing bounce rates – an engagement indicator which Google will consider when ranking your site.
Session duration – the time in which a user is active on a page - will also be adversely impacted by a slow page speed. If the bounce rate is increasing, this will likely result in a proportional reduction in session duration, negatively impacting page rankings.
What this information highlights are the intrinsic links between page speed and SEO. Essentially, if you want your website to rank highly and you want to engage with your audience – your website has got to be fast.
How to gauge your website performance
There are a number of free tools available for testing your websites speed. Each of them offers their own features, reporting style and different ways to dissect your results. We've included 4 of the most well-known tools, with information about the data they'll collect and how they'll aid in finding improvements to your website performance.
Google PageSpeed Insights
Google PageSpeed Insights is an online diagnostic and benchmarking tool used to identify website performance issues. It’s powered by statistics gathered from Google’s developer tool ‘Lighthouse’.
It’s a great place to start to begin the process of optimising your website for speed. It’ll provide you with a benchmark page speed in which to improve upon and valuable technical suggestions to improve the speed of your website.
It also provides separate scores for mobile and desktop. This is extremely useful as mobile searches continue to increase.
Below is data collected on our CMS website: www.jolojo.com.
In a recent introduction, Google are now using PageSpeed Insights and Lighthouse data in Google Search Console, ranking sites from slow, to moderate and fast.
Pingdom
Pingdom is an alternative tool, similar to Google PageSpeed Insights, which can be used to analyse your website load performance and identify opportunities to improve this speed.
Upon testing a site, you’ll be provided with a personalised report. This report will contain a variety of information. You will be provided with suggestions to improve performance, a list of the response codes encountered, a list highlighting content sizes and a waterfall diagram highlighting at what point in the loading sequence specific file requests were sent.
This data will allow you to review your website’s strengths and weaknesses and provide you with the foundations of a strategy to improve page speed performance.
Below is an example of data produced for our CMS website www.jololo.com.
GTMetrix
GTMetrix is another popular free tool on the market, readily available to those who wish to analyse their website performance. GTMetrix measures your websites performance using both Google Page Speed and YSlow. GTMetrix uses the data generated by these tools to make actionable suggestions on how best to optimise your website. A main benefit of GTMetrix is the two sources of data that are provided.
Similar to Pingdom, a personalised report is created upon testing a site. As mentioned above, you’ll be provided with suggestions to improve performance, as well as a waterfall diagram visually highlighting the load time spent on each request, the number of requests and a total page size statistic.
One of the best features of GTMetrix is that suggestions aren’t just general. For each suggestion, they list each resource that should receive the update and the savings it will bring. This allows you to visually prioritise optimisation tasks based on the proportional benefit they’ll have.
Below is an example of data produced for www.medium.com.
Google Developer Tools: Network Audit
Google Developer Tools can be accessed through the function (F12) key on a keyword, whilst you have your website open in a tab.
The Network panel allows you to view when and which resources are being downloaded or uploaded. This allows you to simulate a page load of your website, with the potential to view all resources and the time it took for them to be requested – hence, an indicator of page speed.
With the Network panel open, press F5. This will refresh the page. After the page has loaded, you’ll find that data has been recorded regarding each resource, including its size and the time in which it took to load. A waterfall of connectivity is also produced, visually highlighting the load time spent on each request.
Below is an example of data produced for www.bbc.co.uk.
Platform and Page Speed
There are a multitude of website platforms available, including WordPress, Squarespace, Wix, and Shopify to name but a few. Each platform will differ slightly when it comes to page speed performance, with numerous variables effecting individual website speed.
For our testing, we identified 5 websites running on each of the respective CMS platforms. Using Google PageSpeed Insights, we documented each websites’ mobile and desktop performance grade, as well as a variety of significant load time metrics. An average was then taken from the websites, highlighting the performance of each individual CMS.
As can be seen, in our tests Wix was the poorest performing CMS platform (in terms of Time to Interactive) with an average load time of 6.48s.
Shopify was another poor performer, with an average load time of 5.25s. This is particularly worrying, considering Google themselves state that 2 seconds is the threshold for e-commerce website access ability.
Squarespace and Drupal achieved very similar performance figures, with impressive Time to Interactive statistics.
Jolojo, a newly developed CMS built on a modern architecture (Go and Svelte), came out on top with a load time of under a second. These positive statistics likely come as no surprise, as the platform was made with speed as a priority.
Backlinko previously conducted an analysis of 5.2 million websites, highlighting the performance of all major CMS platforms. If you’re interested in a more in-depth analysis of CMS performance, it’s worth a read. It should be noted that data is from 2016.
What can you do to improve page speed?
There are a number of ways to improve page speed. For starters, it’s a good idea to run your website through PageSpeed insights and action Google’s suggestions, as these will be specific to your site. However, there are a few universal improvements you can make to your website that will enhance it’s loading time.
1. Image optimisation
Images tend to be the major slowing factor for websites as they are usually the largest files that are needed. Sometimes it’s easy to be complacent and upload an image that’s far too large and in an uncompressed format. You’d be surprised how much faster you can make your website through the optimisation of your images.
Disk size can be used as a rule of thumb in this instance. The larger the file is on your disk drive, the longer it will take to load once uploaded to your website. For example, a 100 KB image will load approximately 10 times faster than a 1000KB (1MB) image.
There are a number of plugins available that can compress images without losing quality. This means that a 500 x 500 pixel image can be reduced from 100 KB to 50 KB, with no noticeable difference in image quality, whilst becoming 50% faster to download.
Updating your systems to handle next generation image formats such as WebP will also help. WebP is an emerging image format, created by Google. It’s main purpose: to utilize a more aggressive and better optimised compression algorithm than JPG and PNG formats. Due to these traits, WebP images have two main benefits. Firstly, it allows for a reduced file size without any loss in perceptible quality (Google claims their WepP images can be up to 35% smaller in size compared to JPG images). Secondly, the WebP format brings together the unique qualities of GIF, PNG and JPG formats, providing greater flexibility.
2. Reduce CSS, JavaScript, HTML and leverage compression
As CSS determines the way in which content in a HTML file gets displayed, the user’s browser must download and parse all CSS files before it can begin displaying content to the user. Subsequently, the more CSS there is, the longer render times are likely to be. The removal of unnecessary CSS can improve the performance of a website greatly. There are plenty of online tools out there, such as UnusedCSS and PurifyCSS that will automatically identify and remove unused CSS rules.
JavaScript engines, such as Chrome’s V8, spend a large amount of time parsing and compiling JavaScript, longer than you may think - which causes bottlenecks. This issue is even more relevant as we continue to enter into a ‘mobile first world’, where the time in parse on mobile devices can be 2-5x as long as on desktop. Minifying unused JavaScript, as well as unnecessary commas and spaces, results in less script that requires parsing, lowering the time it takes to load.
In addition, code splitting can be utilized to optimise JavaScript. Most modern sites will serve their JavaScript as one large bundle. Due to this, all JavaScript is loaded at once, negatively impacting performance. Code-splitting refers to the splitting up of JavaScript into smaller, manageable chunks. Only the minimum, required amount of code can therefore be sent, improving performance. The rest of the JavaScript can be loaded later.
Gzip can be used to compress your code, reducing the size of your CSS, JavaScript and HTML files. Users will be able to download smaller files quicker, increasing page speed. Compressing files benefits mobile users the most, who may be using 3G or 4G, limiting their bandwidth. When testing your page speed, it’s always a good idea to run a 3G or 4G throttle, to see how your website is perceived and engaged with by your mobile device users.
3. Utilize browser caching
Caching is the process of storing data so that future requests can be met faster. For example, a user may visit your website and certain images may be downloaded into their browser cache. Upon visiting your website again, these images won’t have to be downloaded and will therefore load instantly, speeding up page speed.
It’s important to specify revalidation and optimal cache lifetime for each resource. Different resources will require different lifetimes based on how frequently they’re updated. For instance, fonts are a static resource, that are rarely changed on a website. For this reason, your servers should provide a long-lived max-age cache lifetime. On the other hand, certain CSS will require a shorter cache lifetime, as it’s likely to be updated more regularly.
However, as has been mentioned, browser caching is only effective at increasing page speed for those who have visited your website before. It won’t improve load time for all users. For this reason, you may want to focus on universal improvements first, rather than improvements that will only benefit certain users.
4. Improve the server response time
This is a tricky one. If you own the physical server yourself, there is plenty you can do to improve website performance. Namely reducing the load on it significantly or upgrading existing hardware, SSD’s and memory, that may be causing bottlenecks.
Chances are, however, that you don’t own the server. In this case, there is little you can do except ensure you’re with a good hosting provider, with good servers, from the beginning. If you’re on a shared hosting package (which you likely are), you’ll be sharing a server with other websites. This means you’ll be sharing internet bandwidth and CPU power. One option could therefore be asking your provider to move your website to a less populated server. There are other hosting considerations however, such as the speed of the network that the server is on, having efficient hardware firewalls and being in a data centre that has excellent external network connectivity.
5. Adopt a Content Delivery Network (CDN)
A content delivery network (CDN) is a globally distributed group of servers, hosting cached copies of web pages. Internet users requesting this information are transferred to their nearest server, allowing for the fast delivery of internet content.
By moving content closer to website users through the use of CDN servers, users experience faster load times.
6. Reduce the usage of redirects
Redirects are essentially instructions that send visitors of one page to another page instead. Think of it in terms of flights: would you rather the direct flight or the flight with multiple connections? Redirects slow your loading speed down as users have to be sent to multiple URL’s, before landing on the active page.
Along with reducing load times, redirects also harm your SEO efforts through the dilution of authority. It’s suggested that link authority reduces 10% per redirect.
Conclusion
Whilst Google has always been an advocate of fast websites, the introduction of page speed as a ‘mobile first’ ranking factor proves that Google is pursuing it to a greater extent than ever before. Some suggest that this increased importance indicates a greater status may be on the horizon for page speed. Could we see Google openly ranking websites for their page speed in the SERPs?
Despite Google’s algorithm favouring faster websites, it’s important to remember that page speed is equally for the benefit of the user and their experience with your website.
What’s your Google PageSpeed Insights Score? Have you seen better rankings after improving the loading speed of your website? Share your experience with us on Facebook, Instagram or Twitter!