Early Hints (HTTP 103) is a way for a server to send quick tips to a browser before the main page loads. These tips tell the browser about important files (images, CSS, JS) the page will use. They are similar to preloads, but happen even sooner (without having to wait for HTML parsing). While the server prepares the main page, the browser can start fetching the resources early. This makes the page load faster by using the server’s “thinking time” wisely.
The main benefits of Early Hints is the positive impact on FCP and LCP.
- Shopify saw a 500ms faster LCP.
- Cloudflare saw a 30% improvement in LCP.
Early Hints are basically a newer and better solution over the previous HTTP/2 server push method, which was never broadly implemented. The browser can also ignore it, and it works with cache solutions (no cookies). So it’s less aggressive (when it should be) and also more compatible. Early Hints are already supported by over 91% of modern browsers.
We’ve made it easy now to utilize Early Hints with your Perfmatters preloads and Cloudflare.
How to enable Early Hints (Perfmatters and Cloudflare)
You must be using Cloudflare or a supported Cloudflare integration from your hosting provider for Early Hints to work. The good news is that all Cloudflare plans, including the free plan, have the Early Hints feature available. Follow the steps below to enable and configure Early Hints.
Step 1
In your Cloudflare account under “Speed → Optimization,” toggle on the Early Hints feature.
If you’re using a Cloudflare integration from your hosting provider, ensure they have the Early Hints feature available. For example, Kinsta has Early Hints available in MyKinsta.
If you aren’t using Cloudflare, there are other ways to make Early Hints work with Apache and Nginx (experimental module and proof of concept), but it isn’t easy at the moment. The good news is that this should improve over time, and we’ll most likely improve our support. But for the time being, Cloudflare is required.
Step 2
Click into the Perfmatters plugin settings.
Step 3
Toggle on “Show Advanced Options” in Perfmatters.
Step 4
Click on the “Preloading” menu.
Step 5
Toggle on “Cloudflare Early Hints.” This is currently in beta.
Step 6
You will then want to choose your Early Hint Types below.
Early Hint Types
We place an early hint automatically on any preloaded resource in Perfmatters. You can choose which types of resources you want this on, such as Fonts, Images, Scripts, or Styles.
Important things to consider:
- Any manual preload in Perfmatters will get an Early Hint.
- Any resource preloaded using the preload critical image feature in Perfmatters will get an Early Hint. However, responsive images (using imagesrcset, imagesizes, or media) is not supported using HTTP headers as the viewport is not defined until the document is created. This is simply due to how browsers work. We will skip adding Early Hint to these images.
Scroll down and click “Save Changes.”
How to test Early Hints
There are a couple of different ways you can test and confirm that Early Hints are working.
EarlyHints tool
You can use the free EarlyHints.dev tool. If Early Hints are detected, this should detect them.
DebugBear
If you want a better overview of your waterfall, you can use the free DebugBear website speed test. They will show the Early Hints attribute on your resources.
Chrome DevTools
You can also check in Chrome DevTools. If Early Hints are working, they will show up under the “Early Hints Headers” section.
If you “Disable Cache,” you can also see it under the “Type” column. It will as early-hints.
cURL
You can also use cURL to test for Early Hints.
curl -L -s -o /dev/null -D - https://yourdomain.comYou will see the 103 status code along with your Early Hints at the top.
