Keeping your theme performing well is important for conversions, SEO and general user experience. Symmetry 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 Symmetry performing well.
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.
If Symmetry 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 by their nature are large and take time to load. If you’re trying to keep Symmetry 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.
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.
Symmetry 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.
If possible, set the Theme settings > Advanced > Image quality setting to Standard. This will ensure that the most compressed version of images are served and should be the best option for speed.
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.
Symmetry 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 > 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.
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)
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.
In tests on large screens the Column/collage layout options perform marginally better than the Carousel layout. Note, this doesn't apply to mobile, which always displays the Carousel layout.
Turn off DCBs. Refer to the Dynamic checkout buttons section above for more.
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.
Using hex based colours will perform better than using external swatch images. Read more about swatches in our dedicated Swatches guide.
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 customisations provider TaskHusky, who can provide store enhancement services.