Question

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

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

我的问题是：

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

Answer 1

要扩展 @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的搜索结果页面上排名。

Answer 2

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

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

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

2 个答案: