Early Hints | Need More Data Before Switching Over

Aviator · January 6, 2022, 6:41pm

Good Day!

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

Specifically:

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

(2) It appears Early Hints is 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.?

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

Hopefully, Cloudflare already has the above info - or - will create and publish it (with future revisions, as needed).

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.

Useful Tip (for Cloudflare Developers): Cloudflare’s Speed Overview test results do not currently suggest if Early Hints would help speed up our website. We truly believe your Speed analysis engine (code) needs to be updated to show suggestions that would help accelerate our website using Cloudflare’s features, such as Early Hints, Brotli, Turbo, Mirage, etc. Currently, the test results are based on the current set-up and does not provide any suggestions.

Thank you!

References:

(1) https://blog.cloudflare.com/early-hints/
(2) https://developers.cloudflare.com/cache/about/early-hints
(3) Has anyone tested Early Hints on their Site?

Judge · January 6, 2022, 9:03pm

https://chromium.googlesource.com/chromium/src.git/+/refs/heads/main/docs/early-hints.md

As of version 95, Chrome experimentally supports Early Hints. Early Hints enable browsers to start preload before the main response is served. In addition, this can be used with other Resource Hints APIs like preconnect.

Currently Chrome is running A/B testing in the field to evaluate the performance impact of Early Hints. Chrome also provides some ways to opt-in Early Hints for web developers who want to try the feature. This document describes the status of the current implementation and how to enable Early Hints support.

If you want to test the performance yourself (presumably with lighthouse unless your test tool supports connecting via a remote chrome instance), make sure you test with Chrome 95 and the command-line launch option specified in the chrome docs. I’d recommend against opting into the origin trial for anything other than a staging/test domain as you don’t want to encounter a bug in the implementation and have your site broken for your visitors.

M4rt1n · January 6, 2022, 11:12pm

Hello again @Aviator

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:

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

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

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.

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.

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

I can’t verify if you have implemented Early Hints correct. (on your server)
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!
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.
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.
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 · January 6, 2022, 11:44pm

@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 · January 6, 2022, 11:53pm

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 · January 6, 2022, 11:59pm

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 · January 7, 2022, 12:24am

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 · January 7, 2022, 12:30am

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

Aviator · January 7, 2022, 12:33am

@M4rt1n,

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

Thanks!

Aviator · January 7, 2022, 12:35am

@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 · January 7, 2022, 12:37am

Quickly wanted to add the source: 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: https://blog.cloudflare.com/early-hints/

Testing Early Hints with Web Page Test

Open webpagetest.org (a free performance testing tool).

Specify the desired test URL. It should have the necessary preload/preconnect rel types in the Link header of the response.

Choose Chrome Canary (or any Chrome version higher than 94) for the browser

Under advanced settings , select Chromium .

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 · January 7, 2022, 12:41am

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 · January 7, 2022, 12:48am

@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 · January 7, 2022, 1:01am

Looking forward to it. Thanks!

Aviator · January 7, 2022, 1:11am

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 · January 7, 2022, 1:18am

Nope

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 · January 7, 2022, 3:03am

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 · January 7, 2022, 6:41pm

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 · January 7, 2022, 6:50pm

Thanks, I appreciate the feedback.

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.

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.

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.

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 · January 7, 2022, 7:10pm

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