El rendimiento es una parte importante de la experiencia del usuario y afecta las métricas empresariales. Es tentador pensar que si eres un buen desarrollador terminarás con un sitio de buen rendimiento, pero la verdad es que un buen rendimiento rara vez es un efecto secundario. Como con la mayoría de las otras cosas, para alcanzar un objetivo, hay que definirlo con claridad. Comienza el recorrido configurando 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. Define un presupuesto para iniciar la conversación sobre el rendimiento web. Sirve como punto de referencia para tomar decisiones sobre el diseño, la tecnología y la adición de características.
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 para un problema y evaluar frameworks y 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 a los diseñadores y desarrolladores.
Ya mencionamos algunos elementos 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
- 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 pueden representarse de manera diferente según el orden en que se soliciten los recursos. Si un recurso crítico, como una imagen hero o una hoja de estilo en una de las páginas se carga tarde en el proceso, los usuarios esperarán más tiempo para ver algo útil y percibir 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 lo hace.
Por eso, es importante hacer un seguimiento de otro tipo de métrica.
Cronogramas de logros 🥳️
Los tiempos de eventos importantes marcan eventos que ocurren durante la carga de la página, como los eventos DOMContentLoaded o load. Los tiempos más útiles son las métricas de rendimiento centradas en el usuario que te 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.
First Contentful Paint (FCP) mide cuándo el navegador muestra el primer fragmento de contenido del DOM, como texto o imágenes.
El tiempo para ser interactivo (TTI) mide cuánto tiempo tarda una página en ser completamente interactiva y responder de manera confiable a la entrada del usuario. Es muy importante realizar un seguimiento si esperas cualquier tipo de interacción del usuario en la página, como hacer clic en vínculos o botones, escribir o usar elementos del formulario.
Métricas basadas en reglas ✅
Lighthouse y WebPageTest calculan las puntuaciones de rendimiento en función de reglas generales de prácticas recomendadas que puedes usar como lineamientos. Como ventaja adicional, Lighthouse también te ofrece sugerencias de optimizaciones simples.
Obtendrás los mejores resultados si realizas un seguimiento de una combinación de métricas de rendimiento basadas en la cantidad y centradas en los usuarios. Enfócate en el tamaño de los recursos en las primeras fases de un proyecto y comienza a hacer un seguimiento del 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 probarlo: investigar y, luego, probar los hallazgos. Analice a la competencia para ver cómo se posiciona. 🕵️
Si no tienes tiempo para eso, a continuación te mostramos algunos números predeterminados adecuados para empezar:
- Menos de 5 s de tiempo de carga
- Menos de 170 KB de recursos de ruta crítica (comprimidos o minificados)
Estas cifras se calculan en función de los dispositivos de referencia del mundo real y la velocidad de la red 3G. Actualmente, más de la mitad del tráfico de Internet ocurre en redes móviles, por lo que deberías usar la velocidad de red 3G como punto de partida.
Ejemplos de presupuestos
Debes tener un presupuesto establecido para los diferentes tipos de páginas de tu sitio, ya que el contenido puede variar. Por ejemplo:
- Nuestra página de productos debe enviar menos de 170 KB de JavaScript en 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 ser interactiva en menos de 5 s con una conexión 3G lenta en un teléfono Moto G4.
- Nuestro blog debe tener una puntuación superior a 80 en auditorías de rendimiento de Lighthouse
Agrega presupuestos de rendimiento a tu proceso de creación
La elección de 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 compilación:
Si algo supera un umbral definido, puedes hacer lo siguiente:
- Optimiza una función o un recurso existentes 🛠️
- Cómo quitar una función o un recurso existentes 🗑️
- No agregar la función o el activo nuevos 🗣⛔
Haz un seguimiento del rendimiento
Asegurarte de que tu sitio sea lo suficientemente rápido significa que deberás seguir realizando mediciones después del lanzamiento inicial. Supervisar estas métricas a lo largo del tiempo y obtener datos de usuarios reales te mostrará 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 te enfoques en el rendimiento durante todo el proyecto, y establecerlo con anticipación ayudará a evitar un retroceso más adelante. Debería ser un punto de referencia para ayudarte a decidir qué incluir en tu sitio web. La idea principal es establecer objetivos para que puedas equilibrar mejor el rendimiento sin perjudicar la funcionalidad o la experiencia del usuario.🎯
En la siguiente guía, se explica cómo definir tu primer presupuesto de rendimiento en unos pocos pasos sencillos.