[P] Performance best practices
Before reading this article, read our article about performance scores to ensure that you fully understand the core concepts of performance.
This article will guide you on common approaches to improve your store performance. Keep in mind that performance is an everyday effort.
Reducing the usage of apps
Potential performance improvement: very high
The most common cause of slow performance is apps. It is common for a single app to reduce the performance score by 10 or 20 points.
However, please note that not all apps are equal: some apps do not directly interact with the online store and have no performance impact. As a rule of thumb, before installing an app, we recommend you ask yourself if this app is essential for running your business. If it is not, do not install it.
We recommend contacting app developers to learn more about their performance policies.
Removing app "dead code"
Potential performance improvement: very high
Some apps automatically install code for you on the theme to work. However, when you uninstall the app, you also revoke the access to your store to the app developer. Consequently, the app might leave dead code in the theme, slowing your store.
Whenever you uninstall an app, we highly recommend contacting the developer to ask them if code cleaning is necessary (please note that modern apps usually do not leave dead code).
Optimizing images
Potential performance improvement: very high
While Shopify automatically optimizes your images, you must optimize your images by yourself before uploading them to Shopify. To compress your images, we recommend using a tool such as TinyJPG.
You can also use an app such as Crush to optimize your images when you upload them to Shopify transparently.
Using the appropriate image format
Potential performance improvement: high
The most common format for images is JPG, PNG, and GIF. GIF images should be avoided at all costs, as they are heavy and slow to load. Consider using MP4 videos instead.
PNG should also be avoided if possible. PNG can be two to three times heavier than JPG images. You should only use PNG images for photos requiring transparency (which is impossible using JPG).
Upgrade your theme
Potential performance improvement: high
We often release new versions of our themes which includes bug fixes, new features, and improved performance. Specifically, the performance of Prestige has been drastically improved on version 7. If you are using an older version, we encourage you to upgrade your theme.
Use sections responsively
Potential performance improvement: medium
It might be tempting to create heavy pages with a lot of sections. However, adding sections is not free performance-wise. We recommend you limit the number of individual sections per page to 12 for best performance.
Limit the number of videos
Potential performance improvement: medium
Videos can be fantastic for showcasing your products. While our themes optimize videos (for instance, videos are not loaded until they become visible to limit their performance impact), we still recommend you limit the number of videos to 4-6 per page.
We also strongly encourage you to use MP4 videos instead of YouTube or Vimeo videos, which are slower.
Use analytics responsively
Potential performance improvement: medium
For best performance, you should never add an analytics system directly to your code. Instead, you should rely on Shopify's built-in integration to maximize performance. For instance, to integrate Google Analytics, use the Shopify analytics setup.
Remove costly features
Potential performance improvement: medium
Some features that Shopify provide requires a lot of JavaScript to load and, therefore, slower performance. One feature is the "dynamic checkout button," which displays customers a one-click accelerated payment button (such as Apple Pay, Amazon Pay, or PayPal).
By turning off this feature, you can improve your store performance. Learn more about how to manage dynamic payment buttons.
Turning off the dynamic payment buttons might reduce your conversion rates. As always with performance, each store's requirement is different, and performance is always a trade-off. Use A/B testing to figure out what works best for your store.
Turn off the page transition
Potential performance improvement: small
While animations are highly optimized and should not cause any performance problems, one option offered by Prestige can impact performance negatively. This setting does a fade-out/fade-in when changing from one page to another. While this effect can give an elegant look and feel to your store, it adds an artificial 150 milli-seconds delay that can reduce a bit your performance score.
To turn off this effect, open the theme editor, click on "Theme settings" > "Animation" and turn off the "Show page transition" setting (if it is already turned off, then you have nothing to do).
