Early Hints | Need More Data Before Switching Over

[M4rt1n]

Hello again @Aviator

@Aviator

Can someone share more information about Early Hints? (other than what’s already published)

These Community links will take you on a little trip since Early hints has been announced and provide you with some more info on how to implement them:

1. HTTP/2 Push / Wordpress not working - #2 by M4rt1n
2. Google Developers intent to remove HTTP/2 Push - #2 by M4rt1n
3. Support for status code 103 "Early hints" - #5 by M4rt1n
4. Support for status code 103 "Early hints" - #7 by LucasCF

They also point out some limitations / bugs.
Have a good read.

@Aviator

(1) We would like to see a comparison table showing the loading speed of websites with: Early Hints ON, Early Hints OFF, Theme Used, CMS Used, PHP Used, Workers ON, Workers OFF.

Well, I don’t know any of these comparisons. But feel free to set up any test page, that loads natively very stable. Then duplicate it and implement Early Hints, then test. Feel free to share them here

@Aviator

(2) It appears Early Hints are not yet recognized by several browsers. Can someone lead us to a table showing what browsers currently support Early Hints and which one’s don’t, future support plans, etc.?

Well, actually that should not be interesting at all, since Early Hints do not hat ANY disadvantages. Means, if a browser does not support them, it just ignores this header and will just load the page as if there are no Early Hints. That’s good and makes this knowledge completely redundant since no disadvantages if not supported.

@Aviator

(3) Does Early Hints support all image and icon types? (e.g., jpg, png, webp, avif, ico, woff, woff2, etc)

Yes and no. Yes, it supports ALL file-types, and it does not support ANY file-type. Why?
Early Hints don’t need to know what this file it. They don’t care. They just hint, that you will later need this file. As what mime-type then will be defined it the native old way. Early Hints can hint ALL files. Even the ones with no file extension at all.

@Aviator

Please Note: Early Hints (turned ON) did not produce any noticeable performance benefits for us. We are using Cloudflare Workers, SiteGround (SG Optimizer), and PHP 7.4.27. Testing performed via webpagetest.org using different servers around the globe.

I think we have to set some things straight before discussing this. Therefore, I would like to quote myself:

@M4rt1n

Thanks for sharing the bug with the type attribute. The actual reason I actually posted this was because Cloudflare wrote so many blog posts about how nice it is that it now supports Early Hints, but nowhere was written how to implement it. No word mentioned on what header must be set in what way. Also, there till today is no tool to verify the functionality of Early Hints. At least, I am not aware of any, even outside of Cloudflare.

1. I can’t verify if you have implemented Early Hints correct. (on your server)
2. Till now, there is no public tool to verify they work. Specially a shame, Cloudflare advertises being able to activate them, but is not able to provide any tool to validate that independently. Nothing!
3. Even if you implemented them correct and Cloudflare is responding with the correct response, I don’t know if your browser does support it or not.
4. Even if all above things are positive and given. If your page loads unstable, you will not be able to measure it since the fluctuation of your site is currently way too high.
5. ATM I do not see any Early Hints at: https://www.omniaaerospace.com/

Therefore, you should understand what Early Hints do: they tell the visitors’ browser which files they need later, and this at a time, where the visitors’ browser normaly could not know that already, so the benefit is: resources are requested earlier and when needed can be used immediately and don’t need to be requested first.

Care which files you are Early Hinting and which not. Also notice my post here: Support for status code 103 "Early hints" - #8 by M4rt1n which calls out a “logical problem” of Early Hints which already occurred at it’s predecessor “HTTP/2 Push”. This in some scenarios could slow down your site compared to not having any early hint. But this would be another topic.

Please also notice, that most of your questions are general “Early Hint” questions, not Cloudflare specific ones.

[Aviator]

@Judge,

Thanks for the info. We will definitely follow your suggestion, plus, research a bit more how Early Hints is (or are) handled by all other browsers.

I’m sure there’s detailed info out there somewhere, just not collated in one place. Hence, the reason for our original inquiry.

Cheers!

[cscharff]

This sounds like a fun project. Do you have a particular site in mind to be tested? My team’s consulting rate is $350 an hour, I expect for a small / mid sized site we could do a detailed analysis for 2 regions in probably 8-10 hours based on what I’ve read here.

Let me know if you’d like to put together a formal quote & contract.

[Aviator]

We meet again @M4rt1n

Thanks for your information. Since Early Hints is in Beta stage and most browsers do not yet support it, we have turned it OFF in Cloudflare. As stated before, our tests demonstrated there’s no real gain or performance advantage for us at this point.

As Early Hints matures, receives full browser support, and is removed from Beta stage, we’ll definitely turn it back ON.

PS: Received your contact info. Will be in touch (offline) early next week.

Cheers!

[Aviator]

Hi @cscharff,

Ha! Great reply. Yeah, go ahead and test https://www.cloudflare.com. I’m sure their budget is plentiful and able to cover your fees.

Honestly, Cloudflare should already have the data, it’s just a matter of condensing and publishing it when time permits. No biggie for us. Early Hints happens to be an interesting topic, so here we are chatting about it.

Funny thing … just now … we queried cloudflare’s website header and it doesn’t appear to be using Early Hints (Status Code 103 not found nor shown).

Cheers!

[M4rt1n]

@Aviator

Status Code 103 not found nor shown

The 103 code turns into a 200 after completed. Therefore it (AFAIK) will not be seen in the Dev Console.

[Aviator]

@M4rt1n,

So, how can we determine it’s activated and working? Is this the point you were trying to make earlier?

Thanks!

[Aviator]

@M4rt1n,

Till now, there is no public tool to verify they work. Specially a shame, Cloudflare advertises being able to activate them, but is not able to provide any tool to validate that independently. Nothing!

Yep, this is the point you were trying to make. Cheers!

[M4rt1n]

Quickly wanted to add the source: Chromium Docs - 103 Early Hints

Yes, thats the point, we can see some performance gains. But how to we easily determin its working? I dont know yet. But how to see the gains is described here: Early Hints: How Cloudflare Can Improve Website Load Times by 30%

Testing Early Hints with Web Page Test

1. Open webpagetest.org (a free performance testing tool).
2. Specify the desired test URL. It should have the necessary preload/preconnect rel types in the Link header of the response.
3. Choose Chrome Canary (or any Chrome version higher than 94) for the browser
4. Under advanced settings , select Chromium .
5. At the bottom of the Chromium section there’s a command-line section where you should paste Chrome’s Early Hints flag: --enable-features=EarlyHintsPreloadForNavigation.

• To see the page load comparison, you can remove this flag and Early Hints won’t be enabled.

For me thats proof of it works, but not “good enough” bth. I wish there would be a tool, or a CLI/command line code (something with CURL etc…) that would validate the 103 code. But maybe it’s to easy that I miss it.

And yes, thats the point I was making.

[M4rt1n]

Yes … indeed. I was to stupid … lol

Too easy to validate. I actually tested something like this before but probably was just overseeing it.

try: curl -X HEAD -I https://your.website.de

It looks like this to me:

HTTP/2 103
link: </assets/poppins-400-normal.woff2>; as=font; crossorigin; rel=preload, </assets/montserrat-800-normal.woff2>; as=font; crossorigin; rel=preload, </assets/app.min.css>; as=style; rel=preload, </assets/patrickheldmayer_lossy.webp>; as=image; rel=preload

HTTP/2 200

Maybe it even was because of the bug @LucasCF mentioned HERE, since I had the type attribute active.

EDIT:

I will build a simple Webapplication which will verify if a site supports Early Hints or not. Since I dont know any open/publicly available easy tool that does that.

[Aviator]

@M4rt1n,

Thank you. We’ll follow the test instructions provided by Cloudflare when we have time. Too much work at this point. An online tester dedicated to detecting the presence of a Status Code 103 would be cool.

… which takes us to the “Useful Tip (for Cloudflare Developers)” provided above. Another nice little project for Cloudflare’s engineers

[Aviator]

@M4rt1n

EDIT:

I will build a simple Webapplication which will verify if a site supports Early Hints or not. Since I dont know any open/publicly available easy tool that does that.

Looking forward to it. Thanks!

[Aviator]

@M4rt1n

The 103 code turns into a 200 after completed. Therefore it (AFAIK) will not be seen in the Dev Console.

Out of curiosity, did you test https://www.cloudflare.com and/or https://community.cloudflare.com using your method(s) to see if they’re using Early Hints?

Cheers!

[M4rt1n]

@Aviator

https://www.cloudflare.com

Nope

@Aviator

https://community.cloudflare.com

Nope. But you could have seen this way more easy. they do not have any “link” header qhich are required to make it work.

About the Clouflare community site:
The community forum is based on Discourse which and since the application need to initiate it I do not expect Cloudflare to have it enabled there. Feel free to open a Feature Request there.

About the Clouflare homepage:
never expected it to have it enabled. I think they will just enable features which are considered stable. Since I have never heard about Early Hints beeing unstable I consider it beeing stable. But since Cloudflare itself has defined this feature as “Beta” I did not expect them to have it enabled on their main page.

[M4rt1n]

@M4rt1n

EDIT:

I will build a simple Webapplication which will verify if a site supports Early Hints or not. Since I dont know any open/publicly available easy tool that does that.

The tool is finished. BUUUUUUT. I discovered a bug on Cloudflares Early Hint implementation when using “Cache Everything” or in general against a Cached HTML URL.
Cloudflare’s implementation seems not so stable and therefore it does not always trigger the Early Hints. (its Beta and now I know why)

I also made sure its not because of my tool and verified it is not. I tested multiple Cloudflare pages with Early Hints activated and multiple Fastly pages with Early hints activated.

Result:

Early Hint Provider	Testlink	% correct
Cloudflare (dyn)	https://code103.hotmann.de/	~98%
Cloudflare (cache)	https://www.heldmayer.com/	~70%
Fastly	https://early-hints.fastlylabs.com/	100%

So if you are behind Cloudflare please just run it multple times. Once passed the test is proof of supporting Early Hints, even with this bug. Yes this bug could affect everyday “Early Hint performance”.

HERE you go: https://code103.hotmann.de/

Its a little ugly … but so am I

[Aviator]

Hi @M4rt1n,

Thank you so much for the tool. I’m sure Cloudflare appreciates your efforts. We do!

We’ll test it in the next few days. And yes, we noticed that with Cache Everything and Early Hints activated, at random, our pages behave somewhat erratically (e.g., FOUC, lag, etc.).

The other item to consider is that many folks use SiteGround’s SG Optimizer plugin which offers Full Page Caching via Cloudflare. As you may know, SiteGround is a Cloudflare Partner. So, with Full Page Caching activated (i.e., Workers), we expect to experience the same (or similar) issue you reported above.

And last, if Cloudflare’s implementation of Early Hints (with Cache Everything) is not all that reliable, the question we must also ask is … will this affect a website’s SEO/SERP results long term?

Will advise next week on our test results.

Have a safe, joyous weekend.

[M4rt1n]

@Aviator

Thank you so much for the tool. I’m sure Cloudflare appreciates your efforts. We do!

Thanks, I appreciate the feedback.

@Aviator

we noticed that with Cache Everything and Early Hints activated, at random, our pages behave somewhat erratically (e.g., FOUC, lag, etc.)

I never encountered and FOUC or lag because of Cloudflare’s Cache. I think this must have a different source of origin then Cloudflare’s Cache.

@Aviator

The other item to consider is that many folks use SiteGround’s SG Optimizer

TBH I dont know any, beside you. Since this is a SG exclusive plugin and also a WP exclusive plugin I think its fair to say, that its target group is somewhat limited. I at least dont know a lot about it. Can just repeat, that its not doing a very good job a optimizing CSS.

@Aviator

And last, if Cloudflare’s implementation of Early Hints (with Cache Everything) is not all that reliable

As @LucasCF correctly pointed out HERE

Early Hints may be emitted less frequently on requests where the content is cacheable. Cloudflare CDN is more likely to retrieve a response header before the asynchronous Early Hints lookup finishes if the response has been cached. Cloudflare will not send a 103 response if the main response header is already available.

it is a expected behaviour which I was not aware of. But I anyway think its bad practive and it does not make the web more consistent, or the response predictable. I would love to do my own tests to see if there are any disadvantages of always triggering the 103 if activated. In any case I think that should be an option. Maybe for higher plans like Biz, Ent so they can choose if they want this or not. Fastly at least is always triggering a 103 and I dont see any problem with this so far. But I did not understood yet, why Cloudflare is going this way, maybe I will understand in the future.

@Aviator

will this affect a website’s SEO/SERP results long term?

I hope it does positively ofc. Since I also do not see any downside of it right now. At least I dont have any data to support one or the other way of doing it. But I will try to dig a little deeper and try to make my own tests if possible.

[Aviator]

@M4rt1n

TBH I dont know any, beside you. Since this is a SG exclusive plugin and also a WP exclusive plugin I think its fair to say, that its target group is somewhat limited. I at least dont know a lot about it. Can just repeat, that its not doing a very good job a optimizing CSS.

SG Optimizer is not the culprit (confirmed). We are combining and preloading CSS assets via their plugin. Without combination and preloading, we’re still experiencing CSS render-blocking issues caused mainly by a banner plugin we’re using (WPFront Notification Bar), Gravity Forms, and Avada. We can live with the CSS render-blocking issues for now. Our website performance is decent at this point.

Anyway, don’t want to distract folks from our main topic here so back to Early Hints

[LucasCF]

The property that matters is returning the Link header field at the earliest opportunity to the client. Whether that occurs an an 103 Early Hint or a 200 is not important for how clients act on the the value. So while it might appear more consistent to strictly order 103 before 200, if that comes at the cost of delaying the 200 then it is not a positive improvement,