Speeding Up Javascript Downloads

Tuesday, July 22nd, 2008
Looking at different methods of including Javascript in web pages to determine the fastest method for page loading and rendering.
This post was inspired by Non-blocking JavaScript Downloads as well as Steve Sounders Google I/O presentation.

The Test Method

To set these tests up I created 5 php files that each sleep for 2 seconds before returning one Javascript variable to the page. The 2 second sleep time and the tiny file size makes any network or bandwidth variability have a negligible affect on the overall time for the downloading. This isn’t meant to simulate real world, it’s meant to easily illustrate the differences in download time while eliminating network/bandwidth issues as much as possible. Here is an example of one of the php files: 
<?
Header("content-type: application/x-javascript");
sleep(2);
// Setting Var for Safari 2 to check when script is loaded
??>
var d1 = true;
On to the tests

Including Javascript in the Header

This is the most common way of including Javascript files in a page:

<head>
<title>Loading scripts in header normally</title>
<script type="text/javascript">
      var start= new Date();
   </script>
<script type="text/javascript" src="delay1.php"></script>
<script type="text/javascript" src="delay2.php"></script>
<script type="text/javascript" src="delay3.php"></script>
<script type="text/javascript" src="delay4.php"></script>
<script type="text/javascript" src="delay5.php"></script>
<script type="text/javascript">
     var end= new Date();
     alert(((end - start) / 1000) + 'seconds');
   </script>
</head>

The file can be viewed and test here. As Stoyan points out loading scripts in the header blocks everything else on the page, including other scripts. So ...

Full entry and comments
Read other entries about Javascript
Written by James Punteney

Automated Mouseover Images using YUI

Sunday, July 13th, 2008
Setup image mouseovers quickly and easily just add a css class. The script preloads the images and will also verify that the over state image is available so broken images aren’t displayed.

When building sites often image mouseovers or rollovers are needed, while there are many ways to go about adding in this functionality all of them required more steps than ideal. At the very least you’d have to specify the over state image to use and attach some some javascript to the mouseover and mouseout events. To streamline this process I created this mouseover script, an example of it in action is to the right.

To enable the mouseover just include the required javascript files and then for any image that should have the mouseover apply the css class of “jp-mouseover”. For the over state image it will look for the image name with “_ov” appended just before the the file extension. For the example to the right the two images are named “mouse-over-me.png” and “mouse-over-me_ov.png”.

Details, examples, downloads, and configuration options are here.

Full entry and comments
Read other entries about Javascript
Written by James Punteney

Setting up Django on SliceHost with Ubuntu Hardy, Postgres, Apache, and Nginx

Friday, May 2nd, 2008
Step by step process of setting up Django on an Ubuntu Hardy slice at Slicehost.

This week I setup Django on a slicehost slice using Ubuntu Hardy for the OS, Postgresql for the db, Apache for serving the django app, and Nginx for serving the media and proxying to apache. For my future reference and hopefully to help out others here is the process I went through.

Slicehost has some easy to follow and straight forward articles to start I just followed along with the articles.

Setting up Ubuntu

Start with the Ubuntu Hardy setup - page 1. You can follow this guide straight through. The only complicated part is when you do the “visudo” command ...

Full entry and comments
Read other entries about Django
Written by James Punteney