MenheraBot/MenheraSite

Feat: Add early hints to assets

Closed this issue · 4 comments

ySnoopyDogy commented
Feat: Add early hints to assets
narayand16 commented

@ySnoopyDogy I am interested in taking this up. Can you provide more info on adding early hints to assets ?

ySnoopyDogy commented

Heyy, thanks for your interest
Basically cloudflare released early hints in beta
What i want to do is to implement early hints in all assets, within the link component

Sites that may help

Cloudflare Email

Hello Luxanna,

We are thrilled to welcome you into the Early Hints beta! We announced Early Hints a couple weeks ago in a blog post and since then interest in our approach has been strong. Early Hints works by providing and caching “hints” to browsers via Cloudflare before your origin server sends the full 200 OK response. These hints allow for the browser to begin loading assets while the server is compiling the full response. This can dramatically improve page load times. We’re excited for you to test this and see the benefits for yourself!

How to use Early Hints:
In order to use Early Hints, you must ensure that the preload and/or preconnect rel types are set in the Link header on the assets you would like the browser to load early via Early Hints.

Example response header:
Link: <https://example.com>; rel=preconnect, <https://example.com>; rel=preconnect; crossorigin, <https://example.com/files/1/23456/78/90/assets/theme.css>; rel=preload, as=style;

There are numerous ways to set these rel types in the Link response header on your origin or even via Cloudflare workers. Following this:
  1. Sign in to your Cloudflare Account
  2. In the dashboard, navigate to Speed tab
  3. Click on the Optimization section
  4. Locate the Early Hints beta sign up card and make sure that it is enabled.
As a reminder, Chrome version M94 or higher is required for Early Hints to actually load on the browser. Also, Chrome will not support Early Hints on HTTP/1.1 (or earlier protocols) nor will Early Hints work on subresource requests.

Here are two ways to test and enable Early Hints:
  • Using Chrome Browser Flags in the Command Line
    • Early Hints support is available in Chrome by running (assuming a Mac, but the same flag works on Windows or Linux):
      • open /Applications/Google\ Chrome\ Dev.app --args --enable-features=EarlyHintsPreloadForNavigation
  • 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 rerun the test in another window without this flag and Early Hints won’t be enabled.
        • Keep in mind that Early Hints will work best for uncached/dynamic assets.
For additional information please review the blog.

Thank you,

Cloudflare
Tsugami commented

it's necessary?

ySnoopyDogy commented

No.

I made this when i was in hype of Cloudflare, but the website dont even use cloudflare, so its not needed