Speed Optimization

Fast and efficient online store performance is essential for an exceptional shopping experience. Monitoring your store's speed helps identify potential issues. Speed scores aren't pass-fail; they reflect the trade-off between content richness and speed. While slow speeds may impact usability, we'll guide you on balancing costs and benefits when optimizing your store.

⬇️ On this page:

Page speed measurement methods

While there are many tools to measure site speed, Shopify's Online Store Speed Report ↗ provides the most useful picture of your site's performance.

Online speed rankers compare your Shopify store to other websites, but Shopify stores are more powerful than standard sites.

Speed scores are relative rankings that compare your store to similar stores.

The online speed score shows if your store is slower, faster, or the same speed as similar stores.

A lower speed rank doesn't always mean a problem with your site, but it's usually worth it!

You can also utilize tools such as Google PageSpeed Insights ↗ or GTmetrix ↗ to identify areas for improvement. Take note of loading times, page size, and other key performance metrics.

Page speed factors

Changes to your online store impact speed, though it may not be noticeable when browsing.

Your score may change when adding new products, installing apps, or adding content to your pages.

Some factors are out of your control, such as Shopify's infrastructure, customer's device and connection, and theme code. We'll cover factors you can improve below.

Theme performance

The performance of Elevated is our top priority. Elevated meets Shopify's code and performance standards and we're committed to making continual updates to improve our theme.

Elevated ensures high site performance through optimized resources and dynamic loading. For example, Elevated will automatically display the optimal image size depending on the customer's device. Elevated also uses "code splitting" and "lazy-loading" to load content and resources only when needed.

We recommend checking Elevated changelog ↗ to keep updated on the latest theme version. If you have any specific questions or concerns about Elevated, please get in touch with our support.

Step-by-step guide to improve your website's performance

Step 1: Performance Analysis

Start by conducting a thorough analysis of your website's current performance. We've covered page speed measurement methods earlier in this article.

Step 2: Optimize Images

Compress and resize images without compromising quality. Leverage image compression tools or consider using responsive images to ensure optimal performance across various devices. Refer to our Media Files Guide ↗ to learn the best practices.

Step 3: Utilize Browser Caching

Browser caching is enabled by default in most browsers. This reduces the need for repeated downloads and accelerates loading times for returning users. Similarly, JavaScript is also enabled automatically, but if you turned it off at some point, consider turning it back on for better speed performance.

Step 5: Implement Lazy Loading

Enhance user experience by implementing lazy loading for images and other media elements. This technique loads content as users scroll down the page, reducing initial load times and improving perceived speed.

In our theme, all images are lazy-loaded. However, you have the option to disable lazy loading for hero sections, as it may have a negative impact on your largest contentful paint ↗.

Step 6: Remove unnecessary apps

Remove any apps that are no longer being used and weigh the benefits of an app (does it contribute to your bottom line?) against the cost of speed.

See our article on using third-party apps ↗ with questions to consider before downloading.

Step 7: Design concise pages with impact

Generally, following the principle of "less is more" can make for the most effective site designs. Focus on a small set of theme sections per page that achieve the most amount of impact, whether your goal is to sell your product, promote your brand, or engage customers with your story.

Also consider reducing the number of images or autoplay videos on a page or products shown in on a single collection, page, or section.

Step 8: Limit store features and custom code

Some features have a bigger impact on speed. Custom code can also come at a cost, so we recommend making smaller changes instead of big overhauls. For example, disabling Shopify's Dynamic "Buy now" button can speed up your product page but may affect your conversion rate. If you use custom fonts, consider using system fonts: Shopify's font picker ↗ supports faster loading fonts.

Step 9: Regular Updates

Stay up-to-date with theme updates and regularly check for the latest versions. Developers often release updates to improve performance, security, and add new features. Update your Elevated theme promptly to benefit from these enhancements.

Step 10: Monitor and Test

Continuously monitor your website's performance using tools like Shopify's Online Store Speed Report ↗ and Google Analytics. Regularly test different elements and strategies to identify further opportunities for improvement.

By following this step-by-step guide, you'll be well on your way to optimizing your website's performance with the Elevated theme. Elevate user experience, reduce bounce rates, and ensure your site is running at its best for both new and returning visitors.