Tu primer presupuesto de rendimiento

Cuando estableces un presupuesto personal, comercial o familiar, estableces un límite para tus gastos y te aseguras de no excederlo. Los presupuestos de rendimiento funcionan de la misma manera, pero para métricas que afectan el rendimiento del sitio web.

Una vez que estableces y aplicas un presupuesto de rendimiento, puedes tener la seguridad de que tu sitio se renderizará lo más rápido posible. Esto brindará una mejor experiencia a sus visitantes y tendrá un impacto positivo en las métricas comerciales.

A continuación, te mostramos cómo definir tu primer presupuesto de rendimiento en unos pocos pasos simples.

Análisis preliminar

Si quieres mejorar el rendimiento de un sitio existente, empieza por identificar las páginas más importantes. Por ejemplo, podrían ser páginas con la mayor cantidad de tráfico de usuarios o una página de destino de producto.

Después de identificar tus páginas clave, es hora de analizarlas. En primer lugar, nos centraremos en los hitos de tiempo que miden mejor la experiencia del usuario.

En el panel Auditorías de las Herramientas para desarrolladores de Chrome, encontrarás Lighthouse. Ejecuta auditorías en cada página de una ventana de invitado para registrar estas dos veces:

Panel Lighthouse en las Herramientas para desarrolladores de Chrome

Tomemos como ejemplo un motor de búsqueda altamente especializado, Doggos.com. Doggos.com busca indexar todo contenido relacionado con los perros en Internet, y sus páginas más importantes son las páginas de inicio y de resultados. A continuación, se indican las cifras de FCP y TTI que se miden para el sitio en computadoras de escritorio y dispositivos móviles.

Computadoras FCP TTI
Página principal 1,680 ms 5,550 ms
Página de resultados 2,060 ms 6,690 ms
Análisis de Doggos.com para computadoras de escritorio
Dispositivos móviles FCP TTI
Página principal 1,800 ms 6,150 ms
Página de resultados 1,100 ms 7,870 ms
Análisis móvil de Doggos.com

Análisis competitivo

Una vez que haya analizado su propio sitio, será el momento de analizar los sitios de la competencia. Comparar los resultados de sitios web similares al tuyo es una excelente manera de calcular un presupuesto de rendimiento. Ya sea que estés trabajando en un proyecto establecido o comenzando desde cero, este es un paso importante. Obtienes una ventaja competitiva cuando eres más rápido que tus competidores.

Si no estás seguro de qué sitios debes visitar, aquí tienes algunas herramientas que puedes probar:

  1. Palabra clave "related:" de la Búsqueda de Google
  2. Función de Sitios similares de Alexa
  3. SimilarWeb

Captura de pantalla de la Búsqueda de Google con la palabra clave relacionada

Para obtener un panorama realista, intenta encontrar aproximadamente 10 competidores.

Presupuesto para cronometrar hitos

En este ejemplo, nuestro motor de búsqueda de nicho tiene varios competidores y nos centraremos en optimizar la página principal para dispositivos móviles. Actualmente, más de la mitad del tráfico de Internet ocurre en redes móviles, y usar números de dispositivos móviles de forma predeterminada beneficiará no solo a los usuarios de dispositivos móviles, sino también a los de computadoras de escritorio.

Crea un gráfico con los tiempos de FCP y TTI para todos los sitios web similares y destaca el más rápido de la lista. Un gráfico como este te proporciona una imagen más clara del rendimiento de tu sitio web en comparación con la competencia.

Sitio/Página principal FCP TTI
goggles.com 880 ms 3,150 ms
Doggos.com 1,800 ms 6,500 ms
quackquackgo.com 2,680 ms 4,740 ms
ding.xyz 2,420 ms 7,040 ms
Análisis competitivo de Doggos.com en la red 3G
Perro en una computadora
Aparentemente, Doggos.com tiene buenos resultados con la métrica FCP, pero se está quedando atrás en el TTI

Se puede mejorar y un buen lineamiento para lograrlo es la regla del 20%. Según estudios, los usuarios reconocen una diferencia en los tiempos de respuesta cuando es superior al 20%. Esto significa que si deseas obtener un rendimiento notablemente mejor que el mejor sitio comparable, debes ser al menos un 20% más rápido.

Medir Hora actual Presupuesto (20% más rápido que la competencia)
FCP 1,800 ms 704 ms
TTI 6,500 ms 2,520 ms
Un presupuesto de rendimiento que permita a Doggos.com superar a la competencia

Si intenta optimizar un sitio existente, ese objetivo puede parecer imposible de alcanzar. Esto no es una señal de que te rindas. Comienza con pasos pequeños y establece un presupuesto un 20% más rápido que tu velocidad actual. Sigue optimizando desde allí.

Para Doggos.com, un presupuesto revisado podría verse así.

Medir Hora actual Presupuesto inicial (20% más rápido que el tiempo actual) Objetivo a largo plazo (20% más rápido que la competencia)
FCP 1,800 ms 1,440 ms 704 ms
TTI 6,500 ms 5,200 ms 2,520 ms
Presupuesto de rendimiento revisado de Doggos.com

Combina diferentes métricas

Un presupuesto de rendimiento sólido combina diferentes tipos de métricas. Ya definimos el presupuesto para los plazos de los hitos y ahora agregaremos dos más a la combinación:

  • métricas basadas en la cantidad
  • métricas basadas en reglas

Presupuesto para métricas basadas en cantidades

Independientemente del número de peso total de la página que se te ocurra, intenta publicar menos de 170 KB de recursos rutas críticas (comprimidos o minificados). Esto garantiza que tu sitio web será rápido incluso en dispositivos económicos y 3G lenta.

Puedes tener un presupuesto mayor para la experiencia en computadoras de escritorio, pero no te alojes. Según los datos del archivo HTTP, el peso medio de las páginas, tanto en computadoras de escritorio como en dispositivos móviles, es superior a 1 MB. Para obtener un sitio web de buen rendimiento, hay que apuntar por debajo de esta mediana.

A continuación, se incluyen algunos ejemplos basados en los presupuestos de TTI:

Red Dispositivo JS Imágenes CSS HTML Fuentes Total Presupuesto interactivo
3G lenta Moto G4 100 30 10 10 20 ~170 KB 5 s
4G lenta Moto G4 200 50 35 30 30 ~345 KB 3 s
WiFi Computadoras 300 250 50 50 100 ~750 KB 2 s

Definir un presupuesto basado en métricas de cantidad es un negocio complicado. Un sitio web de comercio electrónico con muchas fotos de productos es muy diferente de un portal de noticias, que consiste principalmente en texto. Si tienes anuncios o estadísticas en tu sitio, aumentará la cantidad de JavaScript que envías.

Usa la tabla de arriba como punto de partida y realiza ajustes según el tipo de contenido con el que estés trabajando. Define lo que incluirán tus páginas, revisa tu investigación y haz una suposición fundamentada para los tamaños de elementos individuales. Por ejemplo, si estás creando un sitio web con muchas imágenes, establece límites más estrictos para el tamaño de JS.

Una vez que tengas un sitio web que funcione, revisa las métricas de rendimiento centradas en el usuario y ajusta tu presupuesto.

Presupuesto para métricas basadas en reglas

Las métricas basadas en reglas que son muy eficaces son las puntuaciones de Lighthouse. Lighthouse califica la app en 5 categorías, y una de ellas es el rendimiento. Las puntuaciones de rendimiento se calculan en función de 5 métricas diferentes, que incluyen Primer procesamiento de imagen con contenido y Tiempo de carga.

Cuando intentes crear un sitio excelente, establece el presupuesto de la puntuación de rendimiento de Lighthouse en, al menos, 85 (de 100). Usa Lighthouse CI para aplicarla en las solicitudes de extracción.

Priorizar

Pregúntate qué nivel de interacción esperas con tu sitio. Si es un sitio web de noticias, el objetivo principal de los usuarios es leer el contenido, por lo que debes enfocarte en renderizar el contenido rápidamente y mantener un FCP bajo. Los visitantes de Doggos.com quieren hacer clic en los vínculos relevantes lo antes posible, por lo que la prioridad principal es un TTI bajo.

Descubre exactamente qué parte de tu público navega en las computadoras de escritorio y en los dispositivos móviles, y prioriza según corresponda. Una forma de saberlo es consultar qué hace el público en los sitios web de la competencia mediante el panel del Informe sobre la experiencia del usuario en Chrome.

Datos de distribución por dispositivo del informe sobre la experiencia del usuario en Chrome
Datos de distribución de dispositivos del informe sobre la experiencia del usuario en Chrome

Próximos pasos

Asegúrate de que se aplique el presupuesto de rendimiento a lo largo de todo el proyecto e incorpóralo al proceso de compilación.