渲染阻塞 react.js 和 pageSpeed / 页面排名

Question

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

从这个快速 test that any website that requires react.js does not bode well with google's pageSpeed 看来，它引发了这个问题 "Eliminate render-blocking JavaScript and CSS in above-the-fold content"

我的问题是：

这真的会影响页面速度吗
这个问题是否意味着 google 页面排名也会受到影响

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>

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

另外如前所述，您可以像这样向脚本标记添加延迟属性：

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

通过添加 defer 属性，您将完成以下任务（来源：mdn）：

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.

关于您的第二个问题，即页面加载速度是否会影响 google 搜索排名，Moz（一家 SEO 公司）写了一篇 post 关于页面速度和排名的文章，并得出结论：

Our data shows there is no correlation between "page load time" (either document complete or fully rendered) and ranking on Google's search results page.

Answer 2

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

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

渲染阻塞 react.js 和 pageSpeed / 页面排名

Render blocking react.js and pageSpeed / page rank

javascript

sync

reactjs