We’ve recently been working on developing and designing a number of eCommerce websites. Aside from focusing on creating engaging, customer-friendly designs, we also focussed heavily on page loading speeds, using Google PageSpeed Insights as a guideline to enhance overall performance. Below we go into more detail about some of the design and hosting tools we use to maximise speed, the importance of loading times and how to make the most of Google PageSpeed in the eCommerce sector.
Hardware and software
The eCommerce sites we recently launched are hosted on Krystal, the first hosting company in the UK to be fully powered by renewable energy. Their Netwise datacentre facility offers LiteSpeed Caching and SSD disk hosting, which can make websites up to 16 times faster. And because we used a WordPress theme to design the sites, we were also able to utilise the QUIC.cloud acceleration platform.
QUIC.cloud provides dynamic caching, which enables content to be served as soon as it is requested. This makes it much faster compared to alternative CDNs that first retrieve dynamic requests from the site’s service before the visitor can access the content. As a result, Time to First Byte (TTFB) is lowered and your Core Web Vitals benefit too, improving your site’s Largest Contentful Paint (LCP) and First Contentful Paint (FCP) and measurements.
The code and design of the sites were optimised using Webflow. This application allows designers to build responsive websites and serves as the perfect place to bridge the gap between visual design mock-ups and the finished design. Once this was completed, the finished website was finalised using a custom WordPress theme that was compatible with WooCommerce.
Performance is key
Throughout the planning, design and development stages we are constantly looking at ways to maximise site performance. It is something we strongly encourage others to do, as bringing this to the table from the very start ensures you are already working towards achieving a strong user experience.
This is especially helpful when it comes to eCommerce sites, as functionality can vary quite a bit, and we take the time to discuss the available options right from the outset. It makes the design stage easier to manage when it comes to wireframes and concepts being mocked up, as they can all be targeted towards delivering the best possible experience for site visitors, with performance centre stage at all times.
Why is page speed important?
Amongst the many things to focus on when optimising your eCommerce site, page speed is certainly one of the most important. Not only will it provide a better user experience for customers, but subsequently it will improve your Google rankings, attracting more visits and better conversion rates. So, the longer it takes for a page to load, the more likely it is that potential customers will leave the site and head directly to a competitor.
Google have long stressed how important page speed is to your search result rankings. The recent move to mobile-first indexing included a Speed Update, meaning the algorithm had changed to rank the performance of your site based on how quickly it loads on mobile devices.
In 2020, a company called Backlinko carried a study that analysed over 11 million search engine pages. They wanted to better understand which were the common factors that contributed to sites ranked in the first 10 results. The average page speed on sites on the first page is about 1.65 seconds, which is pretty fast. This gives you an ideal target that you should try to work towards, although depending on your current set-up, it may require some work.
Their research also found that the probability of bounce increased when page load time was:
- 1-3 seconds: Bounce probability increased to 32%
- 1-5 seconds: Bounce probability increased to 90%
- 1-6 seconds: Bounce probability increased to 106%
- 1-10 seconds: Bounce probability increased to 123%
Of course, only so many companies can appear on the first page of results at anyone time. But by making the page loading times faster you will appear higher in the rankings, and overall, it will make for a better user experience for the customer, which is the ultimate aim of any changes you want to make.
Do you need to score 100/100 in Google PageSpeed Insights?
A common mistake made by many developers and site owners is to become fixated on achieving a perfect PageSpeed Insights score. However, it’s really the recommendations that you should pay close attention to, as these will offer longer term benefits for your site.
What matters more than achieving a 100/100 score is the speed of the website. We’ve come across sites with extremely fast average loading times (under 500 milliseconds) that do not have the perfect PageSpeed Insights score. The ‘perceived’ performance of your site is also just as important. Visitors have no idea about your score and just want to a good experience while browsing your content.
The PageSpeed Insights score can loom large when trying to improve your site’s performance. But the purpose isn’t to hit 100/100 for the sake of it, rather, to use it to identify issues with your site so you can optimise them and improve your loading times.
The priority for every business now should be to ensure they achieve a good score for their mobile site ahead of the desktop. Although, as we explain above, getting a high score isn’t the end game. Google now places an emphasis on mobile ahead of desktop, although improving mobile performance can pose more challenges, as connection speeds are slower, so comparing it with desktop connections is hardly a fair fight.
What can be done to improve your PageSpeed score?
The changes you need to make to your website to improve your PageSpeed score and website performance will vary depending on the issues that need to be overcome. In general terms it is helpful to focus on:
Eliminating render-blocking resources
Static files, such as JS, CSS, HTML and fonts pay a key role in the rendering of any page. These have to be downloaded and processed by the visitor’s browser before the rest of the page is rendered, which creates a bottleneck effect. If the page doesn’t have a lot of JS or CSS files, you can incorporate the code into the HTML file. There are WordPress plugins that can do this for you. This is better for smaller sites, but for larger sites you can use async and defer attributes to make the scripts non-render-blocking. It enables the rest of the page to render without being blocked and slowed down.
Avoiding the chaining of critical requests
This refers to the various dependent network requests that play a key role in rendering the page and converting JS, CSS and HTML into pixels. You’ll be given a resource tree in the PageSpeed Insights results that highlights a loading time for every request in the chain. You can then target the ones slowing up the process by making them async, and ensure critical page assets are downloaded as early as possible.
Optimise image size
Size matters, especially when it comes to images, which can have a significant impact on mobile performance. Focus on loading images that are correctly size for the device, and provide scalable resized images that can be used for mobile. The best time to do this is before the images are uploaded to the site. This will directly benefit page load times, especially if you have a slower connection. Image optimisation for mobile always has a bigger impact on performance for mobile, compared to desktop.
Unused code can often be a cause for slowing down website page loading speeds. eCommerce businesses using WordPress should review the use and need of any plugins that add extra CSS/JS code to their pages. Chrome DevTools features a Coverage Tab that enables you to identify URLs of scripts or stylesheets that are causing an issue. Also think about minifying CSS, JS and HTML code, which compresses the code by removing syntax and extra space.
Minimise transfer sizes and request counts
Your site will take longer to load if there are large amounts of requests sent to a browser. Similar to chaining critical requests, there is no pass or fail rate assigned for this test. Instead, it tells you how many requests are made and the download size of each one. The report categorises every request into specific groups (image, script, stylesheet etc.). This enables you to see which category is generating the highest transfer sizes. There is no ideal request limit, but Google say you should set a performance budget which ensures there is a standard webmasters have to adhere to. If you go over this budget, you can then make appropriate decisions about optimising or eliminating certain assets.
Need to improve your page loading speed?
If you are experiencing slow loading times on your mobile or desktop site, there is a good chance it could be losing you customers. You may need a website audit to get a deeper understanding of the changes that need to be made to improve speed, performance and the overall user experience. Get in touch today to find out more about our free website audit and how it could boost your business. Call020 36 37 1260, or email email@example.com to get things started.