Cómo precargar elementos CSS, JS y similares

Seguro que alguna vez habéis pensado cómo hacer que vuestro sitio vaya todavía más rápido. Pues hay forma de hacerlo, sobretodo si la gente suele visitar vuestra página principal y luego sigue navegando.

La cuestión es que en muchas ocasiones los CSS y JavaScript de las páginas principales de los sitios difieren mucho del resto de la web… ¿qué hacer para mejorar esto? Pues tener un CSS y JS específico sólo para la página principal y pre-cargar los CSS y JS del resto de la página en la caché del navegador.

Para esto, que puede ser un poco complejo, podemos usar un código que he encontrado y que parece funcionar correctamente en todos los navegadores.

window.onload = function () {
  var i = 0, max = 0, o = null,
    preload = [
      'http://example.com/imagen.png',
      'http://example.com/javascript.js',
      'http://example.com/estilos.css'
    ],
    isIE = navigator.appName.indexOf('Microsoft') === 0;
  for (i = 0, max = preload.length; i < max; i += 1) {
    if (isIE) {
      new Image().src = preload[i];
      continue;
    }
    o = document.createElement('object');
    o.data = preload[i];
    //o.width = 1;
    //o.height = 1;
    //o.style.visibility = "hidden";
    //o.type = "text/plain"; // IE 
    o.width  = 0;
    o.height = 0;
    document.body.appendChild(o);
  }
};

Con esto en la página principal conseguiríamos que se pre-cargasen en caché (en background) esas 3 direcciones que podrían corresponder a la imagen del CSS Sprite, la hoja de estilo y las funciones JavaScript.

Aunque esto a priori podría hacer que la página principal vaya algo más lenta, la carga de las páginas sucesivas puede aumentar en un 30% la velocidad.