How Lazy Loading can Optimize Your Shopify Theme Images

Like any website, an欧宝体育官网入口首页needs to load quickly. The last thing your clients want is for a customer to leave because the page was too slow to appear.

Living in a digital age means that it’s easy to forget that some people don’t have access to a high-speed internet connection. In a 2017 blog post entitledBeyond the Bubble, Ben Schwartz warned that 60 percent of the world’s average mobile connections are 2G, and that the global average internet speeds stands at only 7mb/s. This means that it’s important to consider how performance can be improved for clients who are selling to an international audience.

In previous articles, we’ve demonstrated various ways of ensuring store pages render quickly. In this article, we’re going to focus on just one technique that tackles the worst offender when it comes to page loading speed—images.

We will also spend some time looking at how we can go a step further and use different lazy loading techniques to further reinforce the branding of a store by customizing how our images appear.

For more helpful tools, check out our list of favoriteSublime text plugins.

What is lazy loading?

Lazy loading is a broad term for a computer programming technique that consists of delaying the initialization, or construction of an object until it is needed. On the web, this is mostly applied to the images of a website.

This technique, while improving speed and performance, also makes the user think that the site is loading quicker than it actually is. This is calledperceived performance.

How lazy loading works

Let’s consider a collection page for a Shopify store, where we can display up to 50 products per page. This alone is at least 50 images, without even counting the logo or a hero image in the header. This makes for a lot of content, which will further increase the loading time and size of the page.

Learn more about building a customizablerelated productssection.

默认情况下,页面上的所有图片将被加载at their full size, regardless of if the user is looking at only the top of the website. This further complicates the loading state as, sometimes, you don’t need all the images to load as they won’t be seen by the user.

Let’s say that you want to only see the first 10 products before navigating to the product page. If the webpage loads each of the 50 products, this will take a considerable amount of time—time which is wasted as the user was only interested in looking at the first few products.

Lazy loading takes a different approach and is a technique that is used on almost every modern website. For example, you can see this effect on the storeCandyLand. This website displays a large quantity of products and, as you scroll down the list, you see the product images change from faded and low in contrast, to clear and high-quality visuals.

One of the most common methods of employing lazy loading is to display a low-quality image as a placeholder. That way, every image on the page is still loaded, but the page will appear much faster thanks to the very small size of the images. However, a low-resolution image means that it looks pixelated and full of artifacts, which will make it seem like the image is of poor quality.

But this is where the magic happens: as the user scrolls down the page, and the image appears into the viewport, it will be replaced by a higher-quality version of the picture.

What’s more is that this whole process will only happen when we actually need to show our high-quality image—when the image is inside the viewport of the user.

This technique adds a layer of interactivity to a website. Instead of looking at a white page, waiting for the image to load, you can see it slowly coming to life.

You might also like:使用响应图像减少Page Loading Times.

Lazy loading and Slate

Different libraries exist to take care of lazy loading images, removing the need to create the logic behind the code from scratch. For this article, we are going to use the latest version ofSlate, our theme development toolkit, and the barebone theme that is included with it, aptly namedStarter Theme.

This theme includes two snippets that contain everything you need to get started with lazy loading—responsive-image.liquidandresponsive-bg-image.liquid. You will find both in thesnippetsfolder.

For these snippets to work, you will need three dependencies. There are many libraries available, but the one Slate uses isLazysizes. You will also need Responsive Image as a Service (RIAS), which will take care of loading the correct image sizes with our CDN andBGSetfor background images (in your hero images for instance).

These dependencies can be found bundled in the JavaScript file of the Starter Theme. There are different methods that you can use to load them, however, for the purpose of this example, we will assume that the files are simply uploaded to the assets folder of your theme.

You can load the libraries by adding the following in yourtheme.liquidlayout file between theandtags:

In its simplest expression, the snippet for the responsive image can already be found in thecollection.liquidfile of Slate’s Starter Theme, and is provided as an example:

{% include 'responsive-image' with image: product.featured_image, max_width: 700, max_height: 800 %}

You can expand on this example and also pass some custom CSS classes for your images and for the wrapper.

Let’s consider the following example, which includes a loop that will fetch all the products available in a given collection:

The only difference here is that we have added our CSS classes, so that we can control the layout of our page. For instance, this is the CSS that we could use:

Let’s take a closer look at how theresponsive-image.liquidfile works, and theimgtag, and its parameters, in particular:

Thesrcattribute is where you specify your placeholder image. This image will be what the user sees while the original image is loading. Thedata-srcattribute is where the original, full-size image, is called.

You can change the size of the placeholder image by modifying the filterimg_urlin thesrcparameter. The default value is 300x which means that the image that will be temporarily displayed will have a resolution of 300px.

src="{{ image | img_url: '300x' }}"

The lower the number, the lighter or smaller the image file, but the more pixelated, or ‘damaged,’ it will appear.

There is a balance between delivering speed and maintaining a good user experience. In the next section we’ll see a few ideas and strategies to help with this.

You might also like:Using Placeholder Images for Products with the placeholder_svg_tag filter.

Designing lazy loading

Looking at a ‘damaged’ image, even if for a few seconds, can be a bad experience for your clients. Clients might think that there is something wrong with the way their assets were uploaded, or that the compression is too strong.

Additionally, one of the more important aspects to build customer trust is to have a good design that further connects to the brand of the store. Landing on a store that doesn’t look perfect might be a deciding factor in customers leaving the store.

Though these situations are rare, they are worth considering, so that we can focus on customer retention while also offering a unique experience that reinforces the branding and style of the store. Let’s look at some approaches to avoid losing customers.

Using the dominant color

An interesting approach, inspired byManuel Wieser, is to show the dominant color of your image as it’s loading. The process to achieve this is actually quite simple and elegant.

As we have seen in ourresponsive-imagesnippet, you can set the size of the image that is loaded in itssrcattribute. By default, it’s at 300x, which will show an image that is 300px.

By changing the value from 300x to 1x, you will display such a tiny image that it will just render the dominant color of the image. An added advantage is that since the image that we are loading is very small, it will load almost instantly.

This is something that works well for stores that have products with vibrant colors. Stores which sell paintings or photography prints would especially benefit from using this technique.

Using blur

Another approach is to use images with a pleasant blurry effect applied to them. This is very easy to implement using a Lazysizes plugin calledBlur-Up.

To implement this method, you need to first call the script intheme.liquid. You can add this immediately below the other scripts that we added earlier.

Then you can add the classblur-upto the snippet inresponsive-image.liquid:

Here’s an example CSS code for the blur effect, to get you started:

This technique allows you to serve a very small image, while still keeping it stylish and visually appealing.

We can also combine these two techniques and serve a solid color placeholder that has a blurry effect, by keepingblur-upin the classes and setting theimg_urlparameter to 1x. This blur will add a soft touch to the image, resulting in a placeholder image that looks less harsh.

By experimenting with different lazy loading approaches, you can make calculated decisions that are consistent with your client’s brand.

Other options

There are other various lazy loading techniques you could choose to implement. For example, you can pass any URL in thesrcof the snippet—meaning that you could load up a spinning wheel GIF, or even the store’s logo, while the image is loading. The options are endless. It’s as easy as changing thesrcattribute in the snippet:

src=”link_to_your_image.gif”

You might also like:How to Manipulate Images with the img_url Filter.

Going further

当涉及到使用技术来提高loading speed of a store, it’s helpful to remind ourselves that it doesn’t have to look ugly. The user is not really worried about what happens behind the scenes, and they won’t even notice that the site is loading quickly. But they will notice if it takes too long!

This article was geared towards how lazy loading works in Slate. If you would like to learn more about lazy loading in general, we recommend this very complete article fromCSS Tricks, which goes into detail looking at various techniques and libraries that can be used.

Have you experimented with lazy loading?Share your experiences in the comments below!