I am creating an AMP website and until now, things are going pretty well. By default the elements are lazy loading, which means the request to get the actual content is fired when the tag is a few pixels away from the current viewport. This is super useful when the page is long and the user may not scroll down to the bottom of the page. It saves some requests !
Are we able to do the same for elements? I haven't found any documentation about this, but it can saves even more HTTP requests as these ads usually trigger a lot of requests to the advertisers.
Thanks !
You could use the lazy feature in amp-ad. Is as simple as adding the data-lazy-fetch="true" attribute to the amp tag and specifying an amount of viewports above the ad to start loading with the data-loading-strategy attribute. I believe that by default it uses 3 viewports but you can adjust it.
Full example:
<!-- Lazy ad that will start loading after the user is one viewport above ad -->
<amp-ad ... data-lazy-fetch="true" data-loading-strategy="1"></amp-ad>
More info here