@@ -55,13 +55,14 @@ To do that, first install the WebLink component:
5555 $ composer require symfony/web-link
5656
5757preload() `` Twig function provided by
58- WebLink:
58+ WebLink. The `"as" attribute `_ is mandatory because browsers need it to apply
59+ correct prioritization and the content security policy:
5960
6061..code-block ::html+twig
6162
6263 <head>
6364 <!-- ... -->
64- <link rel="stylesheet" href="{{ preload('/app.css') }}">
65+ <link rel="stylesheet" href="{{ preload('/app.css', { as: 'style' } ) }}">
6566 </head>
6667
6768If you reload the page, the perceived performance will improve because the
@@ -75,7 +76,7 @@ the priority of the resource to download using the ``importance`` attribute:
7576
7677 <head>
7778 <!-- ... -->
78- <link rel="stylesheet" href="{{ preload('/app.css', { importance: 'low' }) }}">
79+ <link rel="stylesheet" href="{{ preload('/app.css', {as: 'style', importance: 'low' }) }}">
7980 </head>
8081
8182..tip ::
@@ -88,8 +89,7 @@ How does it work?
8889
8990The WebLink component manages the ``Link `` HTTP headers added to the response.
9091When using the ``preload() `` function in the previous example, the following
91- header was added to the response: ``Link </app.css>; rel="preload" ``
92-
92+ header was added to the response: ``Link </app.css>; rel="preload"; as="style" ``
9393According to `the Preload specification `_, when an HTTP/2 server detects that
9494the original (HTTP 1.x) response contains this HTTP header, it will
9595automatically trigger a push for the related file in the same HTTP/2 connection.
@@ -105,7 +105,7 @@ issuing an early separate HTTP request, use the ``nopush`` option:
105105
106106 <head>
107107 <!-- ... -->
108- <link rel="stylesheet" href="{{ preload('/app.css', { nopush: true }) }}">
108+ <link rel="stylesheet" href="{{ preload('/app.css', {as: 'style', nopush: true }) }}">
109109 </head>
110110
111111Resource Hints
@@ -139,7 +139,7 @@ any link implementing the `PSR-13`_ standard. For instance, any
139139 <head>
140140 <!-- ... -->
141141 <link rel="alternate" href="{{ link('/index.jsonld', 'alternate') }}">
142- <link rel="stylesheet" href="{{ preload('/app.css', { nopush: true }) }}">
142+ <link rel="stylesheet" href="{{ preload('/app.css', {as: 'style', nopush: true }) }}">
143143 </head>
144144
145145The previous snippet will result in this HTTP header being sent to the client:
@@ -164,7 +164,7 @@ You can also add links to the HTTP response directly from controllers and servic
164164
165165 // alternative if you don't want to use the addLink() shortcut
166166 $linkProvider = $request->attributes->get('_links', new GenericLinkProvider());
167- $request->attributes->set('_links', $linkProvider->withLink(new Link('preload', '/app.css')));
167+ $request->attributes->set('_links', $linkProvider->withLink(new Link('preload', '/app.css', ['as' : 'style'] )));
168168
169169 return $this->render('...');
170170 }
@@ -179,6 +179,7 @@ You can also add links to the HTTP response directly from controllers and servic
179179.. _`Resource Hints` :https://www.w3.org/TR/resource-hints/
180180.. _`Docker installer and runtime for Symfony` :https://github.com/dunglas/symfony-docker
181181.. _`preload` :https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
182+ .. _`"as" attribute` :https://w3c.github.io/preload/#as-attribute
182183.. _`the Priority Hints specification` :https://wicg.github.io/priority-hints/
183184.. _`the Preload specification` :https://www.w3.org/TR/preload/#server-push-(http/2)
184185.. _`Cloudflare` :https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/