Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Render blocking react.js and pageSpeed / page rank

In React.js's tutorial it shows that its javascript files need to be within the <head> which doesn't allow the page to render until it has finished loading.

It seems from this quick test that any website that requires react.js does not bode well with google's pageSpeed as it throws this issue "Eliminate render-blocking JavaScript and CSS in above-the-fold content"

My questions are:

  1. does this actually effect page speed
  2. does this issue mean google page ranking will also be effected
like image 928
Jammer Avatar asked Jul 14 '15 17:07

Jammer


2 Answers

To expand on @Bojangels comment: You're better off loading React in a script tag just before the </body> closing tag as follows:

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

Putting the script at the end will allow the rest of the html and your css rules to render before the script tag is reached and react-0.13.3.min.js is loaded.

Also as mentioned, you could add a defer attribute to the script tag like so:

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

By adding a defer attribute you would accomplish the following (source: 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.

As far as your second question about whether page load speed effects google search ranking, Moz (an SEO firm) wrote a post about page speed and ranking and concluded:

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.

like image 65
Pavan Ravipati Avatar answered Oct 27 '22 00:10

Pavan Ravipati


There is an npm that will help you Extract & Inline Critical-path CSS in HTML pages using webpack. Critical Webpack Plugin: https://github.com/nrwl/webpack-plugin-critical

This helped me in React.js and to resolve Optimize CSS Delivery after the Google's pageSpeed insights.

like image 41
Aniruddha Shevle Avatar answered Oct 26 '22 22:10

Aniruddha Shevle