Summary

We want to lazy-load the share menu only on browsers that don't support the system sharing.
This requires that we create a new extension amp-story-share-menu.js and move all the logic + styles that build the share menu into the extension. The native system share logic will stay in amp-story in the file amp-story-share.js.

Design Document

The current functionality of the sharing menu is split between amp-story-share-menu.js and amp-story-share.js which are currently very closely coupled. We need to have a clear separation between the two files like so:

amp-story/1.0/amp-story-share.js

In the amp-story.js bundle we will keep the logic to open the system share (including the logic to decide whether the system share is available). If the system share is not available, we will lazily install the extension amp-story-share-menu-0.1.js and create an element div.i-amphtml-story-share-menu that will be targeted by the extension installed in order to create the share menu (this prevents anyone else from using this extension in non-conventional ways). The installation of the share menu will only happen when users click on the share icon, and not on the story loading so that we don't compete for network resources with the more important LCP elements. We will also move the analytics here so they run regardless of the sharing type.

amp-story-share-menu/0.1/amp-story-share-menu.js

It will contain the logic and styles to render the share menu, including the extension amp-social-share which is currently lazy-loaded by the share menu (we want to bundle these two together to avoid duplicate boilerplate code, extra requests, and delayed rendering of the buttons). When installed, it will search for the div.i-amphtml-story-share-menu element and build it into an AmpStoryShareMenu element; it will also install AmpSocialShare to render the buttons properly.

Motivation

The share menu doesn't affect LCP but contains many SVG assets and code that is non-blocking for the story loading process, only being required when users click on the share icon (which is not even shown/supported in some platforms like Discover or other embedded modes).

Removing the share menu will reduce the size of amp-story by 3.4kb but it will also prevent the automatic install of amp-social-share on story loading which is an extra 4.5kB downloaded at the same time as the images in the story:

Alternative Solutions

Keeping the share menu in the main bundle is not an option since it's delaying LCP without performance benefits.

Launch Tracker

• Create new extension and move share menu to it. #37203
• Make amp-story-share handle all the logic for system sharing. #37204
• Make amp-story-share-menu handle all logic, templates and styles for rendering the share menu. #37205
• Lazy load the share menu when the share icon is clicked. #37206
  • Build share menu with services from amp-story-1.0.js, not bundled in amp-story-share-menu-0.1.js

Notifications

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