每当我在gtmetric、google Insights、Pingdom等网站上查看我的网站时。。。我总是收到渲染阻塞JS的反馈
目前，我将所有脚本按如下方式排队：
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href=\'https://fonts.googleapis.com/css?family=Roboto:400,300,700\' rel=\'stylesheet\' type=\'text/css\'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
我想知道是否有更好的方法来排队，这样脚本就可以组合起来，特别是JS添加到页脚？
我看到我可以通过functions.php 如本页所示external javascript
然而，似乎有一些污名围绕着它，因为它可能无法正常工作。
有什么建议吗？小费？
我已经尝试从。。。
并插入函数中。php如下：
function external_scripts() {
wp_register_script(\'googleapis\', \'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js\', array(\'jquery\'), true);
wp_register_script(\'bootstrap\', \'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js\', array(\'jquery\'), true);
wp_enqueue_script(\'googleapis\');
wp_enqueue_script(\'bootstrap\');
}
add_action( \'wp_enqueue_scripts\', \'external _scripts\' );
function external_styles() {
wp_register_style(\'bootstrapcdn\', get_template_directory_uri() . \'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css\');
wp_register_style(\'maxbootstrapcdn\', get_template_directory_uri() . \'https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css\');
wp_enqueue_style(\'bootstrapcdn\');
wp_enqueue_style(\'maxbootstrapcdn\');
}
add_action( \'wp_enqueue_style\', \'external _styles\' );
但这似乎破坏了网站。。。现在图像不会加载，悬停时菜单也不会下拉。
理想情况下，我希望推迟：
wp_register_script(\'jquery\', \'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js\', true);
和异步
wp_register_script(\'bootstrap\', \'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js, true);
SO网友:David Sword
如果您关心pagespeed和这些标准，那么应该将资源设置为本地资源，而不是远程服务器。虽然它们都是CDN，但没有什么比本地更快的了。随着http/2的兴起，拥有更少的脚本将变得越来越不重要，但在本地拥有它们仍然很重要。
您可以手动组合大多数这样的文件（我的许多主题主样式表以压缩的第三方lightbox css结尾），或者如果感觉足够高级，可以使用webpack.
你应该是enqueue\'ing通过functions.php, 在您的header.php, 无论是远程还是本地。它解决了如此多的依赖性、插件和脚本冲突问题。
您可以通过以下方式将脚本放入页脚functions.php 像这样：
add_action( "wp_enqueue_scripts", function(){
// the last arg is "in_footer"
wp_enqueue_script( $handle, $src, $deps, $ver, true);
// this will put the proceeding styles in [`wp_footer`][3]
add_action( "wp_footer", function(){
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
});
});
您可以添加
defer 和或
async 在排队时选择脚本，类似于
add_filter(\'script_loader_tag\', function ($tag, $handle) {
if ( \'jquery\' !== $handle )
return $tag;
return str_replace( \' src\', \' async="async" src\', $tag );
}, 10, 2);
你可以
@import 在主题中使用Google Front
.css 而不是在标题中使用
@import url(\'https://fonts.googleapis.com/css?family=Roboto:300,400,700\')
