Menu
I read the link preload documentation. In the head section of the html, I have
<link rel="preload" href="/css/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font">
Later on, I load a font.css file wherein it is loaded exactly the same font file (check the url):
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: local('Nunito Regular'), local('Nunito-Regular'), url("/css/fonts/XRXV3I6Li01BKofINeaB.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
But Chrome console gives warning
The resource https://autocosts.work/css/fonts/XRXV3I6Li01BKofINeaB.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate
asvalue and it is preloaded intentionally.
And indeed the browser loads the same file twice (1st and 3rd lines refer exactly to the same file)!
How to make preload work by avoiding file loading duplication?
734
In summary, without font preloading, you might run into a situation where a browser is ready to load your site's text, but it can't because the font isn't available yet. That is, it needs to download the font before it can paint the text.
The preload value of the <link> element's rel attribute lets you declare fetch requests in the HTML's <head> , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in.
Preloading JavaScript files # Because browsers don't execute preloaded files, preloading is useful to separate fetching from execution which can improve metrics such as Time to Interactive. Preloading works best if you split your JavaScript bundles and only preload critical chunks.
Preloading your CSS (and other external resources) helps the page load quicker. When you're using preload, you're moving the CSS load to after the window. load event, meaning the rest of the page can load as well as the CSS. This change might not be noticeable on small websites with small stylesheets.
I solved the issue adding type="font/woff2" crossorigin="anonymous"
<link rel="preload" href="/css/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Fonts are indeed a special case
If you've got your sites' CORS settings worked out properly, you can successfully preload cross-origin resources as long as you set a crossorigin attribute on your element.
One interesting case in which this applies even if the fetch is not cross-origin is font files. Because of various reasons, these have to be fetched using anonymous mode CORS (see Font fetching requirements if you are interested in all the details).
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With