img-1

Speeding up Woo-commerce: A Case Study Of Thestudio.Com

This case study examines how installing the RabbitLoader WordPress plugin improved the PageSpeed performance of thestudio.com, a popular e-commerce website with more than 500 pages and over  monthly organic visitors.

The studio case study banner, thestudio.com

This ecommerce site is popular for supplying customized products such as pins, patches, keychains, stickers, medals, labels & packing, Tie-bars, and hats among other apparels.

The Challenges: 

It is challenging for an woocommerce website to achieve a very good pagespeed score with its multiple high quality images for and every product. 

But the poor PageSpeed score would not only affect user experience & conversion rates but  also the SEO rankings can be negatively impacted because of a bad pagespeed score.

Before using RabbitLoader for website optimization, thestudio.com was failing its PageSpeed score test, in both mobile and desktop versions. 

The Impact Of Rabbitloader On The Pagespeed Performance

To better understand the improvement in RabbitLoader wordpress plugin brought to the PageSpeed performance of thestudio.com, we can check the PageSpeed performance score of the homepage of thestudio.com before and after optimizing it with RabbitLoader.

Document

Get The Best PageSpeed Score

For Your WordPress Website

All in One Optimization Plugin
No Coding Knowledge Required

Pagespeed Score Before Using RabbitLoader

Before using the RabbitLoader WordPress plugin, the website’s page loading times were disappointingly low, just 34 out of 100 for the mobile version and 25 for the desktop version. 

According to Google, if the Google PageSpeed Insights score is less than 50, the website fails the Google PSI test. 

The scores of the optimized version of the website can always be checked entering thestudio.com/?norl in the pagespeed insight.

Without RabbitLoader Google PageSpeed Insights Score On Mobile:

Without RL mobile

Without RabbitLoader Google PageSpeed Insights Score On Desktop:

Without RL Desktop

Pagespeed Score After Using RabbitLoader

After optimizing the website’s PageSpeed performance with RabbitLoader, the mobile score improved to a moderate score of 74, which is an acceptable score for a resource heavy woocommerce website , especially when the starting score was just 34. 

However, the desktop score jumped to a near-perfect score of 99. 

With RabbitLoader Google PageSpeed Insights Score On Mobile:

With RL Mobile

With RabbitLoader Google PageSpeed Insights Score On Desktop:

With RL Desktop

Here’s the comparison table of the key performance on Mobile Version metrics before & after installing RabbitLoader.

Mobile Version (Metrics)BeforeAfter
FCP3.5 s1.8 s
LCP17.0s2.0s
TBT2820 ms1280 ms
CLS0.070
SI5.6 s1.8 s

Here’s the comparison table of the key performance on Desktop Version metrics before & after installing RabbitLoader.

Desktop Version (Metrics)BeforeAfter
FCP1.0 s0.5 s
LCP5.7 s0.5 s
TBT7030 ms90 ms
CLS002050.002
SI12.3 s0.5 s

How Does RabbitLoader Improve The Pagespeed Score?

Let’s see how RabbitLoader improves the PageSpeed score of thestudio.com,. 

Image Optimization

As an e-commerce website, thestudio.com has thousands of product images with high resolution, which if not optimized negatively affects the performance of core web vitals.

The Studio Image Oprimization

RabbitLoader optimizes all images by converting them into the modern web formats: WebP and AVIF. These two types of next-gen images compress your images without reducing their original quality. 

Lazy Loading  

Lazy loading is the most effective optimization technique for any e-commerce website, especially one with many images. RabbitLoader implements this technique to load the above-the-fold images and resources with priority, while the images below the first fold would be loaded as they are needed..  

The studio image lazy loading waterfall

CSS Optimization

RabbitLoader optimized the e-commerce site’s PageSpeed performance by optimizing the CSS files in two techniques: minifying the CSS file, and generating a critical CSS file.

  • Minify CSS

RabbitLoader deletes unnecessary characters such as comments, white spaces, and line breaks and reduces the file size. This minification would help this e-commerce website optimize its core web vitals performance and achieve a near-perfect Google PageSpeed Insights score.

The Studio CSS Optimization
  • Generating critical CSS

There are several pagespeed optimization tools available in the WordPress ecosystem, but most of them don’t offer critical CSS generation, which is the most crucial optimization technique for achieving a near-perfect Google PageSpeed score.

By generating critical CSS files for each web page of thestudio.com, RabbitLoader improved the overall PageSpeed score in Google PSI.

While the total size of the CSS files before optimizing them was 732.3 KB, after installing the RabbitLoader in thestudio.com, the size was significantly reduced to 82.2 KB. RabbitLoader improved the CSS file’s size by 88% and reduced the average rendering time to just 492.0 ms from 3642.1 ms.  

BeforeAfter
CSS file size732.3 KB82.2 KB
CSS rendering time3642.1 S492.0 ms

JavaScript Optimization

Prioritizing the user experience, RabbitLoader optimized the JavaScript files in order to increase the core web vitals performance, especially the performance of Interaction to Next Paint (INP). 

The Studio JS optimization

RabbitLoader defers the JavaScript functions that are not required for rendering the above-the-fold content & only parses the critical javascript. 

The Impact Of RabbitLoader On Business

RabbitLoader does everything needed to improve the PageSpeed performance of a website such as including the following:

  • Image optimization (convert the images into modern web format)
  • Lazy loading (only load above-the-fold content fast)
  • CSS optimization (by minifying CSS code and generating critical CSS)
  • JavaScript optimization (defer the JavaScript function)
  • Browser caching (storing the static content in the browser cache)
  • CDN (distributing the static content among the proxy server) 

RabbitLoader reduced the number of plugins needed to optimize the performance of thestudio.com to just 1 plugin. 

While organic traffic of a website depends on a lot of factors, having a near perfect pagespeed score supplements the other factors where you need to invest a lot to grow your traffic. 

The studio semrush traffic

Here is the traffic graph of thestudio.com from SEMRush showing a growth in organic traffic since the website started optimizing their website using RabbitLoader. The publicly available data shows the traffic growth from the end of 2023 to May of 2024.

Results Overview

The thestudio.com is a very popular e-commerce website with 100K pageview ( SEMRush data) page views. 

Prior to installing RabbitLoader, the PageSpeed score was very poor, 34 for mobile and 25 for desktop. However, RabbitLoader has managed to significantly improve the PageSpeed score, an acceptable score of 74 for mobile and a near-perfect 99 for desktop.   

According to the SEMRush data during the time of using RabbitLoader the organic traffic of the website almost doubled from close to 50,000 to over 100,000 organic visits every month.

Document

Get The Best PageSpeed Score

For Your WordPress Website

All in One Optimization Plugin
No Coding Knowledge Required