Performance

Performance is an important factor for merchants when they choose a theme for their online store. When you build or customize a theme, you should build with performance in mind. Optimizing your theme for performance is key to the success of the merchants that you support and to the experiences of their customers.

Optimizing for performance

Consider the following best practices for optimizing the performance of your theme.

Optimize your JavaScript

Optimize the JavaScript in your theme using the following principles.

Reduce JavaScript usage

Consider building your theme using primarily HTML and CSS. JavaScript shouldn't be required for the basic functionality of your theme, such as finding. Instead, you should only use JavaScript as a progressive enhancement, and only where there is no HTML or CSS solution available.

CSS parses and renders much faster than JavaScript, so wherever possible, you should use CSS features for building interactivity. You can find more information on the internet by searching the phrase “using CSS instead of JavaScript”. One example is the blog 5 things you can do with CSS instead of JavaScript by Juan Martín García.

Your minified JavaScript bundle size should be 16 KB or less.

Reduce your dependency on external frameworks and libraries

If you need to use JavaScript, consider avoiding introducing third-party frameworks, libraries, and dependencies. Instead, use native browser features and modern DOM APIs whenever possible. Including JavaScript libraries in your package can lead to large bundle sizes, slow load times, and a poor experience for customers. Frameworks such as React, Angular, and Vue, and large utility libraries such as jQuery have significant performance costs. Avoid introducing polyfill libraries for very old browsers (anything that doesn't support async/await).

Avoid parser-blocking scripts

Parser-blocking scripts block the construction and rendering of the DOM until the script is loaded, parsed, and executed. They also create congestion on the network and significantly delay page rendering. This impacts metrics like First Contentful Paint and Largest Contentful Paint. Use defer or async attributes on your script tags to avoid this.

Preload key resources, defer or avoid loading others

Preloading resources allows the browser to download resources before they are discovered. Choosing to load some resources later and using system resources helps you to reduce the size of the initial package of resources that needs to be downloaded before a customer can meaningfully interact with the page.

Use resource hints to preload key resources

You can add up to two resource hints to your code per template by using one of the following:

• The preload_tag filter

When Shoplazza renders a page with preload instructions, it will send a preload resource hint as a Link header on subsequent requests.

You should use resource hints sparingly. For example, consider preloading only render-blocking stylesheets that are needed for the initial functionality of the page, such as above-the-fold content.

Optimize Liquid code

You can edit almost all of the Liquid that is used to render your store. There are efficient and inefficient ways of writing Liquid code. Doing complex operations repeatedly can increase your Liquid render time, which impacts your overall store speed.