Ultimate Guide to Shopify Page Speed Optimization

For Shopify speed optimization, you require technical expertise from an experienced Shopify developer. In this comprehensive guide, our Shopify experts will cover how to optimize Shopify stores for speed:

1. Create Backup

It is important to download a Shopify theme backup before you start optimizing your Shopify store.

2. Image Optimization

Large images slow down your Shopify store or website and decrease conversion rate.

File size of 70KB or less is ideal quality depending on your image requirements.
38% of users will not visit your website again if the pictures are not loading, the content is too long, and it takes too much time to load. (Source: Web Alive)

Image optimization for Shopify site speed optimization means compressing and resizing images while retaining their quality to deliver a seamless customer experience and improve top search engine ranking. It includes adding text attributes like optimized captions, titles, and alt texts. You have two options to compress images:

• You can use Shopify apps like Swift Page Speed Optimizer, SEO image optimizer, Crush.pics image optimizer, etc. to compress images
• You can also use the website to compress images online. Download the image and upload it to the website. You can replace the uncompressed images and re-upload the compressed images using TinyPng.

3. Decrease Number of HTTP Requests

There are two ways to decrease the number of requests for Shopify speed optimization:

Shopify Slate: It is a reliable tool to improve the Shopify theme development workflow. The core benefit is new language features and organizing JS code into different folders with ES6 imports. It also includes features like a local development server, organizing SVG’s into snippets, and code splitting using template and layout bundles. The main purpose is building new themes and keeping all the code organized and efficiently optimized.

Parcel: If you are making minor edits to existing themes and are only using new JS language features and imports then Parcel is a better option. The Parcel tool can be used as a lightweight alternative to Slate which can be set up faster with no configuration to handle bundling of your theme’s JS files.

• Install Parcel
• Set up your files locally to get started

4. Delete Redundant Shopify Apps

The majority of Shopify stores have a Shopify app installed, but the Shopify store owners are unaware of redundant Shopify apps that can impact your Shopify speed optimization. You may already be aware of these tips and have removed all unnecessary apps, but you should also delete Shopify app files from your theme.

For example, when you install a Shopify app, some Shopify apps like Sales Pop automatically inject their files into your theme. You can find these files in the snippet section or the assets section of your demo store theme and delete it.

5. Implement Lazy Loading

Off-screen images are when a user visits a page and sees your top image first, but the browser downloads all invisible images on your page. The lazy loading technique for Shopify speed optimization is used to fix it. Lazy Loading is a performance optimization technique that loads images as the user scrolls down the page, instead of during the initial page load. Many Shopify themes offer preinstalled lazy loading features.

If lazy loading is not implemented in your Shopify theme, you can use the following steps to add lazy loading:

• Add lazysizes.js library to your theme assets folder and theme.liquid
• In your theme files, locate image tags
• Update image tags by replacing src with data-source and add the “lazyload” class
• You can also add CSS styling for animation effects

You can run it through the Shopify Analyzer to check if you have lazy loading on your website.

6. Preload Fonts

Preload fonts technique for Shopify speed optimization allows you to drive the browser to make a request to prioritize critical assets to be loaded fast in a non-blocking manner. You can already download the fonts using Google Fonts to improve page speed. You can add the parameters to the google font link and it will eliminate render-blocking. You can skip all other steps for preloading web fonts.

Alternatively, you can:

• Upload the font files to your Shopify files folder or assets folder
• Google Webfonts Helper will auto-generate the @font-face CSS styles for the selected fonts
• Or you can create a file called css-fonts.liquid in your snippets folder
• Include the font and the preload directive in theme.liquid.

7. Preload Javascript & CSS

Optimizing Javascript and CSS play a major role in Shopify speed optimization. The same logic used for preloading web fonts can also be used to preload Javascript and CSS.

In addition, when requested by the storefront, Shopify automatically minifies CSS and JavaScript files that use ES5 syntax or lower. This allows the browser to download less data, resulting in shorter load times.
If you need to use JavaScript, avoid third-party frameworks, libraries, etc. instead use native browser features and modern DOM APIs. Including Javascript libraries can lead to slow load times and poor customer experience.

Parser-blocking scripts block the construction and rendering of the DOM, create congestion on the network, and delay page rendering. Use defer or async attributes on your script tags to avoid this.

8. Utilize Google Tag Manager

Use Google Tag Manager for Shopify speed optimization to organize and manage tags like Facebook pixel, Google AdWords pixel, Google Analytics, etc. Google Tag Manager loads all external scripts or tags that your Shopify theme uses in one request instead of making multiple requests.

In addition, it loads JavaScript files asynchronously so that other elements of the page are not forced to wait for them to finish. Use the following steps to run Google Tag Manager:

• Sign up to Google Tag Manager and create an account
• Add Google Tag Manager Script to your theme.liquid and Tracking Tags to Google Tag Manager
• Click the add new tag button and then click on the edit button to choose tag type
• Go to your Facebook Business Manager and select pixels
• You can choose to connect to the platform and choose Google Tag Manager from the list
• Remove ‘all pages’ trigger from trigger configuration
• Click on Add Button and choose Dom Ready and then Click Save

9. Update Shopify Theme

To improve page speed Shopify, ensure that your Shopify theme is updated. Because an outdated Shopify theme may include outdated JS libraries that can be replaced with new and updated lightweight libraries and may also contain outdated methods.

Shopify and other theme designers frequently release updated versions of the themes on the Shopify Theme Store for Shopify speed optimization. These updated versions include bug fixes and new features.

Shopify also launched Dawn, a new standard for its storefront theme development, which the company said is 35% faster than its current default theme. In addition, Shopify said that its new Theme Store will be open for developers to submit on July 15.

What is Online store 2.0?

According to Shopify, Online Store 2.0 is the most significant rewrite of Shopify’s Liquid design language. Simply put, a completely redesigned online store will make it easier for developers to create unique features for merchant stores.

10. Disable Quick Shop

The Quick Shop app allows your customers to search and order the products quickly without navigating to all categories to find products. Quick Shop is useful for previewing products, but it loads more images, Javascript, and DOM. It has a negative impact on conversion rate, hampers loading speed, and customer experience. To improve Shopify page speed optimization:

• Go to your theme settings to open the product grid
• Under quick shop, select Disable quick shop.