[Story performance] Lazy-load non-critical extensions

[mszylkowski]

Summary

We want to test whether late installing non-critical (for LCP purposes) extensions can improve the loading times of stories. Not loading the extensions can make the initial story load 50KB lighter, which can improve LCP by 10-20% when the stories use these extensions (that's the lab data gathered on cached and origin docs).

Design Document

The extensions that can be installed later and don't affect the rendering of the story are:

Extension	Size
amp-story-auto-ads	20.05 KB
amp-story-auto-analytics	1.62 KB
amp-analytics	31.00 KB
amp-sidebar [deprecated]	18.27 KB

The scripts are usually competing with the images directly and the render-blocking scripts (like amp-story and v0.js), as they are imported in the head of the document, but they don't help LCP elements in any way. By loading them after the first page is loaded, we ensure the LCP elements have more bandwidth to download, and then we load these extensions.

Side effects: We want to monitor both LCP and impact on monetization, given that lazy-loading the analytics and ads later could negatively affect the number of impressions / page views (essentially when users drop out before the first page loads). The ads shown should be the same, and analytics are buffered for when the extension loads so early events will not be missed (as long as the user doesn't bounce).

Taken from https://amp-bundle-size-chart.appspot.com/

Motivation

The possibility to improve LCP by 10-20% of cached (and then origin + transformed) documents.

Alternative Solutions

To load the extensions directly in the head of the document (what is currently happening).

We purposely have left out from the list amp-consent and amp-geo because (especially in Europe) they should show up as early as possible, and can actually be LCP elements.

Launch Tracker

This experiment will be deployed in steps:

• Install extensions from amp-story.js if the components are in the page 🚀 [Story performance] Install non-critical extensions in the document after the first page is loaded #37670
• Remove the import script tags from the cached documents inside an experiment of an AMP cache transformer (and check whether it's positively impacting LCP metrics and ads impact)
• Take to design review the introduction of this change and the potential usecase for other AMP documents (non-stories), and the validation changes.
• Change validation so origin docs and transformed docs can also remove the script tags.
• Lazy load other components in page-attachments

Notifications

/cc @ampproject/wg-approvers @ampproject/wg-stories @ampproject/wg-performance

[gmajoulet]

To clarify the launch tracker, we will:

1. Write a Story only, AMP Cache only experiment, and collect metrics
2. Bring the metrics to the AMP Design review, and discuss how to enable validation
3. Ship

[mszylkowski]

We will not lazy load these componens because they can impact the metrics for analytics and ads