So, I figured the next best thing to make the CSS non-render blocking will be to preload it through the link rel=’preload’ tag but unfortunately I have no idea how to do that.
why not simply use the “inline & defer CSS” option (see the AO FAQ for more info)?
Thread Starter
WPBot
(@wpbot)
I’ve already tried it a few days ago but for some reason the results were actually worse.
The CSS wasn’t render-blocking anymore but FCP and LCP were higher on mobile.
On the other hand when I tried using the “HTTP2 push content” plugin (which also supports preload in <head> but isn’t compatible with AO’s generated files) with disabled AO caching I got better results, so I figured if I preload only 2 or 3 files instead of 15 it might be even better.
The CSS wasn’t render-blocking anymore but FCP and LCP were higher on mobile.
that implies you did not enter (good enough) “above the fold CSS” .. :-/
I preload only 2 or 3 files instead of 15 it might be even better.
well, you could hook into the autoptimize_filter_css_bodyreplacementpayload filter I guess, which holds the optimized CSS just before it is re-injected in the HTML?
Thread Starter
WPBot
(@wpbot)
Sorry, but I’m a bit confused.
I couldn’t find anything about it on Google and managed to find it used in only 4 lines in autoptimizeStyles.php and all of them were in combination with $this->inject_in_html (which I doubt I can use from the theme’s functions.php), so I have no idea how to use it.
Could you give me an example or at least let me know if using it like below is correct and what argument(s) will the function preload_css get?
function preload_css($arguments???){
//link tags get generated here
}
apply_filters('autoptimize_filter_css_bodyreplacementpayload','preload_css');
don’t have time to write/ test an example I’m afraid, but what you would do would be something like along these lines;
function preload_css( $css_tag ) {
$preload_css_tag = $css_tag;
$preload_css_tag = str_replace( 'rel="stylesheet"', 'rel="preload"', $preload_css_tag );
// you'll also have to add an as attribute in $preload_css_tag
$css_tag = $preload_css_tag . $css_tag;
return $css_tag;
}
apply_filters( 'autoptimize_filter_css_bodyreplacementpayload', 'preload_css' );
Thread Starter
WPBot
(@wpbot)
Thank you but for some reason nothing happens when I use this filter.
I’ve tried the following code but nothing is added to the HTML and the error log is always empty (the path to the file is correct and the permissions too).
function preload_css( $css_tag ) {
$preload_css_tag = $css_tag;
$preload_css_tag = str_replace( 'rel="stylesheet"', 'rel="preload" as="style"', $preload_css_tag );
$css_tag = $preload_css_tag . $css_tag;
error_log("test message to confirm the function works\n", 3, '/var/www/css.log');
return $css_tag;
}
apply_filters( 'autoptimize_filter_css_bodyreplacementpayload', 'preload_css' );
my mistake; apply_filters should be add_filter .. 😁
Thread Starter
WPBot
(@wpbot)
Thank you, it was actually my fault… I have no idea where I got this apply_filters from…
The code works now, here’s the final piece in case someone else needs it:
function preload_css( $css_tag ) {
$preload_css_tag = $css_tag;
$preload_css_tag = str_replace( 'rel="stylesheet"', 'rel="preload" as="style"', $preload_css_tag );
$css_tag = $preload_css_tag . $css_tag;
return $css_tag;
}
add_filters( 'autoptimize_filter_css_bodyreplacementpayload', 'preload_css' );
btw, I’m not sure if this is a known problem or I’ve stumbled onto something new but for some reason AO was adding WPBakery Visual Composer’s CSS to the cache even though the plugin (which came with the theme and I’ve forgotten to disable) wasn’t used on any page or post on the site.
