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
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
-
2
React doesn't need to be in
<head>. You're much better off putting it just before</body>. The other option is to add thedeferattribute to the<script>tag including React. React's isomorphic features are designed to make page loads faster, not slower – Bojangles Commented Jul 14, 2015 at 17:56
2 Answers
Reset to default 9To expand on @Bojangels ment: 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 acplish 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 plete or fully rendered) and ranking on Google's search results page.
There is an npm that will help you Extract & Inline Critical-path CSS in HTML pages using webpack. Critical Webpack Plugin: https://github./nrwl/webpack-plugin-critical
This helped me in React.js and to resolve Optimize CSS Delivery after the Google's pageSpeed insights.