在Wordpress网站上发布预加载CSS

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'/>
";
        }
    }

    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\"'/>

            <noscript><link rel='stylesheet' href='{$source}'/></noscript>
";
        }
    } 
//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);

</div>

1个回答

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!

duandan5471
duandan5471 它适用于Chrome和Safari。 但在Firefox中,此脚本会阻止加载CSS。
大约一年之前 回复
douba2011
douba2011 嗨Jared,谢谢你的回复。 我会试一试。 谢谢!
一年多之前 回复
dtcpvz8162
dtcpvz8162 嗨查理! 这个函数实际上将遍历通过Wordpress排队的每个样式表,因为它是在样式加载器标记钩子上调用的过滤器
一年多之前 回复
dongwen9975
dongwen9975 感谢您发布。 我肯定会将其中的一部分合并到我的代码中,但似乎我需要为每个css文件设置href,并在每次我想预加载单个css文件时调用该函数。 我希望能够遍历页脚中排队的所有css文件的数组。 你知道这是否可能吗? 确定全球$ wp_styles,我认为有一个简单的方法来做到这一点。 我认为我的语法错了。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐