Say, I have a Google font request to load. Preconnect to origin with a CORS and preload the font is a best way to go about the performance aspect. Here's what I mean
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link
rel="preload"
as="style"
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&display=swap" />
Now, do I also need to specify crossOrigin for preload requests as well?
I have read on many good references for individual use cases of preconnect
and preload
but don't have surity over reasoning.
References -:
- https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/
- https://crenshaw.dev/preconnect-resource-hint-crossorigin-attribute/
According to the second article, crossorigin means
what kind of assets will be downloaded from that origin. If the assets use CORS, crossorigin is needed
Also, it mentions that CORS request is on a separate thread. So, my question is that if preconnect resource hint establishes a DNS, TLS, SSL by specifying the kind of request - CORS or non-CORS, then will following preload request exchange data ( fonts here ) on same thread, in that case I can reason out that I don't need to use crossorigin again. If not, I feel we should specify the crossorigin hint for optimal loading.
What do you guys think?
Aucun commentaire:
Enregistrer un commentaire