Mejora de velocidad a expensas de no trabajar con JS apagado
Tengo una galería de imágenes que actualmente carga las imágenes usando etiquetas img estándar y, dado que tiene muchas imágenes grandes, se carga bastante lento.
Puedo acelerar las cosas haciendo que el script de la galería cargue dinámicamente las imágenes después de cargar la página. Probé esto y hay un aumento significativo en el rendimiento. El problema es que al hacer esto, la imagen no se carga si el usuario tiene JS desactivado.
Entonces, la pregunta es: ¿es una compensación valiosa ganar rendimiento a expensas de que la página no funcione si JS está desactivado?
En este caso específico, creo que usaré la etiqueta noscript, pero ¿y si no tuviera el control de la salida html (digamos en un CMS)?.
Algunos pensamientos rápidos:
- Rediseñe su IU para que no necesite cargar más de N imágenes. Por ejemplo, introduzca la paginación.
- Muchos navegadores solo muestran imágenes que son visibles para el usuario. Considere ocultar las otras imágenes moviéndolas fuera de la pantalla o en un div con desbordamiento: oculto o algo así.
- Cargue las primeras N imágenes en la carga de la página y luego el resto después. Cargar las imágenes restantes requeriría JavaScript, y podría agregar una etiqueta noscript que agregue paginación para los pocos usuarios que no tienen habilitado JS.
- Dependiendo del tipo de imágenes con las que esté tratando, combine las imágenes en una hoja Sprite y cárguelas todas como imágenes de fondo usando la posición de fondo en CSS para mostrar solo las partes correctas. El tiempo de carga inicial será considerable, pero almacenable en caché.
En última instancia, no puedo responder si la desactivación de JS es una compensación valiosa porque no sé cuál es su audiencia. Necesitaría más información En la mayoría de los casos con sitios web en los que he trabajado, tendemos a inclinarnos hacia la mejora progresiva. Entonces, el tercer ejemplo en mi lista sería el que probablemente elegiría.
¿Qué sucede si en lugar de requerir que JS acelere la carga de la imagen, carga las imágenes al final de otra página para que cuando quiera ver la galería, ya estén cargadas? Solo desea asegurarse de que las imágenes tengan todo el contenido importante y de que use los mismos nombres para que pueda almacenarse en caché.
Si quisieras seguir cargando con JS, te recomendaría verificar primero JS y usar la carga dinámica si son compatibles con JS, y volver a un estándar si no tienen JS.
Puedes hacer esto progresivamente. Es decir, el HTML inicial genera etiquetas IMG, como lo hace ahora. Pero inmediatamente al cargar, su jQuery se dispara y reemplaza dinámicamente las etiquetas IMG con sus cargadores personalizados. Lo mejor de ambos mundos.
Incluso las grandes empresas están comenzando a requerir Javascript. Por ejemplo, si tiene Javascript desactivado en IE, ¿sabía que ni siquiera puede descargar Google Chrome? El botón Accept and Install No funciona. Simplemente muestran este fragmento de texto en la parte superior de la pantalla:
Necesita un navegador compatible con JavaScript para descargar este software. Haga clic aquí para obtener instrucciones sobre cómo habilitar JavaScript en su navegador.
Personalmente, creo que el requisito de Javascript es un error de su parte para este escenario, pero estoy divagando.
Por supuesto, depende de su audiencia, pero durante los últimos dos años yo también he estado construyendo bastantes interfaces web que requieren Javascript para funcionar.
La única preocupación restante es el SEO. Si desea que Google indexe las imágenes de su galería, necesitará que aparezcan en el HTML.
La pregunta "¿Qué pasa si tienen Javascript desactivado?" Es una que debería vivir por sí misma. Si bien debe asegurarse de que su aplicación/sitio aún se pueda usar con JS desactivado, también debe pensar en quién es su audiencia. Honestamente, es 2010 y los desarrolladores web ni siquiera deberían pensar en este problema (ya no lo hago).
Use análisis para determinar si sus usuarios tienen JS activado/desactivado. Si es menos del 5% de tus usuarios, ni siquiera pierdas el tiempo en una solución alternativa.