Cloudflare has introduced Smart Hints to eliminate the need for manual configuration of Early Hints and Fetch Priorities, By leveraging Cloudflare's network, Smart Hints streamline the optimization process and aim to provide performance improvements without requiring manual configuration.
Cloudflare introduced Early Hints a year ago, enabling web servers to send instructions to browsers while preparing the complete response. It involves sending an informational response with an experimental 103 Early Hints status code, which includes hints about the resources required to render the page. When a client sends a request to a server, the server can respond with an "early hint", which is a separate response containing headers pertaining to the final response. These headers may include important static objects that can be fetched in advance and links pointing to related resources. This proactive approach allows browsers to preload assets or preconnect to third-party servers, resulting in faster webpage loading times. In lab experiments, improvements in load times exceeded 30%, and Cloudflare has sent trillions of hints on behalf of thousands of websites.
Web browsers have their own prioritisation mechanisms for fetching resources. However, developers can override these default priorities using Fetch Priorities. By assigning priority levels, such as highest, high, medium, and low, to individual resources through HTML or JavaScript, developers gain control over the sequence in which resources are fetched and loaded. This allows them to prioritise essential resources, such as critical scripts, ensuring they are fetched and loaded early to enhance the perceived performance of the webpage. It's crucial to conduct thorough testing to effectively utilise Fetch Priorities without inadvertently compromising the overall performance of the webpage.
To effectively utilise Early Hints and Fetch Priorities, website owners must configure HTTP link headers or HTML link elements to specify assets or the third-party servers that should be preconnected. Doing this requires a deep understanding of how the website interacts with browsers and the ability to identify render-blocking assets. In addition, website owners need access to the origin server to configure Early Hints here. Cloudflare's Smart Hints simplifies this process by automatically determining the best asset priorities at the CDN.
Smart Hints leverages Cloudflare's vast network and data collected from synthetic testing and real user measurements (RUM). Synthetic testing involves loading webpages in controlled environments, while RUM collects performance data from real users on real browsers by injecting a small piece of JavaScript into the webpage. By analysing loading bottlenecks, Cloudflare generates Smart Hints to prioritise downloading render-blocking resources. Additionally, Cloudflare plans to explore using learning models and heuristics to enhance website performance for websites without RUM or synthetic testing.
Cloudflare will conduct large-scale beta tests of Smart Hints to ensure optimal performance decisions for various content types. Cloudflare encourages website owners and developers to join the beta cohort and contribute to shaping this no-code/configuration experience. By signing up for the closed beta, participants can help Cloudflare optimise page load times and provide valuable feedback to refine the Smart Hints feature.