30
hours of work
83%
faster website
34%
longer user session rate
The Overview
GENERATE is an online store built on the Shopify platform, selling various designer products, from household accessories to toys and even large furniture pieces. The mission of the company is to introduce the world’s designs to Japanese customers and likewise, to introduce Japanese designs to the world. Launched in 2003, today the company has its bases in North America, Europe, Japan, and Mexico, and does its best to provide customers with the modern products and services.
Despite its amazing business model, this Japan Shopify store needed optimization due to performance issues and an inability for users to interact with the website efficiently. This situation led Generate managers to connect with Whidegroup. At the moment they reached us, the load speed of their website homepage was as slow as 28 seconds.
The Challenge
To start things off, we ran a performance analysis with GTmetrix and PageSpeed Insights tools. This gave us a broad view on all the performance issues that interfered with the website’s operation. Additionally, we completed a manual revision of custom code to address several other weak spots that were not covered by the initial check.
The analysis highlighted the following problems:
- Forms were incorrectly using Magento validation, when the whole project is built on Shopify
- The website contained an excessive amount of sliders with images
- The website homepage sent 253 server requests to the server
- The homepage size was almost 5Mb
- There were repeated jQuery requests, and more
The Solution
Although using too many apps is one of the most common reasons for poor performance on a Shopify store, this was not the case for GENERATE. All the images throughout the website were also optimized and required no additional actions. However, the large number of images on the home, catalog, and product pages made us start the eсommerce performance optimization process by implementing the Lazy Load feature.
Lazy Load
Lazy Load is extremely helpful, especially when we talk about websites with numerous images, product photos, thumbnail images in the related product carousels, and hero sliders. The client’s website had all of these. To achieve better website performance and a higher load speed, we applied this feature to the following pain points:
- The Best Sellers and Featured Collection homepage sliders
- The Popular and Related Products carousels on the catalog and product pages
- Website theme - We changed the theme in accordance with the best Lazy Load practices so that every image and product photo loads as soon as it should appear in the viewport
These simple changes took no more than 6 hours and helped reduce website load time by 40%.
Validation Forms
Despite the fact that the store is built on the Shopify platform, during the verification process we discovered 5 forms that used Magento validation. Some of these scripts created additional server requests, thereby slowing down the site. Others were placed in the main script file, which increased the page weight and, of course, slowed down loading.
We removed all unnecessary scripts and CSS, and implemented the correct Shopify form validation. These actions helped to remove redundant requests and further reduce website load time by about 4 seconds.
Removing Sliders in the Drop-Down Menu
The website menu consisted of 7 drop-downs. Each drop-down menu item included a slider with six product photos. Thus, to load the homepage or any other page on the website, an additional 42 thumbnail images had to be loaded.
For this problem, Lazy Load wasn’t enough on its own. Therefore, we decided to remove the sliders and replace each of them with 2 static images in addition to implementing Lazy Load. Thanks to these changes, we removed unnecessary server requests and accelerated the website by another 3.5 seconds.
Other Minor Changes
After completing the main Shopify site speed optimization stages, we switched focus to fixing a few minor errors. Individually, each of them seemed insignificant, but after they were fixed, the positive impact was obvious.
Here is what we did:
- Minified JavaScript
- Removed the requests to nonexistent stylesheet
- Removed repeated jQuery requests
- Deferred parsing of Javascript
Together, these updates finalized the Japan Shopify store optimization, ensuring the site was fully optimized and ready to deliver a seamless browsing experience.
The Result
It took about 30 hours to optimize the GENERATE online store, and the result exceeded all the expectations.
As a result of our Shopify site speed optimization, the site loading time decreased by 23.5(!) seconds, which is about 83% of the initial speed. As we mentioned above, such a result was achieved mainly due to the optimization of product images and sliders, which cut the load time by 12 seconds at once.
In total, all optimization stages gave the following results:
Load time
28.2 s
4.7s
TTFB
1000 ms
489 ms
HTTP requests
253
170
Homepage size
4.88 MB
2.3 MB
To sum up the results of this case study, high-quality visual components are a must-have for every website, especially when it comes to a modern online store selling designer home decor accessories. However, the excessive amount of images and sliders without reasonable optimization significantly affects the user experience.
Do not let poor website performance interfere with your ability to acquire new customers and diminish your business!
Ronnie Kattan
Generate Design
Owner
" Whidegroup delivered perfectly on the project. Very happy with the site speed and I'm looking forward to working together again in the future. "
TELL US ABOUT YOUR PROJECT - WE’LL RESPOND WITHOUT DELAY!
Migration From Magento 1 to 2 of a Сustom-Built Online Furniture Store