Chip Cullen

May 12, 2022

Filed under: "writing this down so I remember next time".

You ever read advice about using rel="preload" on stylesheet or some other asset?

I don't know why, but this part wasn't obvious to me:

Adding a <link> tag with rel="preload" is a new instance of the <link> tag and does not replace you original <link>.

I don't know why this was not immediately apparent to me. It just ... wasn't.

<!-- original -->
<link rel="stylesheet" href="./style.css">

<!-- this WILL NOT replace the original; this will not cause styles to render -->
<link rel="preload" href="./style.css" as="style">

<!-- this is what you actually need. both. together. -->
<link rel="preload" href="./style.css" as="style">
<link rel="stylesheet" href="./style.css">

The <link rel="preload"> is a hint to the browser that this asset is important to the page you're on, and should be downloaded early on.

You only want to use it for critical assets that affect the early rendering of your page.