Blaze Commerce recently conducted tests on the page speed performance of WooCommerce. Here are the methods we used and what we discovered.
Just how important is page speed to an eCommerce business.
It’s pretty simple. The longer it takes for your website to load, the more time you’re giving people to change their minds. They’ll get tired of sitting around and waiting, which means they’ll bounce away to check out your competitors instead.
This has a direct effect on your revenue.
If people leave before they even see your products, you can’t achieve any sales from them.
You need your webpages to load up quickly if you’re going to maximise revenue. That’s why we’ve conducted in-depth testing to determine the page speed performance of WooCommerce.
After all, we offer WooCommerce development services. We want to ensure that we’re working with the best possible platform for our clients.
Here’s what we’ve discovered.
The WooCommerce Page Speed Performance Test
Our test examined the page speed performance of WooCommerce for the Blaze Commerce website. We wanted to see what we could do to improve our own website.
And from doing that, we could find out how to offer superior WooCommerce support to our clients.
Why We Tested Our Own Website
Like our clients, we operate a WooCommerce website. We know that the performance of our site has a direct effect on our sales and, ultimately, our revenue figures.
That led us to look into our website’s performance.
We plugged the website into Google’s PageSpeed Insights tool and got the following results:
- Desktop: 34/100
- Mobile: 6/100
You can see from those numbers alone that there was plenty of room for improvement. This simple test showed us that our website wasn’t running optimally, especially on mobile devices.
That latter point is a major issue.
Online shoppers increasingly use mobile devices to make their purchases.
By the end of 2016, 1.6 billion people had used their mobile devices to buy something during the course of the year.
We can look to the United States for even more insight. During the 2018 holiday periods, about 40% of all online purchases came from mobile devices.
Clearly, our website didn’t offer the experience that mobile users expected. And by looking at these figures, we could see that we needed to make changes.
Of course, our desktop figures didn’t make for much better reading. Though higher than the mobile figures, they still showed opportunities for WooCommerce development.
Here’s the key issue with all of this.
If your website takes between one and three seconds to load, you increase the chance of a visitor leaving by 32%.
That figure goes up to 123% if the site takes 10 seconds or more to load.
A lack of focus on the page speed performance of WooCommerce websites means that you’re losing business. Worst of all, many of these visitors won’t come back. They’ve had one bad experience with your site and don’t believe that they’ll have a better one next time.
Armed with this knowledge, our WooCommerce development team started to work on some steps to fix the issues.
The Steps We Took
Our test revealed that we had a lot of work on our hands. We knew that the page speed performance of WooCommerce has a huge impact on our business.
So, we got to work. These are the steps that we took to improve our optimisation scores.
Step #1 – Identifying Code and Image Issues
First, we looked at the information that Google’s tool provided to us.
It highlights a number of issues related to code and images. In particular, it helped us to see inefficiencies in our CSS and JavaScript (JS) that we could work on.
For images, it showed us which pictures slowed the page speeds down.
This is an area that a lot of people overlook when developing their websites. Once they have an image, they just upload it immediately. They don’t think about how that image’s file size might affect performance.
With these issues identified, we started to optimise.
Step #2 – Check GTMetrix
While Google’s PageSpeed Insights tool offers plenty of data, there is the possibility that it’ll miss a few things.
That’s why we decided to use another tool to catch anything that Google missed.
GTMetrix is another free tool that provides page speed scores.
It also offers a list of recommended actions that you can take to fix various issues with your website. With this tool, we identified a few more issues related to CSS, JS, and images.
Step #3 – Use a Lightweight WordPress Theme
Your chosen WordPress theme can cause all sorts of issues without you even realising it. The open-source nature of the platform means that the developer may not have put much time into optimisation.
As long as the theme works, they can release it.
We focused on using a lightweight and performance-optimised WordPress theme.
We found the ideal theme at https://generatepress.com/ Better yet, it comes with WordPress and WooCommerce support.
Step #4 – Optimise the Images
With the theme issue resolved, we switched our focus to the images on the site.
The ShortPixel WordPress plug-in provided the perfect solution. It allows you to upload an image into the tool, which it optimises accordingly.
It maintains the quality of the image while ensuring it requires as little bandwidth as possible to load.
Step #5 – Minify CSS, JS, and HTML
The more code there is to load, the longer it takes for a website to appear on a browser.
We focused on minifying our CSS, JS, and HTML to improve the page speed performance of WooCommerce. This involved optimising some portions of code. Our WooCommerce development team relished the opportunity.
The end result was a more efficient website with much clearer code.
Step #6 – Load CSS Asynchronously
In addition to modifying the CSS, we also tweaked the way that it loads.
The traditional method of loading CSS is synchronous. This means that a webpage has to keep making requests to the CSS to render portions of the page.
This all goes on in the background. The issue is that it slows the page loading time down.
Asynchronous loading eliminates the issue. This results in faster page speed performance of WooCommerce.
Step #7 – Defer JS Loading
Much like with CSS, a JS element will halt page loading while they get fetched and executed.
Once again, this adds time to the loading process. The webpage can’t load properly until this action completes.
By deferring JS loading, we allowed the HTML to continue parsing while making the fetch request. This means that the page loads even without the JS element. That element executes once the HTML finishes parsing.
The end result is a page that loads up faster, with the JS elements coming in touch later. Still, it means that the user gets on the page instead of having to wait.
Step #8 – Enable a Content Delivery Network
Content Delivery Networks (CDNs) use external servers to deliver content to a page faster.
You still have your main hosting for the website. A CDN simply improves how quickly that site can access content, such as images and videos.
Enabling one gave the site another speed boost.
Step #9 – Lazy Load Images
Trying to load every image on a page is another major time waster. This is what happens with regular web pages. Even if the image isn’t immediately visible, the user has to wait until it’s loaded before seeing the page.
Lazy loading prevents this because it only loads images when they’re needed. That means the page appears on the browser faster.
Step #10 – Updated .htaccess for Header Expires
Your website doesn’t need to load its header every time somebody visits it. Instead, it can pull from the cache to load the header faster.
Implementing header expires into the .htaccess file tells the site when it can do that. That means it only loads a new header when it needs to, which leads to another time save.
The Results – Page Speed Optimisation is Key
As you can see, we took a lot of steps to improve the website’s speed.
After completing the work, we plugged the site back into the PageSpeed Insights tool. These are the results we received:
- Desktop: 95/100
- Mobile: 95/100
Best of all, we’re still optimising the website. We hope to pull those scores closer to the 100 mark as we continue our work.
Faster Websites Get More Sales
Now, the Blaze Commerce website loads up faster than it ever has before.
Our focus on the page speed performance of WooCommerce has paid dividends. Visitors now get our content faster on all devices. This means there’s less chance of them bouncing before viewing the website.
And if they don’t bounce, they’re more likely to explore and find a product that suits them.
Think about how this affects your own website. Perhaps slow loading times cost you customers that would have bought something if your site was faster.
We ran these tests to learn how we could improve our own website. Now, we’re ready to use what we’ve learned to improve yours.
To find out how, get in touch with us to arrange your discovery call.
