Performance guide

Keeping your theme performing well is important for conversions, SEO and general user experience. Canopy was built from the ground up to be fast, however maintaining that speed is trickier than it sounds.

Some settings may have more performance implications than others and although turning them on may look great, if speed is a major focus you may want to think carefully about which sections/settings/best practices to use.

This guide aims to provide tips to keep Canopy performing well.

Apps

In our experience, apps are the single biggest reason why a theme performs slower than it should. Avoid non-vital apps where possible and ensure any unused apps are fully uninstalled and no remnant code/scripts remain.

Preview mode

If Canopy is not published as your live theme, you will be running a speed test on the theme in Preview mode. In this situation, it's likely that the code needed to render Shopify Admin bar will be the biggest cause of slow speed scores. If possible, publish your store and check speed scores on the live theme instead. 

Keep content simple and relevant

When it comes to the homepage, less is often more. Consider how long it takes to scroll from top to bottom on your homepage. To improve load speed, it's best to avoid overwhelming the homepage with too much content. Instead, opt for a seasonal approach and switch out content regularly to keep it fresh and engaging for your customers.

Images and videos can be great for showcasing your site, but they do take time to load. To boost your page speed score, try reducing some of the content sections on the homepage, such as using fewer product rows.

Videos

Best practices

Videos by their nature are large and take time to load. If you’re trying to keep Canopy performing well, avoid placing the Background video section near the top of the page. The browser will need to wait until the video can start playing and this will contribute to a higher Largest Contentful Paint (LCP) score.

The Image banner section is probably the fastest visual section that can be placed at the top of the site. If you do this, ensure you tick the Load the section without animation setting. Unticking this setting will also mean that the image within the Image banner section is not lazy loaded - meaning 'above the fold' content will load as quickly as possible.

Also avoid embedding images or video within the Shopify rich text area in such areas as product pages, collection pages, general pages, and blog articles. Instead, use the image and video sections within the theme. 

Lazy loading

Lazy loading capability comes as standard - meaning videos will only load as they're about to become visible on the page (i.e. scrolled to). The Background video section comes with a Lazy load the video setting to selectively enable this. You may want to untick this setting for the following reasons:

1. The video is at the top of the page - in which case you'll want the video to load as quickly as possible (and not be lazy loaded).
2. You want to give the background videos the best possible chance of auto-playing on older devices.

Images

Dimensions

Canopy will load the most appropriately sized version of any image added within the Theme settings. However, it typically won't change the dimensions of the image. For example, if your product cards are set to be portrait, but the images are actually landscape - a good portion of the image will still be loaded, but not displayed. Always upload image roughly in the dimensions that they will be displayed in the store.

Quality

If possible, set the Theme settings > Advanced > Image quality setting to Lower. This will ensure that the most compressed version of images are served and should be the best option for speed.

Mobile

Where a section has a Mobile image setting (e.g. Slideshow section), use it. We've found that square images are best to use for mobile devices as this scales best on smaller screens as well as tablets.

Animations

Canopy can animate elements in as you scroll. Whilst this can help to create a more luxurious feel, it can also create a perception of a slower loading page to both users and benchmarking tools (e.g. Lighthouse).

Subject to browsers, internet speeds and other factors, such animations can have an impact on the Cumulative Layout Shift [CLS] and have a small impact on load times.

In Theme settings > Animations you will find an option to control animations within the theme. If you prefer to have possible performance benefits over an enhanced user experience, these settings allow disabling animations.

Animation speed: As the theme setting outlines, faster animations are less likely to create a drag on performance scores. Canopy provides you with the option to select what animation speed you would prefer.

Section level animations: Sections positioned at/near the top of a page must be loaded first, so they have a bigger impact on initial load times.

If you have animations enabled and you are using any of the following sections close to the top of your page, you can select the Load the section without animation setting:

• Image banner
• Slideshow
• Icons with text
• Scrolling banner
• Promo strip
• Custom HTML/Liquid
• Background video
• Rich text

This should help to reduce LCP speed scores.

Dynamic checkout buttons

Dynamic checkout buttons (or DCBs) show the customers preferred payment gateway (e.g. PayPal) as a purchase option. However, this can impact speed by performing time-consuming checks and loading in additional scripts.

If you turn the DCBs off, the theme should be faster and the payment gateways specified in the checkout configuration will still be available to customers on the checkout page.

These buttons can be disabled in the following places:

• Product page (Product page > Product > Buy Buttons > Show dynamic checkout button)
• Feature product section (Featured product > Buy Buttons > Show dynamic checkout button)
• Quick buy (uses the same setting as the Product page)
• Cart drawer (Overlay Group > Cart drawer > Show additional checkout options)
• Cart page (Cart page > Cart > Show additional checkout options)

Product page

Image order

Make sure each product's first image is the one associated with the default variant. This means the product image slider will not have to dedicate load time to cycle through to an alternative variant image when the page loads.

Layout

In tests on large screens the Stacked layout option performs marginally better than the Slider layout. Note, this doesn't apply to mobile which always displays the Slider layout.

Buy buttons

Turn off DCBs. Refer to the Dynamic checkout buttons section above for more.

Misc settings

Header group

If possible, limit the section usage to just what is necessary, such as Announcement bar and navigation links. Naturally, the fewer sections to load the less the demand on the browser, but if you are looking to add another section perhaps consider the Icons with text section which comes with a Load the section without animation setting. Refer to the Animations section for more on this.

Links

Enable the Theme settings > Advanced > Preload links on hover setting. This powerful setting instructs the browser to start downloading a link location in the background when a user hovers over a link on your store. Once they click it, the new page will appear to load faster. 

Note that this setting makes the site appear faster to users, but it won't improve speed scores. Enabling this will marginally reduce speed scores, although the impact will be negligible.

Swatches

Using hex based colours will perform better than using external swatch images. Read more about swatches in our dedicated Swatches guide.

Collection pages

Try to avoid using video in promotion blocks. If using videos in promos, choose the setting option to place the promotion block nearer the bottom of the results.

The compare button on the collection page may impact CLS. If you’re concerned about CLS, you may want to check the impact of enabling them - although the speed savings may be minimal.

Fonts usage

Have fewer fonts. Keep your Heading, Body and Navigation font the same as this will mean fewer files are needed on page load.

Using the System fonts is preferable as they load faster than other fonts.

Looking to improve your online store performance further?

At Clean Canvas, we design and build world-leading premium themes, so are not in a position to offer any other performance guidance outside of what we provide here. 

For more advice and assistance on improving your store speed, we recommend reaching out to our recommended customizations providers, who can provide store enhancement services.