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
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.
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.
Related
I wish to add ads to my webpage: https://www.gamestegy.com, however there is an issue. Once I added the script tag suggested by the adsense, my page score dropped by 10-20 points. Moreover, I started receiving these issues from Pagespeed analysis:
I am using nuxt js application (if that has any effect) and my script tag for getting AdSense looks like this:
<script data-n-head="ssr" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" data-ad-client="ca-pub-3965267899600337" async="" defer="" data-checked-head="true"></script>
I tried to use defer and no defer but that had the same effect. What are my options here to improve the score? Or how can I better understand the issue here?
Regards,
Rokas
The defer script attribute causes Javascript to execute just before the page loads. You can use the code below to load AdSense after the page loads.
function adSense() {
var e=document.createElement("script")
e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
e.setAttribute("data-ad-client","ca-pub-XXXXXXXXXXXXXXXX")
document.body.appendChild(e)
}
window.addEventListener("load",adSense)
This doesn't fix PageSpeed score, however it significantly improves Document Complete time in WebPageTest.
The situation
I have been attempting to create a react application. The index page that is loaded first contains a basic CSS and HTML loading animation and then the external scripts and CSS in a blocking order right before </body>, with the last script removing the loader animation and showing the page.
The intended purpose of this is to load a very small page (2KB in total) containing a loading animation and then load the 8MB of scripts, stylesheets and images, creating a more seamless user experience.
<html>
<head>
...
[loader css]
</head>
<body>
<div id="loader">...</div>
<script src="..."></script>
<script src="..."></script>
<link href="..." type="text/css" rel="stylesheet" />
<script> [remove #loader] </script>
</body>
</html>
The problem
This works great in Chrome, as it immediately renders the page (loading animation) and then the external dependencies. But because safari has weird, inconsistent, and ostensibly non-deterministic loading practices:
Safari starts loading the contents of the new web page, but does not start rendering it until it has loaded a sufficient amount of information.
this approach does not work; it'll just show the address bar loading indicator (for the dependencies above the closing body tag) and a blank page instead of rendering the HTML straight away.
If anybody has a solution that:
won't change the order in which things are loaded on the page
works on as many browsers as possible
is safe from cross-site scripting vulnerabilities
that would be enormously appreciated. Thank you!
The real problem is that browsers cannot be certain your JavaScript is safe to skip over until it's been loaded, parsed, and executed. If you were to add the defer attribute to your scripts the page will load and display without waiting for the assets to download - but the removal of the loader will also execute without waiting.
Consider a combination of adding defer to the external scripts and making the loader removal script itself an external defer script. According to some defer scripts are supposed to execute in the order they were specified. (Also take note of the references to async and DOMContentLoaded on that comment.)
React.js might also provide come callbacks that could be used more reliably than DOMContentReady.
I am little new to web development and when I was searching internet about other topics, I have seen many people has put popular JS Libraries in Different Places of their websites.
eg: Inserting JS Libraries on the Very Beginning or Start of the <head> </head> section. (Before loading any JS Code or a CSS File)
eg: Inserting JS Libraries on the End of the <head> </head> section. (After loading all JS Codes and CSS Files)
eg: Inserting JS Libraries on the End of the <body> </body> section. (After loading all JS Codes, Texts, Images, Videos, CSS Files etc...)
So my question is this.
What is the best practice for inserting (where) following JS Libraries, Plugins and CSS Style Sheets to a web page for the most faster loading times and other advantages? - Please mention the reason -
JQuery and it's Plugins
Bootstrap 3.js
Modernizr.js
Angular.js
And another widely used JS Libraries which I couldn't mention here...
Normalize.css
reset.css
bootstrap.css + more
Thank You..!
There is no so called "standard" method. The choice of where to put the lines boils down to one question: When will I need the library?
You see, web files loads line by line, let's take the following as an example of what I mean:
<script>
document.getElementById("target").innerHTML = "changed"
</script>
<p id="target">unchanged</p>
#target isn't altered because the script was loaded before the element did. Web files loads procedurally. When the line of JavaScript is loaded. It is executed immediately, but the target element isn't. So it couldn't change the element.
Even with jQuery, there is the same problem:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#target").text("changed");
</script>
<p id="target">unchanged</p>
Therefore, we often use $(function(){}).
Back to the loading problem
People who put their <script> tags or <link> tags in the body (in front) or in the head, wanted to execute the script immediately, sometimes they won't use $(function()) or document.onload
People who put their <script> tags or <link> tags in the body (in the end) wanted to ensure all elements are loaded then execute the script or load CSS.
Conclusion
You should load independent resources such as jQuery first, then load dependent resources such as jQuery plugins. Then you try to decide when you want the resources to start loading, then put the lines in places.
You should put CSS links in the <head> tag because you don't want visitors seeing unstyled content before loading the CSS files.
If you can't decide or don't care about the time, put every <script> and <style> tags in the <head>.
Here is another post you might be interested in: Load and execution sequence of a web page?
CSS can added inside header tag & but put all JS Libraries and custom files just before closing closing body tag
<body>
//other tags
<script> All Scripts here </script>
</body>
By doing so you wont have to check if DOM content has loaded.
It decrease page loading time.Otherwise a js need to be completely loaded before DOM loading.
It also makes sure that all events are attached properly to DOM element.
I think this address all your concern specially the third one
CSS Sheets go in the < head >. The order of the CSS files matter so libraries should be put in first then you can put in the specific ones you have.
Javascript links go in the < body > but place them at the very end. That way your HTML content loads first then the JS loads and it will recognize all your selections. It is more efficient to do it this way.
The most important thing to note when placing your css and script tags is that the order you place them determines the order they are loaded in and if style or code is loaded later it over writes the code written before. So if you have css styling that assigns different styles to the same attributes of the same element then it is the one loaded later that takes effect. And with script tags it's important to remember that for dependency reasons. You should load the dependencies first so that they are there for the other scripts to use. Aside from that normally css tags are in the head and script tags at the bottom of your body element
My page templates have a assets javascript array with assets list of css, js to use in that page, eg.:
<!DOCTYPE html>
<html>
..........
..........
<script type="text/javascript">
var assets= ["/css/my.css", "/js/my.js", "/js/other.js"];
</script>
<script type="text/javascript" src="/js/head.js" async="async"></script>
</body>
</html>
with head.js (loaded asynchronously), load assets list of page:
// head.core code - v1.0.2
// head.css3 code - v1.0.0
// head.load code - v1.0.3
head.load(assets);
now, Google Page Speed on mobile tab (not on desktop) says Optimize CSS Delivery of my.css
but my.css is loaded asynchronously from head.js loaded asynchronously.
What am I doing wrong?
Optimize CSS delivery need not necessarily mean to load them asynchronously alone. It could also mean that CSS may be bloated and it has class that may not be used to render Above the fold or not on this given page itself.
When developer using tool minify their CSS, this happens where in all CSS across pages are bundled together and is bloated!
One way to handle is use CSS inline that required to render the Above the fold and move rest of the CSS to bottom of the page. If not you can try to use Google Apache or Ngnix page speed plugin. https://developers.google.com/speed/pagespeed/module/
I'm trying to run a Content Experiment, so the basic structure of the <head> should look like the following:
<head>
<!-- Content experiments code (CE) -->
***
<!-- End CE code -->
*** Standard <head> code: title, meta, CSS, JS, etc. ***
<!-- Google Analytics code -->
***
<!-- End GA code -->
</head>
But, here's the issue:
Amongst the various JS being loaded is Google Tag Manager:
<script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-***"></script>
This file dynamically loads another script:
<script type="text/javascript" async="" src="//www.googleadservices.com/pagead/conversion_async.js"></script>
Unfortunately for me, it does this by inserting it before the first <script> tag using the following method:
...
getElementsByTagName('script')[0].insertBefore(newScriptObject);
...
Incase it isn't obvious why this is a problem, the Content Experiment script should be the first element in the <head>. But, because this script is inserted before the first script element, it isn't.
To compound this, other scripts (also outside of my control) are also loaded by this method. So, even though in the document the Content Experiment code is first, after the JS executes and updates the DOM, there are numerous script elements placed before it.
So, does it matter?
Am I right in thinking that this doesn't actually matter? As on page load, the first script element will be the one loading the content experiment script (which is correct) as the other files haven't been dynamically inserted yet.
Will the CE script be loaded and run before the rest of the scripts are loaded?
Apologies for a slightly long winded way of asking a quite straight-forward question, but, well, yeah.
Thanks for the help,
Tom
This is a standard practice on the net and totally fine. Good digging in and debugging though! Content Experiments just wants you to load the script close to the top of your head so that they can redirect people away from the control url with as little impact to performance as possible.
Edit: AND so that they don't get a lot of support tickets when people accidently include CE AFTER google analytics.