The Problem
I created a website a few years ago, www.duanedorch.com, to post interesting articles and to use as a sandbox for experimenting with performance improvements. It’s a simple WordPress site using a template that’s got lots of pre canned CSS and JavaScript that aren’t a friend of performance. I’m using the Akamai CDN with some performance features enabled, including:
- Static object caching & compression
- ImageManager for compression and sizing of images based on the viewport
- HTML caching with prefeshing
But even with these features, my performance was still pretty poor. Take a look at these scores as measured by WebPageTest:
The most worrisome is the Largest Contentful Paint (LCP) score of 5.3 seconds, double the recommended speed of 2.5 seconds.
103 Early Hints
I’d been hearing about a new performance feature called 103 Early Hints. The 103 is a new HTTP status code that tells browsers what content to preload before the page has even started to arrive. Coincidentally (or not), Chrome introduced support for 103 Early Hints in Chrome v103 (June 2022).
Let’s take a closer look at how 103 Early Hints works.
Traditionally, the first request made by the client is for the main html of the page which, once loaded, requests additional page resources.
With Early Hints, a 103 status code is returned to the browser prior to the 200 of the HTML, instructing the browser to perform actions on the specified resources even before the HTML completes.
So I decided to enable 103 Early Hints on my LCP image resource to see what, if any, impact it would have on my LCP score.
Notice the waterfall before 103 Early Hints was implemented.
The LCP image is the 38th resource on the page, behind a bunch of css and js resources.
After the implementation of 103 Early Hints, the waterfall looks drastically different.
The LCP image is now #2, right after the HTML. And notice that the 103 is received and the image begins to load before the browser receives the 200 from the HTML.
Examining the details of the HTML request, we can see the Early Hint:
And what did the Early Hint do for my LCP score?
My LCP score went from 5.35 to 2.33, a full 3 seconds faster!! An improvement of 56%. And the only change was the implementation of 103 Early Hints.
Note the filmstrip between the two tests.
Before
After
103 Early Hints Implementation
One way that this great feature can be enabled for Akamai customers is in Property Manager using two variables.
The PMUSER_103_List variable contains the resource hints that are sent to the browser. This is a comma separated list of resources and associated hints. Currently, hints are supported to preconnect to important domains and to preload important resources.
Here is the preload hint I used:
<https://www.duanedorch.com/wp-content/uploads/home-image.png>;rel=preload;as=imageAs of this writing, the Akamai implementation of 103 Early Hints is in prototype mode. Please reach out to your account team if you’d like to participate in the prototype.
More details about the prototype, the results that other customers are realizing, and additional ways to implement preload capabilities can be found here.