By Good pagespeed is an important factor in a well-running website. It improves usability for human visitors, who can move around your site more quickly, improving retention rates and ensuring more make it through to placing an order or otherwise converting into paying customers.
Fast-loading pages are also increasingly crucial for your search engine rankings. In recent years Google has moved towards listing faster pages higher in their search results, and mobile-friendly sites higher in searches conducted from mobile devices.
So for both of the above reasons, reducing your page load times and speeding up the interactivity of your pages can increase traffic, conversion rates and ultimately, the revenues you generate from your website.
However, it’s not just a case of creating a web page and leaving it at that. Like so many other elements of your website, pagespeed can be optimised with some well-targeted tweaks over time.
In this guide we’ll look at some ways to improve pagespeed optimisation, but first let’s think about what pagespeed really means.
What is page speed?
There are several ways to think about page load speed and different methods to detect it in your website analytics.
Some examples include:
- First Meaningful Paint: Initial page elements are drawn and top-of-page content filled in, so users can begin to read the page while the rest finishes loading.
- Page Load Time: The time taken to download and render the complete page code, so that all the elements are drawn and stabilised.
- Time To Interactive: Slightly longer than Page Load Time, and includes the extra delay for interactive elements to start responding to user inputs.
Each of these has its own applications, but in general Page Load Time provides a good measure of pagespeed – it tells you when the complete code has been downloaded and the page fully drawn, but does not factor in delays due to external javascripts and other interactive elements.
Because of this, on pages where interactivity is crucial as soon as possible upon loading, you might want to use Time To Interactive as your working definition of pagespeed instead.
Whichever you choose, there are likely to be things you can do to accelerate the loading of your page, improving its pagespeed performance and gaining the associated benefits such as optimised search rankings and increased visitor satisfaction.
Pagespeed statistics
As of October 2020, HTTP Archive’s State of the Web report showed that:
- Mobile web pages are on average 10% smaller than desktop web pages (1.8 MB of total data vs. 2.0 MB)
- WordPress pages are larger on average (2.2 MB on mobile and 2.3 MB desktop)
- The average mobile web page downloads 902.9 KB of images, up 1.3% year-on-year
- The average desktop web page downloads 973.4 KB of images, down 0.9% year-on-year
- Desktop pages contain more images – 27 on average vs. 24 on mobile pages
This is just a snapshot of a few factors, but highlights how the platform you use, mobile website design and images on each page can have an impact on the page size, which in turn has implications for how fast the page might load.
Pagespeed and Google SEO
Rapid pagespeed has always been a hallmark of good usability, but it became integral to Google SEO in July 2018 with the rollout of the ‘Speed Update’ to all users.
This made page loading times a key part of how Google calculates search rankings, especially for pages that are slow to load. Since then, Google has offered the PageSpeed Insights tool on the Google Developers website, which can help you to diagnose problems with page loading speeds.
If you haven’t audited your pagespeed since summer 2018, it is especially important to do so, as many of your competitors are likely to have made this an area of focus over the past 2-3 years.
Methods of pagespeed optimisation
Keeping all of the above in mind, what are the main methods of pagespeed optimisation? Like search engine optimisation, pagespeed can be improved through a combination of different methods, including good initial design, technical fixes and page content tweaks.
Lean Design
First and foremost, lean page design can ensure pages are fast to load – especially on mobile data connections. This includes mobile-friendly templates for your website and responsive design that adjusts to the size of the user’s screen.
You can also ensure you don’t waste time loading code that is not needed, for example, CSS styles or javascripts that are not used on the page, by loading them as external files instead.
Designing pages that load quickly is a good first step towards optimising your pagespeed, so if your website is more than a few years old, it’s worth considering a rebuild to take advantage of more modern methods of accelerating the page load process.
Quick win: Use a tool like GZip to compress your code even further and maximise the gains of lean design.
Sequential Page Code
Page code should be structured so that essential content loads first, with any external scripts executed last once the meaningful paint has completed. Using CSS, you can load your main <div> elements first – pages don’t have to load strictly from top-left to bottom-right anymore.
This won’t have an effect on the overall Time To Interactive, which will still require external scripts to load and execute, but it should allow the visual content on each page to finish loading first, so users can start to see images and read text sooner.
Direct Loading
Redirects from deleted pages can slow the overall load time for a page – so again, if your site has a legacy of 301 redirects after years of successive updates, or the transition from http to HTTPS, you should look at ways to remove these extra steps from the page load process.
Even if you cannot remove redirects entirely, you can ensure each redirect points directly at a page that currently exists, rather than cycling through a daisy chain of deleted pages that must then redirect the user a second or third time.
Cached Content
Allowing the user’s browser to cache content like CSS stylesheets, javascripts and images means those elements don’t need to be downloaded again the next time they visit your site, so that your pages load much faster.
It’s common practice to cache content for as much as a year, especially for pages that are not likely to change significantly during that time, and you can maximise the benefits of caching by reusing the same images (e.g. your logo or page header) across your entire site.
Faster Image Loading
Compressed images load faster and can still look good on-screen – you don’t usually need full-resolution photographic images for web pages. If in doubt, jpeg is the go-to format, and good image editing software can adjust the quality of the image to reduce the file size even more.
When using images on a page, make sure you don’t force the user to download the full-resolution image if it is going to be displayed at a much smaller size. If it’s 500 pixels wide on the page, use a 500-pixel image, rather than a 4,000-pixel image with its width adjusted using HTML or CSS.
Quick win: Many platforms have built-in image resizing and compression, or you can add functionality using a plugin on WordPress, so make sure you’re using this method.
Plugin Management
As is often the case, there is a trade-off when using plugins, and too many will slow down how quickly your website loads – so review your plugins regularly.
Make sure none of them are introducing unnecessary and avoidable delays, remove or deactivate any plugins that you are not using at all, and check that those in use are adding meaningful value to your site.
Lazy Loading
Lazy loading is a relatively recent introduction on modern browsers, which means multimedia elements only load when they are needed – in essence, pictures only load as they scroll into view.
It’s a good option across the board, but especially for mobile sites, where it can allow a complete meaningful page load much more quickly, without a significant impact on usability as visitors move around your pages and the additional images load into place.
Better Hosting
Better hosting is a sensible investment for any growing business. It can give your website more bandwidth and reduce the number of other sites hosted on the same physical server.
All this adds up to faster loading times. Your overall pagespeed will still be limited by the speed of the user’s internet connection, but at least you will know that you’re doing everything you can to deliver content faster from the server-side.
Conclusion: Pagespeed matters
In the end, everyone benefits from a website that loads quickly and correctly, with a near-instant initial paint and the fastest possible Time To Interactive.
You can achieve this by caching repetitive content, minimising file sizes including page code, external resources and media files, and investing in managed hosting on a faster server.
These are achievable goals for businesses of all sizes, whether you are just starting out or targeting growth in your SME phase.
And with direct implications for your search engine rankings too, pagespeed optimisation is a sensible part of any SEO campaign in 2020 and beyond.