Pablo Bregonzio

julio 26, 2016

Recortando para optimizar

Blog

La última vez les conté sobre los usos y técnicas que colaboran para la performance, hoy quiero seguir con algunas prácticas que considero que deberían aplicarse en este caso, para mejorar la carga de imágenes y fuente. El artículo anterior, Diseñando para la performance fue una recopilación de buenas prácticas como son : el uso de un sistema de nomenclatura para los estilos al diseñar grandes aplicaciones, o la utilización únicamente del GPU a la hora de realizar animaciones, solo modificando propiedades de transformaciones o opacidad, entre otros. En conjunto todas ellas son el  punto de inicio para realizar un buen sitio web.

Hoy les quiero contar  acerca de dos tipos de archivos o elementos, típicamente estáticos que conforman una gran parte del total de un sitio web: imágenes y fuentes.                                                                     

Optimizar y preparar adecuadamente estos recursos es fundamental para lograr una buena velocidad de carga de nuestro sitio.

Imágenes

Estadísticamente 62% de la web (en función del tamaño en bytes) son imágenes, y cada día las publicamos con mayor calidad y por ende tamaño.

  • Todas las imágenes deben ser optimizadas en su calidad como asset exportado y además con un nivel de compresión adecuado para la web. Herramientas como ImageOptim permiten manejar imágenes en un proyecto según parametros, automatizando esta parte del flujo de trabajo.
  • Imágenes responsivas: La problemática es cómo entregar a un usuario la imagen que precisa, segun la conectividad asi como el dispositivo utilizado y su pantalla.
    Los navegadores actuales hacen uso de atributos especiales para las imágenes ( “srcset” y “sizes”), uno determina el recurso a ser cargado y el otro define las condiciones para esto, son arreglos relacionados.
    Otra parte de este problema es el aspect ratio del dispositivo. Utilizando un nuevo tag de HTML5  source , podemos escribir media queries como atributos que definen la imagen a utilizar según las características del dispositivo.
    Les recomiendo leer  este artículo sobre el tema, que brinda más información sobre este punto y algo de su progresión a lo largo del tiempo.
  • Efectos que se pueden especificar mediante CSS, como degradados, deben hacerse de esta forma. Así se trabaja con la imagen de un modo no destructivo, manteniendo nuestros recursos inmutados para modificarlos dinámicamente según sea necesario.
  • En el caso de aquellas imágenes que comparten características (por ejemplo conjunto de iconos), una buena práctica es hacerles un spritesheet ubicando todos los elementos necesarios en una misma imagen y con CSS posicionarlas en distintos espacios. Por lo que sólo se hace un pedido a  la red, bajando el peso de la descarga y eliminando el tiempo de llamadas y respuestas al servidor. Al ser un archivo, simula la descarga  simultánea de las imágenes que lo componen
    Spritesmith es una herramienta que permite automatizar esta tarea.
  • Existen plugins para la carga progresiva de imágenes pesadas que quedarán a la vista en la primer carga, antes de la interacción, por ejemplo: Antimoderate, este  despliega las imágenes que están a la vista con menor calidad , y a medida que el sitio carga, avanza hasta mostrar la versión original.
  • El uso de vectores (SVG) es cada día mejor soportado en los navegadores web, a estos se pueden aplicar colores de fondo, borde, tamaño, textos, etc. Se convierten en una herramienta útil a la hora de reducir el peso que aportan las imágenes en mapa de bits, dejando estas reducidas casi exclusivamente a la fotografía.

Fuentes

La carga de fuentes debe ser eficiente ya que son recursos pesados y en ocasiones no es necesario descargarlas completamente para desplegar nuestro sitio.

  • Hace algunos años surgió la práctica de utilizar fuentes personalizadas a partir de formas vectoriales para desplegar iconografía. Si bien esto es ventajoso, también genera algunas complicaciones:
    • Cuando necesito un nuevo icono debo generar/exportar la fuente nuevamente.
    • No es posible utilizar trazos, gradientes o colorear partes del icono de una manera sencilla.
    • Al alinear estos se comportan como caracteres de texto, y en ocasiones no es lo más conveniente. Además dependerá de si en un comienzo este se consideró  como sistema de caracteres,  para lo que deben ser creados siguiendo una grilla, respetando la línea de base entre otras cosas.

No recomiendo este acercamiento porque siempre estamos cargando todos los iconos y no los que se utilizan, además da lugar a problemas en la carga de la fuente (FOUT ó FOIT) que explicaré más  adelante.

  • Un alternativa es utilizar vectores (SVG) en lugar de fuentes para los iconos. Esto tiene ventajas a la hora de manipular los estilos, asi como mejor control sobre su tamaño y disposición. Es posible hacer sprites con los vectores utilizando la misma herramienta que para otros formatos. Aquí les comparto un sitio  con información detallada sobre cómo trabajar con SVG.
  • Recortar la cantidad de fuentes a utilizar, de ser necesarios sólo a un subconjunto de caracteres es una forma de optimizar.
    También se puede considerar que para un título o cabezal se puede exportar una fuente con los caracteres necesarios, incluso si se utiliza Google Fonts para esto se puede pedir solo aquellos con los que nos quedamos usando el atributo “text” dentro de la url del pedido.
  • Cuando utilizamos una fuente mediante @font-face, el navegador web, si aún no la ha descargado, utiliza otra con la que cuenta de forma nativa, esto es FOUT. Por un instante se ve otra fuente en lugar de la seleccionada y una vez que  carga, vemos el cambio. Una manera de combatir esto es utilizar lo que se conoce como FOIT, que en lugar de utilizar una fuente nativa al sistema, previene el despliegue del texto hasta tener la fuente cargada.
    Zach Leatherman plantea en este artículo descargar solo la versión romana de la fuente y falsear las variaciones negrita e itálica para la primera carga.

En definitiva,  dichas consideraciones tienen la característica de seguir estos principios:

  • No bloquear el renderizado de la página descargando elementos que no son necesarios en un primer momento. Para la primera carga se considera una buena práctica el inyectar el css directamente en la página, considerando que este no debe superar los 50kb.
  • Solo descargar los recursos necesarios para el caso puntual en el que nos encontramos, por ejemplo utilizando patrones de diseño que respondan a las posibilidades del dispositivo y la red, para determinar qué descargar.
  • Las animaciones deben realizarse maximizando el uso de la GPU, y considerando qué propiedades animar, limitándose a opacidad y transformaciones.

Pagespeed Insight es una herramienta que nos da información acerca de la performance web.  A continuación se destacarán  los criterios que Google utiliza para puntuar un sitio, cabe resaltar que en función de este puntaje, lo posiciona en el buscador. Además de un puntaje global separado entre performance y experiencia, desktop y mobile: nos da recomendaciones sobre cada punto, asi como documentación al respecto:

  • Evitar redirecciones de pagina de entrada
  • Evitar plugins de terceros
  • Configurar el viewport
  • Eliminar assets que bloqueen el renderizado de los recursos
  • Permitir compresión
  • Manejar la caché del navegador
  • Minificar recursos
  • Optimizar imágenes
  • Priorizar contenido visible
  • Reducir tiempo de respuesta del servidor
  • Tamaño de objetivos para tocar apropiados
  • Usar tamaños de fuente legibles

Conclusión

Espero que estos apuntes los ayuden a crear páginas cada vez más veloces y livianas. Y, mediante el uso de Pagespeed Insights mejorar el puntaje y posicionamiento de su sitio.

En mi próximo artículo voy a contarles cómo medir la performance en la primera carga, asi como del sitio en uso, y distintas opciones para optimizar un proyecto según una paramétrica dada.

  • long-exposure-lights¿Para qué performance? La primera experiencia que se percibe de un producto es esencial para su relación con el  usuario. En la web ocurre lo mismo y esto habitualmente determina si la persona vuelve al sitio o […]
  • herramientas para maderaDiseñando para la performance web 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, […]

Publicar comentario