Performance Guide

Keeping your theme performing well is important for conversions, SEO and general user experience. Alchemy was rebuilt 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 Alchemy 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 Alchemy 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 Alchemy performing well, avoid placing an autoplaying 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.

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.

Images

Dimensions

Alchemy 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

Alchemy 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). Note: This effect is disabled on mobile.

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 > animation 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.

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 details > Buy Buttons > Show dynamic checkout button)
• Quick buy (uses the same setting as the Product page)
• Featured product section (Featured product > Buy Buttons > Show dynamic checkout button)
• 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 options perform marginally better than the Carousel layout. Note, this doesn't apply to mobile, which always displays the Carousel layout.

Buy buttons

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

Misc settings

Swatches

Plain colours will display much faster than images. Read more about swatches in our Swatches guide.

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 provider, who can provide store enhancement services.