Preloading external javascripts, images and css files

Question

I have been working on a web application which (despite my best efforts) has been steadily getting bigger and bigger with more and more scripts, images and css files being called.

Being a web application I think it is perfectly acceptable for a pre-loading screen to appear after the user has logged in and before they reach the dashboard. On this page I want to call all external scripts, css files and images to be downloaded to the browser so that they are pulled from local cache rather than being downloaded on demand during the running of the application.

I am aware that there are billions of image preloader scripts, but I need to go one step further, with everything (mainly external scripts) being called on the page to be preloaded.

Thanks, Tim

i would suggest using a cdn for your stylesheets, images and scripts. this way it will be cached(by the server though) but it will be as good as a local cache as it will return faster. — corroded
– corroded, Commented Mar 30, 2011 at 3:12
as far as text based assets you might want to compile all js and css into single files, minify them then serve them with gzip compression... i would then use a CDN for static images as corroded suggested... — prodigitalson
– prodigitalson, Commented Mar 30, 2011 at 3:17

Matt Briggs · Accepted Answer · 2011-03-30 03:24:24Z

1

http://requirejs.org/ for script loading. Not sure about for css. Also, not sure what platform you are on, but jammit for rails is pretty great for asset management.

answered Mar 30, 2011 at 3:24

Matt Briggs

42.4k17 gold badges103 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shamit Verma · Accepted Answer · 2011-03-30 03:39:03Z

0

You can :

Divide the page in two iframes or DIV elements
On page load, just show iframe that has a "loading..." animation
Second iframes's source URL should be blank to begin with. On page load, set to actual page URL. This iframe should be hidden.
On Completion of load for this iframe, hide the "loading" iframe and show this one.

answered Mar 30, 2011 at 3:39

Shamit Verma

3,82725 silver badges22 bronze badges

Comments

Slappy · Accepted Answer · 2011-03-30 03:39:53Z

Although I havent seen a question in there, I am assuming we are talking about speeding up a web page loads.

Having a preload page is a little pointless since the script ultimately has to be downloaded, so why bother sending the user to a pre load page. You simply incur additional redirect requests.

You got 3 main ways to reduce load times:

Reduce HTTP Requests
Reduce download size
Move static content closer to the client

Combres (.NET) is great and handles concatination and minification of scripts and CSS. I am sure there is something similar for other tech stacks. This limits the number of files downloaded (also providing a minification hook)

Also make sure you are using CSS sprites. This limits the number of images downloaded

As far as size goes:

You havent mentioned the tech stack you are on, but try look at some script minification libraries (YUI Compressor, etc).

Also make sure you are using GZip (via either IIS config or on hardware via load balancer or whatever)

There is also several javascript techniques that you can use to perform JIT downloads of scripts and basically prioritize the user exeprience. Steve Souders has some great books on these techniques

After these approaches you then start to look for hardware solutions like CDN's, etc. These ensure your content sits close to your target audience for faster downloads.

Yahoo have some great guidance on this: http://developer.yahoo.com/performance/rules.html

Collectives™ on Stack Overflow

Preloading external javascripts, images and css files

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related