Avoid FEAAS Stylesheets parsing multiple times #1320
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
FEAAS Components require stylesheet of their libraries to run. Multiple components from the same library can be used on a single page. To ensure that stylesheets start loading as soon as possible, I suggested including stylesheet tag for each component. However with this approach even if stylesheet is loaded once (browser deduplicates requests) it's parsed and initialized multiple times (which can be seen in chrome dev console, having css rules multiplied). The solution to this problem is to use `rel="preload"` which will initiate loading during page parsing, so by the time JS is loaded, the static files are already pre-fetched. We also do it for preloading HTML and JS. Combined with SSG, this makes the files load as soon as possible, and still on demand.
Self-close the stylesheet
Inviz
force-pushed
the
feature/avoid-feaas-stylesheet-reparsing
branch
from
1ca760a
to
f8d7023
Compare
|
@ambrauer I think this is ready for review. It should be non-breaking as it just changes type of preloading we're doing. |
ambrauer
changed the title
|
thanks Adam |
illiakovalenko
pushed a commit
that referenced
this pull request
Feb 22, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description / Motivation
FEAAS Components require stylesheet of their libraries to run. Multiple components from the same library can be used on a single page. To ensure that stylesheets start loading as soon as possible, I suggested including stylesheet tag for each component. However with this approach even if stylesheet is loaded once (browser deduplicates requests) it's parsed and initialized multiple times (which can be seen in chrome dev console, having css rules multiplied).
The solution to this problem is to use
rel="preload"which will initiate loading during page parsing, so by the time JS is loaded, the static files are already pre-fetched. We also do it for preloading HTML and JS. Combined with SSG, this makes the files load as soon as possible, and still on demand.Testing Details
The result can be seen on any environment using feaas component.
Example of stylesheet preloading with cold cache:
1 request: Preloading
2 request: Fetching, 0 bytes - served from cache
3 request: background HEAD request, checks if the cache needs to be busted (feaas does stale-while-revalidate-hot-reload strategy for handling cache). This head request is not absolutely necessary conceptually for the case of cold cache, but it's lightweight (only headers) and it's a trade-off of preloading the static file.
Example with hot cache
1 request: 5ms - served from disk cache
2 request: 4ms - served from disk cache
3 request: background HEAD request, checks if the cache needs to be busted. Important, as it's the only way to validate the freshness of cached file with immutable policy
Types of changes