? Pending

User tests: Successful: Unsuccessful:

avatar dgrammatiko
dgrammatiko
23 Jul 2021

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

avatar dgrammatiko dgrammatiko - open - 23 Jul 2021
avatar dgrammatiko dgrammatiko - change - 23 Jul 2021
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 23 Jul 2021
Category Front End Templates (site)
avatar richard67
richard67 - comment - 24 Jul 2021

@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):

2021-07-24_css-preload_console-warnings

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:

2021-07-24_css-prefetch_network

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.

avatar richard67
richard67 - comment - 24 Jul 2021

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

avatar dgrammatiko
dgrammatiko - comment - 24 Jul 2021

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.

avatar richard67
richard67 - comment - 24 Jul 2021

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

avatar richard67 richard67 - test_item - 24 Jul 2021 - Tested successfully
avatar richard67
richard67 - comment - 24 Jul 2021

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.

avatar brianteeman
brianteeman - comment - 24 Jul 2021

@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

avatar dgrammatiko
dgrammatiko - comment - 24 Jul 2021

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

avatar ceford
ceford - comment - 24 Jul 2021

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.

avatar richard67
richard67 - comment - 24 Jul 2021

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.

avatar dgrammatiko
dgrammatiko - comment - 24 Jul 2021

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

avatar dgrammatiko dgrammatiko - change - 24 Jul 2021
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2021-07-24 19:27:59
Closed_By dgrammatiko
Labels Added: ?
avatar dgrammatiko
dgrammatiko - comment - 24 Jul 2021

This is wrong so I'm closing it

avatar dgrammatiko dgrammatiko - close - 24 Jul 2021

Add a Comment

Login with GitHub to post a comment