Diseño web orientado al rendimiento

por Natalia Ventre el ・ podés leerlo en 5 minutos ・

La WPO (optimización de rendimiento web) mejora la experiencia de usuario1 haciendo las páginas web más veloces. ¿Qué tiene que ver el diseño con esto? Las técnicas de optimización son efectivas hasta cierto punto. Si diseñas un sitio web con una imagen de fondo que ocupa toda la pantalla, 5 texturas diferentes, un set de 256 iconos en PNG, todo en alta resolución, 6 fuentes web, una larga lista de plugins de jQuery de efectos llamativos, por más que se comprima, el sitio nunca va a volar.

Iconos

La tendencia actual es usar fuentes de símbolos para los iconos. Favorecen el rendimiento porque, al igual que las sprites CSS, son un único archivo.

Sprites CSSFuentes de Símbolos
colores1
editables via CSSlimitadosi (color, text-shadow, etc.)
amigables con Retinaarchivo más pesadosi (son vectores)
diseño a medidacualquier appFontForge
Fuentes de iconos
We Love Icon Fonts es equivalente a Google Web Fonts para fuentes de iconos.

Imágenes

Las imágenes de fondo que se repiten, generalmente texturas, no son problemáticas para el rendimiento porque son pequeñas. El desafío es se perciba como fondo y no se note el mosaico individual.

Cuando no podés reducir las dimensiones de la imagen, podés experimentar reduciendo la cantidad de colores y/o eliminando detalles.

  1. Original (2592 × 1944 px) 1.313.502 bytes (1,3 MB), optimizada sin pérdida de calidad con ImageOptim 1.168.420 bytes (1,2 MB).
  2. Eliminación de detalles y optimización con pérdida de calidad 318.107 bytes (319 KB).
  3. Eliminación de colores y optimización con pérdida de calidad 117.253 bytes (119 KB).
Optimización de imágenes para web

CSS tiene filtros2 para manipular imágenes (escala de grises, sepia, etc.) que te pueden servir para ahorrarte una imagen extra o sprites.

CSS Filter Effects
Demo de CSS Filter Effects

Plugins de jQuery

Tenés que analizar los pros y cons de usar un plugin de jQuery. Si te permite hacer una interfaz más fácil de usar o contar más eficientemente una historia, el beneficio es superior a la desventaja de añadir unos kilobytes adicionales. El problema es cuando agregás un plugin porque no sabés cómo resolver técnicamente el problema o necesitás algo atractivo porque el diseño es pobre.

Respositorio de plugins de jQuery
Unheap es un repositorio de plugins de jQuery organizados por categoría.

Ej. Menú Lavalamp:

  • ¿Por qué querés usar ese plugin? Quiero hacer algo vistoso.
  • ¿Hay otras soluciones al problema? Color, iconografía, textura, etc.
  • ¿Qué beneficio le aporta al usuario? Ninguno.
  • ¿En qué fecha se publicó el plugin? Agosto del 2007.
  • ¿Hay otra técnica más moderna (con HTML y CSS) para lograr lo mismo? Sí, la animación se puede hacer con transformaciones y transiciones CSS3 y la posición se puede cambiar con pseudo selectores (nth-child).
  • Veredicto No usar el plugin. Experimentar con otras opciones de diseño y/o usar la opción basada sólo en CSS.

Web Fonts

Si en CSS declarás body {font-family: sans-serif} cada sistema operativo va a mostrar una fuente diferente y que se ve bien en ese SO (por ej. Arial en Windows y Helvetica en OSX). Evidentemente si eliminás absolutamente todo (las fuentes, las imágenes, los iconos, etc.) el diseño va a sufrir, pero si estás diseñando un sitio que casi no tiene texto, o si la diferencia entre la fuente que elegiste y la predeterminada es tan sutil que sólo un diseñador la distingue, podés considerar esta opción.

Arial – Helvetica
"Arial" escrito en Helvetica y "Helvetica" escrito en Arial.

Para elegir una fuente, es deseable que la familia3 incluya variedad de pesos y anchos y una versión itálica. Además que incluya variedades serif y sans-serif te facilita la combinación de fuentes. Siguiendo estos criterios podrías elegir por ej. Droid. El problema es que cada estilo va a impactar en el tiempo de carga de la página. Google Fonts te lo muestra claramente con un indicador de velocidad.

Estilos de Droid vs velocidad
Impacto en la velocidad de usar todos los estilos disponibles de Droid.

Usando las fuentes web con moderación, por ej. Droid Sans 700 para los títulos y Droid Serif 400 para el texto, podés lograr un diseño web interesante y con buena performance. Me acuerdo de un ejercicio en la facultad que consistía en diseñar una doble página (de revista) con dos párrafos de texto, una foto pequeña y un título. La primera reacción es “¿cómo lleno la página con tan poco?”, pero cuando aceptás las limitaciones de diseño, te favorecen porque te obligan a buscar soluciones creativas que de otra manera no hubieras alcanzado.

Web font y página web rápida
Una elección moderada de webfonts priorizando la performance web.

Conclusiones

Analizar un sitio web cuando está terminado con PageSpeed Insights y seguir las sugerencias, es mejor que no hacer nada, pero si desde el inicio del proyecto la velocidad es un objetivo vas a obtener mejores resultados.


  1. Hay diversos estudios de Amazon, Google, Microsoft y otros que demuestran el impacto negativo de las páginas lentas en las conversiones y la satisfacción del usuario.

  2. El soporte de los navegadores para CSS Filter Effects es muy limitado.

  3. Tip: en Google Fonts podés ordenar las fuentes por cantidad de estilos. Algunas fuentes cambian el nombre (por ej. Roboto, Roboto Condensed y Roboto Slab) y no figuran como el mismo estilo.