[4.0] Use preload instead of prefetch

[dgrammatiko]

Pull Request for Issue # .

Summary of Changes

Prefetch = load an asset for the next navigation (this is very low priority)
Preload = load an asset with higher priority for the current page

In short, proload is what is needed for the css (color, fonts)

Testing Instructions

Apply the patch or download the package from the github issue
Check that everything in the front end is as before

Do some lighthouse comparisons...

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Documentation Changes Required

No, this is just a fix for the wrong priority for assets

[richard67]

@dgrammatiko When we developed the Cassiopeia enhancements in that repo here https://github.com/joomla/cassiopeia , we changed from preload to prefetch to get rid of these silly warnings in the browser console (at least with Firefox, but I think I remember we had it e.g. with Chrome, too):

Your PR here brings back these warnings.

From my point of view the warnings are silly because the css for the colour theme and font scheme contain only css variables which for sure are for later and not immediate use, that's what they are good for.

But people wanted to get rid of these warnings (there was a discussion about that, I think I remember, but I don't find it right now), so I had changed from preload to prefetch here joomla/cassiopeia@d721e99#diff-e381873e39e66e5c2d3d2229b318113ca5aefcd6614746810e53aeef9818b521 , which then causes an additional request for each css file, see the 2nd green box in the next screenshot:

These 2nd requests don't appear when using preload.

So from my point of view this PR here is good and just these console warnings are silly, but I'm not an expert on such stuff.

[richard67]

@dgrammatiko So if you tell me we that my feeling is right and we can ignore those browser warnings, I will give a good test here.

[dgrammatiko]

So from my point of view this PR here is good and just these console warnings are silly

Browsers, like every other piece of software, often have bugs (thankfully not so many). This might be a bug in their dev tools or a wrong calculated signal. The point is that eliminating the extra request is the right thing to do and not trying to satisfy some tools (either dev tools or lighthouse or whatever).

I'll just quote the MDN docs (which are the human-readable HTML Specs) to point out that Prefetch is the wrong thing to use here.

Prefetch:

https://developer.mozilla.org/en-US/docs/Glossary/Prefetch First paragraph:

Prefetching is when content is downloaded in the background, this is based on the assumption that the content will likely be requested, enabling the content to load instantly if and when the user requests it. The content is downloaded and cached for anticipated future use without the user making an explicit request for it.

Preload:

https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload again First paragraph

The preload value of the element's rel attribute lets you declare fetch requests in the HTML's , 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. This ensures they are available earlier and are less likely to block the page's render, improving performance.

[richard67]

@dgrammatiko Thanks for explanation and links. The only thing I worry now is that some issues or PR might come in future due to these silly browser warnings.

[richard67]

I have tested this item ✅ successfully on ba33868

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34886.}

[brianteeman]

@dgrammatiko Thanks for explanation and links. The only thing I worry now is that some issues or PR might come in future due to these silly browser warnings.

They might be silly here but they are not always. I think we can guarantee bug reports about them

[dgrammatiko]

They might be silly here but they are not always. I think we can guarantee bug reports about them

Actually, we want to preload the actual font not the CSS files (that comment should be mine), so although this PR is eliminating the double requests it's not as well the proper solution. Will update it shortly...

[ceford]

I see one warning: The resource at “http://localhost/j4test/templates/cassiopeia/css/global/colors_standard.css” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34886.}

[richard67]

I see one warning: The resource at “http://localhost/j4test/templates/cassiopeia/css/global/colors_standard.css” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

@ceford The other one would be if you change the font scheme from "None" to a local or web font scheme in the template style settings of Cassiopeia.

[dgrammatiko]

FWIW there's an alternative (that uses preload correctly) #34890

[dgrammatiko]

This is wrong so I'm closing it