New in Symfony 3.3: Asset preloading with HTTP/2 Push

March 6, 2017 • Published by Javier Eguiluz

Warning: This post is about an unsupported Symfony version. Some of this information may be out of date. Read the most recent Symfony Docs.

Contributed by
Kévin Dunglas
in #21478.

One of the most relevant new features proposed by HTTP/2 to improve the loading of web pages is called Server Push. HTTP/2 Push allows a web server to send resources to a web browser before the browser gets to request them.

In Symfony 3.3 we added HTTP/2 Push support for web assets (CSS, JS, images) to allow preloading them as explained in the Preload W3C Working Draft. In practice, and following the traditional Symfony philosophy of using composition, the new feature is enabled by wrapping your assets with the new preload() function:

        1
2
3
4
5
6
7
8
9
10
11
12
13
        <head>
    {# by default, assets are pushed #}
    <link rel="stylesheet" href="{{ preload(asset('/css/app.css')) }}">
    {# ... but you can disable pushing... #}
    <link rel="stylesheet" href="{{ preload(asset('/css/app.css'), { nopush: true }) }}">
    {# ... and you can also explicit the asset type #}
    <link rel="stylesheet" href="{{ preload(asset('/css/app.css'), { as: 'style' }) }}">
    ...
</head>
<body>
    ...
    <script src="{{ preload(asset('/js/app.js')) }}"></script>
</body>
    

Behind the scenes, the preload() function adds a Link HTTP header that is processed by intermediate proxies compatible with HTTP/2:

        1
2
3
4
        HTTP/1.1 200 OK
Content-Type: text/html
...
Link: /app.css>; rel=preload,/app.js>; rel=preload
    

An added bonus of using this technique is that all those assets are downloaded using just one connection, improving the page speed dramatically.

Published in #Living on the edge

Help the Symfony project!

As with any Open-Source project, contributing code or documentation is the most common way to help, but we also have a wide range of sponsoring opportunities.

Comments

Michael COULLERET said on Mar 6, 2017 at 17:24

Nice, thanks @kėvin.

Kévin Dunglas said on Mar 6, 2017 at 17:46

Please note that you should always include the `as` attribute when applicable (https://fetch.spec.whatwg.org/#concept-request-destination).

Also, CloudFlare has built-in support for this feature, it means that if you use CloudFlare (even the free plan) in front of your Symfony application, you'll get HTTP/2 push automatically.

Almahdi TRIMECH Certified said on Mar 6, 2017 at 20:39

Awesome !
Thanks @Kavier

Ulumuddin Cahyadi Yunus said on Mar 7, 2017 at 03:30

Awesome!

Alexander M. Turek said on Mar 7, 2017 at 12:53

Are there already best practises on when to (and when not to) server-push assets?

Revelator said on Mar 7, 2017 at 13:39

Wow! Awesome!

Kévin Dunglas said on Mar 8, 2017 at 06:58

@Alexander, always push assets required to render initially the full page (main JS, CSS and images files).

Ingo Pfennigstorf said on Mar 8, 2017 at 09:31

Hi, thanks for that feature!
According to the Twig Asset extension the syntax needs to be
instead of

and an optional third (boolean) parameter for the push thingy.

jogm said on Mar 8, 2017 at 12:34

Muy buena opción, gracias por ese feature. Todo para mejorar el rendimiento siempre es bueno, y en este caso disminuir las conexiones es muy importante.

Alexander M. Turek said on Mar 8, 2017 at 14:40

#10

@Kévin, If I did this, I would preemtively push files to the browser that probably have already been cached by the browser. I'm not convinced that it is that easy to decide. That's why I'm asking.

Vladimir Luchaninov said on Mar 9, 2017 at 17:59

#11

Awesome!