问题在 Wordpress 网站上预加载 CSS答案

【问题标题】：Issue preloading CSS on Wordpress site问题在 Wordpress 网站上预加载 CSS
【发布时间】：2019-07-15 20:20:15
【问题描述】：

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

很可能我这样做完全错误，因为我找到了 JS 脚本的工作代码，然后尝试更改它以使其适用于 CSS。例如，我不认为版本附件适用于 CSS，但我认为它仍然可以工作，因为它会默认为 false，对吗？

作为一个相关问题，我对 webfonts 也有同样的问题。 Google Pageview Insights 告诉我预加载 webfonts，所以我添加了一些 php 来做到这一点，但是当我再次运行 pageview Insights 时，没有骰子。

代码如下：

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

【问题讨论】：

标签： php css wordpress

【解决方案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 测试过的。

希望这有帮助！

【讨论】：

感谢您发布此信息。我肯定会将其中的一些合并到我的代码中，但似乎我需要为每个 css 文件提供 href，并且每次我想预加载单个 css 文件时调用该函数。我希望能够遍历在页脚中排队的所有 css 文件的数组。你知道这是否可能吗？确定有全局 $wp_styles，我认为会有一种简单的方法来做到这一点。我认为我的语法是错误的。
嗨查理！这个函数实际上会遍历每个通过 Wordpress 排队的样式表，因为它是一个在样式加载器标签钩子上调用的过滤器
您好贾里德，感谢您的回复。那我试试看。谢谢！
它适用于 Chrome 和 Safari。但在 Firefox 中，此脚本会阻止加载 CSS。

【解决方案2】：

对我有用的确切代码：

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

它将通过 GTmetrix 和 Google Insights 测试。至少对我来说通过了:-)

【讨论】：