Shopify Theme Customizations to Improve Your Page Speed

Shopify Theme Customizations to Improve Your Page Speed

Speed. The first hurdle of any website. Load too slowly and your potential customers can become angry, frustrated, and even churn out before they’ve even seen your home page.

Load fast enough, though, and a site visitor can browse the options, select their products, and become paying customers with enough time left over to browse a second time. In a world where typical Shopify stores have a load time between 400ms and 700ms to the moment of first interaction, those that succeed in lowering that load time have a higher chance of standing out from the crowd and making the sales they need to grow.

Thankfully, there are quite a few Shopify speed optimizations you can do to ensure your store’s presence among the elite. Here are some of our favorites.

Consolidate CSS

Think of your CSS files as the Pinterest board for your website’s aesthetic. They dictate the way your website looks once each page is loaded. Given how much information they contain, it can take a lot of power to load each CSS. This is where consolidating your files comes into play.

Doing so might involve copying all the information from your individual CSS files into one master file so when the server calls for a page, it only needs to deal with one file instead of multiple. This reduces the lag time and the amount of server power needed to load your content.

Decrease Javascript Calls

Javascript website frameworks are a great way to make your website more dynamic, appealing, and functional. With all the information javascript brings into your website, though, the added benefits of a more dynamic appearance have the potential to be at the expense of your page speed load time.

Now, you can’t guarantee that your site’s Javascript will load the same for everyone. That’s heavily determined by each individual’s hardware. What you can do, though, is ensure your javascript is as easy to load as possible. Minimize its size using compression. Distribute the code from locations that are geographically closer to your customers. Ship less code for each user’s hardware to parse through when loading your page.

With each of these, always keep in mind that one person might be using a phone to access your site while another uses the newest macbook, a tablet, or even an older Linux. You want to develop your code accordingly to ensure quick load times regardless of the device.

Avoid Redirects

If you can avoid using redirects around your site, do so. When a server encounters a page with a redirect code, it then has to stop the loading process for the first page and start it for the new link that users are being redirected to.

This inevitably adds to the perception of a slower load time on the user’s end, especially if you have multiple redirects at once. When you send users to a page without any redirects, on the other hand, they experience a much faster process and see the page they’re looking for sooner, rather than later.

Evaluate Your Apps

Some apps take up more space than others, and still others can leave code behind that slows down your site speed even after you’ve uninstalled them.

Think back to the apps and tools you used when first starting your business. Did you uninstall all of them, or are there still some with leftover elements within your Shopify theme code? Now look over the rest of the apps installed on your store. Chances are, there are some apps in the list that you no longer use or have recently begun shifting away from.

If there’s any app that you don’t use, uninstall it. When servers load your site, regardless of whether you’ve installed one of many fast Shopify themes, every single app installed on your site uses up one of your most valuable currencies: time.

Compress Images and Video Content

Images take time to load, especially when they contain hundreds or even thousands of pixels. The server has to account for every single one of those pixels, even though, after a certain point, the size of your images and videos has no bearing on the quality your website visitors perceive.

If you don’t have a lot of financial assets available to go headless, this is an easy way to improve your site speed. Compress your images and video content and you’ll see even faster load times without having to worry about quality issues.

Disable Unused Theme Features

This is the same process as what you did with your apps earlier. There are a lot of options when it comes to Shopify theme customization, but not every store has the same needs.

When you’re looking to improve your page speed load time, every millisecond counts. Not a fashion and apparel brand? Then you likely don’t need your theme’s sizing chart feature. Same concept applies to all of the unique features your theme offers. Disable anything you don’t use or need.

Update Your Theme to the Latest Version

Shopify theme developers are always refining their themes to improve page speed, solve issues that crop up, keep up with the updates Shopify itself makes, and enable new features that have been requested by customers like you.

So, the older and less up-to-date your store’s theme is, the less likelihood there is of it being supported, and the higher the chance that your store won’t load correctly. If you’re experiencing slow load times, check that your theme is completely up-to-date.

Decrease Cloud Latency

Tools like Zycada are tackling site speed in a unique way. They do it by solving for “Cloud Latency,” which is the time it takes for a site to start loading once you put in a request for access.

During this time, the server is bringing in a lot of dynamic content, including the information we streamlined above. Zycada and other tools like it then turn that into static content through the use of “session aware” bots that use data from previous website visitors to predict where each user’s next step in the buyer journey will take them.

This makes pages easier to load, thus reducing cloud latency and improving your page speed load time.

And when you couple it with headless commerce or browser side caching tools like Yottaa and Edgemesh, the effects are huge.

Speedy Gonzales Has Nothing On You

What do Speedy Gonzales, the Roadrunner, and your store have in common once you’ve enacted these customizations? They all operate at peak speed and performance!

All of these speed customizations can be done on your own, but if you don’t have the time or resources available to do them yourself, there’s a second option. Developers like those of us at TaskHusky spend every day helping stores improve their speed, conversions, and operating power. We’re happy to do the same for you.

Back to blog