ampproject / ampproject/amphtml

[Story performance] Serve new CSS target from extension

Open
#35,888 3 comments 0 reactions 0 assignees View on GitHub
Type: Feature Request WG: infra WG: stories
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.