search

gajus / usus

Webpage pre-rendering service. ⚡️
Other
805 stars 33 forks source link

preload non-critical CSS pattern? #20

Closed davidhund closed 6 years ago

davidhund commented 6 years ago

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 commented 6 years ago

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

gajus commented 6 years ago

🎉