filter for single files (excluded css)

  • Resolved timholz

    (@timholz)


    11 months ago

    Hi – In order to minimize renderblocking i add “preload” for the aggregated css link:

    add_filter('autoptimize_filter_css_bodyreplacementpayload', 'preload_css_link');

    function preload_css_link($bodyreplacementpayload){
        $do_css = get_option('autoptimize_css');
        $inline_css = get_option('autoptimize_css_inline');
        if (isset($do_css) && !empty($do_css) && empty($inline_css)){
        $string = $bodyreplacementpayload;
        $url = $string;
        preg_match("/href=\"(.*?)\"/i", $url, $matches);
        //$matches ist array und key 1 enthält die url
        $preload = '<link rel="preload" href="'.$matches[1].'" as="style" >';
        $addpreload = $preload . $string;
        return $addpreload;
        }
    }

    Add the top of the <head> i get:

    <link rel="preload" href="https://xxx/wp-content/cache/autoptimize/css/autoptimize_9729dc67dd19461ac5811eef79a1e25f.css" as="style">
    <link media="all" href="https://xxx/wp-content/cache/autoptimize/css/autoptimize_9729dc67dd19461ac5811eef79a1e25f.css" rel="stylesheet">

    Definitly an improvement. Renderblocking is zero. (tested on webpagetest.org: Zero render-blocking CSS files found.)

    Now, i have some excluded css files. Deferring these files is no option, for the onload attribute
    is rejected by csp (i added nonces to the aggregated js files). To enqueue them in the footer (get_footer) is also not a good solution.
    I wonder, if there is a filter (similar to one shown above), that lets me alter the link of excluded single css files and allows to add a link with preload?
    Thanks – theo

    • This topic was modified 11 months ago by timholz. Reason: spelling
    • This topic was modified 11 months ago by timholz.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    11 months ago

    hmm … autoptimize_filter_css_bodyreplacementpayload should also work on autoptimize_singly_xyz.css files, but if a file is excluded and is already minified, it will go unnoticed. in the end I guess you might have to rely on autoptimize_html_after_minify (which holds the entire HTML) and parse out link-tags that have a href that does not have autoptimize in it and for those add the preload?

    hope this helps,
    frank

    Thread Starter timholz

    (@timholz)

    11 months ago

    Hi frank – thanks for the response. I’ll try that. All the best. Regards theo

    Thread Starter timholz

    (@timholz)

    11 months ago

    To wrap this up. I couldn’t get around with autoptimize_html_after_minify . I tried the following:

    • 1. Uncheck «Minify excluded CSS and JS files?» option
    • 2. Use wordpress style_loader_tag
    function toa_css_rel_preload( $html, $handle, $href, $media ) {
        if ( $handle === 'someid' ) {
            $add_preload = '<link rel="preload" href="' . $href . '" as="style">' . $html;
        } else {
            $add_preload = $html;
        }    
            return $add_preload;
        }
    add_filter( 'style_loader_tag', 'toa_css_rel_preload', 10, 4 );

    This is less optimal, because css and eventually scripts will have to be minified manually. But the preload appears where i want it. thanks.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘filter for single files (excluded css)’ is closed to new replies.