Contáctanos

Cómo mantenerse al día sobre rendimiento web

¿Cómo mantenerse al día sobre rendimiento web? El mundo del desarrollo web cambia rápidamente y la medición y optimización de la performance no es una excepción. Con frecuencia nos encontramos ante nuevas herramientas, nuevas API y nuevas técnicas para construir webs que cargan rápido.

Y a menudo vemos que los equipos de desarrollo dedican poco tiempo a un campo que pensamos es muy importante. Desconocimiento y baja prioridad es un combo perfecto para que el rendimiento de una web quede de lado.

![]/images/blog/thumbs/portada.jpg)

En Perf.Reviews tuvimos claro que nuestro objetivo era hacer presente la importancia de la performance web. ¿Por qué?

  1. Desconocimiento de las herramientas de desarrollador incluidas en el navegador. Éstas son muy potentes y suelen ser suficientes para encontrar y corregir la mayoría de problemas.

  2. Ponerse al día sobre las mejores prácticas en web performance es costoso, en tiempo y dinero. Requiere leer mucho, seguir las novedades y ponerlas en práctica. Lo que hoy es una mejor práctica mañana puede que ya no lo sea. Algunos ejemplos son la combinación de estáticos, domain sharding, inlining, o CDNs para estáticos propios. Y además siempre tener en cuenta el balance entre el soporte de una funcionalidad, el market share de los navegadores y el coste de polyfills.

  3. Encontrar problemas de rendimiento es difícil si no se conocen los detalles de cómo funcionan los protocolos de red, cómo el navegador prioriza peticiones y parsea su resultado o cómo afecta el tiempo de ejecución de un JS o el tiempo de procesamiento de una imagen.

Nuestros vídeos y artículos tratan de dar respuesta a estos problemas con ejemplos prácticos. Mostramos el potencial de las herramientas de desarrollo de los navegadores y herramientas de terceros y los usamos para encontrar problemas en sitios reales.

Blogs y Twitter

Una de las mejores formas de estar al día es seguir los blogs y cuentas de Twitter de los navegadores y de desarrolladores que abogan por crear sitios rápidos.

Hemos recopilado una lista en Twitter con las principales cuentas, y siempre es una buena idea suscribirse a los blogs de Addy Osmani, Doug Sillars, Filament Group, Harry Roberts o Tim Kadlec.

![El blog de Filament Group es una buena fuente de información sobre técnicas de carga de CSS y fuentes]/images/blog/thumbs/filament-group.png)

Una de las mejores fuentes para aprender sobre web performance es Web.dev.

![Colecciones de tutoriales y guías sobre web performance, accessibilidad, seguridad o PWAs entre otros en web.dev]/images/blog/thumbs/google-web-dev-learn.png)

Este sitio de Google recoge información que antes estaba dispersa en distintos sitios y que ahora está consolidada a través de prácticas guías.

Herramientas

Para detectar problemas de rendimiento lo mejor es hacer una auditoría web. Desde el mismo navegador se puede realizar un análisis rápido, y también hay webs como web.dev/measure que generan un informe detallado del rendimiento de una URL en particular.

![Informe de performance de perf.reviews utilizando la versión online de Lighthouse en https://web.dev/measure. Vista general y vista de informe]/images/blog/thumbs/google-web-lighthouse-perf-reviews.png)

Una herramienta recomendable es WebPageTest, que también sirve para encontrar problemas de rendimiento. Es especialmente útil para comparar diferentes sitios, y también para personalizar qué navegador se va a usar, velocidad de red, dispositivo y ubicación de los servidores que medirán el rendimiento.

![Comparando dos sitios web con WebPagetest, vista del filmstrip]/images/blog/thumbs/webpagetest-filmstrip.png)

A través de sus opciones avanzadas también se puede comprobar el impacto de 3rd party scripts, simular single point of failures (SPOF) y mucho más. Incluso tiene una API para poder hacer todo esto desde scripts.

Otras herramientas dan informes específicos sobre optimización de imágenes, como Website Speed Test de Cloudinary, o CSS con CSS Stats.

Además de hacer auditorías es importante medir frecuentemente cuál es la experiencia de usuario con herramientas RUM. Algunas de las que hemos utilizado son SpeedCurve, Pingdom, mPulse de Akamai o desde hace poco Firebase, del que Carlos Villuendas hizo un práctico tutorial.

Otras herramientas analizan periódicamente las webs que indiquemos y nos alertarán cuando alguna de las métricas empeora sustancialmente. Recomendamos Calibre, DebugBear, SiteSpeed y SpeedCurve.

![SpeedCurve mostrando performance budgets para desktop y mobile para la web de Guardian]/images/blog/thumbs/speedcurve-guardian.jpg)

Libros

Os puede extrañar que añadamos una sección de libros en un post donde estamos hablando de "mantenerse al día". Los libros, aun en formato digital, son muy complicados de actualizar. Lo que les deja fuera de juego en la gran carrera en la que estamos inmersos.

![Estos son algunos de los libros más populares de web performance, publicados entre 2008 y 2019]/images/blog/thumbs/books.jpg)

Aún y así, queremos haceros unas recomendaciones de algunos libros que os pueden ayudar a aprender unas buenas bases en web performance, protocolos y optimizaciones de recursos:

  1. Web Performance in Action, escrito por Jeremy L. Wagner es el libro más completo de nuestras recomendaciones. Está enfocado en la web performance en general, cubriendo temas como la utilización de herramientas, optimización de CSS, JS e imágenes, la carga de fuentes de una forma efectiva, mejorar la performance utilizando Service Workers o una vista al protocolo HTTP/2. Una serie de puntos que nos harán conectar entre sí, mucha información que hemos ido adquiriendo desde diferentes fuentes durante mucho tiempo.

  2. High Performance Mobile Web, este libro está escrito por Maximiliano Firtman, y como su título indica, está enfocado a la web performance en los dispositivos móviles. Empieza introduciéndonos en el mundo web móvil, pasando por cómo y qué herramientas de medición tenemos disponibles para dispositivos móviles, la optimización de primera visita, así como de las posteriores, donde aparecen de nuevo los Service Workers. Como es de esperar, dedica un capítulo a "Responsive Web Design" y uno muy interesante con título "Extreme Mobile Web Performance", donde aporta una serie de consejos más específicos para mejorar el rendimento de nuestras webs para esos dispositivos.

Es un libro a tener muy en cuenta, ya que estamos en un momento donde la mayoría de productos son Mobile First, incluso ya hay algunos que son Mobile Only.

  1. High Performance Browser Networking, el subtítulo que añade Ilya Grigorik a este libro es "Lo que todo desarrollador web debe saber sobre las redes y el rendimiento web", y su contenido no nos defraudará. Con un contenido super interesante podremos aprender desde el ancho de banda, latencia, bloques TCP y UDP, TSL, el funcionamiento de las redes WiFi y de redes de datos móviles, también nos habla sobre los protocolos HTTP/1.X y HTTP/2 y de cómo optimizar la entrega en estos protocolos. En la última parte del libro aprenderemos sobre XMLHttpRequest, CORS, Server-Send Events, WebSockets y WebRTC.

Un título de obligada lectura para todas aquellas personas que quieran mejorar los conocimientos en todo lo relacionado con redes y su rendimiento. Ah! otra de las cosas interesantes de este libro es que lo podemos leer de forma gratuita online en hpbn.co, gracias Ilya.

  1. Using WebPageTest: Web Performance Testing for Novices and Power Users, en esta ocasión os recomendamos un libro sobre una herramienta, la herramienta para mucha gente. Rick Viscomi, Andy Davies y Marcel Duran nos presenta este libro en 3 partes: Básica, Intermedia y Avanzada, donde nos explica desde cómo utilizar WebPageTest para detectar qué hace lenta nuestra web, pasando por configuraciones para dispositivos móviles y scripting, hasta la parte más avanzada, donde aprenderemos a trabajar con la API y poder integrarlo con nuestra herramienta de integración continua. En el último capítulo nos muestran cómo implementar WebPageTest en nuestra propia instancia privada.

  2. High Performance Images, este es el preferido de Joan 😉. Escrito por varios autores, Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle y Mike McCall nos ofrecen un conocimiento profundo de las imágenes. Empezando por la teoría de las imágenes digitales, los diferentes formatos de compresión tanto con pérdida, como sin pérdida, optimización de SVG, lazy loading, procesamiento de imágenes a nivel de GPU, una eficiente manera de preparar nuestras imágenes responsive, una eficiente manera de entregar nuestras imágenes al navegador y cómo implementar nuestro propio flujo para optimizar las imágenes de forma automática.

En esta ocasión, y gracias a Akamai también tenemos una versión gratuita en formato PDF.

Auditoría personalizada y formación

Somos conscientes de que es difícil formar equipos en web performance y adoptar una cultura de equipo adecuada. A través de nuestro servicios de workshops y auditorías personalizadas ayudamos a empresas a entender los problemas de rendimiento de sus webs y dar los pasos para corregirlos y evitarlos en el futuro.