minor #15375 [WebLink] Fixed the preload links (javiereguiluz)

javiereguiluz · javiereguiluz · commit eb437abdc9ef · 2021-05-27T13:25:10.000+02:00
This PR was merged into the 4.4 branch. Discussion ---------- [WebLink] Fixed the preload links As you can see at https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload, the `<link>` elements that use preload follow this syntax: ```html <link rel="preload" href="..." as="..."> ``` That's why I think we need to change all our `rel="stylesheet"` by `rel="preload"` ... unless the `preload()` Twig function replaces the entire `<link>`, which I don't think it's the case Commits ------- 43a2d46 [WebLink] Fixed the preload links
diff --git a/web_link.rst b/web_link.rst
@@ -62,7 +62,7 @@ correct prioritization and the content security policy:
 
     <head>
         <!-- ... -->
-        <link rel="stylesheet" href="{{ preload('/app.css', { as: 'style' }) }}">
+        <link rel="preload" href="{{ preload('/app.css', { as: 'style' }) }}">
     </head>
 
 If you reload the page, the perceived performance will improve because the
@@ -77,7 +77,7 @@ requested the HTML page.
 
         <head>
             <!-- ... -->
-            <link rel="stylesheet" href="{{ preload(asset('build/app.css')) }}">
+            <link rel="preload" href="{{ preload(asset('build/app.css')) }}">
         </head>
 
 Additionally, according to `the Priority Hints specification`_, you can signal
@@ -87,7 +87,7 @@ the priority of the resource to download using the ``importance`` attribute:
 
     <head>
         <!-- ... -->
-        <link rel="stylesheet" href="{{ preload('/app.css', { as: 'style', importance: 'low' }) }}">
+        <link rel="preload" href="{{ preload('/app.css', { as: 'style', importance: 'low' }) }}">
     </head>
 
 How does it work?
@@ -111,7 +111,7 @@ issuing an early separate HTTP request, use the ``nopush`` option:
 
     <head>
         <!-- ... -->
-        <link rel="stylesheet" href="{{ preload('/app.css', { as: 'style', nopush: true }) }}">
+        <link rel="preload" href="{{ preload('/app.css', { as: 'style', nopush: true }) }}">
     </head>
 
 Resource Hints
@@ -145,7 +145,7 @@ any link implementing the `PSR-13`_ standard. For instance, any
     <head>
         <!-- ... -->
         <link rel="alternate" href="{{ link('/index.jsonld', 'alternate') }}">
-        <link rel="stylesheet" href="{{ preload('/app.css', { as: 'style', nopush: true }) }}">
+        <link rel="preload" href="{{ preload('/app.css', { as: 'style', nopush: true }) }}">
     </head>
 
 The previous snippet will result in this HTTP header being sent to the client:
