@@ -10,30 +10,22 @@ W3C's `Resource Hints`_, the WebLink component
10
10
brings great opportunities to boost webapp's performance.
11
11
12
12
Thanks to WebLink, HTTP/2 (**h2 **) servers are able to push resources to clients
13
- before they even know that they need them (think to CSS or JavaScript
13
+ before they even know that they need them (think about CSS or JavaScript
14
14
files, or relations of an API resource). WebLink also enables other very
15
- efficient optimisations that work with HTTP 1:
15
+ efficient optimisations that work with HTTP 1.x :
16
16
17
17
- telling the browser to fetch or to render another webpage in the
18
18
background ;
19
- - init early DNS lookups, TCP handshakes or TLS negotiations
19
+ - initializing early DNS lookups, TCP handshakes or TLS negotiations
20
20
21
- Let's discover how easy it is to use it and the real life benefits you
22
- can expect.
23
-
24
- To benefit from HTTP/2 Server Pushes, a HTTP/2 server and a HTTPS connection
25
- are mandatory (even in local).
21
+ To benefit from HTTP/2 Server Pushes, an HTTP/2 server and an HTTPS connection
22
+ are required (even local ones).
26
23
Both Apache, Nginx and Caddy support these protocols.
27
24
Be sure they are properly configured before reading.
28
25
29
26
Alternatively, you can use the `Docker installer and runtime for
30
27
Symfony `_ provided by Kévin Dunglas (community supported).
31
28
32
- It includes everything you need to run Symfony
33
- (PHP :doc: `configured properly for Symfony </performance >`, and Composer)
34
- as well as a development reverse proxy (Apache) supporting HTTP/2 Server Push
35
- and HTTPS (most clients only support HTTP/2 over TLS).
36
-
37
29
Unzip the downloaded archive, open a shell in the resulting directory and run
38
30
the following command:
39
31
@@ -65,7 +57,7 @@ Now, download Bootstrap_, extract the archive and copy the file
65
57
``dist/css/bootstrap.min.css `` in the ``public/ `` directory of our
66
58
project.
67
59
68
- Symfony comes with a `nice integration with of the most popular CSS framework `_.
60
+ Symfony comes with a `nice integration of the most popular CSS framework `_.
69
61
70
62
.. note ::
71
63
@@ -75,8 +67,9 @@ Symfony comes with a `nice integration with of the most popular CSS framework`_.
75
67
76
68
Now, it's time to create the template of our homepage:
77
69
78
- .. code-block :: html
70
+ .. code-block :: twig
79
71
72
+ {# templates/homepage.html.twig #}
80
73
<!DOCTYPE html>
81
74
<html>
82
75
<head>
@@ -104,7 +97,7 @@ And finally, register our new template as the homepage using the builtin
104
97
_controller : ' Symfony\Bundle\FrameworkBundle\Controller\TemplateController::templateAction'
105
98
template : ' homepage.html.twig'
106
99
107
- Refresh your browser, this nice homepage should appear:
100
+ Refresh your browser, this homepage should appear:
108
101
109
102
.. image :: /_images/components/weblink/homepage-requests.png
110
103
@@ -142,21 +135,21 @@ responses have been sent directly by the server.
142
135
143
136
.. note ::
144
137
145
- Google Chrome provides a nice interface to debug HTTP/2 connections.
138
+ Google Chrome provides an interface to debug HTTP/2 connections.
146
139
Open ``chrome://net-internals/#http2 `` to start the tool.
147
140
148
141
How does it works?
149
142
~~~~~~~~~~~~~~~~~~
150
143
151
- The WebLink component tracks Link HTTP headers to add to the response.
144
+ The WebLink component tracks `` Link `` HTTP headers to add to the response.
152
145
When using the ``preload() `` helper, a ``Link `` header
153
146
with a `preload `_
154
147
``rel `` attribute is added to the response:
155
148
156
149
.. image :: /_images/components/weblink/response-headers.png
157
150
158
151
According to `the Preload specification `_,
159
- when a HTTP/2 server detects that the original (HTTP 1) response
152
+ when an HTTP/2 server detects that the original (HTTP 1.x ) response
160
153
contains this HTTP header, it will automatically trigger a push for the
161
154
related file in the same HTTP/2 connection.
162
155
The Apache server provided in the Docker setup supports this feature.
@@ -183,7 +176,7 @@ known issues, cache implications and the state of the support in popular
183
176
browsers.
184
177
185
178
In addition to HTTP/2 Push and preloading, the WebLink component also
186
- provide some helpers to send `Resource
179
+ provides some helpers to send `Resource
187
180
Hints <https://www.w3.org/TR/resource-hints/#resource-hints> `__ to
188
181
clients, the following helpers are available:
189
182
0 commit comments