Early Hints

Early Hints is a web standard you can implement to improve page load times by up to 30%. This web standard defines a new HTTP status code: 103 Early Hints.

When the Early Hints feature is enabled, and a visitor loads your site in a compatible browser, 103 responses are sent to the browser (before 200 responses) with information about linked assets that may appear in the final response from the server. With this information, the browser can begin preparing the page before it receives the 200 OK response from the server. This allows the browser to more efficiently prepare the page for loading while the server is “thinking.”

The Early Hints mechanism can be used with any type of Link header or resource hint, such as preload and preconnect. It helps improve web page performance by allowing browsers to start fetching or preparing resources before the final response is received.

As part of Kinsta’s Cloudflare integration, Early Hints can be enabled for your WordPress site in MyKinsta.

Preload and preconnect

Early Hints is primarily designed to work with resource hints such as preload and preconnect. It can be used to enhance the effectiveness of preload and preconnect by sending these hints to the browser as soon as the initial request is made.

• Preload: Indicates to the browser to load a resource as soon as possible. Early Hints sends preload hints to the browser early, allowing it to start fetching critical resources (e.g., CSS, JavaScript) immediately. This reduces render-blocking times and improves performance.
• Preconnect: Establishes early connections to important third-party origins. Early Hints sends preconnect hints early, allowing the browser to establish network connections (DNS lookup, TLS negotiation) ahead of time. This reduces latency when the actual requests are made, leading to faster page load times.

To use preload and preconnect effectively, you need to add specific link headers to the assets you want to mark for preloading. You can use a WordPress plugin to add preload or preconnect headers to your assets in WordPress, such as WP Rocket, Perfmatters, or Pre* Party Resource Hints.

Important notes

1. Your site will need to have the Link: response header with either the preload or preconnectrel type to indicate the resources you want to include in the Early Hints response. You can use a WordPress plugin to add preload or preconnect headers to your assets in WordPress.
2. The 103 Early Hints status code is compatible with the latest versions of Chrome, Edge, Safari, and Firefox. If a browser doesn’t support Early Hints and a 103 response header is sent to it, nothing will happen; the browser will simply ignore it.
3. If your site has more than 20 domains, enabling Early Hints may take 5 or more minutes, depending on the total number of domains.

Enable Early Hints

1. To enable Early Hints, log in to MyKinsta and go to WordPress Sites > sitename > Tools.
2. Under Early Hints, click the Enable button.

A notification that Early Hints is enabled will appear in the upper right corner.

Test Early Hints

To confirm Early Hints is working, inspect the HTTP headers of a page on your site, and look for any Link: headers with the rel type of preload or preconnect that you added. To inspect your site’s HTTP headers, you can use any of the following:

• Our free HTTP status and redirect checker.
• Your web browser’s built-in developer tools.
• The curl command in Terminal (command line), substituting the URL at the end of this example with the URL of the page you want to test:

curl -L -s -o /dev/null -D - https://kinstaexample.com

Disable Early Hints

1. To disable Early Hints, log in to MyKinsta and go to WordPress Sites > sitename > Tools.
2. Under Early Hints, click the Disable button.

A notification that Early Hints is disabled will appear in the upper right corner.