html, objects preloaded but not used, and fetched twice Options

[Sentinel166]

Hi,

Hi, I have a netlify site, with a domain name I bought, and I noticed that I just can't make preloading works. Or rather the files are all preloaded as asked but not actually used... so they're fetched twice I suppose. I think I know what causes this but not how to solve it.
Sorry but I can't disclose the URL, for security reasons. I hope you'll understand.
What I can say though, is that while my URL looks like verysignificantname.org (refered to as #### below) all the local addresses for images (presumably videos too) are changed by netlify to something like:
https://e33labrfki0l98.cloudfront.net/97cd5...eux_arbres.webp
So the domain name changes... the miracles of cloud servers.
Thing is as you here:

CODE

<link rel=preload as="image" type="image/webp" href="/symbole_perso_deux_arbres.webp">
<link rel=preload as="image" href="/svg/menu.svg">
<link rel=preload as="image" href="/svg/toc.svg">
<link rel=preload as="image" type="image/webp" href="/Images/wallpaper/space/messier78bis-reduced.webp">
<link rel=preload as=image imagesrcset="/Images/spirituality/mythology/modern/warcraft/ new_cover_warcraft_hue1da11df08ad4ace5b3ba148baef5363_411026_200x0_resize_q75_h2
_box_2.webp 200w,/Images/spirituality/mythology/modern/warcraft/ new_cover_warcraft_hue1da11df08ad4ace5b3ba148baef5363_411026_549x707_resize_q75_
h2_box_2.webp 549w, /Images/spirituality/mythology/modern/warcraft/new_cover_warcraft.webp 700w" imagesizes="(max-width:604px) 100vw, 70vw">
<link rel="preload" as="font" href="/fonts/roboto-bolditalic.ttf" type="font/ttf" crossOrigin="anonymous">
<link rel="preload" as="font" href="/fonts/roboto-bold.woff2"type="font/woff2" crossOrigin="anonymous">
<link rel="preload" as="font" href="/fonts/roboto-italic.woff2" type="font/woff2" crossOrigin="anonymous">
<link rel="preload" as="font" href="/fonts/norse-bold.woff2" type="font/woff2" crossOrigin="anonymous">
<link rel="preload" as="font" href="/fonts/roboto-regular.woff2" type="font/woff2" crossOrigin="anonymous">

ALL of these fail, crossorigin or not. All the references are relative, so since #####//Images/spirituality/mythology/modern/warcraft/ new_cover_warcraft_hue1da11df08ad4ace5b3ba148baef5363_411026_200x0_resize_q75_h2
_box_2.webp (for instance) is still valid why does the browser not understand that the weird cloudfront address I'm stuck with is the same ?
See chromium's complaints (firefox does the same):

CODE

The resource at “#####/symbole_perso_deux_arbres.webp” preloaded with link preloading was not used after a few seconds. Make sure all preload tag attributes are set correctly.
The resource at "#####/svg/menu.svg" preloaded with link preloading was not used after a few seconds. Make sure all preload tag attributes are set correctly.
The resource at "#####/svg/toc.svg" preloaded with link preloading was not used after a few seconds. Make sure all preload tag attributes are set correctly.
The resource at "#####/Images/wallpaper/space/messier78bis-reduced.webp" preloaded with the link preloader was not used after a few seconds. Make sure all preload tag attributes are set correctly.
The resource at "#####/fonts/roboto-bolditalic.ttf" preloaded with link preloading was not used after a few seconds. Make sure all preload tag attributes are set correctly.
The resource at "#####/fonts/roboto-italic.woff2" preloaded with link preloading was not used after a few seconds. Make sure all preload tag attributes are set correctly
The resource at "#####/fonts/norse-bold.woff2" preloaded with link preloading was not used after a few seconds. Make sure all preload tag attributes are set correctly.
The resource at "#####/fonts/roboto-regular.woff2" preloaded with link preloading was not used after a few seconds. Make sure all preload tag attributes are set correctly.

Thanks, it annoys me a lot, slowing the site down significantly

This post has been edited by Sentinel166: Mar 19 2023, 11:09 AM

[Sentinel166]

Perhaps you could reduce the number of prioritized files? For example, do you really need to preload all five font files for the first "above the fold" view?

Actually yes, they often are immediately visible to the reader. Those fonts aren't heavy, and the pictures are light and optimized already. The issue is not the time taken, but the fact it doesn't display the way I want. So you're saying I just can't get that behavior in a straightforward way. What's the point of attributes like blocking="render" ? Stating exactly what I want, yet not doing it ?

But what should the page display instead? The previous page?

Yes ? until everything I deemed and explicited as "urgent" has been loaded. Then those "urgent" elements, and the css, are to appear at once, with no transition.

[Christian J]

What's the point of attributes like blocking="render" ? Stating exactly what I want, yet not doing it ?

My understanding of the HTML5 spec is that it blocks rendering while a CSS file is loaded, but maybe not while the images or font files specified in that CSS loads. But perhaps you can make images render-blocking too by using Data URIs instead of image files, since the image data will be part of the actual CSS file then. No idea if it works, or if it's a good idea. See also https://css-tricks.com/data-uris/