Reducing the amount of JS - Heavy JS

Hi

I run a football website that whows league tables. Each league table has a bit of JS

I was wondering if I could clean (and speed) this up?

I’m sure I don’t need all the JS and could put one link in the header, I just don’t know how!

Example below:

         <h3>Premier Division</h3>
		
<div id="lrep123581294" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=495093396">click here for Premier</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
<script language="javascript" type="text/javascript">
var lrcode = '123581294'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>		

       <h3>Division 1</h3>
		
<div id="lrep929926638" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=104191348">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
<script language="javascript" type="text/javascript">
var lrcode = '929926638'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
		
		<h3>Division 2</h3>		

<div id="lrep173961819" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=609487635">click here for Division Two</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
<script language="javascript" type="text/javascript">
var lrcode = '173961819'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>

Hi there,

If you look at the contents of the scripts you are including they look like this:

var randno = Math.random();
var el = document.createElement("script");
el.src = "http://full-time.thefa.com/js/cs1.do?cs="+lrcode+"&random="+randno;
el.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(el);

So basically, they are using a previously declared variable together with a randomly generated number to create a script tag and append it to the head of your document.

There’s no reason that you couldn’t make this more generic, like so:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Football!</title>
    <script>
      function createScript(id){
        var randno = Math.random();
        var el = document.createElement("script");
        el.src = "http://full-time.thefa.com/js/cs1.do?cs=" + id +"&random="+randno;
        el.type="text/javascript";
        document.getElementsByTagName("head")[0].appendChild(el);
      }

      createScript("123581294");
      createScript("929926638");
      createScript("173961819");
    </script>
  </head>

  <body>
    <p>Hello!</p>
  </body>
</html>

Excellent feedbacka s per usual Pullo. Thank you very much

Would this speed up my loading times at all?

Hey,

Probably, but only very slightly.
For me, the main advantage of this approach would be that I didn’t have to have script tags scattered throughout my HTML.

So, are you interested in speeding up your loading times?
There are numerous ways to do this.
If so, just let me know and I’ll summarize a few of them.

Also, please give me a few details about your site (e.g. do you use a CMS, where is the site hosted, what kind of access do you have to the server etc.)

The best way to avoid <script> scatter is to move them all to just before the </body> tag.

That also reduces the amount of code needed by some scripts as you no longer need code to test of the DOM has loaded and only one or two possible scripts will ever need to test for onload.

The only time moving all the scripts to just before the </body> tag increases the amount of code needed is where the scripts contain antiquated document.write calls that need to be parsed into something better.

Thanks guys

Speed isn’t something I’m particularly concerned about but It can never harm!

Fair enough.
Then at your leisure, I would recommend having a look at YSlow.