-
Notifications
You must be signed in to change notification settings - Fork 43
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Inline HPB styles in a style tag #1548
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch! Fixed in f97e39a |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for revising! Working as described
# [2.2.0-alpha.1](v2.1.0...v2.2.0-alpha.1) (2023-11-16) ### Bug Fixes * add checks for Newspack plugin ([#1579](#1579)) ([b516a6f](b516a6f)) * **homepage-posts:** terms handling in category list ([#1596](#1596)) ([55dbf42](55dbf42)) * **modal-checkout:** place order button width ([b48efcb](b48efcb)), closes [#1572](#1572) ### Features * add width control to the Checkout block ([#1583](#1583)) ([3f75c1e](3f75c1e)) * **cwv:** inline HPB styles in a style tag ([#1548](#1548)) ([dea8d93](dea8d93)) * **modal-checkout:** display item name on success ([a3a03df](a3a03df)) * update subscribe patterns to use Newspack block ([#1580](#1580)) ([70088e2](70088e2))
🎉 This PR is included in version 2.2.0-alpha.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
# [2.2.0](v2.1.0...v2.2.0) (2023-11-27) ### Bug Fixes * add checks for Newspack plugin ([#1579](#1579)) ([b516a6f](b516a6f)) * **homepage-posts:** terms handling in category list ([#1596](#1596)) ([55dbf42](55dbf42)) * **modal-checkout:** place order button width ([b48efcb](b48efcb)), closes [#1572](#1572) ### Features * add width control to the Checkout block ([#1583](#1583)) ([3f75c1e](3f75c1e)) * **cwv:** inline HPB styles in a style tag ([#1548](#1548)) ([dea8d93](dea8d93)) * **modal-checkout:** display item name on success ([a3a03df](a3a03df)) * update subscribe patterns to use Newspack block ([#1580](#1580)) ([70088e2](70088e2))
🎉 This PR is included in version 2.2.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
All Submissions:
Changes proposed in this Pull Request:
Inlines the critical parts of CSS needed by the Homepage Posts Block, in order to get rid of layout shift happening when the file-based CSS stylesheet is loaded.
To demonstrate, here's a recording of a (throttled) page load on
master
:And here's how it looks like on this branch:
If this strategy proves effective in production environment, it can be enhanced by moving more of the static styles from
view.css
to the dynamically created inline stylesheet.How to test the changes in this Pull Request:
master
, only faster** use DevTools' Network speed throttling to observe it better
Other information: