Early Hints not working (for Pages)

What is the name of the domain?

https://bigleads.com/index2

What is the issue you’re encountering

Early Hints should be auto generated from your HTML HEAD, and inserted into your HTTP headers. It’s not doing that.

What steps have you taken to resolve the issue?

Here is a summary of my problem and trouble shooting …

Problem:

Early Hints does not appear to be working.

Because it’s not being pulled automatically from <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/source-serif-400-900.woff2" type="font/woff2" crossorigin> tags in <head>

Note: it works if I manually put the Early Hint in my _headers file, like so: Link: </assets/fonts/source-serif-400-900.woff2>;rel=preload;as=font;type=font/woff2;crossorigin

The Problem Site:

a. My site is https://bigleads.com/index2

b. This is hosted on a paid version of Cloudflare Pages

c. In my index2.html, I have the following code:


<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/source-serif-400-900.woff2" type="font/woff2" crossorigin>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/caveat-400-700.woff2" type="font/woff2" crossorigin>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/carlito-400.woff2" type="font/woff2" crossorigin>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/carlito-700.woff2" type="font/woff2" crossorigin>

Troubleshooting:

To verify the presence of an Early Hint, I use 2 different routes:

I run the the following curl command and inspect the headers:
curl -X HEAD -I https://bigleads.com/index2

I use the online Early Hints checker found at https://earlyhints.dev/
Neither of which indicate the the Early Hints is in the header.

What my HTTP headers look like are as follows:

HTTP/1.1 200 OK

Date: Mon, 14 Oct 2024 02:29:58 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
Access-Control-Allow-Origin: *
Cache-Control: public, max-age=16070400, must-revalidate
content-security-policy: upgrade-insecure-requests; default-src ‘self’; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’; img-src ‘self’ data:; object-src ‘none’; frame-ancestors ‘self’
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: same-origin
permissions-policy: accelerometer=(),autoplay=(),camera=(),encrypted-media=(),fullscreen=*,geolocation=*,gyroscope=(),interest-cohort=(),magnetometer=(),microphone=(),midi=(),sync-xhr=*,usb=(),xr-spatial-tracking=()
referrer-policy: same-origin
x-content-type-options: nosniff
x-frame-options: DENY
x-permitted-cross-domain-policies: none
x-xss-protection: 1; mode=block
Report-To: {“endpoints”:[{“url”:“https://a.nel.cloudflare.com/report/v4?s=JcYlt3j70PB5ES6kQJRyY%2FZBXUcJw2MPOYB63r8ngRmBW2P0MXdf4eFEPK2fVyQqY0rSEtv0u%2BMLnBEamZ%2BZWkgHzjpeLDEKRqRBROQ9JcfiHv%2FJfjAx5okGgKWZNiw%3D”}],“group”:“cf-nel”,“max_age”:604800}
NEL: {“success_fraction”:0,“report_to”:“cf-nel”,“max_age”:604800}
Vary: Accept-Encoding
Speculation-Rules: “/cdn-cgi/speculation”
CF-Cache-Status: HIT
Age: 1064
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Server: cloudflare
CF-RAY: 8d24250deb41435c-EWR
Content-Encoding: gzip
alt-svc: h3=“:443”; ma=86400

Note: There is a missing 103 LINK http header

There should be in the header the following (but this is missing):

Link: </assets/fonts/source-serif-400-900.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
Link: </assets/fonts/caveat-400-700.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
Link: </assets/fonts/carlito-400.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
Link: </assets/fonts/carlito-700.woff2>;rel=preload;as=font;type=font/woff2;crossorigin

Caching:

I thought this might be a Caching issue, no. I have Purged all Cache and am in Development Mode.

Content Security Policy (CSP)

I thought this might be a CSP issue, no. Even when I completely remove my CSP directive in my _header

content-security-policy: upgrade-insecure-requests; default-src ‘self’; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’; img-src ‘self’ data:; object-src ‘none’; frame-ancestors ‘self’

I still do not see the presence of the Early Hint

Settings:

I thought this might be a settings issues, no. I have Early Hints enabled in Dashboard.

I’m really at a loss as to why Early Hints aren’t working - especially when I manually enter them into my header.

What are the steps to reproduce the issue?

curl -X HEAD -I https://bigleads.com/index2

(You’ll see that the ‘103 LINK’ HTTP header is missing)

Support

My Support Ticket # is 01228910