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
Notifications
/cc @ampproject/wg-approvers @ampproject/wg-stories
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.jsand move all the logic + styles that build the share menu into the extension. The native system share logic will stay inamp-storyin the fileamp-story-share.js.Design Document
The current functionality of the sharing menu is split between
amp-story-share-menu.jsandamp-story-share.jswhich 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.jsbundle 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 extensionamp-story-share-menu-0.1.jsand create an elementdiv.i-amphtml-story-share-menuthat 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-sharewhich 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 thediv.i-amphtml-story-share-menuelement and build it into anAmpStoryShareMenuelement; it will also installAmpSocialShareto 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-storyby3.4kbbut it will also prevent the automatic install ofamp-social-shareon story loading which is an extra4.5kBdownloaded 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
amp-story-sharehandle all the logic for system sharing. #37204amp-story-share-menuhandle all logic, templates and styles for rendering the share menu. #37205amp-story-1.0.js, not bundled inamp-story-share-menu-0.1.jsNotifications
/cc @ampproject/wg-approvers @ampproject/wg-stories