Webperf: boost your PHP apps with 103 Early Hints

103 Early Hints A new HTTP status code to improve
webapp performance Photo by Javier Allegue Barros

Kévin Dunglas ➔ Co-founder of Les-Tilleuls.coop ➔ Creator of API
Platform and FrankenPHP ➔ Contributor to PHP, Go and Caddy server @dunglas

70+ API, Web and Cloud Experts ➔ 100% employee-owned co-op
✊ ➔ API Platform creators 🕷 ➔ PHP Foundation advisory board 🐘 ➔ Symfony backers and core team 🎼 ➔ Laravel oﬃcial partners 🏎 ➔ [email protected] 💌

The Problem

Typical Web Page © Google

Typical Web Page GET /index.html Host: example.com [server think time]
200 OK Content-Type: text/html; charset=UTF-8 [... rest of the headers ...] <!doctype html> <link rel="stylesheet" href="/common.css"> [... rest of the response body ...] 1st request: 1st response:

Typical Web Page, continued GET /common.css Host: example.com 200 OK
Content-Type: text/css; charset=UTF-8 [... rest of the headers ...] body { /* … */ } 2nd client request: 2nd response:

Early Hints

1XX Informational ➔ Informational HTTP responses: 1XX ➔ “Temporary” responses
sent before the ﬁnal response ➔ In HTTP since forever ➔ Mostly used for “internal” things handled directly by the browser and servers like ﬁle upload (100 Continue) Photo by Possessed Photography

103 Early Hints Photo by Possessed Photography ➔ 103: new
HTTP status code for indicating hints ➔ Fetch external resources as early as possible • E.g.: CSS and JS ﬁles, images… needed to render a web page ➔ Goal: minimize perceived latency ➔ Rely on pre-existing standards: • Link header (RFC 5988) • Resource hints (HTML standard) • Content Security Policy ➔ HTTP/2 and HTTP/3 connections only

103 Early Hints © Google

Web Page Using Early Hints GET /index.html Host: example.com 103
Early Hints Link: </common.css>; rel=preload; as=style [server think time] 200 OK [... typical headers ...] Link: </common.css>; rel=preload; as=style <!doctype html> [... rest of the response body ...] GET /common.css Host: example.com 200 OK Content-Type: text/css; charset=UTF-8 [... rest of the headers ...] body { /* … */ }

Beneﬁts: ~30% LCP improvement © Google

What About HTTP/2 Server Push?! ➔ Server Push served the
same purpose ➔ Server Push has been removed from Chrome • Complex • Rarely used in the wild • “Over-pushing”: only 40% of pushed requests were used ➔ 103 Early Hints requires one more Round-trip time (RTT) but… • “Simple” • Better cache dynamics: if the response is cached, it is not downloaded again

Using Early Hints

Browser Support ➔ Stable: • Chrome • Edge • Opera
➔ Experimental (not enabled by default): • Firefox • Safari ➔ Graceful fallback on “preload” links • All major browsers Photo by Andrew Robulack

Caddy 😍 @hint { protocol http2+ path /index.html } route
@hint { header Link "</common.css>; rel=preload; as=style" respond 103 }

Apache H2EarlyHints on # If enabled, HTTP/2 Server Push will
also be used H2Push Off <Location /index.html> H2PushResource /common.css </Location>

Programmatically With PHP

Houston, we have a problem

PHP FPM Internals Web Browser Web Server (NGINX, Caddy, …)
HTTP REQUEST HTTP RESPONSE PHP-FPM FASTCGI REQUEST FASTCGI RESPONSE ➔ FastCGI doesn’t support informational responses ➔ 1 FastCGI request = only 1 response

A hack? header('HTTP/1.1 103 Early Hints'); header('Link: </common.css>; rel=preload; as=style');
// Send the informational request and craft the final one “by hand” echo "HTTP/1.1 200 OK\r\n"; echo "Link: </common.css>; rel=preload; as=style\r\n"; // Other headers echo "\r\n"; echo "Body";

Not a Reliable Hack Photo by Joshua Hoehne ➔ Complex,
but works as intended if the web server serves the response over HTTP/1.1 ➔ Broken if the web server serves the response over HTTP/2 or HTTP/3 • HTTP/2+ is a binary protocol • Only one response is sent • The handcrafted HTTP/1.1 text of the second response is included “as-is” in the response body of the ﬁrst response ➔ A hack on top of a hack: • Force the web server to use HTTP/1.1 • Add an HTTP/2+ reverse proxy in front

A Better Solution

FrankenPHP Internals ➔ PHP is plugged directly into the web
server ➔ Send as many HTTP responses as you want Web Browser HTTP REQUEST HTTP RESPONSE

Early Hints with FrankenPHP // Start FrankenPHP: frankenphp php-server header('Link:
</common.css>; rel=preload; as=style'); headers_send(103); // your slow algorithms and SQL queries 🤪 echo 'Body';

With Laravel $r = new Response(); $r->headers->set('Link', '</common.css>; rel=preload; as=style');
$r->sendHeaders(103); $r->setContent('My final response'); (and other tools using Symfony HttpFoundation)

With Symfony Full Stack class HomepageController extends AbstractController { #[Route("/",
name: "homepage")] public function index(): Response { $response = $this->sendEarlyHints([ (new Link(href: '/common.css'))->withAttribute('as', 'stylesheet'), ]); // prepare the contents of the response... return $this->render('homepage/index.html.twig', response: $response); } }

Thank you! ➔ Any questions ? les-tilleuls.coop [email protected] @coopTilleuls

Webperf: boost your PHP apps with 103 Early Hints

Webperf: boost your PHP apps with 103 Early Hints

Kévin Dunglas

More Decks by Kévin Dunglas

Other Decks in Programming

Featured

Transcript

103 Early Hints A new HTTP status code to improve

Kévin Dunglas ➔ Co-founder of Les-Tilleuls.coop ➔ Creator of API

70+ API, Web and Cloud Experts ➔ 100% employee-owned co-op

The Problem

Typical Web Page © Google

Typical Web Page GET /index.html Host: example.com [server think time]

Typical Web Page, continued GET /common.css Host: example.com 200 OK

Early Hints

1XX Informational ➔ Informational HTTP responses: 1XX ➔ “Temporary” responses

103 Early Hints Photo by Possessed Photography ➔ 103: new

103 Early Hints © Google

Web Page Using Early Hints GET /index.html Host: example.com 103

Beneﬁts: ~30% LCP improvement © Google

What About HTTP/2 Server Push?! ➔ Server Push served the

Using Early Hints

Browser Support ➔ Stable: • Chrome • Edge • Opera

Caddy 😍 @hint { protocol http2+ path /index.html } route

Apache H2EarlyHints on # If enabled, HTTP/2 Server Push will

NGINX

Programmatically With PHP

Houston, we have a problem

PHP FPM Internals Web Browser Web Server (NGINX, Caddy, …)

A hack? header('HTTP/1.1 103 Early Hints'); header('Link: </common.css>; rel=preload; as=style');

Not a Reliable Hack Photo by Joshua Hoehne ➔ Complex,

A Better Solution

FrankenPHP Internals ➔ PHP is plugged directly into the web

Early Hints with FrankenPHP // Start FrankenPHP: frankenphp php-server header('Link:

With Laravel $r = new Response(); $r->headers->set('Link', '</common.css>; rel=preload; as=style');

With Symfony Full Stack class HomepageController extends AbstractController { #[Route("/",

Thank you! ➔ Any questions ? les-tilleuls.coop [email protected] @coopTilleuls