Adding preload to css files in WordPress

Question

I am new to WordPress and am trying to preload certain css files. I understand that they are loaded into the head using wp_enqueue_style(), so I am trying to access the html generated from that to add rel="preload".

So far it looks like this

wp_enqueue_script('main-style', 'styles/main-style.css', false, null);

add_filter('script_loader_tag', 'preload_filter', 10, 2);

function preload_filter($html, $handle) {
   if (strcmp($handle, 'main-style') == 0) {
      $html = str_replace("rel='stylesheet'", "rel='preload' as='style' ", $html);
   }

   return $html;
}

Although when I add this preload_filter function my css fails to load completely, and not just for the specified stylesheet... Am I missing anything in trying to do this, or is there a simpler method? Any help would be greatly appreciated.

Why are you adding main-style.css in wp_enqueue_script() it must be wp_enqueue_style() — Bhautik
– Bhautik, Commented Mar 15, 2021 at 7:23

Sean Kendle · Accepted Answer · 2024-07-30 15:19:27Z

7

+50

To enqueue style file, you need to use wp_enqueue_style function. You used wp_enqueue_script which is used to enqueue JavaScript file.

wp_enqueue_style('preload-style', 'styles/main-style.css', false, null);

And you need to use style_loader_tag filter to filter the HTML link tag of an enqueued style.

add_filter( 'style_loader_tag',  'preload_filter', 10, 2 );
function preload_filter( $html, $handle ){
    if (strcmp($handle, 'preload-style') == 0) {
        $html = str_replace("rel='stylesheet'", "rel='preload' as='style' onload='this.rel=\"stylesheet\"'", $html);
    }
    return $html;
}

But you used script_loader_tag filter which is used to filter <script> tag.

edited Jul 30, 2024 at 15:19

Sean Kendle

3,6481 gold badge30 silver badges35 bronze badges

answered Mar 15, 2021 at 15:19

Chengmin

1,9057 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SkinnyBetas Over a year ago

Hmm strange, it seems even when I make these changes the css files that I have enqueued aren't loading at all with the preload_function there

Chengmin Over a year ago

You need to load the CSS file later again. Please check developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content In other words, you should have 2 lines (preload and load) in your HTML. <link rel="preload" href="style.css" as="style"> and <link rel="stylesheet" href="style.css"> together. If you can't solve the problem, feel free to DM me.

SkinnyBetas Over a year ago

Ahh okay so I haven't loaded again. So I should wp_enqueue_style again because I have preloaded?

Chengmin Over a year ago

Yes, it's correct. If you face any other issue feel free to contact me via skype (live:rsm0128)

Chengmin Over a year ago

Instead of enqueue style again, you can use onload method. $html = str_replace("rel='stylesheet'", "rel='preload' as='style' onload='this.rel=\"stylesheet\"'", $html);

|

vosykapavel · Accepted Answer · 2023-02-20 08:00:10Z

2

(Can't reply, but extends this answer https://stackoverflow.com/a/66640766/1898675)

This modification use the noscript fallback, which is recommended by google for defer css. https://web.dev/defer-non-critical-css/#optimize

add_filter( 'style_loader_tag',  'preload_filter', 10, 2 );
    function preload_filter( $html, $handle ){
    if (strcmp($handle, 'preload-style') == 0) {
        $fallback = '<noscript>' . $html . '</noscript>';
        $preload = str_replace("rel='stylesheet'", "rel='preload' as='style' onload='this.rel=\"stylesheet\"'", $html);
        $html = $preload . $fallback;
    }
    return $html;
}

answered Feb 20, 2023 at 8:00

vosykapavel

413 bronze badges

Collectives™ on Stack Overflow

Adding preload to css files in WordPress

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related