如何在同一link标签中同时使用rel="preload"与rel="stylesheet"？解决Pagespeed识别问题

Hey there, let’s break down this issue clearly for you:

First off, you can’t add two identical rel attributes to a single <link> tag—this goes against HTML standards. Browsers will only recognize the last rel value in the tag, so <link rel="preload" rel="stylesheet" href="http://www.example.com/style.css" /> is functionally no different from just writing <link rel="stylesheet" href="..." />. It won’t trigger the preload behavior you want at all.

Now, let’s unpack why your original attempts didn’t work with PageSpeed:

• When you used <link rel="preload stylesheet" href="..." />, browsers immediately treat this as a regular stylesheet request—they load and parse it right away, skipping the "preload first, use later" logic that PageSpeed looks for. PageSpeed’s preload detector is specifically looking for resources marked only as preload that get used later in the page load, so this combo tag doesn’t register as a valid preload strategy.
• When you removed stylesheet and left just rel="preload", PageSpeed did recognize the preload—but you need to make sure you actually use that preloaded resource afterward (either with a separate stylesheet tag or JS), otherwise you’re wasting bandwidth on a resource that never gets applied.

Here are the two correct ways to implement this properly:

1. Use two separate tags (most straightforward) #

<!-- Preload the stylesheet first -->
<link rel="preload" href="http://www.example.com/style.css" as="style">
<!-- Then use it as a regular stylesheet -->
<link rel="stylesheet" href="http://www.example.com/style.css">

This approach is clean and easy to maintain. PageSpeed will pick up the preload, and browsers will reuse the already-downloaded resource for the stylesheet tag—no duplicate requests.

2. Use an onload event to convert preload to stylesheet #

<link rel="preload" href="http://www.example.com/style.css" as="style" onload="this.rel='stylesheet'">

This uses one tag to handle both preloading and activating the stylesheet. Once the preload finishes, the onload event switches the rel to stylesheet, triggering the browser to parse the styles. Don’t forget the as="style" attribute—it’s required for preload to tell the browser what type of resource it’s dealing with, which helps prioritize the load correctly.

A quick note: Make sure you’re only preloading above-the-fold critical stylesheets here. Preloading non-critical resources can backfire and hurt performance, which PageSpeed will also call out.

内容的提问来源于stack exchange，提问作者JohnyFree