How to defer offscreen images on your Shopify Theme | HeyCally HeyCally

How to defer offscreen images on your Shopify Theme | HeyCally

Deferring offscreen images in your Shopify theme is a great way to improve website performance and user experience by reducing the initial page load time. This can be achieved using the "loading" attribute in HTML. Here's a step-by-step guide on how to defer offscreen images for a Shopify theme:

Step 1: Access Your Shopify Admin Dashboard

Log in to your Shopify admin dashboard, which is where you can make changes to your theme.

Step 2: Navigate to Your Theme Editor

In your Shopify dashboard, go to "Online Store" and click on "Themes." Next, select the "Customize" button for your active theme.

Step 3: Access the Theme's Code

Once in the theme editor, look for the option that allows you to access the theme's code. This is usually labeled as "Edit Code."

Step 4: Locate the Template File for the Page

In the code editor, you'll need to locate the template file for the specific page where you want to defer offscreen images. This may vary depending on your theme and the specific pages you want to optimize. Common template files include "theme.liquid," "product.liquid," and "collection.liquid."

Step 5: Identify the Image Elements to Defer

Within the chosen template file, identify the image elements (<img>) that you want to defer. These are typically found within the HTML markup and have source attributes (src) specifying the image file.

Step 6: Add the loading="lazy" Attribute

For each image element you identified in the previous step, add the loading="lazy" attribute to defer loading of offscreen images. Here's an example of how to modify an image tag:

(html code)
<img src="image.jpg" alt="Description of the image" loading="lazy">

Repeat this process for all the image elements you want to defer.

Step 7: Save and Publish

After adding the loading="lazy" attribute to the image elements, save your changes and publish the updated theme.

Step 8: Test Your Website

To ensure that the changes have been applied successfully, visit your website and test the page where you made the modifications. Verify that images are now being loaded lazily, which means they are only loaded when they come into the user's viewport.

Additional Tips:

- Be cautious when deferring critical images, such as those in the header or above-the-fold content, as this may affect the visual appearance of your website.

- Regularly check your website's performance using tools like Google PageSpeed Insights or GTmetrix to monitor the impact of lazy loading on page speed.

- If your theme uses JavaScript-based lazy loading, ensure that it's compatible with the loading="lazy" attribute to avoid conflicts.

Test your website on different devices and browsers to ensure compatibility and a consistent user experience.

By following these steps and implementing lazy loading for offscreen images in your Shopify theme, you can enhance your website's performance and provide a smoother browsing experience for your visitors.

Back to blog

Want to reach out?