I know script files can use the DEFER and ASYNC keywords on a resource include. Do these keywords also work for stylesheet (i.e., CSS) includes?
Syntax would presumably be:
<link rel="stylesheet" type="text/css" href="./path/to/style.css" defer />
I just don’t know if it’s allowed or not.
Async are specific attributes of the tag
They will not work in other tags, because they don’t exist there. A stylesheet is not a script that contains logic to be executed in parallel or after the loading. A stylesheet is a list of static styles that get applied atomically to html.
You could do this:
<link rel="stylesheet" href="/css/style.css" media="none" onload="if(media!=='all')media='all'" >
and create a noscript fallback
As of Jan 2019, this StackOverflow post still ranks #1 in some Google searches. Therefore, I am submitting this very late answer for those who land here seeking to defer the loading of your CSS.
Add the following above the closing
</body> tag of your html document
I can’t find it documented anywhere but my findings are:
How it was tested
- Tested only with Google Chrome version 61.0.3163.100 (Official version) (64 bits)
- Used Fast & Slow 3G throttling in dev tools.
What I tested
I have one stylesheet importing custom fonts and applying the fonts.
Text using the custom font was invisible until it was fully loaded and then it appeared.
So added => Result is that the text is visible immediately when the page is starting to render but using the fallback font, then after a while it switches to the custom font.
So it seems like at least Google Chrome supports defer on
<link> tags as well even if it’s not documented anywhere publicly…
The best practice for css files is to serve them inline(Minified). As per that link.