Clean Your Code

This is an easy step, and should be something you have in the back of your mind when coding a new site. You don’t want your code to look messy, or have any extra div files. The more basic your code is, the faster the loading time. It should look clean crisp and white.

“For a more definitive marker, if your page HTML is over 30kB-50kB, then you have an issue you need to address. This can be checked in the Web Developer extension for Firefox and Chrome,” says Kristine Schachinger of SearchEngineWatch.

HTML is not the only code that should be clean—make sure your style sheets are in order as well. Keeping things neat and organized should ensure a faster loading time. When implementing large photo files, use a compressed file instead. This will also keep your CSS more clean and help with loading time.

HTTP Requests

This is a big one. The more HTTP requests you have the longer your loading time. Below is a screenshot to help you better visualize how HTTP requests work.

The more times your page requires these types of requests from the server, the longer it will take for the browser to display the page. Using AJAX is one way to help streamline your process, but as Aaron Hopkins points out, “for many sites that reference dozens of external objects, the majority of the page load time is spent in separate HTTP requests for images, javascript, and stylesheets. AJAX probably could help, but speeding up or eliminating these separate HTTP requests might help more. ”

Hopkins goes on to say that most DSL/cable Internet connections, “have asymmetric bandwidth, at rates like 1.5Mbit down/128Kbit up, 6Mbit down/512Kbit up, etc. Ratios of download to upload bandwidth are commonly in the 5:1 to 20:1 range. ” To summarize, this means the requests can take the same amount of time to send as it would to display an object that is 5-20 times the request size.

One way to speed up your site if you do have multiple images is to set your keepalive active. “The Keep-Alive extension to HTTP/1.0 and the persistent connection feature of HTTP/1.1 provide long-lived HTTP sessions which allow multiple requests to be sent over the same TCP connection. In some cases this has been shown to result in an almost 50% speedup in latency times for HTML documents with many images. Toenable Keep-Alive connections, set KeepAlive On,” according to apache.org.

Caching

When sending HTTP requests, many people implement caches to help with load time. This can be a great fix, but if you update your images and other cached items, it could actually take longer. “Even though the browser has the logo, it doesn’t know whether the image can be used. After all, the file may have changed on the server and there could be an updated version,” reports betterexplained.com.

You can get around this however in a few different ways. One being with an ETAg—which, “allows a client to make conditional requests. This allows caches to be more efficient, and potentially saves bandwidth, as a web server does not need to send a full response if the content has not changed. ”’

You can also have it figured so that the browser checks for the date of when the file was last modified. This can be a good fix, but the ETag is more preferred because of situations such as day light savings, the initial clock was wrong when programming etc.

Javascript and CSS Files

When looking at your Javascript make sure you are putting your files on the external .js file. If you use JQuery, make sure you don’t have any unwanted script in your code. JQuery is known to have libraries of scripts you never use.

When using XHTML you can streamline your code to ensure your HTTP requests are limited. An example of this is below:

So this:

<link rel="stylesheet" type="text/css" href="/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/css/nav.css" />
<script src="/js/functions.js" type="text/javascript"></script>
<script src="/js/validation.js" type="text/javascript"></script>

Becomes this:

<link rel="stylesheet" type="text/css" href="/css/combined.css" />
<script src="/js/combined.js" type="text/javascript"></script>

Even better, XSSI these files directly into high traffic pages, like this:

<style type="text/css">
<!--
<!--#include virtual="/css/combined.css" -->
-->
</style>
<script type="text/javascript">
<--
<!--#include virtual="/js/combined.js" -->
// -->
</script>