Performance guide
Ensuring optimal performance of your theme is crucial for enhancing conversions, SEO, and overall user experience. While Symmetry is designed to be fast from the start, maintaining that speed requires careful consideration of various settings and practices.
By following these tips and prioritizing performance in your decision-making process, you can ensure that Xotiny theme continues to deliver a fast and efficient browsing experience for your customers, leading to improved conversions and overall satisfaction.
Apps
Based on our experience, apps are often the primary factor contributing to slower theme performance. It's important to be selective with the apps you install and to avoid non-essential ones whenever possible. Additionally, ensure that any unused apps are fully uninstalled, and no leftover code or scripts remain in your store's codebase.
Content
When designing your store, prioritize simplicity to improve load speed. Avoid overwhelming visitors with excessive content. Opt for a seasonal approach, refreshing content regularly. Limit the use of images and videos to reduce load times. Consider reducing the number of content sections, like product rows, for faster loading.
Video
To maintain optimal performance with Muse, it's advisable to avoid placing the Background video section near the top of the page. Videos, being large files, can significantly impact loading times, leading to a higher Largest Contentful Paint (LCP) score. Similarly, refrain from embedding images or videos within Shopify rich text areas on product pages, collection pages, general pages, and blog articles. Instead, utilize dedicated image and video sections within the theme to optimize load times and overall performance.
For optimal video loading times, use short MP4 files and ensure the file size is manageable. Aim to keep MP4s under 2-3MB whenever possible to minimize loading times and enhance the overall user experience.
Image
Muse automatically loads the most appropriately sized version of any image added within the Theme settings. However, it typically won't alter the dimensions of the image. For instance, if your product cards are configured to display portrait images but the actual images are landscape-oriented, a significant portion of the image may still be loaded but not displayed properly. To ensure optimal display, always upload images in dimensions that match how they will be displayed in the store.
Animation
Muse offers the ability to animate elements as you scroll, which can enhance the overall aesthetic of your website. However, it's important to note that while these animations may create a more luxurious feel, they can also give the perception of a slower loading page to users and benchmarking tools like Lighthouse. Depending on various factors such as browsers, internet speeds, and others, these animations can impact the Cumulative Layout Shift (CLS) and may have a small effect on load times
Dynamic checkout
Dynamic checkout buttons (DCBs) display the customer's preferred payment gateway (e.g., PayPal) as a purchase option, which can enhance convenience. However, this feature may impact speed due to time-consuming checks and the loading of additional scripts.If you opt to turn off the DCBs, you can potentially improve the speed of your theme. Rest assured, the payment gateways specified in the checkout configuration will still be available to customers on the checkout page. This allows for a streamlined checkout process while potentially reducing the load on your theme and enhancing overall performance.
Product page
Ensure that each product's first image corresponds to the default variant associated with it. By doing so, the product image slider will not need to spend additional load time cycling through alternative variant images when the page loads. This optimization can help improve the overall loading speed and user experience of your store, ensuring that customers can quickly view the main product image without unnecessary delays.
In tests conducted on large screens, the Column/collage layout options have shown slightly better performance compared to the Carousel layout. It's important to note that this observation applies specifically to desktop or large-screen viewing.
Header
Whenever feasible, aim to limit the usage of sections to only what is essential for your store, such as the Announcement bar and navigation links. By minimizing the number of sections loaded, you reduce the demand on the browser and improve overall performance.
Fonts
It's advisable to limit the number of fonts used in your store. Keeping the Heading, Body, and Navigation fonts consistent helps reduce the number of font files needed to load each page. This optimization strategy can improve page loading times by minimizing the amount of data that browsers need to download.
Swatches
Utilizing hex-based colors is recommended for optimal performance compared to using external swatch images. Hex-based colors are lightweight and can be rendered quickly by browsers, resulting in faster loading times for your store's pages. In contrast, external swatch images may introduce additional loading overhead, impacting page load times and overall performance.
Do you want to improve your online store performance further?
At Xotiny, our focus is on designing and developing world-leading premium themes, and as such, we're unable to offer additional performance guidance beyond what we provide here.For further assistance and advice on improving your store's speed and performance, we recommend reaching out to us at [email protected]. Feel free to contact us for personalized assistance and expert advice on improving your store's speed and performance.