渲染阻塞react.js和pageSpeed / page rank

时间:2015-07-14 17:54:12

标签: javascript reactjs sync

在React.js的教程中,它显示其javascript文件需要在<head>内,这不允许页面在完成加载之前呈现。

似乎从这个快速test开始,任何需要react.js的网站都不会对google's pageSpeed抱有好处,因为它会抛出这个问题“消除渲染阻止JavaScript和CSS的重叠内容“

我的问题是:

  1. 这实际上会影响页面速度
  2. 这个问题是否意味着谷歌网页排名也会受到影响

2 个答案:

答案 0 :(得分:9)

要扩展 @Bojangels 评论:您最好在</body>结束标记之前的脚本标记中加载React,如下所示:

<html>
    <head>
        <title>This is my app!</title>
    </head>
    <body>
        <!-- Your body content --> 
        <script src="https://fb.me/react-0.13.3.min.js"></script> 
    </body>
</html>

将脚本放在最后将允许在到达脚本标记并加载react-0.13.3.min.js之前呈现其余的html和css规则。

同样如上所述,你可以像这样在脚本标签中添加一个defer属性:

<script src="https://fb.me/react-0.13.3.min.js" defer="true"></script> 

通过添加延迟属性,您将完成以下操作(来源:mdn):

  

此布尔属性设置为向浏览器指示在解析文档后要执行脚本。

至于你关于页面加载速度是否影响谷歌搜索排名的第二个问题,Moz(一家SEO公司)写了关于页面速度和排名的post并得出结论:

  

我们的数据显示&#34;页面加载时间与#34;之间没有相关性。 (文档完整或完整呈现)并在Google的搜索结果页面上排名。

答案 1 :(得分:2)

npm可以帮助你提取和提取使用webpack的HTML页面中的内联关键路径CSS 关键Webpack插件: https://github.com/nrwl/webpack-plugin-critical

在Google的pageSpeed见解之后,这帮助了我React.js并解决了优化CSS交付