The more code you have on the page, the more “junk” a spider has to crawl through before it gets to the “meat” of the page. Ideally, you should minimize the amount of code on the page as much as possible using CSS. However, many website designers will create absolutely beautiful sites to look at, but behind the scenes they are choking with code. Much of this code often comes from Java Script. This tutorial will show you how to take java script off of your page and put it into an external file. It will look the same and function perfectly, but your code-to-text ratio will be much better.

Let’s say you have a java script navigation menu. This isn’t a good idea in terms of site architecture because it makes it difficult for a search engine spider to crawl through your site. Instead, we advise you to figure out a way to make the same effect while using CSS styles instead of java script.

However, there are still many things that Java script can do, which just cannot be replicated using html and css. In such cases you can still decrease your Code-to-Text ratio (sometimes called code-to-content ratio) by moving that chunk of java script to an external file. This is especially important when you have a long snippet of java script that takes up half the page when you view the source code.

Moving Java Script to an External .js file

NOTE: In order to show you what the code will look like without causing the browser to attempt to render the code, I have replaced < with ( and > with ).

Step 1: Create a text file in your root directory and name it whatever you want it to be called, but instead of the .txt extension, use .js . For this example, we are going to use the file name navbar.js and we are going to place it in the root directory.

Step 2: Cut all of the java script between the (script) and (/script) tags from the page and paste it into the .js file called navbar.js (or whatever you have named it). You do not need the beginning and ending script tags because these will remain on the page, as seen in the next step…

Step 3: Refer to the file using the code below:
(script type=”text/javascript” src=”navbar.js” mce_src=”navbar.js” )(/script)

Step 4: Upload your new files and text to make sure everything is working correctly.

NOTES:
1. Remember to replace the filename navbar with whatever you name your own file.
2. If you have multiple java scripts they may be easier to maintain if you put all of the .js files into a folder called scripts, or some other descriptive name.
3. If the .js file is inside another folder (as opposed to being in the root directory) you will need to add a foldername/ before  the filename.js in the code on step 3.
4. Even if you are using strict XHTML, DO NOT replace the format in step 4 with something like: (script type=”text/javascript” src=”navbar.js” mce_src=”navbar.js” /) . It is valid XHTML, but will not render in non-XHTML browsers.