念念不忘
必有回响🎉

使用CloudFlare Rocket Loader的注意事项

在启用CloudFlare以后,网站访问速度感觉稳定了不少,而且收录速度似乎更快了,在启用AMP之后,我也陆续将MIP支持了,但是出现一个问题就是MIP的规范要求<script>标签要么不能出现type,要么如果有type,其值必须为”text/javascript “、”application/javascript“,我在排查问题的时候发现MIP页面不符合规范,一看原来是<script>标签的type值有问题。如下图所示:

<script type="a850c044fbd65692abfffb84-text/javascript">

显然这个type的值是有问题的,可是我翻看源码并没有添加这个字段呢,于是我关闭WP-Rocket插件,发现依旧还有这个问题,那么我就猜测这个是CloudFlare造成了,通过缓存的配置、Page Rules等方式依旧没有解决,只能挨个尝试,最终发现原来是Rocket Loader的锅,查阅文档后得知,要想排除这个问题,需要在<script>标签上添加data-cfasync=”false”。于是将MIP模版的源码做了下修改,如下所示:

<script data-cfasync="false" src="https://c.mipcdn.com/static/v1/mip.js" type="text/javascript"></script><!--mip-->
<script data-cfasync="false" src="https://c.mipcdn.com/static/v1/mip-share/mip-share.js" type="text/javascript"></script><!--分享组件 代码-->
<script data-cfasync="false" src="https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js" type="text/javascript"></script><!--百度统计-->
<script data-cfasync="false" src="https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js" type="text/javascript"></script>

此时清除缓存,再次刷新页面,发现标签消失,通过MIP在线规则校验也成功通过了校验。

那么 Rocket Loader是干嘛的呢?查看说明,开启后可以加快包括js在内的页面加载速度,从而提高您的google rankpage 排名。但是开启后<script>的type会变成text/rocketscript,然后去下载一个叫rocket-loader.min.js的文件。如果对页面规范比较严格的想MIP或者AMP这种的,建议在<script>标签内加入data-cfasync=”false”。来解决这个问题,其他的吗还是建议开启吧。

本文的解决办法参考自How can I have Rocket Loader ignore specific JavaScripts?

赞(0) 打赏
未经允许不得转载:Charles's Blog » 使用CloudFlare Rocket Loader的注意事项

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏