Question

我无法在WordPress网站上预加载CSS。我正在编写一个脚本，以查找页脚中排队的每个JS和CSS脚本，并将其预加载到<head>中。 JS脚本的代码运行良好（当我转到网站上的页面源代码时，可以看到内部带有preload属性的<link>标签），但是CSS preload链接标签未显示。

很有可能我做的是完全错误的，因为我找到了JS脚本的工作代码，然后试图对其进行更改以使其在CSS上起作用。例如，我不认为版本附录适用于CSS，但是我认为它仍然可以正常工作，因为它默认为false，对吧？

作为一个相关的问题，我在使用webfonts时遇到了同样的问题。 Google Pageview Insights告诉我要预加载webfonts，所以我添加了一些php来做到这一点，但是当我再次运行综合浏览量见解时，没有骰子。

代码如下：

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);

Answer 1

欢迎使用StackOverflow！

我在项目中使用的用于有效预加载CSS的函数是：

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 );

理论上，JS和Webfonts可以使用类似的功能，但这仅在CSS上进行过测试。

希望这会有所帮助！

在Wordpress网站上发布预加载CSS的问题

1 个答案: