WordPress优化之Optimize the order of styles and scripts

前些天启用了 Syntax Highlighter ComPress插件,用Page Speed检测,发现了一个问题:Optimize the order of styles and scripts. 意思是说:优化 CSS和JS的顺序。造成这个问题的原因是:

  • 内嵌JS block#1 在一个外部CSS和另一个元素(没说是啥玩意)之间
  • 外部CSS(shCoreDefault.css,Syntax Highlighter ComPress插件的CSS文件)在一个外部JS之后
优化CSS和JS文件的顺序

优化CSS和JS文件的顺序

我们知道,CSS应该放在网页的头部,而且要放在JS之前,这样可以加快网页渲染速度,可以更快的打开网页;浏览器加载到JS会一直等到这个JS加载完才会加载下面的元素,如果把JS放在CSS之前,会严重拖慢网页加载速度!

综上所述:要将CSS置于网页头部;CSS要置于JS之前
对症下药,从简单的shCoreDefault.css查(script block#1搞不懂啥玩意), 在Syntax Highlighter ComPress 插件里找到以下代码(调用shCoreDefault.css的代码):

<!-- START: Syntax Highlighter ComPress -->
<script type="text/javascript" src="<?php echo $current_path; ?>scripts/shCore.js.php"></script>
<script type="text/javascript" src="<?php echo $current_path; ?>scripts/shAutoloader.js.php"></script>
<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>styles/shCore<?php echo shc_getOptionValue('shc_theme'); ?>.css"/>
<!-- END: Syntax Highlighter ComPress -->

可以看到:2个JS文件先于CSS文件被调用,不利于页面的渲染,修改方法很简单,将CSS提到最前面即可:

<!-- START: Syntax Highlighter ComPress -->
<link type="text/css" rel="stylesheet" href="<?php echo $current_path; ?>styles/shCore<?php echo shc_getOptionValue('shc_theme'); ?>.css"/>
<script type="text/javascript" src="<?php echo $current_path; ?>scripts/shCore.js.php"></script>
<script type="text/javascript" src="<?php echo $current_path; ?>scripts/shAutoloader.js.php"></script>
<!-- END: Syntax Highlighter ComPress -->

保存文件刷新页面后Page Speed检测不到这个问题了,那个script block#1也没去查是什么玩意,既然问题解决了,就不管了,哈哈

Leave a Reply

Your email address will not be published. Required fields are marked *