Excluding certain files from being cached

preloading in the sense of <link rel=”preload” (so the browser preloads files before the actual request) or in the sense of creating cached CSS/ JS files (so on the server)?

and can you clarify “in a specific area”?

• This reply was modified 1 year, 1 month ago by Optimizing Matters.

<link rel=”preload”

you can do that on the Extra tab mintmedia, but generally it is discouraged to preload more then let’s say 2 or 3 files as that can actually slow your site down; browser typically are good at *knowing* what files to load when and using preload will overrule that browser logic and will -esp. on mobile- take away bandwidth for other resources that might in the end be more important in reality.

Which is what we are testing. However, how can we preload the Autoptimize files if their filename hash can change? Also, how can we preload this in specific order on our html-header file?

this Github issue reply has some example code ??

Hi again, still trying to wrap my head around the above link.

To clarify we want to preload 4 scripts in out html-header.twig file:
1. Preload Autoptimize CSS
2. Preload Script x
3. Preload Script y
4. Preload Autoptimize JS

Currently, our html-header.twig file is calling the enqueued scripts which I assume is same for Autoptimize cache files via wp_head function.

Let me know if there is any other knowledge or documentation I should be reading to understand how this can be done.

Thank you so much!

Autoptimize does not work on css/ js enqueuing or wp_head level, but instead parses the full HTML after the page has been created by WordPress & theme & plugins. As such you’ll need code to hook into some of AO’s filters, autoptimize_filter_cache_getname will get you the autoptimized filenames and you can use autoptimize_filter_extra_tobepreloaded to pass an array with to-be preloaded files ??

So we added this and double checked:

// Function to preload Autoptimize CSS and JS assets
function preload_autoptimize_assets($preloads) {
    // Check if Autoptimize is active
    if (function_exists('autoptimize_filter_cache_getname')) {
        // Get the URLs of the Autoptimize CSS and JS files using Autoptimize filters
        $autoptimize_css_url = autoptimize_filter_cache_getname('autoptimize/css/autoptimize_*.css');
        $autoptimize_js_url = autoptimize_filter_cache_getname('autoptimize/js/autoptimize_*.js');

        // Add the CSS and JS URLs to the preloads array if they are not empty
        if ($autoptimize_css_url) {
            $preloads[] = $autoptimize_css_url;
        }
        if ($autoptimize_js_url) {
            $preloads[] = $autoptimize_js_url;
        }
    }

    // Return the updated preloads array
    return $preloads;
}
add_filter('autoptimize_filter_extra_tobepreloaded', 'preload_autoptimize_assets');

However, this does not seem to be working when I check the html output of the loaded page…

Is their anything wrong in the above^?

you’re using autoptimize_filter_cache_getname as a function, but it does not exist so all that code does not get executed because autoptimize_filter_cache_getname is a filter iso a function.

Lol I realized and actually got this to work with a properly written script. My bad I was rushing earlier.

Another question we now have in relation to this is there any way to set specific order between when js assets and css asset are served in generated head?

For reference here is our script now that works on creating the preload links:

// Track autoptimized assets for preloading
$autoptimized_assets_for_preload = [];

// Capture autoptimized asset filenames
add_filter('autoptimize_filter_cache_getname', function($filename) use (&$autoptimized_assets_for_preload) {
    $autoptimized_assets_for_preload[] = $filename;
    return $filename;
});

// Add captured filenames to the list of assets to be preloaded
add_filter('autoptimize_filter_extra_tobepreloaded', function($preloads) use (&$autoptimized_assets_for_preload) {
    foreach ($autoptimized_assets_for_preload as $asset) {
        $preloads[] = $asset;
    }
    return $preloads;
});

Another question we now have in relation to this is there any way to set specific order between when js assets and css asset are served in generated head?

depends on your AO config; if you’re aggregating AO will insert at defined “injection points” (before <title for CSS if I’m not mistaking for example and before </body for JS). if you’re not aggregating AO leaves the CSS & JS exactly where it was found originally and it will just change attributes if/ where required.

Is there any way to control this I.e. at a specific reference point before and after certain other preloaded elements.

More importantly, I see JS files are preloading before the css one. Is there a way to change that order?

Is there any way to control this I.e. at a specific reference point before and after certain other preloaded elements.

well, preloading should be automatically done before the file gets loaded the normal way, is not the case?

More importantly, I see JS files are preloading before the css one. Is there a way to change that order?

I had a (very) quick look at the code in autoptimizeExtra.php and I don’t see specific logic to first handle JS and then CSS, it *looks* like it just follows the order of elements in the array, so maybe check/ change the order of what you put in the array?

The sorting of the array worked. Thank you! ??

Can we manage defer/async for scripts generated by Autoptimize to make sure they are all non-render blocking?