Option to Preload any CSS and JS file to address Preload key requests recommendation

[WordPresseur]

According to what Google explains here: https://developers.google.com/web/tools/lighthouse/audits/preload

WP Rocket only do this for CSS files when the Optimize CSS Delivery feature is enabled and, since v3.6 of WP Rocket, for font files.

But it happens that PageSpeed Insight points out JS or other CSS files and we have to advise to use another plugin to do that preload request.

Maybe we could have a Preload Files section from the Preload tab.

[webtrainingwheels]

• https://secure.helpscout.net/conversation/1361518628/221552/
• https://secure.helpscout.net/conversation/1352589957/218251/
• https://secure.helpscout.net/conversation/1327691416/208467/
• https://secure.helpscout.net/conversation/1325310810/207642/

[ScottTravisHartley]

Another note, most of the time i only get this notice if a client site is using @import to process a CSS file there was another issue pertaining to possibly adding support to process the @import request this might also clear the warning at least for the CSS files.

JS wise the only time I really get this is when a file is deferred say via cloudflare's rocket loader but is integral for some above the fold content most of the time its JQuery but there isn't necessarily a good way to resolve that one without adding support for preload in which case i do so via Perfmatters atm.

[socialpreneur]

Since minified file names are almost always different, it would be great if WP Rocket can auto add preload, but that option should be selectable by users. I also use perfmatters to set preload, but to do so, I always have to exclude the preload file from minification of WP Rocket.

[GeekPress]

The recommendation to preload CSS is only when the CSS file is inserted by a JS file.

This is exactly what is explained here:
https://developers.google.com/web/tools/lighthouse/audits/preload

Why?
Because the browser doesn't know it has to load this CSS file until to load the JS which will load the CSS file.

All CSS files already declared with a tag doesn't need to be preloaded. It's totally useless.

The CSS files need to be preloaded only when we are using CPCSS. It's the best way to avoid FOUC and the only reason to preload them.

All CSS is inserted into the header. It's already loaded in priority based on their implementation on HTTP1.

On HTTP2 CSS is loaded in priority by the browser. Even if the CSS is loaded synchronously.

This is why most of the time the Preload Key request is related to fonts. The fonts are declared into the CSS which isn't yet loaded/parsed by the browser. We have to indicate to the browser that files need to be loaded as soon as possible (before the browser could discover them).

From a user point of view, we can totally see the benefits of adding preload for assets. As the file is listed in the « Preload Key request », they want to fix that.

In the meantime, we should be careful to not have our users preloading all assets. My concern is this point: preloading everything and especially all JS files isn't a good thing to do. We must recommend our users to preload only CSS/JS files listed in the Preload Key request recommendations.

[GeekPress]

I'm closing this one in favor of #3539 which will provide an automatic solution for @import in CSS files.