How to Lazy Load Images in Custom Content
What is a Lazy Loader?
Lazy loading is telling the browser to not load images until its absolutely nessisary. Basically we delay loading images that are not currently visible on the page (below the current fold).
Why should I use the Lazy Loader?
Because Google says so. One of the metrics Google uses for search results page rankings is "mobile friendliness", one of the recomendations Google gives to improve a page's mobile friendliness score is to lazy load images. They recomend this because if the user never sees the image (because they navigate away before they scroll down far enough to see it) then we are using the users bandwidth and potentially mobile data for no reason. It also can appear to make the page load faster by prioritzing loading resources they see first, but the actual page load may not technically be faster, but perceived speed > actual speed.
When should I use the Lazy Loader?
Generated content such as Bluefoot widgets, category page banner images, category page sub-category images, category page product image and product page product images automatically use the lazy loader (because I coded them to do so). So you don't have to worry about implementing the lazy loader on those images. You will need to manually implement the lazy loader on custom content. This includes custom HTML blocks in Bluefoot, Static Blocks (not using Bluefoot), CMS Pages (not using Bluefoot) and any custom HTML code put into category/product fields (such as description).
How do I use the Lazy Loader?
Use the lazy loader requires giving element a
lazy-load attribute with the image URL as the attribute value.
Lazy Loading with
When lazy loading an image element you should give it a
src attribute of
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw== which is a base 64 encoded single pixel transparent image. Because its base64 encoded and embeded it will not load an actual image and will use almost no bandwidth other than these few characters on inital page load. You should explicitly define the size of the image within the style tag. If you want the image to be a fixed size and know the dimensions use those dimensions. Otherwise you should use 100% as the width and the images actual width as the "max-width". In this example the image has an width of
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" lazy-load="https://source.unsplash.com/500x500?flower" style="width:100%;max-width:800px" alt="A beautiful flower" />
Lazy Loading with background images
Lazy loading a background image is done exactly like an
<img> but you dont need the placeholder image or size.
<div lazy-load="https://source.unsplash.com/1250x700?flower" style='padding: 20rem 0; text-align: center'> <h1 style='color: white; text-shadow: 0 0 2px black;'>Lazy Loading Background Images</h1> </div>