@@ -27,9 +27,8 @@ Preloading Assets
2727
2828Imagine that your application includes a web page like this:
2929
30- .. code-block :: twig
30+ .. code-block :: html
3131
32- {# templates/homepage.html.twig #}
3332 <!DOCTYPE html>
3433 <html >
3534 <head >
@@ -39,7 +38,7 @@ Imagine that your application includes a web page like this:
3938 </head >
4039 <body >
4140 <main role =" main" class =" container" >
42- {# ... some content here ... #}
41+ <!-- ... -->
4342 </main >
4443 </body >
4544 </html >
@@ -58,10 +57,10 @@ To do that, first install the WebLink component:
5857 Now, update the template to use the ``preload() `` Twig function provided by
5958WebLink:
6059
61- .. code-block :: twig
60+ .. code-block :: html+ twig
6261
6362 <head>
64- {# ... #}
63+ <!-- ... -->
6564 <link rel="stylesheet" href="{{ preload('/app.css') }}">
6665 </head>
6766
@@ -72,10 +71,10 @@ requested the HTML page.
7271Additionally, according to `the Priority Hints specification `_, you can signal
7372the priority of the resource to download using the ``importance `` attribute:
7473
75- .. code-block :: twig
74+ .. code-block :: html+ twig
7675
7776 <head>
78- {# ... #}
77+ <!-- ... -->
7978 <link rel="stylesheet" href="{{ preload('/app.css', { importance: 'low' }) }}">
8079 </head>
8180
@@ -102,10 +101,10 @@ improve performance of your applications in production right now.
102101If you want to prevent the push but let the browser preload the resource by
103102issuing an early separate HTTP request, use the ``nopush `` option:
104103
105- .. code-block :: twig
104+ .. code-block :: html+ twig
106105
107106 <head>
108- {# ... #}
107+ <!-- ... -->
109108 <link rel="stylesheet" href="{{ preload('/app.css', { nopush: true }) }}">
110109 </head>
111110
@@ -135,12 +134,12 @@ The component also supports sending HTTP links not related to performance and
135134any link implementing the `PSR-13 `_ standard. For instance, any
136135`link defined in the HTML specification `_:
137136
138- .. code-block :: twig
137+ .. code-block :: html+ twig
139138
140139 <head>
141- {# ... #}
140+ <!-- ... -->
142141 <link rel="alternate" href="{{ link('/index.jsonld', 'alternate') }}">
143- <link rel="stylesheet" href="{{ preload('/app.css', {nopush: true}) }}">
142+ <link rel="stylesheet" href="{{ preload('/app.css', { nopush: true }) }}">
144143 </head>
145144
146145The previous snippet will result in this HTTP header being sent to the client:
0 commit comments