¿Cuál es la mejor manera de hacer que un sitio web de desplazamiento lateral cargue rápidamente?

Question

¡Soy nuevo en el desbordamiento de la pila y la programación, así que discúlpeme por cualquier fraseo incómodo!

Estoy construyendo un sitio web de desplazamiento lateral que es rico en gráficos y tiene un tamaño de 680x9400px. Utilizaré javascript y/o mootools para crear un efecto de desplazamiento lateral genial, similar al http://sursly.com.

Estoy optimizando la web de todas las imágenes utilizadas, pero me gustaría saber si alguien tiene alguna otra idea sobre cómo acelerar la carga de la página. ¿Hay alguna forma de precargar el sitio en secciones horizontales, por ejemplo?

Gracias de antemano.

Answer 1

Usando algo como el jQuery Lazy Loading Plugin puede obtener una velocidad percibida ya que solo se cargarán las imágenes visibles. Entonces no competirán con imágenes fuera de pantalla.

Sé que probablemente usará mootools, pero me sorprendería que no tuvieran algo similar.

Answer 2

Observe que la mayoría de los gráficos en el sitio de Sursly son en blanco y negro puro. Esto hace que el sitio se cargue dramáticamente más rápido ya que los archivos se pueden optimizar mucho más.

Answer 3

Estoy de acuerdo con la respuesta de Past One, pero lo modificaría ligeramente: en lugar de cargarlo como lo necesita, cárguelo cuando pueda. Es decir, inicialmente no carga nada más que la primera página. Una vez que se haya cargado, carga el segundo, luego el tercero y así sucesivamente.

Mantenga un registro de las piezas que aún no se han cargado, y si se solicita una "página" que no se ha cargado, muestre un cartel de "espere por favor" y coloque la página en la cola de prioridad.

Recuerde tener cuidado con estas técnicas si está interesado en ser indexado por los motores de búsqueda.

Answer 4

La mayoría de los sitios web que lo hacen funcionan como Google Maps. Dividen el mundo (o en su caso, la página virtual de desplazamiento lateral) en mosaicos. A medida que el usuario se desplaza, AJAX se utiliza para cargar el siguiente mosaico, y se muestra cuando el usuario llega al borde del mosaico actualmente visible.

Puede cargar más de un mosaico aún no visible en cada lado si lo desea, pero se necesitará más memoria del lado del cliente para una mejor experiencia del usuario.