Home/ Questions/Q 516127
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T07:41:58+00:00

I have product website. On one page I show thumbnails and a brief description

  • 0

I have product website. On one page I show thumbnails and a brief description of all the products. When you click on the photos, you get to a detailed product page.

Is there a way to get the browser to start loading and caching the javascript and CSS for the “detailed product” page while the user is just looking at the “all the products” page and trying to make a choice?

I want this preloading and caching to start only once the page has fully loaded as to not slow it down.

Any suggestions on how to implement this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you’re using a JavaScript framework (like jQuery, protype, etc) then you can use a simple method to do an AJAX call. If not you’ll have to write one which might be a bit confusing for someone that isn’t familiar with JavaScript. A basic example is here.

    You can use JavaScript to add script tags to your html page and it will include JS. Remember that if the JS is set to auto execute any code it will happen. For CSS, your only option is probably using JavaScript to send a request to grab the file (see above). You could include the CSS but it will override any styles from your original CSS file.

    Websites that precache:
    Websites including sites as big as Google and Yahoo use preaching to help performance. Google for instances loads a CSS sprite http://www.google.com/images/nav_logo7.png on their main page along with other CSS and JS files that are not completely used on the main page alone. Most people already do something similar to this by just combining their CSS and JS files into one file in production. HTTP requests take more time than downloading the actual content. An example of Yahoo preaching is here

    Yahoo talks about this on YSlow’s help here.

    Taken from one part of the guidelines here:
    80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

    Organization in development, speed in production:
    What I usually try to do is in development I will split up my JS files if needed (hardly ever my CSS though). When its time to push this data to production servers, I run a compiler (simple script that combines all the files, and minifies them) and then put them online.

    Minifying/compressing:
    Remember HTTP requests are evil. A compressed JavaScript file and a compressed CSS file are so small, that I’m almost 100% sure there is an image on your main page that is smaller than it. Therefor it’s pointless to worry about splitting them up per page. It’s actually more of a performance hog to split them up across multiple pages.

    CSS Sprites
    The point in CSS sprites is a website probably has 40+ images on their page using CSS. Well thats 40+ HTTP requests on a users page load, thats A LOT of requests. Not only is that bad for the user, but thats also a lot of requests your web server is having to handle. If you aren’t using a static content server and are just using Apache that is on your main host, you’re poor Apache server is getting loaded with requests it could be serving for your web application. You can reduce this by combing your images into one file, or at least into fewer files. Using CSS’s background-position property, you can do wonders.

    I highly recommend reading the YSlow guidelines by Yahoo here: http://developer.yahoo.com/yslow/help/#guidelines

    • 0