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.
