Migrating to 2.0: how we improved Tuft & Paw’s homepage speed by 95%+ on mobile

The challenge

Tuft & Paw calls itself a cat-first brand, meaning it’s raising the standards of cat products by focusing on behavioral research, modern design, and quality. The brand’s ecommerce store is already pretty popular with cat lovers, driving over 30,000 monthly visitors to the website. With so much traffic coming in regularly, the founder Jackson Cunningham wanted help capitalizing on his visitors by increasing the website’s page speed.

Jackson looked into Shopify’s Online Store 2.0 theme as the solution, but the key question was: is the upside of this migration worth it? Considering the general industry guideline by Google says a one-second site speed improvement can increase mobile conversions by up to 27%, Jackson decided even a 13% improvement in mobile conversions would be worth it. With the decision made, our team got to work on migrating Tuft & Paw to a new theme, using the Dawn theme as part of the base combined with our own customizations.

Our approach

We worked on speed improvements across Tuft & Paw’s entire website, but we gave special attention to high-converting pages—the homepage, product pages, and collections pages. First, we analyzed the original Tuft & Paw website, reading through the existing code, running speed tests, and reviewing the user experience.

Next was the development stage, where we carefully structured the theme’s code to prioritize the most important items to pre-load, what to lazyload, and the best way to load other files for each area of the website. Then, we optimized CSS files to make them as small as possible, reusing elements wherever possible. At the same time, we broke down the Javascript code so it would only load as needed. We also analyzed images and GIFs, used careful liquid code logic, and reviewed apps and plugins that were slowing down the website.

Some of the biggest contributors to improving Tuft & Paw’s page speed were lazy-loading section assets, third-party scripts, and images using minimal scripting. Also, optimizing the website’s liquid to improve server response times was a big help.

Highlights

We made significant speed improvements to Tuft & Paw’s website. But optimizing for speed is an art—you have to try a solution and see how it works for the site you're building. The key is to think about performance every step of the way, and then test and reevaluate.

For example, a big contributor to Tuft & Paw’s site speed was their slideshows, which they had a lot of throughout their original website. These slideshows were quite complicated: on every page, there were about four versions of them to show off different functionality and style. They were using multiple plugins for these slideshows, so we removed it and replaced their slideshows with a custom-built solution.

With the custom-built option, the Tuft & Paw team can control the slideshows through the Shopify theme customizer, meaning they can still showcase the different product iterations they need without it taking a hit on their page speed. The new slideshow relies on native CSS and HTML to power the majority of its functionality, which allows it to load fast and be less dependent on javascript. But the reason we were able to make this change is that Online Store 2.0 allowed for a more flexible implementation of the new slideshow system.

While Shopify’s Online Store 2.0 gives developers a more performant theme base to work with and better tools to be able to optimize page speed, switching to 2.0 doesn’t just give you a pass to having a fast site. There are a variety of components that impact your page speed—components that are beyond your theme base. Our developers had to go in and manually make these improvements. Removing bad apps and keeping your code clean are essential to any theme you’re using.