Embedded or External Scripts

 

We all want our web sites to load as quickly as possible. It is also common for the <head> area of the page to contain a lot of information. At one time (much older templates), it was common to see pages that typically had:

html Example
  1. <head>
  2. ...
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  4. <script src="javascripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>
  5. <script src="javascripts/lightbox.js" type="text/javascript"></script>
  6. <script src="javascripts/tabbedcontent.js" type="text/javascript"></script>
  7. <script type="text/javascript>
  8. $(window).load(function() {
  9. $('#slider').nivoSlider({
  10.    effect:'fade',
  11.    animSpeed:1000,
  12.    pauseTime:6000,
  13.    directionNav:false,
  14.    captionOpacity:0.70, //Universal caption opacity
  15.    controlNav:true,
  16.    keyboardNav:false,
  17.    pauseOnHover:false
  18.    });
  19. });
  20. </script>
  21. <script type="text/javascript>
  22. $(document).ready(function () {
  23. $('#nav li').hover(
  24.    function () {
  25.    //show its submenu
  26.    $('ul', this).stop().slideDown(400);
  27.    },
  28.    function () {
  29.    //hide its submenu
  30.    $('ul', this).stop().slideUp(400);
  31.    $('ul', this).stop(true, true); }
  32.    );
  33. });
  34. </script>
  35. </head>

As browsers improved, it became more popular to enhance the page load times by moving the links to javascripts to the bottom of the page. By placing them right above the closing </body> tag, the DOM (document object model) can fully load and the scripts can load after that. It was definitely an improvement.

html Example
  1. <head>
  2. ...
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  4. <script type="text/javascript>
  5. $(window).load(function() {
  6. $('#slider').nivoSlider({
  7.    effect:'fade',
  8.    animSpeed:1000,
  9.    pauseTime:6000,
  10.    directionNav:false,
  11.    captionOpacity:0.70, //Universal caption opacity
  12.    controlNav:true,
  13.    keyboardNav:false,
  14.    pauseOnHover:false
  15.    });
  16. });
  17. </script>
  18. <script type="text/javascript>
  19. $(document).ready(function () {
  20. $('#nav li').hover(
  21.    function () {
  22.    //show its submenu
  23.    $('ul', this).stop().slideDown(400);
  24.    },
  25.    function () {
  26.    //hide its submenu
  27.    $('ul', this).stop().slideUp(400);
  28.    $('ul', this).stop(true, true); }
  29.    );
  30. });
  31. </script>
  32. </head>
  33. <body>
  34. web content goes here
  35. ....
  36. <!-- move javascripts here -->
  37. <script src="javascripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>
  38. <script src="javascripts/lightbox.js" type="text/javascript"></script>
  39. <script src="javascripts/tabbedcontent.js" type="text/javascript"></script>
  40. </body>

We wanted to streamline things even more, so we made the embedded javascript into an external one. Copy the javascript code that is embedded like in the example below and paste into a plain text editor like Notepad. In this case, we are working with the code for the Nivo Slider:

Embedded Javascript
  1. <script type="text/javascript>
  2. $(window).load(function() {
  3. $('#slider').nivoSlider({
  4. effect:'fade',
  5. animSpeed:1000,
  6. pauseTime:6000,
  7. directionNav:false,
  8. captionOpacity:0.70, //Universal caption opacity
  9. controlNav:true,
  10. keyboardNav:false,
  11. pauseOnHover:false
  12. });
  13. });
  14. </script>

Remove the opening <script type="text/javascript> line and the closing </script> line. Save the notepad file as slider.js into the location where your javascripts are kept. Typically it will be a folder within your web called javascripts, js, scripts or something similar. You can do this for each embedded javascript that is in the <head> of your page.

Now the <head> area has less to load into the DOM, and the scripts will be loaded last:

Revised HTML
  1. <head>
  2. .....
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  4. </head>
  5. <body>
  6. ...
  7. <!-- javascripts -->
  8. <script src="javascripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>
  9. <script src="javascripts/slideshow.js" type="text/javascript"></script>
  10. <script src="javascripts/menu.js" type="text/javascript"></script>
  11. <script src="javascripts/nivo-lightbox.min.js" type="text/javascript"></script>
  12. <script src="javascripts/tabbedcontent.js" type="text/javascript"></script>
  13. </body>

In our newer templates, all of the javascripts are placed at the bottom of the page. We also have taken several of the smaller scripts and combined them into a single javascript file. Now all of the CSS goes in the top and the javascripts go in the bottom. It faster and much more efficient.

New Revised HTML
  1. <head>
  2. .....
  3. </head>
  4. <body>
  5. ...
  6. <!-- javascripts -->
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  8. <script src="javascripts/main.js" type="text/javascript"></script>
  9. <script src="javascripts/nivo-lightbox.min.js" type="text/javascript"></script>
  10. </body>