« Tutoriales « BlogArtículosDownloads

Hoy en día, con mayores velocidades de conexión a Internet, los desarrolladores Web se preocupan menos y menos de lo que sucede visualmente con una página mientras se carga.

Pero la visita, para el usuario, empezó desde que vio la pantalla del navegador en blanco y comenzaron a aparecer el texto y las imágenes. Esta primera impresión es importantísima, y más si el usuario experimenta una carga lenta de la página, por el motivo que sea.

Aquí les ofrezco unos cuantos tips para lograr que estos cruciales segundos del inicio sean lo más acogedores para el usuario.

No enseñaré a optimizar el tamaño de las páginas

Este tutorial no tiene como objetivo hacer páginas o imágenes más livianas, sino que, asumiendo que el sitio está optimizado ya de ese modo (aquí hay una guía obsesivamente completa sobre el tema, en inglés), veremos unos cuantos trucos que pueden mejorar el modo en que la página se carga progresivamente, enriqueciendo así la experiencia del usuario.

Y bien, el lector se preguntará: ¿por qué preocuparse por unas fracciones de segundo?

Los primeros segundos son vitales

El artículo, ya clásico, de Jakob Nielsen llamado Response Time Overview, explica cómo reacciona el usuario a los tiempos de respuesta de un sistema: 0,1 segundos para sentir que la respuesta es instantánea, 1 segundo para que la sensación de continuidad permaneza ininterrumpida, y 10 segundos para que el usuario se distraiga y comience a realizar otras tareas. Puesto que una página se carga “por pedazos”, es importante que el usuario reciba información visual relevante lo antes que se pueda.

Con los tips que veremos a continuación, podemos lograr que una página sea usable (y se vea mejor) lo más rápidamente posible, minimizando así el tiempo de incertidumbre que experimenta el usuario mientras no ve nada.

1. Cargar las imágenes pequeñas de la interfaz por CSS

Las imágenes que son cargadas mediante background-image en CSS permanecen invisibles hasta que son completamente cargadas, y aparecen de una sola vez, a diferencia de las imágenes insertas en HTML, que muestran un recuadro y un ícono mientras se cargan.

Este comportamiento de las imágenes CSS es ideal para las imágenes de la interfaz (bordes, sombras, adornos, controles, etc), porque evitan los molestos recuadros e iconos, y si por algún motivo las imágenes no se cargan, nos ahorramos el icono de la imagen rota.

Es preferible no usar esta técnica con imágenes demasiado grandes, puesto que aparecen súbitamente después de un tiempo largo y pueden perturbar al usuario (me pasa en ciertas páginas de Twitter con fotos grandes de fondo).

2. Especificar altos y anchos en todas las imágenes cargadas por HTML

Para las otras imágenes (las que no son CSS), especificar altos y anchos permite que la página, desde el principio, tenga sus dimensiones relativamente claras y no se rearme como un Transformer a medida que van apareciendo imágenes, arrastrando textos a su paso (lo he visto mucho en foros y en perfiles de Facebook llenos de aplicaciones).

3. Especificar colores de fondo apropiados donde se usen imágenes de fondo CSS

Este aspecto para mí es vital y no he visto otro sitio donde se hable de él. Pongamos el siguiente ejemplo:

Tengo una página con fondo negro, el recuadro central que contiene el texto es una imagen CSS blanca con  textura, y el texto es azul oscuro. Se vería algo así:

El error al cual me refiero es que, al momento de construir el CSS, el desarrollador suele preocuparse sólo de cargar la imagen de fondo, sin especificar el color de fondo del recuadro. Puede parecer inútil especificarlo, puesto que la imagen de todos modos lo tapará, pero observemos cómo se ve esta página mientras se carga:

La misma página anterior mientras se carga, sin tener un color de fondo.

¿Ves? No sólo se ve totalmente distinto a la página final, sino que además vuelve el texto ilegible. ¡Y ni pensar en qué sucedería si el servidor no responde y la imagen de fondo no aparece jamás! (Uf, suele suceder).

Si, usando el sentido común, especifico un color de fondo blanco para el recuadro, lo que veré mientras la página se carga será bastante más amigable:

La misma página cargándose, pero esta vez con un buen color de fondo.

La excepción a esto serían las imágenes de fondo que usen PNG transparentes (puesto que se transluciría el color de fondo), pero creo que son las menos.

4. No ocultar contenido mediante onLoad en JavaScript

Esto lo vi en el sitio de clientes de Movistar Chile, donde mientras se carga la página, el menú lateral muestra algo así (con muchas más opciones de menú hacia abajo):

Pero, al terminar de cargar la página, ¡ups!, sorpresivamente el menú quedaba así  (que era la idea inicial):

Esto sucedió porque para esconder los submenús se usó onLoad de JavaScript. El evento onLoad se detona sólo cuando toda la página ha sido cargada, y esto incluye haber cargado imágenes, CSS y demás contenido multimedia. A esas alturas uno ya tiene toda la página a la vista.

¿Modo de evitar esto? Pre-ocultando el contenido con la regla CSS display:none.

5. Evitar al máximo el uso de tablas en la diagramación

Las tablas tienen que ser “calculadas” por completo para ser mostradas, a diferencia de las etiquetas <div> posicionadas por CSS, que se van mostrando una a una, en orden de llegada. Por esta razón se suele decir que el diseño basado en tablas se renderea más lento en los navegadores que el diseño basado en CSS.

Evita al máximo usar tablas en el layout, para así obtener un código más limpio y que se muestra con más rapidez. Si te es imprescindible usarlas, limítate a dos filas y dos columnas como máximo, e intenta que el encabezado de la página sea una <div> ubicada antes de la tabla, para así mostrarla con rapidez mientras se termina de cargar la tabla.

6. Usar atributos ALT en las imágenes HTML

Mientras se carga una imagen, el usuario verá el texto de la etiqueta ALT junto con el recuadro destinado a la imagen. Esto es menos estético, lo sé, pero más relevante para el usuario, en especial para imágenes de más de 10Kb de tamaño.

En otra ocasión describiré cómo hacer un cargador sencillo para aplicaciones Web, que tapa toda la pantalla al estilo Gmail.

¿Tienes tus propios tips? ¿Consultas o sugerencias? Hazte parte en los comentarios.