Render blocking react.js and pageSpeed / page rank

Asked 14/7, 2015 at 17:54 Answered 29/4, 2017 at 12:41

Solved javascript reactjs synchronization

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:

does this actually effect page speed
does this issue mean google page ranking will also be effected

Stencil answered 14/7, 2015 at 17:54 Comment(1)

React doesn't need to be in <head>. You're much better off putting it just before </body>. The other option is to add the defer attribute to the <script> tag including React. React's isomorphic features are designed to make page loads faster, not slower – Supergalaxy 14/7, 2015 at 17:56

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.

Dunstan answered 14/7, 2015 at 18:46 Comment(1)

As of 2020, Core Web Vitals do play a role in determining page experience, which can affect search ranking. "Great page experience doesn't override having great page content. However, in cases where there are many pages that may be similar in relevance, page experience can be much more important for visibility in Search." – Larena 1/3, 2023 at 22:15

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.

Radiative answered 29/4, 2017 at 12:41 Comment(0)

Recommended topics

Hot tags