Introducción a los presupuestos de rendimiento

El rendimiento es una parte importante de la experiencia del usuario y afecta las métricas empresariales. Resulta tentador pensar que si eres un buen desarrollador, terminarás con un sitio con buen rendimiento, pero la verdad es que un buen rendimiento rara vez es un efecto secundario. Como con la mayoría de las cosas, para alcanzar un objetivo, hay que definirlo claramente. Para comenzar el recorrido, define un presupuesto de rendimiento.

Definición

Un presupuesto de rendimiento es un conjunto de límites que se imponen a las métricas que afectan el rendimiento del sitio. Puede ser el tamaño total de una página, el tiempo que tarda en cargarse en una red móvil o incluso la cantidad de solicitudes HTTP que se envían. Definir un presupuesto ayuda a iniciar la conversación sobre el rendimiento web. Sirve como punto de referencia para tomar decisiones sobre diseño, tecnología y agregar funciones.

Tener un presupuesto permite a los diseñadores pensar en los efectos de las imágenes de alta resolución y la cantidad de fuentes web que eligen. También ayuda a los desarrolladores a comparar diferentes enfoques con respecto a un problema y evaluar los frameworks y las bibliotecas en función de su tamaño y costo de análisis.

Selección de métricas

Métricas basadas en cantidades ⚖️

Estas métricas son útiles en las primeras etapas del desarrollo porque destacan el impacto de incluir imágenes y secuencias de comandos pesadas. También son fáciles de comunicar tanto a los diseñadores como a los desarrolladores.

Ya mencionamos algunos aspectos que puedes incluir en un presupuesto de rendimiento, como el peso de la página y la cantidad de solicitudes HTTP, pero puedes dividirlos en límites más detallados, como los siguientes:

  • Tamaño máximo de las imágenes
  • Cantidad máxima de fuentes web
  • Tamaño máximo de las secuencias de comandos, incluidos los frameworks
  • La cantidad total de recursos externos, como secuencias de comandos de terceros

Sin embargo, estas cifras no brindan mucha información sobre la experiencia del usuario. Dos páginas con la misma cantidad de solicitudes o el mismo peso se pueden renderizar de manera diferente según el orden en que se solicitan los recursos. Si un recurso crítico, como una hero image o una hoja de estilo en una de las páginas, se carga al final del proceso, los usuarios esperarán más tiempo para ver algo útil y percibirán que la página es más lenta. Si en la otra página las partes más importantes se cargan rápidamente, es posible que ni siquiera noten si el resto de la página no se carga.

Imagen del procesamiento de página progresivo según la ruta crítica

Por eso es importante hacer un seguimiento de otro tipo de métrica.

Plazos de eventos importantes ⏱️

Los tiempos de evento importante marcan eventos que ocurren durante la carga de la página, como DOMContentLoaded o load. Los tiempos más útiles son las métricas de rendimiento centradas en el usuario, que brindan información sobre la experiencia de carga de una página. Estas métricas están disponibles a través de las APIs del navegador y como parte de los informes de Lighthouse.

El primer procesamiento de imagen con contenido (FCP) mide cuando el navegador muestra el primer fragmento de contenido del DOM, como texto o imágenes.

Tiempo de carga (TTI): Mide cuánto tarda una página en volverse completamente interactiva y responder de forma confiable a las entradas del usuario. Es una métrica muy importante para realizar un seguimiento si espera algún tipo de interacción del usuario en la página, como hacer clic en vínculos, botones, escribir o usar elementos de formulario.

Métricas basadas en reglas ✅

Lighthouse y WebPageTest calculan las puntuaciones de rendimiento según reglas generales de prácticas recomendadas que puedes usar como lineamientos. Como beneficio adicional, Lighthouse también te ofrece sugerencias para realizar optimizaciones simples.

Obtendrás los mejores resultados si realizas un seguimiento de una combinación de métricas de rendimiento centradas en la cantidad y en los usuarios. Enfócate en los tamaños de los recursos en las primeras fases de un proyecto y comienza a hacer un seguimiento de FCP y TTI lo antes posible.

Cómo establecer un modelo de referencia

La única forma de saber realmente qué funciona mejor para tu sitio es probarla: investiga y, luego, prueba tus hallazgos. Analiza la competencia para ver tus destrezas. 🕵️

Si no tienes tiempo para eso, a continuación, te mostramos los números predeterminados que puedes usar para comenzar:

Estas cifras se calculan en función de los dispositivos de referencia del mundo real y la velocidad de la red 3G. En la actualidad, más de la mitad del tráfico de Internet ocurre en redes móviles, por lo que deberías utilizar la velocidad de la red 3G como punto de partida.

Ejemplos de presupuestos

Debes establecer un presupuesto para los diferentes tipos de páginas de tu sitio, ya que el contenido puede variar. Por ejemplo:

  • Nuestra página de producto debe enviar menos de 170 KB de JavaScript para dispositivos móviles
  • Nuestra página de búsqueda debe incluir menos de 2 MB de imágenes en computadoras de escritorio
  • Nuestra página principal debe cargarse y volverse interactiva en menos de 5 s con una conexión 3G lenta en un teléfono Moto G4
  • Nuestro blog debe obtener una puntuación superior a 80 en las auditorías de rendimiento de Lighthouse

Agrega presupuestos de rendimiento a tu proceso de compilación

Webpack, tamaño de paquete y logotipos de Lighthouse

Elegir una herramienta para esto dependerá mucho de la escala de tu proyecto y de los recursos que puedas dedicar a la tarea. Existen algunas herramientas de código abierto que pueden ayudarte a agregar presupuestos a tu proceso de creación:

Si algo supera un umbral definido, puedes hacer lo siguiente:

  • Optimiza una función o un activo existente 🛠️
  • Quita una función o un recurso existente 🗑️
  • No agregar la nueva función ni el recurso PLACEHOLDER⛔

Haz un seguimiento del rendimiento

Asegurarte de que tu sitio sea lo suficientemente rápido significa que debes seguir realizando mediciones después del lanzamiento inicial. Si supervisas estas métricas a lo largo del tiempo y obtén datos de usuarios reales, podrás ver cómo los cambios en el rendimiento afectan las métricas comerciales clave.

Conclusión

El propósito de un presupuesto de rendimiento es asegurarse de que se centre en el rendimiento durante todo el proyecto, y establecerlo con anticipación ayudará a evitar un retroceso más adelante. Debe ser el punto de referencia para ayudarte a descubrir qué incluir en tu sitio web. La idea principal es establecer objetivos para poder equilibrar mejor el rendimiento sin afectar la funcionalidad o la experiencia del usuario.🎯

En la siguiente guía, te explicaremos cómo definir tu primer presupuesto de rendimiento en unos pocos pasos simples.