2006-04-05

Improving page load times

Freshblog wonders if and how you cut down on page load times where external script files are involved. Depending a bit on what those scripts do and how they do it, you can.

If you run multiple constant, feature frozen scripts (contrary to evolving, externally hosted script maintained by some third party, such as the Labelr code John just retired due to excessive lag), you may join them all into one single script, pasting them together into one file in the order you used to link them in your page, and link to that file instead. This does not count bits that you need to add to specific parts in your page template for them to do their job, for instance if they use document.write() to inject content where they are put. (Google AdSense does this, for instance.)

This cut and paste job can bring down tens of script fetches into a single http request, which, assuming you put the script on a fast and responsive server, does marvels for page load times by eliminating a dependency on a multitude of different web servers to all be as quick and responsive serving your page its script code.

On a related note, if you link to lots of images on various web servers (hotlinking icons from social networking sites, feed readers, trendy eye candy, translation flags and whatnot) from lots of random locations, the same problem applies. If your blog is hosted by Blogger, I would warmly recommend using their quite excellent image hosting facility, downloading all the imagery you use to your hard disk, uploading them once to the Blogger image servers, picking up the URLs they got and using those URLs for your own template. It's a bit laborsome, but your blog visitors will thank you.

Conversely, if your blog template includes very large amounts of of inlined CSS code, as Blogger templates often do (as Blogger to date has not provided the option of hosting external CSS files for you), you may actually gain load time by ripping out all that code and putting it in an external file that gets loaded once, and for later page loads is cached by the visitor's browser so each consecutive page load does not have to fetch the same CSS code over and over again.

There are several good page load measuring tools available on the web, some of which give you good statistics and overviews of what adds load time for your web pages:

  • Web Page Analyzer shows nice table views over component sizes and minimum load times for modem bound visitors (and people on slow network connections in general).

  • Loading time checker is another, which lists a summary time and shows your images (though not those linked from CSS, which Web Page Analyzer handles).

  • Stop watch measyures how long time it takes your own browser to load the page, given your present state of page content and/or component caching.

11 comments:

  1. I really like the webpageanalyser tool. It helps me keep my site size under control.. Although I wish people had faster internet connections ;).

    ReplyDelete
  2. but blogger dosent allow us to upload files...do you know any places where i can host them for free?

    ReplyDelete
  3. No personal experience, but I believe Yahoo and Google would have decent suggestions up their sleeves.

    ReplyDelete
  4. Johan,

    Thanks for picking this up & driving the discussion forward.... Much appreciated!

    ReplyDelete
  5. Sorry Johan I have to disagree with one suggestion you made about hosting all your images in blogger.

    I started doing this myself but found three significant problems:

    1. Blogger doesn't provide any easy way of you editing or viewing previously uploaded images so you often end up having to re-upload images again if they're not quite right or you've forgotten/lost the original URL
    2. (More significantly) Blogger only allows you to view images from pages served directly from blogspot/blogger sites.
    3. Blogger do some real horrible lossy image compression on pictures you upload

    The second one is the real gotcha for me, I started with uploading my images to Blogger and then found that they didn't appear when viewing my Feedburner RSS feed or the FeedBlitz email feed.

    So I've ended up just uploading Iconography that appear on my blogspot template such as the RSS chevron, 'Add to MyYahoo' button, etc (another slight moan - why are these not available in a common library on Blogger rather than each of us having to upload our own). I now use flickr for all images I include in my blog - no problems with 3rd party page referrals or images being badly compressed.

    I do agree with trying to make the site as small and quick to load as possible. Personally I use the free Irfanview image program to resample/lower the colour depth and compress my images and I also take time to try to make the HTML as small as possible.

    ReplyDelete
  6. Yeah, it seems it's a bad suggestion nowadays, though I'm 90% sure there was at least a brief period of time some time during the past six months, when the Blogger image servers would allow uploading PNG images uncrunched (3 being my own biggest pet peeve, though feeds are important, too).

    Excellent suggestions.

    ReplyDelete
  7. For page loads, also check out IBM Page Detailer which shows you a gantt chart of page load times for all page elements. Needs a simple tweak to get it to work with Firefox. Also it's a 3-month trial.

    ReplyDelete
  8. do you have any suggestion on how to start with maximizing the blogger template, as in how to separate the CSS/JS files? i'd like to do that only, i'm a bit scared that i'm gonna break things somewhere along the way.
    my front page as it is is already a bit unruly with the CSS/JS there.

    ReplyDelete
  9. any fast loading pre-made template suggestions?

    thanks

    ReplyDelete
  10. if you are looking for a place to host external files, then Mediamax is the answer, 25GB free and works great with FireFTP on the Firefox browser

    ReplyDelete
  11. Your article has spurred me on to save images to my own server rather than linking to them on other sites, thank you. I am attempting to determine the cause of slower page loading times (probably one of the numerous scripts I have installed though)and cull unnecessary add-ins.

    Google is using its Picasa site to save images uploaded to the new Blogger. If you login to Picasa using your Blogger gmail account you will find an album with the same name as your blog. (but only if the language is set to English it seems). Although you cannot upload to this particular album you can create others which you can use for your blog.

    Using the Google "BlogThis" tool you can load images into a blog post. (or just copy and paste the html code that is shown in Picasa into your blog.) If you need to alter the image, just overwrite the old one in Picasa. Further instructions here http://tinyurl.com/2yosrg

    ReplyDelete

Limited HTML (such as <b>, <i>, <a>) is supported. (All comments are moderated by me amd rel=nofollow gets added to links -- to deter and weed out monetized spam.)

I would prefer not to have to do this as much as you do. Comments straying too far off the post topic often lost due to attention dilution.

Note: Only a member of this blog may post a comment.