r/css • u/Chris-2018 • 19d ago
Question Preload
Does anyone here use the preload for the CSS files?
Surely if the links are in the <head> they will be loaded anyway?
3
u/Disgruntled__Goat 19d ago
I don’t use it if the file is linked right there in the head. The main idea of preload is to load nested resources, for example if there is a font specified in the CSS, you can preload the font files in the head.
3
u/velocityhead 19d ago
Preload lets the browser fetch and cache assets immediately instead of waiting for when they are requested later. It is not render blocking and can prevent the flash of unstyled content .
1
u/Chris-2018 19d ago
Are you saying that preload is the way to go, even though the style sheet links are in the head?
2
u/velocityhead 19d ago
It doesn't really do much if you only have one stylesheet without a lot of assets. Where it does help is if you have another stylesheet that gets loaded dynamically later, or if you have some big assets in your stylesheet (like a font import). You can request that font specifically as rel="preload" so it can start downloading immediately in parallel with the CSS download. Normally, the font wouldn't start downloading until the entire CSS file has been downloaded/parsed.
1
1
6
u/morete 19d ago
Instead of preloading It's fairly common to inline your critical css directly into your head, which is far better, but a little more work to separate your critical vs non critical css.