New in Symfony 6.3: Early Hints
April 17, 2023 • Published by Javier Eguiluz
Symfony 6.3 is backed by:
Warning: This post is about an unsupported Symfony version. Some of this information may be out of date. Read the most recent Symfony Docs.
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.
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.
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 are closed.
To ensure that comments stay relevant, they are closed for old posts.
I always wonder if there's a plan to support Early hints in php-fpm... I tried to search for it in the issues on https://github.com/php/php-src/issues without luck
@Massimiliano there's a pending Pull Request related to Early Hints here: https://github.com/php/php-src/pull/7025