Pagina para precargar (arcivos.js/CSS ,imagenes, ..ect)

[AvenD]

Hola!

Estoy trabajando en una pagina intermediara entre mi Index, ES decir, una pagina de carga que meta en cache todo lo posible para que después la navegación sea mas rápida, por ejemplo, los archivos javascript, css, imagenes .. ect

¿se puede hacer?

[caricatos]

Hola:

No creo que duplicando la información mejore nada... me parece que hay otras variables más importantes a considerar en una optimización.

Saludos

[AvenD]

Hola caricatos!

No se trata de la misma pagina, seria una pagina de inicio normal.html que cuando haya cargado todo te redirija al index.

Supongo, en mi humilde opinion, que metiendo todas las imagenes, y archivos CSS y JS en la cache, al iniciar el index ira todo mas rapido.

Ya que actualmente, tengo un problema al entrar al index, todo va muy lento durante los primeros dos o tres segundos (estamos hablando de mucho contenido)

[elgoncho99]

Hola Avend.

Lo mejor que podes hacer es optimizar las imagenes, si son iconos podrias obtar de ponerlos en el mismo archivo y mostrar solo la parte que representa un icono en particular con CSS. Por mas que lo precargues vas a ser lento y pero aun queres precargar todo asi que imaginate que tenes que cargar todos los recursos que quizas el usuario no quiere ver.

Despues los datos podrias precindir de cantidad de archivos (ejemplo si tengo 20 css dejar solo 1 o 2). Si tengo 20 scripts, lo mismo. La carga se torna lenta porque el navegador hace 1 peticion por cada recurso 1 por la pagina, 1 por cada css, 1 por cada js y 1 por cada imagen y pensa que por cada peticion tiene que manejar una conexion. Si logras meter lo mismo en menos cantidad de recursos vas a ganar muchisima mas velocidad que precargando la pagina.

Espero sirvan mis comentarios, saludos y suerte.

[caricatos]

Hola:

Cada navegador tiene su propio código... y lo del caché, en mi opinión es como los vendedores del elixir maravilloso... toda una farsa, de la que ya no me volveré a fiar.

Resulta que en viejas versiones de Opera (sin ánimo de crear ningún tipo de polémica), cargaban las páginas con elementos ocultos muy, pero que muy rápido... y cuando se mostraban esos elementos era cuando realmente los cargaban...

La idea era genial, ¿para qué cargar cosas que no se ven?... Pero durante la navegación se notaba que tardaba más en mostrar esas pestañas (o lo que sea) que directamente obvió en el inicio.

Lo mejor es que experimentes tú mismo... al menos yo te conté mi experiencia.

Saludos

[AvenD]

Una pregunta, bajo chrome por ejemplo.

Tu visitas por primera vez una pagina, esa pagina pasa a estar en la cache del navegador.

La vuelves a visitar y practicamente todo va como un rayo.

Lo que pasa en mi pagina es mas o menos lo mismo, la primera vez que se visita, tardas al menos 3sg en pasar a modo "rapido" mientras tienes tirones.

Una vez visitada, va super rapido todo.

[emprear]

Iniciado por AvenD

Hola!

Estoy trabajando en una pagina intermediara entre mi Index, ES decir, una pagina de carga que meta en cache todo lo posible para que después la navegación sea mas rápida, por ejemplo, los archivos javascript, css, imagenes .. ect

¿se puede hacer?

@AvenD
No hay una respuesta específica a tu pregunta, hay que analizar el conjunto de la aplicación y buscar el mejor equilibrio posible.
Hay prácticas que si son obligadas,
Optimizar las imágenes al máximo.
Si es posible, utilizar gZip
Minimizar tanto js como css;
Utilizar técnicas de cache apropiadas, vía .htaccess es la mejor opción
Utilizar sprites css si fuese posible

Una vez hecho esto entonces si, precargar elementos, hacerlo con una página intermedia, es bastante común, bastaría llamar los .js y .css e imágenes que actualmente no utilizás, estás últimas en contenedores ocultos.
A veces nuestra Web tiene una navegación secuencial, la lógica de su navegación indica que vas a pasar e una pagina A a una B y a una C en ese orden, no en otro, si ese es el caso una página debería precargar (ya que la precarga en sí misma insume tiempo) solo elementos de la página siguiente.

Una alternativa que uso en algunos sitios es el uso de Jquery para precargar elementos, muy práctica ya que se puede precargar todo tipo de contenido (otros html, fuentes ttf, archivos swf, etc)

Te dejo un ejemplo

http://emprear.com.ar/competencia2011/

Si ves esa página introductoria, en la cual el cliente se detendrá a leer una información básica, en la misma estoy precargando elementos de la demostración posterior, en el código fuente te vas a econtrar con esta script en el header

Código Javascript:

<script type="text/javascript">
//<![CDATA[
$.PrecargarContenido = function(){
for(var i = 0; i<arguments.length;i++){
$("#precarga").load(arguments[i])
}
}
//]]>
</script>
 

y al final del documento

Código HTML:

<div id="precarga"><!-- precarga --></div>
<script type="text/javascript">
//<![CDATA[
$.PrecargarContenido(
'/competencia2011/css/josefin/JosefinSlab-SemiBold-webfont.ttf',
'/competencia2011/css/josefin/JosefinSlab-Bold-webfont.ttf',
'/competencia2011/img/santa.png',
'/competencia2011/img/sexy.png',
'/competencia2011/img/amianto.png',
'/competencia2011/img/cand.cur',
'/competencia2011/img/carro.png',
'/competencia2011/img/contorno-tierrafire.png',
'/competencia2011/img/est-h.png',
'/competencia2011/img/estrellas.png',
'/competencia2011/img/luna.png',
'/competencia2011/img/regalo.png',
'/competencia2011/img/renos.png',
'/competencia2011/img/smart.png',
'/competencia2011/precarga.txt'
);
//]]>
</script>
 

Obviamente el div #precarga tiene definido en el css

Código CSS:

div#precarga{
display:none;
}
 

Esto mismo se puede realizar con Ajax sin necesidad de Jquery
Insisto en que la aplicación de estos métodos requiere un análisis completo del fun cionamiento de tu Web en sus totalidad

Saludos