How to optimise pre-built shopify themes for speed

Introduction

Pre-built Shopify themes are typically coded using HTML, CSS, JavaScript, and Shopify's templating language, Liquid. Here's a brief overview of each:

1. HTML

The structure of a theme is defined using HTML (Hypertext Markup Language). HTML provides the essential elements and layout of the web pages, such as headings, paragraphs, images, links, and containers.

2. CSS

Cascading Style Sheets (CSS) define a theme's visual appearance and styling. CSS controls the colours, fonts, sizes, margins, padding, and positioning of various elements on web pages.

3. JavaScript

JavaScript (JS) is a programming language that adds interactivity and dynamic behaviour to a theme. JS can create animations, handle user interactions, implement sliders, perform form validation, and more.

4. Liquid

Shopify's Liquid templating language adds dynamic content and functionality to a theme. Liquid allows you to insert variables, conditions, loops, and other logic into your templates. It helps display product information, collections, and customer data and handles dynamic content based on conditions.

In addition to these core technologies, pre-built Shopify themes may utilise additional frameworks and libraries, such as jQuery, Bootstrap, or other custom scripts, to enhance the theme\\\\\\\\'s functionality and design.

The theme files are organised into different sections, templates, and snippets, allowing developers to structure the theme and reuse code efficiently. Finally, these files are uploaded to the Shopify platform, and the Liquid code is executed by Shopify to generate the final web pages that visitors see when accessing the store.

It's worth noting that the specific coding practices and conventions may vary between theme developers. Still, combining HTML, CSS, JavaScript, and Liquid is the foundation for coding pre-built Shopify themes.

To speed up a pre-built Shopify theme, you can follow these tips and best practices:

1. Optimise and compress images

Large image files can slow down your website. Before uploading images to your store, optimise them for web use by compressing them without compromising quality. You can use image compression tools like TinyPNG or Shopify apps like Crush.pics to automatically optimise your images.

2. Minify CSS and JavaScript

Minifying your CSS and JavaScript files reduces their size by removing unnecessary characters and whitespace. This can significantly improve page loading speed. You can use online tools or Shopify apps like Minifier or Autooptimize to minify your code.

3. Enable lazy loading

Lazy loading delays loading images and videos until they are about to be displayed on the screen. This technique reduces initial page load time. Shopify themes often have built-in lazy loading options, or you can use apps like Lazy Loading Image or Lazy Loading by PluginHive.

4. Use a content delivery network (CDN)

A CDN stores your website's static files on worldwide servers, delivering them from the server nearest to the visitor's location. This reduces the distance data travels, improving loading speed. Shopify has a built-in CDN, so ensure it's enabled in your store settings.

5. Minimise app usage

Excessive use of apps can slow down your store. Review your installed apps and consider disabling or removing any that are no longer necessary. Each app you add can introduce additional scripts and code that can impact performance.

6. Reduce the number of HTTP requests

Each file request (CSS, JavaScript, images) adds an overhead to the page load time. Consolidate and optimise your files to reduce the number of HTTP requests. Combine CSS files into one, use CSS sprites for images, and consider using asynchronous JavaScript loading techniques.

7. Enable browser caching

By setting cache-control headers, you can instruct the visitor's browser to store specific files locally, reducing the need to download them on subsequent visits. Shopify automatically handles caching, but you can leverage apps like NitroPack or Shopify apps designed explicitly for caching.

8. Regularly update your theme

Keep your theme up to date with the latest version released by the theme developer. These updates often include performance improvements and bug fixes.

Conclusion

Remember to make backups before making any significant changes to your theme, and test the performance after implementing each optimisation to ensure it doesn't negatively impact the functionality or user experience.

Contact us  if you'd like to learn more about Shopify Themes, and a team member will be in touch!