Generate

Speed Optimization for Japanese Designer
Furniture and Accessories Store

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 their amazing business model, website performance issues, and an inability for users to interact with the website efficiently led Generate Design 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 showed off 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, when it came to GENERATE, this was not the case. 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 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 accelerated the fully loaded 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 reduced the load speed 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 the main stages of optimization were completed, 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 requestst
Deferred parsing of Javascript

These fixes became the final stage of the optimization, after which we made sure that the site was fully optimized and that its speed was high enough to guarantee visitors a comfortable 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 work, 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:

To sum up the results, we would like to note that high-quality visual components are a must-have for every website, especially when it comes to a modern online store selling designed products and 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. "

Similar Projects

Development of 5 Custom Shipping Extensions Using Shiphawk's API

Optimization of Internal Business Processes for Norwegian Office Furniture Supplier

TELL US ABOUT YOUR PROJECT AND WE’LL RESPOND IMMEDIATELY!