The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> html, objects preloaded but not used, and fetched twice
Sentinel166
post Mar 19 2023, 11:08 AM
Post #1


Novice
**

Group: Members
Posts: 21
Joined: 19-March 23
Member No.: 28,859



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 19 2023, 12:05 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Hi!

QUOTE(Sentinel166 @ Mar 19 2023, 05:08 PM) *

I have a netlify site

No experience with that, but usually such services create more trouble than they solve.

QUOTE
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

That sounds like your uploaded files (images etc) are stored on Cloudfront servers, otherwise they wouldn't show up on your website if the HTML uses Cloudfront URLs. In that case I suppose you could use the same Cloudfront URLs in the LINK preloads as well.

What I don't understand in that case is how "#####" URLs can still be preloaded, suggesting that they are stored on the "#####" server too? Could it be that netlify has some feature where files are copied (but not moved) to Cloudfront, and the URLs in the HTML are changed to Cloudfront as well, but this feature doesn't change LINK elements?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Sentinel166
post Mar 21 2023, 10:32 PM
Post #3


Novice
**

Group: Members
Posts: 21
Joined: 19-March 23
Member No.: 28,859



Ok, this is strange.
Now all my font preload work just fine (at least there's no complaint), and all but one images produce that message.
Of those:
CODE
<link rel=preload as="image" type="image/webp" href="history/favicons/symbole_perso_deux_arbres.png">
<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="wallpaper/space/Header_NA_potm2211a-h1dd3n_NASA.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" imagesizes="(max-width:604px) 100vw, 70vw">

the wallpaper preloads and does not produce any message. But visually, given that when reloading I still see the background loading AFTER the friggin text, I can tell that that damn tag doesn't work as intended. I want it be loaded before anything else !!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Mar 22 2023, 05:56 AM
Post #4


Advanced Member
****

Group: Members
Posts: 100
Joined: 25-December 22
Member No.: 28,719



First off preload brings "diminishing returns" past about 8 files. Depending on if the resources are on or off-site, adding more than that can in fact make the page SLOWER as you are in fact delaying parallelism.

Remember, even with preload -- hell even with HTTP 2 push -- NONE of the secondary files you try to load will start loading until after the HTML is complete. There is no trick to get around that limitation, so the more junk you have in the markup, the less useful preload is.

And to be frank, I find it troubling you feel the need to preload so many separate files in the first place. It bespeaks bad markup practices and bad design.

Though you kind of already admitted that when you mentioned the dirtbag scam artist "site builder" rubbish that is "Netify"... which by default likely means two to ten times the HTML needed to do the job, a failure to use media targets or separate concerns, and a general reek of "Eye cans haz teh intarwebs" development that no amount of silver bullets is going to fix.

Honestly to weigh in on what's going on problem-wise, I'd have to see the actual site. But from what you've shown so far, I'm seeing a lot of telltales that you might be better off junking the whole thing and starting over from scratch using HTML and CSS properly.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 22 2023, 02:33 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



I overlooked a couple of things in the threadstart:

QUOTE(Sentinel166 @ Mar 19 2023, 05:08 PM) *

all the local addresses for images (presumably videos too) are changed by netlify to something like:
https://e33labrfki0l98.cloudfront.net/97cd5...eux_arbres.webp

My browsers can't access cloudfront.net at all. unsure.gif

QUOTE
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.

FWIW, here are a few reasons for that error message:

QUOTE
* using preload (high-priority) when you meant prefetch (low-priority)
* removing a resource from a page, but not removing the corresponding preload tag
* preloading resources loaded by a third-party script, but then the third-party stops using that resource

(from https://www.debugbear.com/blog/rel-preload-...nused-resources )

Also:

QUOTE(Sentinel166 @ Mar 22 2023, 04:32 AM) *

I still see the background loading AFTER the friggin text, I can tell that that damn tag doesn't work as intended. I want it be loaded before anything else !!

Perhaps you could add the fetchpriority="high" attribute value: https://www.debugbear.com/blog/rel-preload-...-preload-images

But my guess here is simply that the browser downloads the HTML file (including the text) before the possibly larger preloaded background-image has finished downloading. Maybe a slow server makes this more noticeable. I'd assume the browser doesn't pause downloading the HTML file just to prioritize the LINK preloads it encountered in the beginning of the HTML file? Even if that is the case, perhaps most of the HTML has already finished downloading before the browser even had time to pause, and then it might as well render it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Sentinel166
post Mar 22 2023, 05:26 PM
Post #6


Novice
**

Group: Members
Posts: 21
Joined: 19-March 23
Member No.: 28,859



Now they all look like:
<link rel=preload as="image" type="image/webp" href="/history/favicons/symbole_perso_deux_arbres.png" blocking="render" fetchpriority="high">
And... no change.
Fonts are correctly rendered first, but not the rest.
Why is it so complicated to tell the browser: load AND render these elements before anything else ?
It is precisely the behavior that I want !
In fact I don't want any progressive display at all.
I want all the css and frames to be complete at once (minus lazy-loading pictures) plus the list of objects I explicited in <link rel=preload> tags.

This post has been edited by Sentinel166: Mar 22 2023, 05:30 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 22 2023, 07:48 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Sentinel166 @ Mar 22 2023, 11:26 PM) *

Now they all look like:
<link rel=preload as="image" type="image/webp" href="/history/favicons/symbole_perso_deux_arbres.png" blocking="render" fetchpriority="high">
And... no change.

I just meant for the page background (and even that was a long shot). Prioritizing everything may be the same as not doing it at all.

QUOTE
Why is it so complicated to tell the browser: load AND render these elements before anything else ?
It is precisely the behavior that I want !
In fact I don't want any progressive display at all.

Perhaps that can be done with e.g. scripting, but then users would have to look at a blank screen while the content loaded. Most likely many would lose interest while waiting.

But if you have a lean website and fast webhost everything will load in an instant, and preloading becomes unnecessary.

QUOTE
I want all the css and frames

Do you use iframes as well? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 22 2023, 08:08 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Sentinel166
post Mar 23 2023, 07:57 AM
Post #9


Novice
**

Group: Members
Posts: 21
Joined: 19-March 23
Member No.: 28,859



Ah sorry, not iframes, I meant borders outlines etc. So css and text basically. I'm not used to the correct terminology :-)
I don't like white screens anymore than a progressive rendering.
I want the browser to wait for all the preloaded elements (and html) have been fully loaded, then transition to the new page in one go. No white screen.
I don't know anything about scripting and try to limit it in a static website.

So there's just no way to tell the browser: Don't render anything until this (including a white screen) until this and that have been loaded?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 23 2023, 09:41 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Sentinel166 @ Mar 23 2023, 01:57 PM) *

Ah sorry, not iframes, I meant borders outlines etc. So css and text basically. I'm not used to the correct terminology :-)

Good! smile.gif

QUOTE
I don't like white screens anymore than a progressive rendering.

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? Maybe the bold and italic fonts could be left out of the preload, if you don't use any bold or italic text above the fold. Can the preloaded image files be compressed more?

Here are some more advanced ideas on optimizing/deferring CSS, that I've never tried:
https://www.giftofspeed.com/optimize-css-delivery/
https://www.giftofspeed.com/defer-loading-css/

(FWIW, at least back in 2006 browsers would render pages differently depending on browser engine: https://webkit.org/blog/66/the-fouc-problem/ --maybe they are more standardized today?)

QUOTE
So there's just no way to tell the browser: Don't render anything until this (including a white screen) until this and that have been loaded?

But what should the page display instead? The previous page? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Sentinel166
post Mar 24 2023, 02:25 PM
Post #11


Novice
**

Group: Members
Posts: 21
Joined: 19-March 23
Member No.: 28,859



QUOTE(Christian J @ Mar 23 2023, 09:41 AM) *

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 ?
QUOTE
But what should the page display instead? The previous page? unsure.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 24 2023, 09:34 PM
Post #12


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Sentinel166 @ Mar 24 2023, 08:25 PM) *

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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:35 PM