Contents
Click below to skip to a section.
- Introduction
- Why is website speed important for SEO?
- How can you check your website speed?
- How can you improve website speed? 8 Actionable tips:
- Enable compression on your website
- Minify your CSS and JavaScript files
- Reduce the number of redirects you use
- Remove render-blocking resources
- Leverage browser caching
- Use a content delivery network
- Optimise your image files
- “Lazy load” your pages
- Conclusion
Introduction
Website speed has been a direct ranking factor for Google Search since 2018’s Page Speed Update. It has long affected search performance in other ways through its impact on traffic, dwell-time, and bounce rates. Google’s latest algorithm is putting the focus on website usability once again. This update will primarily consider what is known as “Core Web Vitals”, plus user experience factors linked to your website’s performance, which Google calls the “Page Experience Signal”.
“The page experience signal measures aspects of how users perceive the experience of interacting with a web page. Optimizing for these factors makes the web more delightful for users across all web browsers and surfaces, and helps sites evolve towards user expectations on mobile. We believe this will contribute to business success on the web as users grow more engaged and can transact with less friction.”
As loading speed is immediately noticeable to users, it’s safe to say that it matters here.
Why is website speed important for SEO?
Your website’s speed is one of the first things a visitor experiences when they land on your site. If your content loads slowly, they are likely to a) become frustrated, b) leave, or c) try a different search result altogether. Needless to say, your chances of getting a website conversion (however you categorise this), plummet.
Bounce rates – where visitors leave quickly without engaging – aren’t an official ranking factor. But in general, websites with high bounce rates rank lower on Google than sites where people stay for a long time. Add to this, an incredible 40% of desktop searchers abandon a website that takes 3 seconds to load. And this figure is even higher for mobile searchers.
Even visitors who give you the benefit of the doubt and stay on page are unlikely to return, so you need to do everything you can to get it right first-time.
A slow website isn’t just bad for your SEO. It’s bad for conversions. And depending on how established a revenue stream your site is, it’s bad for your bottom line, too.
Online and search ranking titans Amazon wised up to this way back in 2009. The company found that every 100ms of latency (every 0.1 second of loading time) on a page was costing them 1% of its sales. That translates to potentially billions of dollars in revenue.
While not everyone is going to lose billions of dollars, how many sales would be needlessly lost for your business in the same circumstances?
With the new Page Experience update, slow site speed and bad on-site experiences won’t just affect your visitors and sales, they could impact your website traffic, too.
How can you check your website speed?
Starting to get concerned about your site speed? Don’t worry. There are many free and premium tools online that check your site’s speed and monitor its performance. Popular tools include:
Most of these platforms measure similar metrics and offer varying levels of insight, analysis and reporting. As a free tool, Google’s own PageSpeed Insights is a good, accessible solution for most website owners.
To check a WebPage with PageSpeed Insights, simply copy the URL and paste it into the bar on this page. The tool will analyse your WebPage content against several user experience metrics and give each page a score. A 90+ score is considered “good”, 50-90 “needs improvement”, and below 50 is considered “poor”. Once the report is complete, you will see a list of insights and suggestions to make your pages faster and perform better against each metric.
These suggestions and tips are split into two groups:
- Opportunities – advice on how to improve performance, with estimates on load time gained from each improvement.
- Diagnostics – additional information on how the page can adhere to Google’s best practices for web development.
You will also see a “Passed Audits” report for a list of audits that your page has performed well on. This is helpful, as it can give you guidance on what you can replicate on other pages to boost your overall website speed.
PageSpeed Insights reviews mobile and desktop performance separately, with individual scores for both platforms. Remember, a site can perform well on one platform and poorly on another, so don’t be led into a false sense of security. While it’s best practice to focus on improving your website experience for all users, you may want to prioritise the platform where your userbase mostly visits and converts on.
Other third-party tools can provide more personalised reporting for measuring site performance in specific countries and regions. This is helpful if your target audience is distributed across multiple territories and you need to prioritise improvements.
Whichever platform you choose, you should check several pages to get a clear idea of how your site performs – simply checking your homepage isn’t going to give you the full picture and there may be issues that affect some WebPages that aren’t present on others.
How can you improve website speed? 8 Actionable tips.
Here are 8 ways you can improve your website speed and directly address common issues unearthed by PageSpeed Insights. Many of these tips are straightforward to implement and can be carried out by a marketer, a web developer, or your IT department. I.E, there is no need to shy away from this or be scared by it – be methodical and it’s just time and effort required.
If you are using a popular CMS, such as WordPress, there is a wealth of online support on how to implement these changes yourself, and plugins to handle some of the more technical tasks such as minifying scripts. Some platforms, such as Squarespace, may also have built-in features or integrations that can make the changes for you, and some hosting providers also offer tools built into their platform. However, if you need a helping hand making this happen, drop us a line here.
WordPress Plugin suggestions for each recommendation are provided.
1. Enable compression on your website
When a user lands on your website, their browser requests files from your server to display your pages correctly. The larger the files, the more data has to be downloaded. So, it takes longer for your site to appear on-screen. Compressing these files makes them smaller and cuts down the time needed to load them, often resulting in a significant boost to website speed.
Hubspot offers a detailed guide on GZIP compression which includes instructions for setting up and testing compression for your WebPages and stylesheets on the most common servers and CMS platforms, including WordPress.
2. Minify your CSS and JavaScript files
“Minifying” (reducing the size of) your website’s CSS and JS resources involves removing unnecessary code without affecting the information that browsers use to load your site. This includes taking out comments, white space, and unused lines of code.
While this sounds complicated, you don’t need to be a web developer to do this, and it’s usually as simple as uploading or copying and pasting the code from your site’s CSS and JavaScript files. If you use WordPress and want to avoid editing code, you can use a plugin to handle minification for you.
Many websites also offer online tools for minifying your files, such as minifier.org, cssminifier and JavaScript-minifier.
Google recommends using the following tools designed for each type of resource on your site: HMLMinifier for HTML, CSSNano and csso for CSS, and UglifyJS or Closure Compiler for JavaScript.
Whichever method you choose, it is important that you back up your site’s files before modifying them in any way, and test when you make a change to ensure it hasn’t broken anything! If not you, speak to your website administrator before making changes.
3. Reduce the number of redirects you use
Redirects are great for sending your visitors to the right places on your site. They are an integral but often overlooked way to boost user experience. However, there is a catch. Long chains of redirects can significantly increase your page load times. If a user must wait for their browser to load several URLs before it takes them to the content they’re looking for, they’re unlikely to stay.
Thankfully, there are many free and paid tools available to track your redirects. Services such as HTTPStatus can bulk-check a list of URLs and tell you where they redirect to, along with the time it takes to arrive at the destination.
Other free services such as Wheregoes and Redirect Detective provide information on a single URL and can be useful for checking your affiliate links and URL shorteners.
Popular SEO suites such as SEMrush and Ahrefs can also help you track and troubleshoot your redirect chains across your entire website domain.
Finally, if you’re running an older website that redirects mobile users to a mobile domain (i.e. m.yourwebsiteurl.com), you should make responsive web design updates a priority. This enables the same content to be served across desktop and mobile, but displayed in a manner most appropriate for each device.
4. Remove render-blocking resources
Render-blocking resources are files that are required for rendering (loading the visuals on) a WebPage. When loading a page, a browser downloads these files before anything else, and will not show the page until they are processed. A render-blocking resource is typically found in the <head> section of your HTML page, and could be a JavaScript, HTML or CSS file.
Too many render-blocking resources slow down your pages. While it’s important that your site displays its content correctly, some files that are considered render-blocking by a browser may not be needed to load the page. Instead, they can be deferred to load in the background while the page is displayed, whilst prioritising the most important stuff first. For example, websites hosted on WordPress often have render-blocking resources used to run themes and plugins.
As part of its page audit, PageSpeed Insights highlights any render-blocking resources it finds in its Opportunities report. Check out a sample report below:
Of course, it’s not always possible to completely eliminate render blocking resources. Some “critical” resources need to be render-blocking to display the page correctly, in this case, minifying your files can help reduce how long it takes to load them (see tip #1 above).
If you are using WordPress, plugins such as WP Rocket can optimise your other by deferring JavaScript files and automatically combining your critical CSS. The alternative is doing this manually. But this is a time-consuming and difficult task that requires web development experience. For more information on building a critical rendering path, refer to Google’s documentation.
5. Leverage browser caching
Browser caching allows your visitors’ browsers to save and upload your website files from their device, rather than downloading them from your server each time they load a page.
Caching is a great way to reduce the number of files that need to be loaded from your website’s server for returning visitors. Basically, downloading resources from a network is slower than loading them directly from the visitor’s device.
As well as increasing load times, downloading a lot of data can also be expensive for users on mobile networks with data allowances. Both factors can deter visitors from returning to your site.
Google recommends caching resources that are unlikely to change, such as JavaScript, CSS and static images, for at least a week, up to a year. Cache control instructions can be manually added to the headers of your files, which provide browsers with information on which files to cache, how long to hold them for, and who can cache the content. A list of these headers and what they do is available here.
For WordPress installations, caching policies can be easily set up via caching plugins, such as W3 Total Cache, WP Rocket, or WP Super Cache . These offer the same performance improvements as manually applying your headers simply by installing and enabling them. Caching can also be set up at the server level for further performance improvements. For more information on this, contact your hosting provider.
6. Use a content delivery network
A Content Delivery Network (CDN) is a group of servers used to provide content quickly, affordably, and securely. Many of the most popular, high-traffic sites on the internet achieve high website speeds by using CDNs to deliver their content while keeping their load times down.
When downloading from a Content Delivery Network, visitors connect and load content from a nearby datacentre, rather than the original website’s server. This means that the data travels less distance and loads more quickly. CDNs also feature efficient, high performance hardware and use compression and caching techniques (see tips #1 and #5) to load files quickly and reduce their size.
There are a range of CDN providers that you can register your site with. As pricing can vary depending on your requirements, it’s worth comparing plans to find a CDN that suits your website. You should also consider the size of the network, where their servers are distributed in relation to your website’s audience, and the quality of their customer service and support.
Popular CDNs for small businesses include:
The following CDNs are also popular solutions, but are more difficult to set-up and are designed for larger organisations.
Once you are registered, there are a few ways you can use a CDN with your website:
- Connecting through your hosting provider. You may also have support with your provider’s preferred CDN partner built into your hosting package.
- Connecting via plugins that provide CDN Support. WordPress’ W3 Total Cache, WP Super Cache and WP Fastest Cache plugins allow you to connect a CDN. The Jetpack plugin also offers access its own free CDN.
- Connecting to a self-hosted website. If you host your own site, you will need to set up a CDN URL and point your assets to it at the PHP and JavaScript level. Here is a guide on how to do this.
It’s also worth noting that CDNs often have a security feature set in the form of a Web Application Firewall to filter out bad traffic.
7. Optimise your image files
Optimising your images is about striking a balance between quality and performance. While you want your images to load quickly, you also want them to display correctly and look good on the page. Large images can make a site extra-beautiful, but they can slow it down – ruining any positive effect. Meanwhile, smaller images will appear pixilated and stretched on a desktop.
Part of optimising your images is about selecting the best file type for each image on the site. Typically, there are three image file types used for web content:
- JPEG – High-quality images, recommended for photography and detailed images. JPEGs can be compressed to reduce file sizes but lose quality if compressed too much.
- PNG – High-quality images that support transparency, recommended for line art and simpler images. PNGs can be compressed without losing quality but offer a smaller reduction in file size when doing so.
- GIF – Images that support animation but are limited to 256 colours and longer animations are large in file size.
For Logos, Icons and simple graphics, you should also consider using SVG format, a vector graphic file type with a small file size that can be scaled to any size without losing quality or impacting your website speed.
In addition to these, there are three “next generation” image formats that are less widely used but offer better compression and quality than the above image file types: WebP, JPEG 2000 and JPEG XR. If asking a designer to create images, make sure it is understood that they are for a website and if necessary, the purpose they serve on the site. Your designer will provide the most appropriate file type and size.
While next-gen image formats are not supported on all browsers, WebP is becoming increasingly popular and is now compatible with Google Chrome, Opera, Safari and Firefox. And websites can be configured to serve older file types to browsers that don’t support WebP. The format also supports transparency, making it an ideal replacement for the ubiquitous PNG and JPEG files.
While Photoshop, Lightroom and some other image editing software packages lack WebP support, Google provides a free tool for converting your JPEG and PNG images to WebP.
If your website is hosted on WordPress, you can use a plugin to automatically convert images in your media library to WebP format, while still serving the original images to incompatible web browsers. Popular WebP conversion plugins include Imagify, WebP express and WebP Converter for Media.
8. “Lazy load” your pages
Lazy loading is a method of reducing the number of images that a browser downloads when loading a WebPage. When lazy loading a page, images that are further down the page are deferred until they need to be seen. This means that fewer images need to be downloaded for the page to become usable and the page loads faster – providing a better experience for the visitor.
While images are lazy loading, they are usually temporarily replaced with a colour based on the dominant colour found in the image, or a lower-resolution placeholder version of the final image. This means that the layout of the page stays the same for users that skip content or scroll quickly.
As well as images, videos can also be lazy loaded, meaning that they only begin to load on the page once the user clicks the play button. This can greatly improve your page load times and is recommended where videos follow an article or sit alongside lots of video content.
If you host and manage your own website, your images can be natively lazy loaded in most browsers by adding a loading attribute to images and their containers. Alternatively, you can lazy load content through a third party API or a script – read more on how to do this here.
WordPress began lazy loading images automatically in 5.7, but installing lazy load plugins can provide more customisation, without having to edit your code. Popular plugins include Lazyload by WP Rocket, A3 Lazy Load and Smush for images, and Lazy Load for Videos for video content.
Whichever method you choose to implement lazy loading, ensure that you provide alt attributes on all of your images, and that each image can still be crawled by Google to preserve your SEO.
Conclusion
Following the above suggestions will improve your website’s load times and performance ahead of Google’s upcoming Page Experience update. This should help to preserve your SEO rankings when the algorithm changes happen. You may even see gains against competitors who have yet to optimise their websites. You can read more about Google’s Core Web Vitals in our guide here.
If you need assistance improving your site performance, would like a website audit, or personalised recommendations for improving your site’s user experience, please don’t hesitate to talk to our team!
