在 Wordpress 站點上發布預加載 CSS
[英]Issue preloading CSS on Wordpress site
問題描述
我在 WordPress 網站上預加載 CSS 時遇到問題。 我正在編寫一個腳本來查找頁腳中排隊的每個 JS 和 CSS 腳本，並將其預加載到<head> 。 JS 腳本的代碼運行良好（當我轉到站點上的頁面源時，我可以看到<link>標簽中帶有 preload 屬性），但是 CSS 預加載鏈接標簽沒有顯示出來。
很可能我這樣做完全錯誤，因為我找到了 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);
2 個解決方案
解決方案1
0 2019-02-21 20:55:34
歡迎來到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上進行過測試。
希望這會有所幫助！
解決方案2
0 2021-11-25 08:04:38
對我有用的確切代碼：
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 測試。 至少通過了我:-)
CSS無法在wordpress網站中呈現
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.