Symfony 4: HTTP/2 Push and Preloading

A few months ago, I’ve contributed a new component to Symfony: WebLink. By implementing cutting edge web standards, namely HTTP/2 Server Push and W3C’s Resource Hints, it brings great opportunities to boost webapp’s performance.

Thanks to Symfony WebLink, HTTP/2 (h2) servers are able to push resources to clients before they even know that they need them (think to CSS or JavaScript files, or relations of an API resource). WebLink also enables other very efficient optimisations that work with HTTP 1:

  • telling the browser to fetch or to render another webpage in the background ;
  • init early DNS lookups, TCP handshakes or TLS negotiations

Let’s discover how easy it is to use it and the real life benefits you can expect. The WebLink components is available since Symfony 3.3 (it means you can start to use it today), but in this article I’ll use Symfony 4 to celebrate the release of its first beta yesterday!

To get started, download my Docker installer and runtime for Symfony 4/Flex. It includes everything you need to run Symfony (PHP 7.1 configured properly for Symfony,  and Composer) and a development reverse proxy (Apache) supporting HTTP/2 Server Push and HTTPS (most clients only support HTTP/2 over TLS).

Unzip the downloaded archive, open a shell in the resulting directory and run the following commands:

Open https://localhost, if this nice page appears, you successfully created your first Symfony 4 project and are browsing it in HTTP/2!Let’s create a very simple homepage using the Twig templating engine. Because Symfony Flex starts as a micro framework, the first step is to install the library itself: docker-compose exec app composer req twig (run this in a new shell)

Flex is smart enough to download Twig, automatically register it into Symfony and enable Symfony features requiring the library. It also generates a base HTML5 layout in the templates/ directory (we will not use it but you should).

Now, download Bootstrap 4, extract the archive and copy the file dist/css/bootstrap.min.css in the public/ directory of our project. As you may know Symfony already has a nice integration with the upcoming version 4 of the most popular CSS framework.

Note: in a real project, you should use Yarn or NPM with Symfony Encore to install Bootstrap.

Now, it’s time to create the template of our homepage:

And finally, register our new template as the homepage using the builtin TemplateController:

Clear the cache: docker-compose exec app bin/console c:c (this step will become optional when #24642 will be merged)

Refresh your browser, this nice HP should appear:

2 HTTP requests are issued by the browser, one for the homepage, and another one for Bootstrap.

But we know from the very beginning that the browser will need Bootstrap. Instead of waiting that the browser download the homepage, parse the HTML (notice “Initiator: Parser” in Chrome DevTools), encounter the reference to bootstrap.min.css and finally send a new HTTP request, we could take benefit of the HTTP/2 Push feature to directly send both resources to the browser. Let’s do it!

Install the WebLink component: docker-compose exec app composer req weblink

As for Twig, Flex will automatically download and register this component into our app.

Now, update the template to use the preload Twig helper that leverages the WebLink component:

Reload the page:As you can see (Initiator: Push), both responses have been sent directly by the server. bootstrap.min.css has started to be received before the browser even requested it!

How does it works?

The WebLink component tracks Link HTTP headers to add to the response. When using the preload() helper, a Link header with a preload rel attribute is added to the response:

According to the Preload specification, when a HTTP/2 server detects that the original (HTTP 1) response contains this HTTP header, it will automatically trigger a push for the related file in the same HTTP/2 connection.

The Apache server provided by my Docker setup supports this feature. It’s why Bootstrap is pushed to the client! Popular proxy services and CDN including Cloudflare, Fastly and Akamai also leverage this feature. It means that you can push resources to clients and improve performance of your apps in production right now! All you need is Symfony 3.3+ and a compatible web server (the free version of Nginx doesn’t support Server Push) or CDN service.

If you want to prevent the push but let the browser preload the resource by issuing an early separate HTTP request, use the nopush attribute:

Before using HTTP/2 Push, be sure to read this great article about known issues, cache implications and the state of the support in popular browsers.

In addition to HTTP/2 Push and preloading, the WebLink component also provide some helpers to send Resource Hints to clients, the following helpers are available:

  • dns_prefetch: “indicate an origin that will be used to fetch required resources, and that the user agent should resolve as early as possible”
  • preconnect: “indicate an origin that will be used to fetch required resources. Initiating an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, allows the user agent to mask the high latency costs of establishing a connection”
  • prefetch: “identify a resource that might be required by the next navigation, and that the user agent should fetch, such that the user agent can deliver a faster response once the resource is requested in the future”
  • prerender: “identify a resource that might be required by the next navigation, and that the user agent should fetch and execute, such that the user agent can deliver a faster response once the resource is requested in the future”

The component can also be used to send HTTP link not related to performance. For instance, any link defined in the HTML specification:

The previous snippet will result in this HTTP header being sent to the client:

Link: </index.jsonld>; rel="alternate",</bootstrap.min.css>; rel="preload"; nopush

 

You can also add links to the HTTP response directly from a controller or any service:

Last but not least, as all Symfony components, WebLink can be used as a standalone PHP library:

It is already as a standalone library by the Bolt CMS. While we’re speaking about interoperability, WebLink can deal with any link implementing PSR-13.

Thanks to Symfony WebLink, there is no excuses to not to switch to HTTP/2!

Learn more about these new features in the relevant Pull Requets: #22273 and #21478.

Your Symfony app is slow? Contact Les-Tilleuls.coop, we can help you make it fast!

Making the Symfony PropertyAccess Component 84% faster in 2.8… and counting

Update 12/06/15: I’ve opened a PR making the PropertyAccess Component 84% faster than before. It implements strategies explained at the end of this post.

This PropertyAccess component allows to access to a property of an object (or a to a key of an array) regardless of the access strategy that must be used. It is smart enough to access directly to  public  properties and to use getters, setters, issers, adders, removers, magic methods and so on for private  and protected ones. It is also allows to access a property trough an object graph using a straightforward notation:  $propertyAccessor->getValue($rootObject, 'foo.bar.baz'); .

As you may know, some components of the Symfony framework including Form and the Serializer (see the ObjectNormalizer) rely heavily on it. The JSON-LD normalizer of the API Platform framework also use it intensively. In fact, more than 250+ open source projects rely on the PropertyAccess component (and it has been installed more than 1M times).

It’s a convenient and popular piece of software. But this convenience has a cost: the PropertyAccess component is slow: internally, it uses the PHP Reflection API to guesses what’s the strategy needed to read or write a property.

When using this component in a loop (ex: to normalize a collection of objects to an associative array using the ObjectNormalizer), its slowness become a significant problem.

Here is a benchmark for the PropertyAccess component:

And here is the profile generated by the awesome Blackfire.io: with Symfony 2.7.6:

As you can see the logic to guess the access strategy is executed at each loop iteration. As the structure of a PHP class generally never changes at runtime, a possible optimisation path is to guess the strategy to use for the property of a given class during the first iteration then cache it in an array. This way, the cached access strategy can be reused without extra computations every other time during the current execution thread.

Let’s try that:

Symfony PropertyAccess performance improvement

(Click on the image to read the full Pull Request description and the related code).

Thanks to this new caching strategy, the PropertyAccessor Component included in Symfony 2.7.7 (and more recent versions) is now 54% faster according to the same benchmark:

But the component can be even more optimized.

For instance, the constructor of the Symfony\Component\PropertyAccess\PropertyPath  class uses a slow regular expression. This constructor is still called at each iteration in a loop. The result of the regular expression isn’t cached:

A similar cache mechanism should be used to avoid executing the same regular expression at each iteration. I’ve started to work on a patch doing that, but it still needs some work before being ready to be merged in Symfony. This patch improves the performance of the PropertyAccess of 20% more. Using both patches, the component is 70% faster than in 2.7.6.

There is another promising way to improve the performance of this component: for now the access strategy is always guessed the first time a property is accessed during an execution thread (e.g. when handling an HTTP request). Using a permanent cache system (such as APC or Redis trough the Doctrine Cache library) in complement of the in-memory array would allow to guess the strategy only one time, (e.g. during the first HTTP request), then reuse it for each next executions. Symfony 3.1 will have this feature.

By the way, a similar optimization has been done on the ObjectNormalizer. It needs to know the list of properties of an object to normalize it. This list wasn’t cached either. In Symfony 2.8, it’s done:

Capture d’écran 2015-12-01 à 22.55.40

Thanks to this patch and to the optimization of the PropertyAccess component, the ObjectNormalizer is 40% faster in Symfony 2.8/3.0 than in Symfony 2.7.6!