ampproject / ampproject/amphtml
[Story performance] Serve new CSS target from extension
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
We want to be able to export and serve the CSS and JS targets independently (instead of JS+CSS all in one). This will allow the stories to be rendered before the AMP runtime is parsed and loaded.
Currently `amp-story.css` gets served at https://cdn.ampproject.org/v0/amp-story-1.0.css but this file is not useful to import it to a document. We want to serve another CSS file so that pages with `amp-story` elements can load this separate stylesheet faster and render the story layout without the need for `v0.js` and `amp-story.js` to get loaded, parsed and built (which has an improvement of up to 20-30% of LCP).
The API should allow us to define a CSS file that will be used by the extension (as it is now), and independently allow us to export the JS without the CSS, and have the CSS separately (we can use https://cdn.ampproject.org/v0/amp-story-1.0.css for the CSS, but we'd need a new target that contains the JS alone, without the CSS).
### Alternatives Considered
- Create the CSS file in `css/` similar to `ampshared.css`
cc @ampproject/wg-infra
cc @ampproject/wg-stories
Contributor guide
Research direction
No source file or test is named. Start by tracing how amp-story.css is built and served, and compare the css/ampshared.css alternative; define the target configuration needed to export the extension’s JavaScript and CSS independently, then verify that separate CSS and JS assets are produced and served.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- build-system, frontend, performance
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100