How to lazy load amp-img?

Question

What is the approach for lazy loading images for pages that conform to the Google Accelerated Mobile Pages (AMP) project?

It is my understanding that lazy loading means that the image is loaded to the client sometime after the above-the-fold content is rendered. There appears to be three variants of lazy loading:

1. view port - image loading is triggered by its proximity to the view port
2. set delay - image loading is triggered by a timer
3. manual - image loading is triggered by a client event

All these approaches can be implemented using javascript. However, AMP does not allow for javascript, just custom AMP scripts.

The view port approach is the most desirable, as it minimizes content loading to a minimum. AMP has a custom script that supports the view port approach for starting and stopping videos. However, there does not appear to similar support for amp-img.

The set delay appears to be supported with amp-animation, I think. This seems like a rather complex approach. Further, the delay approach is undesirable as the optimum delay depends on internet bandwidth, which is variable.

The delay approach can also be implemented with PHP. However, PHP is parsed on the server-side. This means that the page would have to reloaded, which entirely defeats the purpose of lazy loading.

It seems that the manual approach is all that remains. The following snippet of code creates two buttons that selectively show or hide an image.

amp-img id='img1' ... hidden

button on="tap.img1.show()"

button on="tap.img1.hide()"

For mobile sites, the show button can be embedded into the above the fold content, so the user triggers it while perusing through the site. However, this seem like a kludge

Does Google AMP effectively limit lazy loading to the manual approach, or is there some other way to accomplish view port or delay lazy loading?

Thank you in advance.

Answer 1

All AMP elements always are always lazy loaded. There is currently no way to configure the thresholds for lazy loading (e.g. based on distance from the viewport).

Answer 2

According to AMP documentation, AMP images are lazy loaded. They state that the <amp-img> tag is used by the AMP runtime to:

• understand the layout of the page before assets load, crucial to support first-viewport preloading

• control network requests to lazy load and prioritize resources effectively"

So, in short: you don't need to lazy load the images. They already do it for you.

It makes sense for them to do so, especially since the whole point of AMP is performance, and lazy loading is one of the most basic things that can be done to improve speed.

In fact, AMP does something even more clever: prefetching lazy loaded resources:

"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."

If you dig a little deeper into the AMP runtime, you'll see that they actually implement more advanced techniques than just lazy loading, which is why AMP is near instantaneous...