is it safe in HTML to use link stylesheet preload?-CodePudding

i want to ask for opinions about this syntax, one <link rel having both stylesheet and preload)

<link href=.... rel="stylesheet preload" as="style" />

so far i tested in IE tab that even in IE11 it seems to load page just fine. so this syntax seems not to confuse IE, who may not know preload rel

is there anythig to be aware of? IMHO its ideal to speed up loading of pages nicely, so im just making sure, there are not drawbacks to this method.

Older classic way would be first add preload, and next add as stylesheet

<link href=.. rel=preload as=style />
<link href=.. rel=stylesheet type=text/css />

CodePudding user response：

Not exactly sure what you think <link href="screen.css" rel="stylesheet preload" as="style" /> would do for you compared to a <link href="screen.css" rel="stylesheet" /> if they are located at the same place.

In both cases, FF 101 and Chrome 103 will load the style in a render-blocking way.

So if you have this HTML code:

<head>
   <link href="screen.css" rel="stylesheet preload" as="style">
   <script>
      alert('ok');
   </script>
</head>

And your style takes 5 seconds to load, then the alert will happen after 5 seconds.

So <link href="screen.css" rel="stylesheet preload" as="style"> does not make any sense, it actually does also not make sense to write this:

<head>
   <link href="screen.css" rel="preload" as="style">
   <link href="screen.css" rel="stylesheet">
   <script>
      alert('ok');
   </script>
</head>

Because also the <link href="screen.css" rel="stylesheet"> would start blocking, so you didn't gain anything.

preloading makes sense if you for some reason need to load multiple stylesheets:

<head>
   <link href="screen-a.css" rel="preload" as="style">
   <link href="screen-b.css" rel="preload" as="style">
   <link href="screen-c.css" rel="preload" as="style">
   <link href="screen-a.css" rel="stylesheet">
   <link href="screen-b.css" rel="stylesheet">
   <link href="screen-c.css" rel="stylesheet">
</head>

Or if a script you load in the header does not need the stylesheet but you want to load it before.

<head>
   <link href="screen.css" rel="preload" as="style">
   <script src="main.js"></script>
   <link href="screen.css" rel="stylesheet">
</head>

Or if you want to preload a style you inject later, because the component is not yet shown.

<head>
   <link href="component.css" rel="preload" as="style">
</head>
<body>

  <script>
     injectCss('component.css')
  </script>
</body>

Or if there is a big image the stylesheet is referencing for which you want that the browser directly stars loading, before it finds it in the css file.

<head>
   <link rel="preload" href="big-background.png" as="image">
   <link href="screen.css" rel="stylesheet">
   <script src="main.js"></script>
</head>

CodePudding user response：

You should use 'as', like this <link href="" rel="preload" as="style". Read more about it here