I'm trying to improve my website's performance by preloading stylesheets but I don't know what's the best way to do it. I have never used this feature before.
I found the following ways, to me all look the same after some testing I did.
<!-- 1 -->
<link rel="preload stylesheet" href="style.css" as="style">
<!-- 2 -->
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
<!-- 3 -->
<link rel="preload" href="style.css" as="style" onload='this.rel="stylesheet"'>
<noscript>
<link rel="stylesheet" href="style.css">
</noscript>
<!-- 4 -->
<link rel="preload" href="style.css" as="style" onload='this.onload=null;this.rel="stylesheet"'>
<noscript>
<link rel="stylesheet" href="style.css">
</noscript>
I'd preferably like to use the first one because looks the most elegant.
What's in your opinion is the most proper way?
Are they all exactly the same?
Do you know a better way?