Speed is money for any ecommerce website. The faster your website loads, the better the shopping experience. A better user experience translates to improved SEO, increased ROI, and happier customers. This ultimately leads to greater revenue and profits.

WooCommerce is the most popular ecommerce platform in the world and is free to use and tweak as per your requirements.

In this article we will explain in detail how we increased PageSpeed Insights score of the WooCommerce store with 10k products and 1k customers to 99 Performance score on PageSpeed Insights and 98 Performance grade on Pingdom.

This speed optimization was made on the WooCommerce site with following specs:

• WP core version: 6.2.2
• Customers: 995
• Uploads size: 3.60 GB
• Database size: 333.89 MB
• Total size: 4.10 GB
• Theme name: Astra (Version: 4.1.5)
• WooCommerce: version: 7.7.0
• Products: 10534
• Posts: 1k
• Comments: 30k
• Categories: 195
• Tags: 352

• Site was made with the default Block Editor.

• Server stack: LAMP – Apache/2.4.52 (Ubuntu), PHP 8.0.28 64bit, MySQL 8.0.32
• RAM: 8GB
• vCPU: 4
• SSD: 160GB

Initial speed results

This website was moderately slow, scoring on PageSpeed Insights 69 for Performance and 86 SEO score for mobile devices.

Desktop scores were little better with 81 for Performance and 83 for the SEO.

Pingdom scores were good with the Performance grade of 81 but they could be further improved on.

Time to start optimizing

What we did first was to install a caching plugin. We used WP-Optimize plugin because it has a very small footprint on the system, it is properly coded (which means no bugs and bad performance issues), has high ratings and over 1 million active installations. Our previous tests proved that this was going to be the right tool for the optimization job.

Overall WP-Optimize brings the cache and optimization technology together in a single seamless plugin to make your WordPress site fast, lean and efficient.

For the starters we have used only page caching.

Immediately after enabling page caching we have got loading time improvements at about 1.5 seconds.

Improvements on PageSpeed Insights were 75 for mobile devices and 97 for desktops.

Thanks to WP-Optimize page caching we have easily made huge improvements on our PageSpeed Insights and Pingdom score.

Now it was time to fix those SEO scores

For this we have used less popular but much more resource friendly SEO Framework.

During our testing this plugin proved to be resource friendly and it did not slow down backend nor overwhelm us with ads and nags.

It also can get you a better score than more popular Yoast SEO plugin as per our testing (we will publish those results soon).

SEO Framework activation alone brought us PageSpeed Insights SEO score improvement to 93 for mobile devices and 92 for desktops.

Got to say, this website is starting to get fast.

Let’s take a look at those images

The Website had a ton of uncompressed media, the bulk of it was mostly the product images in JPEG and png format. It was time to move those into modern web by converting them to the WebP format.

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

For this image conversion we have used yet one less popular plugin Converter for Media.

To use it we had to enable modules mod_mime, mod_rewrite and mod_expires. This had to be done on a server level. PHP also need have the GD or Imagick extension installed with the support for WebP format.

Unlike other plugins this one does not change paths of the original images but changes only their MIME type making it SEO friendly.

Original images also will not be deleted but backed up and used if you ever need them later on or you want to remove plugin.

How does Converter for Media plugin works?

You can optimize images with one click and Image size will be smaller after WebP is generated.

New images that will be added to the Media Library will be converted automatically.

Image optimizer does not modify your original images in any way and your files remain untouched.

When the browser loads an image plugin checks if it supports the WebP format. If so, the image in WebP format is loaded.

The plugin does not make redirects in default mode, so the URL is always the same. Only the MIME type of the image changes to image/webp.

No redirects means no cache issues, faster and trouble-free operation of your website.

It does not matter if the image display as an img HTML tag or you use background-image. It always works.

In case rewriting by rules from .htaccess file is blocked, a mode is available which loads images via PHP file. Then image URLs are changed, but the logic of operation is the same as in the case of the default mode.

The final result after image optimization is that your users download less than half of the data, and the website itself loads faster.

If you had to remove the plugin, it will remove everything after itself. It does not leave any trace.

Depending on the number of images, conversion could take several hours. In our case, conversion of 80k images took 4 hours.

Converting images to WebP improved performance scores for mobiles to 71 and 89 for desktops.

Pingdom load time improved to 390ms while page size shrinked to 467KB. That is 600KB gone from the frontpage, tremendous savings just by using new image format.

We are now getting into more delicate part of the optimization – JS, CSS, HTML minification

You should be careful about this stuff because if not done properly it can break the look of your site and its functionality so it is critical to be done by the experienced web developers who know what they are doing.

In our case we have used minification feature of the WP-Optimize plugin that we already have installed.

About Minify and combine CSS and JavaScript

WP-Optimize Cache has the more advanced minification feature. Combining and minifying site’s assets will reduce the number of requests to the server (by combining them) and reduce their size (by minifying their content).

Together with caching and Gzip compression, this will improve the performance and time to “first contentful paint”.

The minify feature also enables you to defer CSS and JavaScript. Deferring CSS and JavaScript allows you to load non-critical assets after the main page load, resulting in an apparent speed gain.

Minifying and deferring CSS and JavaScript also makes Google PageSpeed Insights happy!

In this case we have enabled JS and CSS minification with merging and HTML minification. This gave use huge PageSpeed Insights performance score improvement to 88 for mobiles and 93 for desktops.

Pingdom displayed huge improvement in every way and Performance grade was up to 91 , load time down to 362 ms and number of requests down to 34.

It is starting to look outstanding.

Now lets do something with those 3rd party assets like Google Fonts

Google Fonts makes it easy to bring personality and performance to your websites and products.

However, the fact of the matter is that, when a font is requested by the user’s browser, their IP is logged by Google and used for analytics.

We have decided to make Google Font load locally with the help of plugin OMGF.

This plugin will Leverage Browser Cache, reduce DNS lookups/requests, reduce Cumulative Layout Shift and make your Google Fonts 100% GDPR compliant.

OMGF is written with performance and user-friendliness in mind. It uses the Google Fonts API to automatically cache the fonts your theme and plugins use to minimize DNS requests and speed up your WordPress website.

With the help of this plugin have loaded google fonts locally and this alone increased performance and also made our GDPR compliance better in the process.

After we have loaded Google Fonts locally, the Performance score increased to 89 for mobiles and 98 for desktops.

Neat picking and other tweaks

Now it was time to look in what PageSpeed Insights suggested:

• Preload Largest Contenful Paint image
• Adding explicit width and height attributes to some images
• Reduced unused CSS
• Ensuring text remained visible during webfont load

It took some time to make these adjustments both in code and Block Editor and the results were pleasing.

After we fixed things that were suggested by the PageSpeed Insights and Pingdom we have improved PageSpeed Insights performance score to 91 for mobiles and 99 for desktops.

Pingdom was improved with the performance grade of 95.

Final refinement

This one included mostly Accessibility and SEO changes that PageSpeed Insights suggested.

In case of Accessibility this was adding sufficient contrast ratio between background and foreground colors. This was fairly easy to fix in Astra theme and it gave us few points.

We have also added link titles to the WooCommerce product links.

For the product link titles we have used one excellent plugin Woo Image SEO that automatically adds alt tags and title attributes to product images.

For the SEO score fixing we also had some dead links that were not crawable.

Fixing those links solved the problem.

With these changes done SEO Score was improved to 100 and Accessibility score to 98 for both mobiles and desktops.

Outstanding.

Concluding

We planned to add Adding Expires headers on the server as a final change so that it didn’t interfere with our testing.

What is Browser static file caching settings?

Browser static file caching uses HTTP response headers to advise a visitor’s browser to cache non-changing files for a while, so that it doesn’t attempt to retrieve them upon every visit.
To make this work we had to install module mod_expires in Apache.

Browser static file caching via headers was enabled in WP-Optimize plugin.

Once Expires header were added Performance score was improved for mobiles to 96 and 99 for desktops.

Pingdom had Performance grade improved to fantastic 98.

Results

Here are the final PageSpeed Insights and Pingdom scores that we got.

Also, here is the look of the website design after optimization.

Looks decent isn’t it?

Hope someone will find this post useful in optimizing their WooCommerce website. In case you run into any problems feel free to contact us via our open discussion platform. We are also available for hiring and we can talk business via our contact form.

If you have any questions or ideas please post them on our open discussion platform. We would like to hear your thoughts and suggestions.

Enjoy our content and stay optimized!