Skip to content

🚀 [Story performance] Remove interactive host styles#37472

Merged
mszylkowski merged 12 commits intoampproject:mainfrom
mszylkowski:removeInteractiveHostStyles
Jan 25, 2022
Merged

🚀 [Story performance] Remove interactive host styles#37472
mszylkowski merged 12 commits intoampproject:mainfrom
mszylkowski:removeInteractiveHostStyles

Conversation

@mszylkowski
Copy link
Copy Markdown
Contributor

@mszylkowski mszylkowski commented Jan 25, 2022

The host styles for interactive components can be moved to the interactive components extension to reduce the bundle size for the amp-story bundle.

Replaces #37051 but doesn't store any of the styles on amp-story.css because the layout shifts that could happen due to the interactive components won't be fixed by keeping the layout styles there, as the height is independent of any of these styles, and is the main contributor to any CLS that could potentially happen. In reality, the chance that the interactive components are downloaded before amp-story is very high.

dist/v0/amp-story-interactive-0.1.mjs: Δ +0.79KB
dist/v0/amp-story-interactive-0.1.js: Δ +1.01KB
dist/v0/amp-story-0.1.mjs: Δ -0.62KB
dist/v0/amp-story-1.0.mjs: Δ -0.62KB
dist/v0/amp-story-0.1.js: Δ -0.65KB
dist/v0/amp-story-1.0.js: Δ -0.65KB

@amp-owners-bot
Copy link
Copy Markdown

Hey @gmajoulet! These files were changed:

extensions/amp-story-interactive/0.1/amp-story-interactive-abstract.js
extensions/amp-story-interactive/0.1/amp-story-interactive-host.css
extensions/amp-story-interactive/0.1/amp-story-interactive-shadow.css
extensions/amp-story-interactive/0.1/test/test-amp-story-interactive-slider.js
extensions/amp-story/1.0/amp-story.css

Hey @newmuis! These files were changed:

extensions/amp-story/1.0/amp-story.css

@mszylkowski mszylkowski self-assigned this Jan 25, 2022
@mszylkowski mszylkowski enabled auto-merge (squash) January 25, 2022 18:20
@mszylkowski mszylkowski merged commit 49be49a into ampproject:main Jan 25, 2022
@mszylkowski mszylkowski deleted the removeInteractiveHostStyles branch January 25, 2022 18:25
rileyajones pushed a commit to rileyajones/amphtml that referenced this pull request Jan 26, 2022
* Added tasts

* Undo

* Moved interactive components CSS into extension

* Updated zindex

* Fix linting
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants