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.

Sign up for GitHub

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

Jump to bottom

preload non-critical CSS pattern? #20

Closed
davidhund opened this issue Jul 13, 2017 · 2 comments
Closed

preload non-critical CSS pattern? #20

davidhund opened this issue Jul 13, 2017 · 2 comments
Labels
enhancement

Comments

@davidhund
Copy link

Using inlineStyles I noticed you inline the 'critical' CSS in a <style> block in the <head> and then <link> the complete, non-critical, CSS file right above </body> (so as not to block rendering).

Another good pattern is to use rel=preload in the head for this non-critical CSS file and then load it with JS. A good explanation (and JS utility) can be found in LoadCSS by the Filamentgroup.

Adding a loadCSS script might be out of scope, but it might be good to document (README?) this usage with extractStyles.

inlineStyles could actually do half the work by also adding a <link rel="preload" href="org-stylesheet.css" as="style">.
@gajus
Copy link
Owner

gajus commented Jul 13, 2017

Love the suggestion. Coming in the next release. :-)

@gajus gajus mentioned this issue Jul 13, 2017
Closed
@gajus gajus closed this as completed in 9a9f2fe Jul 13, 2017
@gajus
Copy link
Owner

gajus commented Jul 13, 2017

🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@davidhund @gajus