Menu
I'm trying out rel=preload for the first time, using it for a couple of stylesheets. Here is the code in question:
<link rel="preload" href="css/styles.css" as="style">
<link rel="preload" href="//allyoucan.cloud/cdn/icofont/1.0.0beta/css/icofont.css" crossorigin="anonymous" as="style">
I'm testing in Chrome 61, and I can see that the stylesheets are downloaded as expected, however they're never actually applied, and I get the message on the console saying that a preloaded resource isn't being used.
If I remove the rel=preload in favour of just rel=stylesheet, then it works perfectly fine.
Is there something I'm missing?
591
The rel="preload" attribute value is used to preload assets. It can be applied to several file formats, including CSS, JS, fonts, images, and more. Depending on the type of file you would like to preload, the corresponding as attribute may also need to be included along with rel="preload" .
<link rel="preload"> tells the browser to download and cache a resource (like a script or a stylesheet) as soon as possible. It's helpful when you need that resource a few seconds after loading the page, and you want to speed it up. The browser doesn't do anything with the resource after downloading it.
Preloading resources defined in CSS # Fonts defined with @font-face rules or background images defined in CSS files aren't discovered until the browser downloads and parses those CSS files. Preloading these resources ensures they are fetched before the CSS files have downloaded.
What do you think about this approach:
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
Resource: https://www.filamentgroup.com/lab/async-css.html
165
You need to have 2 lines for each one with rel=stylesheet and one with rel=preload. As preload is just fetching it and not applying.
However you will probably not notice much performance improvement as it hits one line just before the other.
The better option is to inline the css (see here) that is seen above the fold then use javascript to add in the in the css file on page load (see here).
21
Technically, you can specify multiple values for rel attribute. Something like this should do the job, without writing 2 lines per stylesheet:
<link rel="preload stylesheet" href="/css/styles.css" as="style" type="text/css" crossorigin="anonymous">
You can verify this using Lighthouse. This was result on my browser (there was no chained request as stylesheet was preloaded, and was properly applied):
18
The accepted answer is correct but not very clear. For one file, you need 2 lines, and not one:
<link rel="preload" href="css/styles.css" as="style">
<link rel="stylesheet" href="css/styles.css">
I used this approach mostly because of css background images. Apparently this will speed up the loading.
You can see this approach in a similar fashion for google fonts links:
<link rel='preconnect' href='https://fonts.googleapis.com'>
<link href='https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300&family=Source+Sans+Pro:wght@300;400;600&display=swap' rel='stylesheet'>
It's also useful for fonts. See Mozilla Docs
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
