Best way to deliver images from Node.js app (using express)
You can pre-load your image sprite by inserting it at the most bottom of your Sign-in page & making it invisible. While the browser is parsing and rendering your Sign-in page, it will encounter your image sprite and load it but will not display it. Because it's at the end of the page, it will not interfere with the UI and your users will see the UI first.
<html><body>... <div style="display:none"> <img src="sprite.png"/> </div></body></html>Or you can load it using JavaScript
$(function() { // when DOM is ready $(window).load(function() { // when the page is fully loaded including graphics $('body').append($('<div><img src="sprite.png"/></div>').hide()); });});Also, don't forget to instruct express to tell the browser that the sprite can be cached:
app.use(express.compress()); // optionalapp.use(express.static(app.root + '/app/public', { maxAge: 86400000 /* 1d */ }));
Server can only serve content which is requested by user. Caching is done by browser to reduce the file transfers (required by the page) and improve performance.
For caching to happen, browser must request the files at least once. Thereafter it checks if the files are updated or not. If file has changed on server the cache is discarded, else it uses the cache. If you want to cache all the images, simply include them in your login page. After that, every request for the files will hit the cache. To know that your file is being cached in node check the logs.
//First accessGET /stylesheets/style.css 200 1270ms//Thereafter from cacheGET /stylesheets/style.css 304 6msDon't worry about caching, let the browser handle it.