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:
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 |
| 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 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:
- Palabra clave "related:" de la Búsqueda de Google
- Función de Sitios similares de Alexa
- SimilarWeb
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 |
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 |
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 |
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.
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.