User tests: Successful: Unsuccessful:
Pull Request for Issue # .
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)
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...
No, this is just a fix for the wrong priority for assets
Status | New | ⇒ | Pending |
Category | ⇒ | Front End Templates (site) |
@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.
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.
@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.
I have tested this item
@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
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...
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.
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.
Status | Pending | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-07-24 19:27:59 |
Closed_By | ⇒ | dgrammatiko | |
Labels |
Added:
?
|
This is wrong so I'm closing it
@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.