Title: Preload Cached CSS Last modified: May 31, 2021 --- # Preload Cached CSS * Resolved [WPBot](https://wordpress.org/support/users/wpbot/) * (@wpbot) * [4 years, 12 months ago](https://wordpress.org/support/topic/preload-cached-css/) * Hello, * I’d like to preload the cached CSS file(s) of the plugin by adding a `link rel ='preload'` tag to the head. * I’ve already found the better way through headers, already published here [https://github.com/futtta/autoptimize/issues/49#issuecomment-305156931](https://github.com/futtta/autoptimize/issues/49#issuecomment-305156931) but unfortunately WP Super Cache strips the headers by default and if I enable the option that keeps them on for some reason the site gets a lot slower. * 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. * I managed to find an example in the forums for the `autoptimize_filter_extra_tobepreloaded` filter but I have no idea how to get the cached filenames. * So far my only idea is to use the `autoptimize_filter_cache_getname` and create a global variable with all the names and then use it in the `autoptimize_filter_extra_tobepreloaded` function to populate the preload array but for some reason it doesn’t sound right and I suppose there might be a better way. * Thanks in advance! Viewing 9 replies - 1 through 9 (of 9 total) * Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [4 years, 12 months ago](https://wordpress.org/support/topic/preload-cached-css/#post-14502633) * > 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](https://wordpress.org/plugins/autoptimize/#faq) for more info)? * Thread Starter [WPBot](https://wordpress.org/support/users/wpbot/) * (@wpbot) * [4 years, 12 months ago](https://wordpress.org/support/topic/preload-cached-css/#post-14502767) * 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 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. * Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [4 years, 12 months ago](https://wordpress.org/support/topic/preload-cached-css/#post-14502843) * > 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](https://wordpress.org/support/users/wpbot/) * (@wpbot) * [4 years, 12 months ago](https://wordpress.org/support/topic/preload-cached-css/#post-14503060) * 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'); ``` * Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [4 years, 12 months ago](https://wordpress.org/support/topic/preload-cached-css/#post-14503145) * 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](https://wordpress.org/support/users/wpbot/) * (@wpbot) * [4 years, 12 months ago](https://wordpress.org/support/topic/preload-cached-css/#post-14505195) * 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' ); ``` * Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [4 years, 12 months ago](https://wordpress.org/support/topic/preload-cached-css/#post-14505354) * my mistake; `apply_filters` should be `add_filter` .. 😁 * Thread Starter [WPBot](https://wordpress.org/support/users/wpbot/) * (@wpbot) * [4 years, 12 months ago](https://wordpress.org/support/topic/preload-cached-css/#post-14509786) * 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. * Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [4 years, 12 months ago](https://wordpress.org/support/topic/preload-cached-css/#post-14509936) * great job wpbot 🙂 Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Preload Cached CSS’ is closed to new replies. * ![](https://ps.w.org/autoptimize/assets/icon-256X256.png?rev=2211608) * [Autoptimize](https://wordpress.org/plugins/autoptimize/) * [Frequently Asked Questions](https://wordpress.org/plugins/autoptimize/#faq) * [Support Threads](https://wordpress.org/support/plugin/autoptimize/) * [Active Topics](https://wordpress.org/support/plugin/autoptimize/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/autoptimize/unresolved/) * [Reviews](https://wordpress.org/support/plugin/autoptimize/reviews/) * 9 replies * 2 participants * Last reply from: [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * Last activity: [4 years, 12 months ago](https://wordpress.org/support/topic/preload-cached-css/#post-14509936) * Status: resolved