I need page speed improvement in my webpage.I read a lot about using async and defer attribute for improve initial page speed.All the js scripts are defined just above the </body> tag.Please suggest how effectively use these attributes in my page?
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/css/style/mystyle.css">
</head>
<body>
<!--HTML content-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-touch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.min.js"></script>
google analytics script
</body>
</html>
To use defer:
<script src="path" defer="defer"></script>
To use async:
<script src="path" async="async"></script>
When to use defer/async?
If you need your scripts to be loaded asynchronously ie. while loading the html and css the script with asyc attribute will fore the browser to load them in background ie. they will be loaded while other things work.
And if you need your scripts to be loaded only after fully loaded the html and css then you may use defer attribute.
So, you need to be careful to use this technique because of these attributes some javascript code may not work as you wish it should have to be.
How to use them effectively?
I do not suggest you to use async because it may load any script in any order because of the filesize and/or scripts (as it loads asynchronously) so your functionality would be hampered.
So, just use the defer to fulfill the requirement as per the google page speed which will load the scripts as you wish it should have in that order.
Although, using defer, you may have impact on your website because you may have called some scripts should have run before the document is ready. In that case, you should not follow the instruction of the google page speed so let it be how it was.
Finally, it depends upon you and your scripts.
You shouldn't change anything or use defer for all.
Bootstrap requires jQuery to be loaded (although you're not really loading Bootstrap here, but some Angular-Bootstrap template). So you cannot use async to load any of these resources. Additionally you're loading a lot of Angular resources which depend upon the main angular.min.js resource, so you can't use async here either.
You could use defer for all, but the page won't render faster. The only difference is that the scripts will be executed once they're all loaded, rather than one by one (executed once they're downloaded), but that doesn't change anything regarding page load time.
Related
I'm making a small browser game involving p5.js. My HTML is basically this:
<!-- ... -->
<body>
<script type="text/javascript" src="js/vendor/p5.min.js"></script>
<script type="text/javascript" src="js/vendor/p5.sound.min.js"></script>
<!-- ... -->
<script type="text/javascript" src="js/various/other/scripts.js"></script>
<!-- ... -->
<script type="text/javascript" src="js/sketch.js"></script>
</body>
<!-- ... -->
Most of the time this setup works. However, sometimes (when I first load the page in the browser), I get errors like ReferenceError: p5 is not defined from p5.sound.min.js and ReferenceError: loadSound is not defined from sketch.js. When I refresh the page things work fine again, until I close the browser window.
This looks to me like the scripts are executed out of order, because those are the kinds of errors that would be happening if a script was run without its prerequisites having been run. (sketch.js requires p5.sound.min.js requires p5.js.) The order in which I placed them in the HTML is the order in which I want them to run.
I know about async and defer which affect the way the browser loads and executes JavaScript, and I've tried the latter. However:
adding defer to all <script> tags seems to change nothing.
without async or defer (like above), wouldn't the execution order already be guaranteed and correct?
Is there something else I need to keep in mind?
As always, right after posting the question you find a new trail leading to the solution.
Apparently this has nothing to do with JS execution order, but a bug in Firefox that prevents local files from loading if they end in '.min.js'. I think the workaround for now is to load p5 from a CDN, or change the filename to not include min.
Is there anyway to preserve execution order of scripts that are a mix of either 'deferred' or inline ?
For eg. consider the following scenario -
<head>
<script src="/polyfills.js" />
<script>
// Small inline script that needs polyfills to work
</script>
<script src="/feature1.js" defer>
<script src="/feature2.js" defer>
</head>
My goal is to make all the scripts have defer behaviour and maintain execution order. However, here, I cannot add defer to the polyfills script as doing so will break the inline script.
Expected execution order
polyfills (defer) => inline-script (how?) => feature1 => feature2
The inline script is a tiny code fragment, and not worth wasting a request over.
Could I for example write a function that would wrap the inline script and execute if only after polyfills have loaded)?
If you want it to retain the order of a sandwiched inline script, then, with regard to deferring, I think you are stuffed.
an inline script won't defer, therefore loses its order with regard to deferred "before" and "after" scripts.
you can use the trick from this answer, but a window.onload listener will wait for all deferred scripts, not just those before the sandwiched script (your polyfills). You can't benefit from deferring the "befores", and not the "afters".
If all three src'd scripts are deferred, then there's no naturally-occurring intermediate event (after the polyfills but before the features) on which to trigger a handler - which is what you want.
For the record, here's how to delay an inline script until all deferred scripts have loaded, which will possibly offer some benefit but no as much as you were hoping for.
<head>
<script src="/polyfills.js" defer></script>
<script src="/feature1.js" defer></script>
<script src="/feature2.js" defer></script>
<script>
window.addEventListener('load', function() {
// Small inline script that needs polyfills to work
});
</script>
</head>
As defer attribute works only with external scripts tag with src. Here is what you can do mimic defer for inline scripts. Use DOMContentLoaded event.
<script src="/polyfills.js" defer></script>
<script src="/feature1.js" defer></script>
<script src="/feature2.js" defer></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Your inline scripts which uses methods from polyfills.js.
});
</script>
This is because, DOMContentLoaded event fires after defer attributed scripts are completely loaded. You might not have to wait for 'load' event.
This is the closest you could do.
According to this answer it's technically possible, as long as you're willing to base64-encode your script and set it as a data source. This will be a nightmare to debug if something goes wrong, but might be your only shot if you have a small inline fragment that must be included in the proper deferred order.
Curious at to where I place my Jquery and Bootstrap files. They recommend that you always place at the bottom for performance purposes yet when I check sites that use Jquery/Bootstrap the majority of users always place them at the top. Also should I be loading my own JavaScript files before or after the bootstrap/Jquery files?
I take it that I load the my own css file first before the bootstrap file if I want to override some of their styling, is this correct and does the same apply to javascript files?
Typically stylesheets in the head and scripts before the closing </body> tag:
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="your-other-styles.css">
</head>
<body>
<!-- content -->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="your-other-scripts.js"></script>
</body>
</html>
You'll want files from vendors such as jQuery and Bootstrap to be included before yours. This means that:
CSS: You can override their styles with your own*
Scripts: You have access to any objects added to the global scope such as window (jQuery adds $,
for example)
However, if you require a script to be available before your content loads (such as Modernizr), then putting it in the <head> ensures it's ready before any of your content.
Including scripts at the bottom ensures that the actual page content is loaded first; when the scripts are finally downloaded the content (DOM) will be ready for your scripts to manipulate.
* assuming your selector specificity is at least equal to those in your vendor CSS
Bottom is best to place all your script references at the end of the page before </body>.It should look like below in normal page.
<html>
<head>
<link href="path/to/file.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="path/to/file.js" type="text/javascript"></script>
</body>
</html>
Although in some cases it may be necessary to load JavaScript before page load if any of your function need to access JavaScript before Page Load.Specially if you are working with JQuery UI And Bootstrap.
You can decorate your script tags with the defer attribute so that the browser knows to download your scripts after the HTML has been downloaded:
<script src="Jquery.js" type="text/javascript" defer="defer"></script>
or
<script src="demo_async.js" async></script>
When present, it specifies that the script will be executed asynchronously as soon as it is available.
http://www.w3schools.com/tags/att_script_async.asp
If you need script to access in page for use then script need to available before using it. Although it need to be sure the browser support defer="defer". Async is supported by all major browsers.
Javascript by default block any other parallel downloads. So if you have many tags in the head, calling on multiple external scripts will block the HTML from loading, thus greeting the user with a blank white screen, because no other content on your page will load until the java script files have completely loaded. Another advantage to load script in bottom is that any error caused by external script will not stop the page from Loading to browser.
Style css need to present in top <Head> to access in page.
It really depends on what you want to achieve, but generally JS is placed at the bottom and CSS in your head section. Make sure that jquery library loads before Bootstrap's JS library and your custom css file loads after Bootstrap's CSS, so it will override. You can load Bootstrap's CSS from their CDN (or others, like cloudflare - for example http://cdnjs.com/libraries).
Make sure you minify all that & activate compression and you shouldn't experience any performance issues.
Advanced techniques imply using the most important part of your CSS in your head area, then send the rest of the CSS in the bottom area. Or have your whole static content (CSS + JS) hosted on a CDN.
I include the jquery external js file with the command:
<script type='text/javascript' src='js/jquery-1.11.0.js' ></script>
I will call it again in the same page a little bit below (this is because I am including this with php classes to make sure it is loaded before going on). So in the page, I will have 2 times the line at different places:
<script type='text/javascript' src='js/jquery-1.11.0.js' ></script>
I want to know if this will create problems in my page and if the script jquery will be loaded 2 times which would be inneficient.
Thanks,
John.
This will create issues for any plugin that is included between those two inclusion.. For example if you have :
<script type='text/javascript' src='js/jquery-1.11.0.js' ></script>
<script type='text/javascript' src='js/jquery-plugin.js' ></script>
<script type='text/javascript' src='js/jquery-1.11.0.js' ></script>
jquery-plugin.js will be overwritten and it will not work.
It will be included twice. There is no need to do it. If you absolutely must write the include tag in two places do it second time conditionally. Code below will include jQuery only if it is not included yet.
<script>
window.jQuery || document.write('<script src="js/jquery-1.11.0.js"><\/script>')
</script>
It should be fine, especially in modern browsers, but it is a little bit strange to do this.
If at any point you load jQuery plugins after the first script tag, these will no longer work because jQuery/$ has been re-initialised.
I can't think of any reason you would need to load this twice, though - are you sure you need to? Your best bet is to put the script tag at the bottom of the page, before closing the <body> tag.
Depending on the library, including it more than once could have undesired effects.
Think of it like this, if you have a script that binds a click event to a button, and you include that script twice, those actions will be ran twice when the button is clicked.
You could write a simple function that you call to load a script and have it keep track of files that have already been loaded. Or, I'm sure you could probably use a pre-existing JS loader such as LabJS and modify it.
Reference: What is the danger in including the same JavaScript library twice
Does the page load faster if i use the javascript before the </body> tag? Example:
<body>
balbllb content
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(function(){
});
</script>
</body>
The page will still load in the same amount of time, but it might be perceived as loading faster (i.e. you might see DOM element(s) appearing quicker).
If it was me, I would leave your jQuery.js reference in the <head>, and keep your custom stuff before the end of <body>.
I don't know whether it loads faster (I would be surprised) but in this case you no longer need to wrap your code in a $(document).ready as at that moment the document will be ready to be manipulated:
<body>
balbllb content
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
// directly manipulate the DOM here
</script>
</body>
Its not about anything happening faster. Its the order in which things happen. Putting scripts at the bottom (right before the closing body tag) makes it so the rest of your content loads before loading the scripts, making it appear that its loading faster.
The total page load time will be the same. But the page will be perceived as loading faster since it will appear to the user faster. The "perception of loading faster" is not a conjecture, it is a fact, proven many times by psychologists.
Remember that if you load your JS libraries at the bottom of the page (as you should), then any dependent scripts must follow the libraries at the bottom.