Skip to content
This repository has been archived by the owner on Jun 14, 2022. It is now read-only.

Register Font Awesome stylesheet once and print only when needed #294

Conversation

westonruter
Copy link
Contributor

Summary of change:
The Font Awesome stylesheet is large and if it is not needed on the page then it wastes bandwidth and browser CPU cycles. It also contributes negatively to the overall CSS budget of 50KB on AMP pages (see ampproject/amp-wp#4095). Therefore, the stylesheet should only be printed when it is actually needed by a block.

This has the added benefit of preventing the Font Awesome stylesheet from blocking the rendering content that appears before the first block that makes use of it.

This PR also centralizes the registration of the Font Awesome stylesheet in the wp_default_styles action, eliminating duplicated references to the stylesheet path.

Have the changes in this PR been added to the documentation for this project?
Does not apply

How to test:

  1. Activate Atomic Blocks.
  2. Add a block that does not require Font Awesome.
  3. Check the frontend to verify that the Font Awesome has not been printed to the page.
  4. Add a block that does require Font Awesome (e.g. Social Links).
  5. Check the frontend to verify that the Font Awesome stylesheet has been printed once right before the dependent block.

Fixes: #127

Suggested Changelog Entry:

  • Improve frontend performance by only printing Font Awesome stylesheet when required.

Copy link
Collaborator

@nickcernis nickcernis left a comment

Choose a reason for hiding this comment

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

Confirmed that:

  • Font Awesome CSS does not load if no icon blocks present.
  • CSS loads if a block such as AB Sharing is present.
  • link element only appears once for multiple AB Sharing blocks.
  • Blocks that list posts containing AB Sharing blocks, such as the Post Grid, don't appear to be negatively affected.

Screen Shot 2020-01-14 at 11 43 23

@mindctrl mindctrl merged commit 4b501ce into studiopress:develop Jan 14, 2020
@mindctrl
Copy link
Contributor

Thank you @westonruter! Works great.

Thanks for testing @nickcernis!

nickcernis added a commit that referenced this pull request Feb 5, 2020
Fixes the issue noted in #127 and introduced in #294, where icons
in existing AB Sharing blocks will fail to load in the editor if REST
requests return other pages that have an AB Sharing block.
mindctrl added a commit that referenced this pull request Feb 10, 2020
mindctrl added a commit that referenced this pull request Feb 10, 2020
mindctrl added a commit that referenced this pull request Feb 17, 2020
…e' of https://github.com/westonruter/atomic-blocks into westonruter-add/conditionally-print-fontawesome-just-in-time"

This reverts commit 0ab51fc, reversing
changes made to b336ce3.

Issue #127. PR #294.
@westonruter
Copy link
Contributor Author

FYI: Gutenberg core is now moving in this direction. See WordPress/gutenberg#21838 and its PR WordPress/gutenberg#22754.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Register FontAwesome before enqueueing
3 participants