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/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href=".5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/css/style/mystyle.css">
</head>
<body>
<!--HTML content-->
<script src=".1.3/jquery.min.js"></script>
<script src=".2.10/angular.min.js"></script>
<script src=".2.10/angular-touch.min.js"></script>
<script src=".2.10/angular-cookies.min.js"></script>
<script src=".11.0/ui-bootstrap-tpls.min.js"></script>
<script src = ".2.0/angular-route.min.js"></script>
google analytics script
</body>
</html>
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./bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.10/angular-touch.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.10/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<script src = "https://ajax.googleapis./ajax/libs/angularjs/1.2.0/angular-route.min.js"></script>
google analytics script
</body>
</html>
2 Answers
Reset to default 5To 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.