我正在为每个页面和类别生成关键CSS。目前,我正在通过插入样式表functions.php
像这样简单地使用echo
.
function criticalCSS_wp_head() {
if (is_front_page() ){
echo \'<style>\';
include get_stylesheet_directory() . \'/css/critical/ccss-index.min.css\';
echo \'</style>\';
}
elseif (is_category(\'orange\') ){
echo \'<style>\';
include get_stylesheet_directory() . \'/css/critical/ccss-orange.min.css\';
echo \'</style>\';
}
elseif (is_page(\'hello-world\') ){
echo \'<style>\';
include get_stylesheet_directory() . \'/css/critical/ccss-hello-world.min.css\';
echo \'</style>\';
}
elseif (is_single() ){
echo \'<style>\';
include get_stylesheet_directory() . \'/css/critical/ccss-single.min.css\';
echo \'</style>\';
}
}
add_action( \'wp_head\', \'criticalCSS_wp_head\' );
就最佳实践编码风格而言,包含这些样式表的最佳方式是什么and pure relentless speed, 这意味着要避免PHP调用、数据库调用等this post (#10)链接自the official WordPress Optimization documentation?edit由于这个问题得到了回答,我忘了提到关键CSS需要内联到DOM中,而不是作为文件链接,以避免渲染阻塞。因此,我仍在寻找一种将关键CSS用于wp_enqueue_scripts
. 可能将文件内容存储在变量中,并在wp_enqueue_scripts
是他自找的吗?