У меня проблемы с предварительной загрузкой CSS на моем сайте WordPress.Я писал сценарий, чтобы найти все сценарии JS и CSS, помещенные в нижний колонтитул, и предварительно загрузить его в <head>.Код для сценариев JS работает нормально (когда я захожу на источник страницы на сайте, я вижу теги <link> с атрибутом предварительной загрузки внутри), но теги ссылок предварительной загрузки CSS не отображаются.
Скорее всего, я делаю это совершенно неправильно, так как я нашел рабочий код для сценариев JS, а затем попытался изменить его, чтобы он работал для CSS.Например, я не думаю, что версия версии применима к CSS, но я предположил, что она все равно будет работать, так как по умолчанию будет false, верно?
Как связанный вопрос, у меня та же проблема с веб-шрифтами.Google Pageview Insights советует мне предварительно загружать веб-шрифты, поэтому я добавил для этого несколько 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);