In this article, you’ll learn about VOLT’s powerful automatic lazy loading for images, which improves page speed and load time.
Lazy loading (sometimes called on-demand loading) is a website optimization technique whereby certain content is loaded later than other content. The default behavior of web browsers is to load and render all the content in a single go. This behavior is sometimes called eager loading in order to differentiate it from lazy loading.
With lazy loading, resources (image, video, etc.) are replaced with small placeholders, which are loaded as needed when the user scrolls down and that resource becomes visible. Lazy loading means if someone leaves a page before it loads, then nothing beyond the top portion of the page is loaded.
A common type of lazy loading on the web is infinite scrolling, where additional content is retrieved when the user scrolls, such as in Facebook’s news feed. Another common use of lazy loading is for images. If a user never scrolls down to see an image, then loading it would have been a waste of memory and bandwidth. Lazy loading is also useful for photo galleries that open when a user clicks on them.
This article will discuss the importance of lazy loading and how to use lazy loading with VOLT, which offers built-in lazy loading for images. You will see how to configure VOLT to handle images, as well as how to skip lazy loading when so desired. After a discussion of lazy loading and its implementation in VOLT, you will learn how to build a simple custom Block using Element that lets users upload images in VOLT’s Site Designer.
Lazy loading helps websites load faster, because the website can render (be displayed) before all the content has finished loading. Users often leave websites that take longer than 3 seconds to load , and that can mean lost revenue for an ecommerce store.
Lazy loading images balances the delivery of large, high-quality graphics with a user’s desire to see a page load quickly. Because of VOLT’s lazy loading images, users can begin viewing your VOLT Store before all the images have been downloaded. This can come in really handy, particularly on pages that have a lot of graphical content, like a product details page including many photographs in a photo gallery.
Lazy loading in general reduces the chance that a user will leave the website, because it improves the performant feel of using the website. Additionally, lazy loading saves bandwidth, since content is only delivered when a user actually needs it, instead of all at once. On mobile devices, lazy loading can save the user significant mobile data costs.
All images are automatically lazy-loaded on VOLT storefronts with no extra work needed from a developer. However, there is an extra step you can take to make sure you’re providing the best user experience: you can provide Cloudinary transformation dimensions for your images.
If you provide Cloudinary transformation dimensions with your images, VOLT will ensure that your images are lazy loaded into the page at the correct scale. The width and height transformations are automatically grabbed from your “src” attribute on <img > elements and the “srcset” attributes on <source > elements within <picture > elements.
These width and heights are then passed into an SVG that is added to the page until your image needs to load. This means that you won't have any content shifting as the images load on the page. While Cloudinary transformations are not required, it is strongly recommended that you provide them on all of your images.
For example, the text “w_200,h_200,c_limit” is the Cloudinary transformation of the following image, scaling it to no larger than 200 pixels wide or 200 pixels high:
https://res.cloudinary.com/dyx4yhvoq/image/upload/
w_200,h_200,c_limit/v1545428185/images/tcp-no-image.jpg
VOLT automatically detects the transformation dimensions from the code and will insert an SVG that is 200 pixels wide and 200 pixels high, allowing the page’s content to load into the correct places before the image is actually loaded.
In the rare instance that you never want an image to lazy load, it is possible to force VOLT to load the image immediately by adding a special property to your images. Usually, you want lazy loading for all images, because of the advantages discussed previously, but VOLT has the developmental flexibility to disable lazy loading on a case-by-case basis.
For example, you might have a logo in the header that you want to be served immediately in all cases. Usually, any images in the header will be automatically loaded, since that content appears immediately visible to a user. More realistically, you might want to use eager loading (that is, not use lazy loading) for a logo in the footer.
The advantage of eager loading is that the content is already loaded by the time the user scrolls down or otherwise views the content. That means there is no chance of them seeing an unloaded or unfinished glimpse of the content before it finishes loading. For a small image that is important to your brand, like your logo, you may want to guarantee that it loads first.
To disable lazy loading of an image, you can add the data attribute “data-vol-skip-lazy” to your <img> element. This will cause VOLT to skip lazy loading on just that particular image. You will see an example of what this would look like in a custom Block later in this article.
If you choose to disable lazy loading, you should remember that eager loading delays the time before the page is loaded and thus slows down page loading for users of your VOLT Store. Usually, lazy loading is the way to go, which is why VOLT lazy loads all images by default.
VOLT supports Google AMP pages out-of-the-box with no configuration necessary. AMP pages are a special mobile version of your VOLT Store that show up in Google search results and provide a super-fast loading experience. What does AMP support mean for lazy loading?
“AMP also prefetches lazy-loaded resources. Resources are loaded as late as possible, but prefetched as early as possible. That way things load very fast but CPU is only used when resources are actually shown to users.” —How AMP works
Basically, AMP realizes that lazy-loading is a best practice for website optimization and handles it seamlessly. By “prefetching” AMP will actually download the lazy-loaded images before they are needed, in a behavior slightly different than regular lazy loading.
Usually, lazy loading an image means no bandwidth is transferred until the image is needed by the user. With AMP, in order to make mobile pages as responsive and fast as possible, the images are prefetched but not actually loaded. In other words, the images are downloaded and are waiting in memory, but they are not rendered (or displayed) until the user needs them.
This hybrid behavior means AMP pages load as fast as regular lazy-loaded pages but then have near-instantaneous loading of lazy-loaded images when needed. This of course comes at the cost of potentially using bandwidth on images that never get viewed. On the other hand, AMP pages already save bandwidth because AMP limits pages to no more than 75KB of CSS and 150KB of JavaScript.
This section will provide a miniature tutorial for implementing image handling when building a custom Block with Element . You will see what code needs to be placed in which files in order to use the image uploader built-into VOLT’s Site Designer. Additionally, you will see how to add the data attribute to disable lazy loading.
This section assumes that you understand the basics of how to create and publish an Element Block. For help learning how to build Blocks from scratch, please refer to the “Building An Element Page Tutorial ” in the Element Platform Documentation. Additionally, there are seve ral YouTube videos to teach you how to build Blocks using Element at “Element Tutorial | VOLT Learning Center” (27 min total).
First, you will need to set up the /src/configs.js file to enable the image picker inside VOLT’s Site Designer for your custom Block’s “image” prop :
import { ElementPropTypes } from "@volusion/element-proptypes"
export const configSchema = {
image: {
label: "Image",
type: ElementPropTypes.image,
},
}
export const defaultConfig = {
image: {
uriBase: "https://res.cloudinary.com/dyx4yhvoq/image/upload/",
imagePath: "v1545428185/images/tcp-no-image.jpg",
altText: "Placeholder Image",
width: 360, // pixels
height: 270, // pixels
},
// Alternative default image configuration without a placeholder image:
// image: ElementPropTypes.image.default,
}
The details for the configuration are available for the “image ” Element Proptype in the Element Proptype Documentation.
Next, you will set up a simple custom Block in the /src/Block.js file to load the image:
import React from "react"
import { defaultConfig } from "./configs"
const Block = (props) => {
// Destructure the image from the Block props:
const { image } = props
// Build the <img> tag to output:
const outputImage = (
<img
src={image.uriBase + image.imagePath}
alt={image.altText}
width={image.width}
height={image.height}
style={{ border: "1px solid black" }} // For demonstration purposes only
// data-vol-skip-lazy // Uncomment to skip lazy loading for this image
/>
)
// Alternatively, with optional Cloudinary transforms:
/* const outputImage = (
<img
src={image.uriBase + "w_200,h_200,c_limit/" + image.imagePath}
alt={image.altText}
style={{ border: "1px solid black" }} // For demonstration purposes only
/>
) */
// Return an image only if there is an image (image.uriBase is not undefined)
return image.uriBase ? outputImage : null
// Returning null will render an empty Block with no content
}
Block.defaultProps = defaultConfig
export default Block
This code simply demonstrates how to construct an <img> tag from the default configuration, which duplicates how Site Designer will store the data for uploaded images. Optionally, you can include Cloudinary image transformations, as shown in the second (commented-out) example.
To disable lazy loading, you would add the “data-vol-skip-lazy” attribute inside the <img> tag, as is shown in the comments in the code above.
While “image.uriBase” should never be undefined , it is a good idea to include a check to be sure, because if the “image” variable is undefined for some reason then the Block will crash because of a TypeError.
Note also that the above example includes inline styles, which are used to add a border to the image. This is done for convenience because the particular image used for demonstration purposes has a light background. As you are probably aware, you should use Aphrodite CSS to style your custom Blocks using Element instead of inline styles. For more information, please refer to “Styling Your Block With CSS” in the Element Platform D ocumentation.
Lazy loading is a common website optimization that usually requires significant effort to set up and maintain. Thankfully, VOLT has built-in lazy loading for images, meaning your VOLT Store is going to load significantly faster than an ecommerce store without lazy loading.
This article discussed the benefits of lazy loading, how lazy loading works for websites, and how to use lazy loading for your VOLT Store. No configuration on your part is required to lazy load all images using VOLT, but it is possible to optionally disable lazy loading for certain images.
You learned that VOLT will include a placeholder image when lazy loading images if you include Cloudinary image transformations in your custom Block. You also learned that AMP pages handle lazy loading through prefetching, which further increases performance at the cost of additional bandwidth. Finally, you saw an example of a custom Block that would allow a user to upload an image using VOLT’s Site Designer.
Hopefully this article has helped you better understand the advantages of lazy loading and why VOLT lazy loads all images by default.