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

标签 javascript reactjs sync

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

看来从这个快test任何需要 react.js 的网站都不是 google's pageSpeed 的好兆头因为它引发了这个问题“消除首屏内容中阻止渲染的 JavaScript 和 CSS”

我的问题是:

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

最佳答案

扩展@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 之前呈现。已加载。

另外如前所述,您可以像这样向脚本标记添加一个 defer 属性:

<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.

关于页面加载速度是否影响谷歌搜索排名的第二个问题,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.

关于javascript - 渲染阻塞 react.js 和 pageSpeed/page rank,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31413879/

相关文章:

安卓联系人编程同步

javascript - 通过链接确定 Google 文档的共享设置

javascript - react 测试: Should Text Contents Be Tested For?

javascript - 对象组件

javascript - Rails 和 React - React.createClass/React.createReactClass 不是函数

html - 每天从另一个网站抓取内容

objective-c - dispatch_async vs dispatch_sync 执行顺序

javascript - 如何使用 javascript 将矢量路径转换为点数组?

javascript - Codeigniter - Ajax 调用时出错 (404)

javascript - 为 Sublime Text for JavaScript 添加语法高亮