Skip to content
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

Merged
merged 10 commits into from
Nov 6, 2023
Merged

Conversation

adekbadek
Copy link
Member

@adekbadek adekbadek commented Oct 9, 2023

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:

  1. Create a page with some instances of the Homepage Posts Block, with different type scale settings and images shown
  2. Load the front-end, observe the styles are applied just like on master, only faster*

* use DevTools' Network speed throttling to observe it better

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

Copy link
Member

@miguelpeixe miguelpeixe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was able to reproduce the improvements in CLS but the editor is throwing an error on saves and autosaves:

image

Looks like the inline CSS is being added to the save return payload:

image

@adekbadek
Copy link
Member Author

Good catch! Fixed in f97e39a

Copy link
Member

@miguelpeixe miguelpeixe left a 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

@adekbadek adekbadek merged commit dea8d93 into master Nov 6, 2023
7 checks passed
@adekbadek adekbadek deleted the feat/inline-hpb-styles-in-style-tag branch November 6, 2023 15:11
matticbot pushed a commit that referenced this pull request Nov 16, 2023
# [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))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 2.2.0-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

matticbot pushed a commit that referenced this pull request Nov 27, 2023
# [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))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 2.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

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