Search code examples
google-chromecloudflare

HTTP 103 Early Hints: How to diagnose if they are correctly set by Cloudflare and respected by Chrome?


For my cryptocurrency market data website

Link: </fonts3.css>; rel="preconnect", </_app/assets/start-6f5e0715.css>; rel="preconnect", </_app/assets/pages/__layout.svelte-f31b19cc.css>; rel="preconnect", </_app/assets/pages/index.svelte-84a34be8.css>; rel="preconnect"

Now, how do I verify that

  • Cloudflare is correctly generating HTTP/1.1 103 Early Hints. Can I display this information with curl or wget?

  • Chrome is respecting the early hint - where this is shown in the Performance tab of webr developer tools, or somewhere else?


Solution

  • I have no luck to verify Chrome's response from Chrome's devtool. When I monitor the network traffic, Chrome devtool does not show 103 responses at all. However, I am able to verify the server 103 responses using curl. Here is a curl output sample:

    $ curl -k -v --http2 https://evanella.org
    
    ...
    * Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
    * Using Stream ID: 1 (easy handle 0x7fa7a2009200)
    > GET / HTTP/2
    > Host: evanella.org
    > User-Agent: curl/7.64.1
    > Accept: */*
    >
    ...
    
    * Connection state changed (MAX_CONCURRENT_STREAMS == 100)!
    
    < HTTP/2 103
    
    < link: <https://evanella.org/>; rel=preload;
    
    < link: <https://evanella.org/wp-content/themes/twentytwentytwo/assets/fonts/SourceSerif4Variable-Roman.ttf.woff2>; rel=preload; as=font
    
    < link: <https://evanella.org/wp-content/themes/twentytwentytwo/assets/images/flight-path-on-transparent-d.png>; rel=preload; as=image
    
    < link: <https://evanella.org/wp-content/themes/twentytwentytwo/style.css?ver=1.1>; rel=preload; as=style
    
    < link: <https://evanella.org/wp-includes/blocks/navigation/view.min.js?ver=3776ea67846b3bb10fe8f7cdd486b0ba>; rel=preload; as=script
    
     ...
    
    < HTTP/2 200
    
    < server: h2o/2.3.0-DEV@998a7fb7b
    
    < content-type: text/html; charset=UTF-8
    
    < link: <https://evanella.org/wp-json/>; rel="https://api.w.org/"
    
    < vary: Accept-Encoding
    

    BTW, I configured my own webserver to generate the 103 early hints responses.