Issue preloading CSS on Wordpress site

Question

I am having trouble preloading CSS on my WordPress site. I was writing a script to find every JS and CSS script enqueued in the footer, and preload it in the <head>. The code for the JS scripts works fine (when I go to page source on the site, I can see the <link> tags with the preload attribute inside), but the CSS preload link tags aren't showing up.

It is very likely I am doing this completely wrong, as I found working code for the JS scripts and then tried to alter it to get it to work for the CSS. For instance, I don't think the version appendage applies to CSS, but I assumed it would still work since it would default to false, right?

As a related question, I am having the same issue with webfonts. Google Pageview Insights is telling me to preload webfonts, so I added some php to do that, but when I run pageview insights again, no dice.

Here is the code:

add_action('wp_head', function () {

    global $wp_scripts;
    global $wp_styles;

    foreach($wp_scripts->queue as $handle) {
        $script = $wp_scripts->registered[$handle];

        //-- Check if script is being enqueued in the footer.
        if($script->extra['group'] === 1) {

            //-- If version is set, append to end of source.
            $source = $script->src . ($script->ver ? "?ver={$script->ver}" : "");

            //-- Spit out the tag.
            echo "<link rel='preload' href='{$source}' as='script'/>\n";
        }
    }

    foreach($wp_styles->queue as $handle) {
		$style = $wp_styles->registered[$handle];

		if ($style->extra['group'] === 1) {

			$source = $style->src . ($style->ver ? "?ver={$style->ver}" : "");

			echo "<link rel='preload' href='{$source}' as='style' onload='this.rel = \"stylesheet\"'/>\n
			<noscript><link rel='stylesheet' href='{$source}'/></noscript>\n";
		}
	} 
//This is the code to preload webfonts
echo "<link rel='preload' href='/wp-content/themes/salient/css/fonts/fontawesome-webfont.woff?v=4.2' as='font' type='font/woff'>";
echo "<link rel='preload' href='/wp-content/themes/salient/css/fonts/fontawesome-webfont.ttf?v=4.2' as='font' type='font/ttf'>";
}, 1);

Jared Forth · Accepted Answer · 2019-02-21 20:55:34Z

4

Welcome to StackOverflow!

A function that I have used in my projects for preloading CSS effectively is:

function add_rel_preload($html, $handle, $href, $media) {
if (is_admin())
    return $html;

$html = <<<EOT
<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'" 
id='$handle' href='$href' type='text/css' media='all' />
EOT;

return $html;
}

add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );

A similar function could in theory be used for JS and Webfonts, but this has only been tested with CSS.

Hope this is helpful!

answered Feb 21, 2019 at 20:55

Jared Forth

1,6476 gold badges21 silver badges35 bronze badges

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

4 Comments

Charlie Tobler Over a year ago

Thank you for posting that. I will definitely incorporate some of that into my code, but it seems that I would need to have the href for each css file, and call the function each time I wanted to preload a single css file. I was hoping to be able to iterate through an array of all of the css files enqueued in the footer. Do you know if this is possible? Figuring there is global $wp_styles, I would think there would be an easy way to do this. I think my syntax is wrong.

Jared Forth Over a year ago

Hi Charlie! This function actually will iterate through every stylesheet enqueued through Wordpress, because it is a filter called on the style loader tag hook

Charlie Tobler Over a year ago

Hi Jared, Thanks for the reply. I will give it a shot then. Thanks!

He Yifei 何一非 Over a year ago

It works in Chrome and Safari. But in Firefox, this script prevents CSS from loading.

Yawar Abbas · Accepted Answer · 2021-11-25 08:04:38Z

0

The exact code, which has worked for me:

function preload_for_css ( $html, $handle, $href, $media ) {

    if ( is_admin () )
    {
        return $html;
    }

    echo '<link rel="stylesheet preload" as="style" href="' . $href . '" media="all">';
}

add_filter ( 'style_loader_tag', 'preload_for_css', 10, 4 );

It will pass GTmetrix and Google Insights test. At least passed for me :-)

answered Nov 25, 2021 at 8:04

Yawar Abbas

113 bronze badges

Collectives™ on Stack Overflow

Issue preloading CSS on Wordpress site

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related