Speed up your Javascript

The code for most webpages consists of 50% navigation, 50% content.
The content is usually unique for the page while the navigation most often is the same across the site (or corners thereof).

Now, if only it was possible to save code pieces in external files, we could have the entire navigation cached on the visitor’s local machine and seriously speed up the loading time.

Unfortunately it isn’t, so we need to be a little creative. While browsers do not allow for client side insertion of HTML code pieces they do allow for insertion of javascript.

So if we could just turn our navigation into javascript pieces, we can achieve what we want.
Fortunately that is easy! All we need to do is change our HTML pieces to javascript document.write sentences.

Look at this example:

HTML:
Hello world<br>
<h1>I AM HAPPY!</h1>
JavaScript:
document.write(‘Hello world<br>’);
document.write(‘<h1>I AM HAPPY!</h1>’);
Simple isn’t it?

Okay – one thing to keep in mind is – The HTML code pieces are enclosed in single quotes.
If we have this in HTML: “Simple isn’t it?”, then the “isn’t” part will cause trouble when embedded in a document.write because the single quote will confuse javascript into thinking that the quoting ends there.
To avoid this confusion you need to place a ” \ ” in front of the apostrophe like this:

document.write(‘Simple isn\’t it?’);
The ” \ ” tells javascript that whatever follows should be interpreted as text, not javascript.

Look at this example:

First a plain HTML example:

<html>
<head>
<title>Plain HTML example</title>
</head>
<body>
<table><tr><td bgcolor=”yellow”>
This is the Top Banner!
</td></tr></table>
<br>
This is the content for the page.<br>
bla bla bla…
</body>
</html>
Assume that we wanted to place the top banner in an external javascript.
In that case we’d write this to a file called banner.js:

document.write(‘<table><tr><td bgcolor=”yellow”>’);
document.write(‘This is the Top Banner!’);
document.write(‘</td></tr></table>’);
The HTML file would look like this:

<html>
<head>
<title>Plain HTML example</title>
</head>
<body>
<script type=”text/javascript” src=”banner.js”></script>
<br>
This is the content for the page.<br>
bla bla bla…
</body>
</html>
In this example, the banner is just 3 lines of HTML – but you could easily picture an example with 57 lines of HTML that were used to create the page tops of all pages on the site.
Keeping reusable navigation elements in external files can easily decrease loading times to half or less!

A slightly more advanced example:

First look at this plain HTML code that has both a header and a footer:

<html>
<head>
<title>Plain HTML example</title>
</head>
<body>
<table><tr><td bgcolor=”yellow”>
This is the Top Banner!
</td></tr></table>
<br>
This is the content for the page.<br>
bla bla bla…<br>
<table><tr><td bgcolor=”yellow”>
This is the Bottom Banner!
</td></tr></table>
</body>
</html>
In this case we can’t just save the code in a single javascript file like
we did above.
An obvious solution would be to save the header to “header.js” and the footer to “footer.js”.

In that case the resulting page would be:

<html>
<head>
<title>Plain HTML example</title>
</head>
<body>
<script type=”text/javascript” src=”header.js”></script>
<br>
This is the content for the page.<br>
bla bla bla…<br>
<script type=”text/javascript” src=”footer.js”></script>
</body>
</html>
The above example would work smooth, but it might be a bit complex to handle each external code piece as a script of its own.
What if we wanted to keep all the code pieces in a single javascript file?

Look at this example for an external javascript file:

function header()
{
document.write(‘<table><tr><td bgcolor=”yellow”>’);
document.write(‘This is the Top Banner!’);
document.write(‘</td></tr></table>’);
}

function footer()
{
document.write(‘<table><tr><td bgcolor=”yellow”>’);
document.write(‘This is the Bottom Banner!’);
document.write(‘</td></tr></table>’);
}
If we saved the above code as external.js we could insert the code pieces in the plain HTML file.
The trick is to write each codepiece as a function in the external.js file, then link to external.js in the head of our HTML pages.
Finally, wherever the code pieces are needed, we just insert a function call in our HTML body.

The HTML page would look like this:

<html>
<head>
<title>Plain HTML example</title>
<script type=”text/javascript” src=”external.js”></script>
</head>
<body>
<script type=”text/javascript”>header();</script>
<br>
This is the content for the page.<br>
bla bla bla…<br>
<script type=”text/javascript”>footer();</script>
</body>
</html>

Speed up your CSS

If you don’t know what stylesheets are you can learn about them from the CSS tutorial.

Let’s assume you have defined a style named “headlines” then your HTML using CSS would look like this:

<span class=”headlines”>This is a headline</span>
bla bla bla<br>
bla bla bla<br>
<br>
<span class=”headlines”>This is another headline</span>

Compared to the plain HTML equivalent:

<h1><font face=”verdana” size=”5″ color=”#FF0000″><b><i>This is a headline</i></b></font></h1>
bla bla bla<br>
bla bla bla<br>
<br>
<h1><font face=”verdana” size=”5″ color=”#FF0000″><b><i>This is a headline</i></b></font></h1>

It is obvious how CSS shortens your pages since you don’t have to specify the entire style each and every time its used. All you need to do is refer to it with a class=”stylename”.

However, with respect to speedpages it gets even better. CSS definitions can be saved in external files rather than at the top of each page.

This has several advantages, the most obvious are:
When saved in a file of their own it can be cached on the visitors local machine and doesn’t need to be loaded for each and every page.
When kept in a single external file you as a designer can change style elements across the site in one move!
The techinique is simple: Save the CSS in a plain text file and place a link in the head of your pages using this syntax:

<link rel=”stylesheet” type=”text/css” href=”fileName.css” />

Note: The textfile should NOT include the <style type=”text/css”> and </style> tags that you’d use if you defined the style on the HTML page itself.

Speed up your web pages

Browsers can’t display tables until they know what is in them. This simple fact has several impacts on speed pages.

BREAK TABLES WHENEVER POSSIBLE:

If your entire page is enclosed in a single invisible table, it can’t show up until the last word on the page is loaded.
You have probably experienced sites that seem to take forever to load then all of a sudden *POOF* the entire screen is filled with content.

Had these sites been designed in multiple tables instead of just one then each table would show up as soon as it was loaded.

Therefore – do not miss an opportunity to put an end to an outer invisible table that is used for layout purposes.
All it takes is a “</td></tr></table>” – so it won’t mean a thing to the pages size or actual loading time.

However, if you don’t do this the “felt waiting time” for your page will be too much for many visitors.

What matters is not how long it takes for the page to load entirely –
but how much time it takes for something to show up that the visitor can relate to.

If the layout is made so that it’s not possible to break the outer table across the page you should 1) redesign the site, 2) explain to the designer that web design is different from paper design and 3) send the designer back to school.

Web pages that are designed with no respect to horizontal cross page divisions are not designed for their media – obviously a bad starting point for a good user experience.


ALWAYS ADD HEIGHT AND WIDTH ATTRIBUTES FOR IMAGES:

You must always specify height and width attributes for images – so the browser knows the sizes even before the images are loaded.

This will let the browser display content before all images are loaded, because it already knows the dimensions and can position the elements while using empty space for images until they are loaded.


USE THUMBNAILS:

If you have an image collection don’t just resize the full size images to use them as thumbnails on the index page. Resize the images in your graphics program and upload two versions of each image – one for the index and one for the full size page.


REUSE LOGOS AND NAVIGATION ELEMENTS:

Do not change the graphics for logos and graphic navigation elements from page to page. For example, you may want a slightly different look for certain areas of your site, which is okay, but if you change the basic graphics on each and every page the visitor will have to wait for them to load and it will destroy the user experience.


KEEP SECONDARY INFO AT THE END OF YOUR PAGES:

Web pages loads from the top and down. This means that the code at the top of your HTML document will show up before the code at the bottom. Therefore you should keep secondary codepieces at the bottom – no matter where you want them to appear on your pages.

If, say, you have a column in the right side that is used for advertising info and other secondary content (from the visitors perspective) – you should ideally just leave the column empty at first… then dynamically throw the secondary content in there when you reach the bottom of the HTML document.

(The page on DHTML for speedpages explains how to easily position content no matter where its kept in the HTML document).


KEEP STYLE ATTRIBUTES OUT OF HTML:

If you write style elements (font settings and color attributes) in HTML you will have to write them wherever they are triggered on your pages.

This means:

  • You will probably repeat the same codes for style elements over and over throughout your pages.
  • You can not keep the style elements in one file that can be cached on visitors local machine.
  • You are limited to the layout attributes offered in plain HTML compared to the extensive attributes offered in CSS.

These lead to the fact that your pages will be bigger, require more disk space on the server, take longer to transfer to your visitors and thus result in higher bandwidth usage for your site which may both slow down the server itself and cost you money (if the site is popular enough you will be charged for extensive bandwidth usage).
The conclusion is obvious: Style elements should not be written in HTML – they belong in the CSS.

A simple way to impliment this rule is to forbid the following in your flat HTML coding:

      1.

<font>

      tags. There is nothing you can do with a font tag that can’t be done with CSS.

 

      2. Color attributes of all kinds whether they be in the

<body>, <table>, <tr>, <td>

      or

<font>

    tags.