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:
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:
namespace AppController;
use SymfonyBundleFrameworkBundleControllerAbstractController;
use SymfonyComponentHttpFoundationResponse;
use SymfonyComponentRoutingAnnotationRoute;
use SymfonyComponentWebLinkLink;
class HomepageController extends AbstractController
{
#[Route(„/“, name: „homepage“)]
public function index(): Response
{
$response = $this->sendEarlyHints([
(new Link(href: ‚/style.css‘))->withAttribute(‚as‘, ’stylesheet‘),
(new Link(href: ‚/script.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.
Symfony Blog