Can Heavy Use of JavaScript make page load slow

please suggest me how many JavaScript file we can you for website to make t

[hariram]

Hello JavaScript Experts,

http://www.example.com/ is a my friend's website and we are taking SEO services for website ranking improving and we use only 4 files on the website but SEO & JavaScript expert said that we can using maximum of 3 JavaScript files on the website to make the website search engine friendly and help the pages load faster.

SO please suggest me how many JavaScript file we can you for website to make the website search engine friendly and help the pages load faster.?



Below mentioned is the SEO & JavaScript expert recommend:

Checkpoint 1: Excessive use of JavaScript
We find excessive use of JavaScript on your website. Use of JavaScript code within the body tag of website pages makes the pages heavy and difficult to load both for search engines and direct visitors to your website.

For Example:

<script type="text/javascript" src="http://example.com/magento_37341/skin/frontend/default/theme265/js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/skin/frontend/default/theme265/js/scripts.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/skin/frontend/default/theme265/js/jquery.prettyPhoto.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/js/prototype/prototype.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/js/lib/ccard.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/js/prototype/validation.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/js/scriptaculous/builder.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/js/scriptaculous/effects.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/js/scriptaculous/dragdrop.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/js/scriptaculous/controls.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/js/scriptaculous/slider.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/js/varien/js.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/js/varien/form.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/js/varien/menu.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/js/mage/translate.js"></script>

<script type="text/javascript" src="http://example.com/magento_37341/js/mage/cookies.js"></script>

<script type="text/javascript" src="http://example.com/js/prototype/prototype.js"></script>

<script type="text/javascript" src="http://example.com/js/lib/ccard.js"></script>

<script type="text/javascript" src="http://example.com/js/prototype/validation.js"></script>

<script type="text/javascript" src="http://example.com/js/scriptaculous/builder.js"></script>

<script type="text/javascript" src="http://example.com/js/scriptaculous/effects.js"></script>

<script type="text/javascript" src="http://example.com/js/scriptaculous/dragdrop.js"></script>

<script type="text/javascript" src="http://example.com/js/scriptaculous/controls.js"></script>

<script type="text/javascript" src="http://example.com/js/scriptaculous/slider.js"></script>

<script type="text/javascript" src="http://example.com/js/varien/js.js"></script>

<script type="text/javascript" src="http://example.com/js/varien/form.js"></script>

<script type="text/javascript" src="http://example.com/js/varien/menu.js"></script>

<script type="text/javascript" src="http://example.com/js/mage/translate.js"></script>

<script type="text/javascript" src="http://example.com/js/mage/cookies.js"></script>

Solution:

We recommend using maximum of 3 JavaScript files on the website to make it search engine friendly and help the pages load faster.

[edited by: bill at 2:16 am (utc) on Aug 1, 2013]

[edited by: whoisgregg at 4:29 pm (utc) on Aug 1, 2013]
[edit reason] No links to your sites. Use example.com [/edit]

[DrDoc]

Welcome to WebmasterWorld!

Can Heavy Use of JavaScript make page load slow

Short answer -- YES!

Checkpoint 1: Excessive use of JavaScript
We find excessive use of JavaScript on your website. Use of JavaScript code within the body tag of website pages makes the pages heavy and difficult to load both for search engines and direct visitors to your website.

While "3" is somewhat of an arbitrary number, having a large number of external references to anything is a bad idea.

Best scenario:

• one stylesheet
• one script file

Problem 1:
For every file referenced (be it css/js/swf/gif/jpg/png/whatever), the browser has to make another request to the server to fetch the resource.

Problem 2:
Depending on the file size, you have now significantly increased the total weight of your page.

Problem 3:
In the case of CSS/JS and similar, the browser now has to parse the document and apply its rules or run a function.

Problem 4:
Excessive scripting may lock up the browser until the script is done running, resulting in script warnings and/or annoyance for the user.

So, yeah, excessive use of external files is bad. In your example above, it definitely falls under "excessive". But the real solution is more complex than simply cutting the number down to an arbitrary limit.

[JAB Creations]

1.) Don't use frameworks, especially jQuery, browsers *gasp!* already have JavaScript built in to them! Everything people use jQuery to do has already been coded competently without shoving 70KB+ down a client's modem.

2.) Don't put script elements in the body, EVER! Use the following...

<head>
<script defer="defer" src="index.js" type="application/javascript"></script>
<script defer="defer" src="onload.js" type="application/javascript"></script>
</head>

While one script file may be ideal in some circumstances if you need to use global variables keep them inside your onload.js along with your window.onload event. Use a scripting language like PHP to include all the script files at the server in to a single index.js file.

Once you get advanced use ondemand JavaScript and insert new script elements in to the head element for features that aren't commonly used to offload loading unnecessary scripting on the initial page load. Also make sure your assets like CSS and JavaScript files are cached properly, the client should only even REQUEST them about once every ten minutes tops, otherwise it should presume it has a current copy...

<?php
date_default_timezone_set('GMT');
session_cache_limiter('private_no_expire, private');
session_name('member');
session_start();
header('Cache-Control: max-age=600, private');
?>
// JavaScript code here.

- John

[JD_Toims]

Not sure I agree with the non-use of libraries like jQuery from a "common source" since most of the time they will be cached by browsers from previous requests, I can say multiple .js files on a site are not in any way ideal.

When a "script" is encountered by a browser it will stop all concurrent downloads from the host until the download of the script is completely downloaded, so it can affect the overall page load time negatively for sure.

If you need to include JS/jQuery, do it all in one file right before the </body> tag of a page... I use jQuery from a "standard source" and unless I empty my cache it's a non-slowdown... If I do, it takes a second or two extra, but if the HTML is displayed first I hardly even notice the extra time to "grab" the jQuery, because browsers will open another connection to a different host name.

[graeme_p]

Jquery is only 32kb minified and gzipped, is productive and deals with a lot of browser compatibility issues.

If you can dispense with it fine, but its sometimes worth it.

One thing people sometimes forget is to include CSS before JS, because that way

1) the CSS loads in parallel with the page
2) the wait for jquery before rendering stops the flash of unstyled content problem.

[DrDoc]

Using jQuery sometimes saves bandwidth on a JS-heavy site. Why? Because it's minified and allows reusing of code better than most can code it on their own. Granted, if you don't use a lot of JS on your site, then there's certainly no need to include the full jQuery library.

As for

defer="defer"

... that, unfortunately, doesn't always work as well as one would like. Just place your JavaScript files last in the body. That is, still, the best place for them, all things considered.