This repository has been archived by the owner on May 2, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 39
Implement Asynchronous CSS #199
Labels
Comments
Plus one from me. I have also used this technique myself. |
@dainemawer I haven't done this personally but it sounds like a good strategy. |
@dainemawer I think it is a good idea for a feature to include. I wonder if there are any issues going forward with the lock-in associated with it? Probably a bigger discussion of critical CSS. |
Should we include a fallback when JS is disabled? With this approach, CSS will not load if JS is disabled. So something like this?
|
@smy315 yup I like that idea! |
@dainemawer want to work up a PR for this? |
@jeffpaul yes sir - we'll get something up tomorrow! |
@jeffpaul looks like I don't have write access to the repo - could you update my permissions? |
6 tasks
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Is your enhancement related to a problem? Please describe.
One of the main pain points of the
link
tag is that it cannot be loaded asynchronously usingasync
ordefer
- in order ensure that big CSS files, or even third party CSS files can be loaded asynchronously we should look at ways to load CSS more dynamically.Describe the solution you'd like
We have a hook built into the
theme-scaffold
calledscript_loader_tag
which helps us load script-based assets withasync
anddefer
- I'd like to suggest a similiar hook, but one that only focuses onstyles
. Essentially any tagged styles should be loaded as such:The methodology of this technique is explained under "Additional Context" in more detail below, but the TL;DR of it is:
stylesheet
withmedia="print"
by default, the browser loads the CSS without render-blocking the page.print
does not actually apply styles by default in the browser, we need to ensure that we set this media toall
once theDOM
is ready, hence theonload
attribute rewriting themedia
attribute toall
once theDocument
is ready.Its a clean and non-render blocking approach to get CSS to load asynchronously.
This approach can also be achieved using
rel="preload"
and updating it torel="stylesheet"
ondocument.ready
but not all browser vendors supportrel="preload"
at this point.Describe alternatives you've considered
Additional context
The text was updated successfully, but these errors were encountered: