New in Symfony 6.3: Early Hints

Symfony 6.3 will be released at the end of May 2023. This is the first article of the series that shows the most important new features introduced by Symfony 6.3.

Contributed by Kévin Dunglas in #48128

Early hints is one of the most recent and effective techniques to improve the perceived performance of your websites and web apps. Early hints allow servers to tell browsers which resources (CSS and JavaScript files, web fonts, etc.) they should start loading while servers are still working on creating the response.

Technically speaking, Early Hints are an HTTP response with a status code of 103 which contains one or more HTTP headers listing the resources to load or connect to. For example:

1
2
3
4

103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </app.js>; rel=preload; as=script

These headers are also included in the response that servers will send later to respond to the user request. However, by sending them as soon as possible, browsers can start loading them or preparing for them, improving the perceived performance significantly. In this article from Cloudflare, they show improvements ranging from 10% to 20% depending on the type of website.

In Symfony 6.3 we've added support for Early Hints via the sendEarlyHints() shortcut defined in the AbstractController:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\WebLink\Link;

class HomepageController extends AbstractController
{
    #[Route("/", name: "homepage")]
    public function index(): Response
    {
        $response = $this->sendEarlyHints([
            new Link(rel: 'preconnect', href: 'https://fonts.google.com'),
            (new Link(href: '/main.css'))->withAttribute('as', 'stylesheet'),
            (new Link(href: '/app.js'))->withAttribute('as', 'script'),
        ]);

        // prepare the contents of the response...

        return $this->render('homepage/index.html.twig', response: $response);
    }
}

The sendEarlyHints() creates and sends the first HTTP response (with status code 103) and returns the Response object that you need to use to send the full response later. The resources are defined via the Link class provided by the WebLink component.

That's all!. Updating your controllers to send the assets first will make your sites to load much faster, resulting in more conversions and happier visitors. However, there's a catch. Few servers support the feature to send the response headers first and the response contents later.

As of April 2023, and for PHP applications, only the SAPI provided by the Franken PHP server supports this feature. Hopefully other web servers and SaaS/PaaS services will add support for it soon.