Pablo Bregonzio

mayo 23, 2016

Diseñando para la performance web

Blog

En mi rol como generador de interfaces de usuario busco interactuar de la mejor manera con los distintos actores en una empresa de software. Por tal motivo resumí en esta guía práctica, algunos consejos enfocados en usabilidad y performance.

En esta primera entrega me centro en algunas consideraciones básicas para realizar un proyecto. En la próxima, les contaré más sobre tratamiento de imágenes, fuentes, vectores e iconos.

Mi motivación es hacer uso de las tecnologías que están al alcance para mejorar mi trabajo y colaborar con otros. Reconozco los problemas de comunicación que se dan en los equipos, debido al desconocimiento mutuo del diseñador/desarrollador. Por esto recopilé con el tiempo buenas prácticas que colaboran a refinar mi trabajo, además de integrar al flujo de trabajo algunas de ellas utilizando tareas automáticas que me ayudan a realizar estas técnicas con una mínima configuración.

En el artículo anterior les conté porqué la performance se debe tener en cuenta y los beneficios que trae incluirla en la discusión a la hora de comenzar un nuevo proyecto.

En esta ocasión les hablaré de algunas prácticas que pueden mejorar la experiencia, tanto de usuario como al desarrollar. Más adelante veremos cómo integrarlas a un flujo de trabajo con el uso de herramientas para automatizar tareas.

Todas estas son consideraciones personales y no tienen por que ir de la mano con las políticas de Manentia.

Preprocesadores de css

Estos son muy útiles a la hora de estructurar grandes aplicaciones y con cierto criterio se logra compartir el trabajo con varios desarrolladores  Entre los más comunes están sass y less, que si bien siguen vigentes, en mi caso decidí utilizar postcss, que permite agregar plugins al proceso del css, para agregar funcionalidad tales  como leer colores o dimensiones de imágenes para hacer uso de esos valores directamente. Comparto esta serie de tutoriales básicos de lvluptuts sobre postcss.

Estructura semántica

HTML5 como lenguaje contiene múltiples elementos con comportamientos específicos, diseñados para resolver tareas habituales en el entorno de la web. La implementación de éstos tiene como ventaja que forma parte del estándar y son más eficientes que una solución implementada en javascript.

La W3C es la encargada de definir estos estandares, muchas veces promovidos por desarrollos en los propios navegadores y la comunidad, en este documento aparecen dichas definiciones sobre HTML5.

Convenciones de nomenclatura en css

Todo el mundo las utiliza aunque no siempre las comunica, lo cual podría llegar a ser un problema si varias personas manejan distintas políticas a lo largo del proyecto .En  aplicaciones grandes me resulta importante utilizar  un criterio claro, que se apegue  a métodos estudiados extensamente. Por mi parte elegí una modificación del popular BEM, llamada BEMIT, que suma algo de ITCSS, que se presenta con abstracciones simples más información de las clases y los elementos.

Algunas de los problemas que se resuelven con esto son:

  • Mantenibilidad: el código está mejor estructurado y resulta más legible.
  • Eficiencia: debido a que son más performantes los selectores cuanto menor sea su valor de especificidad.
  • Escalabilidad: hay un sistema que determinará cuándo y cómo agregar elementos al código.

Uso de linters

Estos plugins para editores de texto como Sublime o Atom, ayudan a escribir un código más ordenado mostrando posibles errores. Además, para asegurar la calidad del código se puede  generar una tarea donde el éxito dependa de estos linters.

Divitis

No se deberían agregar nodos de más, cuantos menos tenga que tratar el navegador, mejor será el rendimiento. En ocasiones los elementos de la interfaz no están optimizados, además cuando se agreguen plugins de terceros que suman algunos nodos.

Aquí comparto un link que habla de este problema en el que todos caemos en algún momento.

Minificación

Reduce y optimiza recursos, quita llamadas a servidor, así como también reduce el tamaño para la descarga y tiempo de ejecución. Minifica y concatena todos los assets que fuesen a cargarse. Estas funciones las podemos realizar con la herramienta Gulp.

Renderizado crítico

Es posible emular el renderizado inmediato de la primera pantalla de nuestra aplicación simplemente priorizando los assets necesarios y relegando el resto, el caso del css implica tomar las clases que son utilizadas en la pantalla primera, y con estas hacer un css aparte, que se inyecta directamente en el html. CriticalCss cumple con esta tarea, es un plugin de gulp que automatiza este proceso.

Carga asíncrona de css

El grueso del css, que en ocasiones llega a pesar < 100kb puede ser cargado asincrónicamente por js, gracias a loadCSS que logra que la descarga de estos archivos no bloquean el renderizado.

Quitar css en desuso

Adicionalmente unCSS permite verificar selectores que no se utilizan y reducir estos archivos considerablemente. Cuando uno utiliza frameworks robustos como bootstrap es cuando se da cuenta del beneficio de limpiar el css.

Animaciones por CSS

Deberían realizarse con ciertas propiedades de css, esto es porque utilizan distintos recursos a la hora de repintarse en pantalla. Junto a esto, hay que tener en cuenta que  el scroll también es una animación. Aquí se explica cómo se recalculan los estilos cuando por ejemplo se cambia una clase, cómo el navegador cumple con ciertas actividades dependiendo de la propiedad que cambia.

Para el manejo de las animaciones por css, es necesario el uso de dos conceptos, uno es saber qué propiedades disparan qué acciones para el renderizado, en este sentido, csstriggers tiene una lista de esto. Lo otro que hay que considerar es el uso de capas para hacer transiciones.

Existen animaciones que, por complejidad o por costosas, es conveniente hacerlas con javascript, aunque hay frameworks para realizar animaciones por css elaborados como animate.css que resuelvan una gran cantidad de situaciones.

Los devtools de chrome canary nos permite hoy debugear de manera sencilla y visual las animaciones asi como su rendimiento, incluso presenta las distintas partes de una animación en una línea de tiempo, que permite  editarlas con una interfaz realmente útil.

Evitar bloqueo de renderizado por JS

Conjunto con la consideración de no bloquear el renderizado, cualquier archivo que pueda quitarse del camino del renderizado, es importante tomarlo en cuenta, este articulo habla más en detalle del tema

Plugins de terceros

Es buena práctica unir estos archivos en un solo documento, a parte del script principal del sitio. También se suelen cargar con cdn (Red de entrega de contenidos), esto reduce la distancia de esa coneccion y disminuye la latencia para acelerar los tiempos de carga.

GZIP

Comprimiendo los recursos de texto con gzip, que es ampliamente soportado por servidores y navegadores, se logra reducir considerablemente el tamaño de la carga. Típicamente comprime alrededor de un 60% del archivo, comparto una guía de cómo habilitar Gzip.

Conclusión

Personalmente considero que estas prácticas son esenciales para lograr interfaces de usuario performantes, escalables y mantenibles.

Algunas implicarán que se tenga en cuenta los costos de sistema en términos de performance que trae cada elemento, así sea una propiedad en los estilos, un banner o un plugin. En todo momento debe haber una persona que sepa qué impacto tendrá en el proyecto y logre resolver en función de objetivos concretos.

Publicar comentario