Cuando estableces un presupuesto personal, empresarial o familiar, fijas un límite para tus gastos y te aseguras de no sobrepasarlo. Los presupuestos de rendimiento funcionan de la misma manera, pero para las métricas que afectan el rendimiento del sitio web.
Con un presupuesto de rendimiento establecido y aplicado, puedes tener la certeza de que tu sitio se renderizará lo más rápido posible. Esto proporcionará una mejor experiencia a tus 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 sencillos pasos.
Análisis preliminar
Si intentas mejorar el rendimiento de un sitio existente, comienza por identificar las páginas más importantes. Por ejemplo, podrían ser las páginas con la mayor cantidad de tráfico de usuarios o una página de destino de un producto.
Después de identificar tus páginas clave, es momento de analizarlas. Primero, nos enfocaremos en los hitos de tiempo que mejor miden la experiencia del usuario.
En el panel Audits de las Herramientas para desarrolladores de Chrome, encontrarás Lighthouse. Ejecuta auditorías en cada página en una ventana de invitado para registrar estos dos tiempos:
Tomemos como ejemplo un motor de búsqueda muy especializado, Doggos.com. El objetivo de Doggos.com es indexar todo lo relacionado con perros en Internet, y sus páginas más importantes son la página principal y la de resultados. Estos son los números de FCP y TTI medidos para el sitio en computadoras y dispositivos móviles.
| Computadora de escritorio | 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 de la competencia
Una vez que hayas analizado tu propio sitio, es hora de analizar los sitios de la competencia. Comparar los resultados de sitios web similares al tuyo es una excelente manera de determinar un presupuesto de rendimiento. Ya sea que trabajes en un proyecto establecido o comiences desde cero, este es un paso importante. Obtienes una ventaja competitiva cuando eres más rápido que tus competidores.
Si no sabes qué sitios consultar, prueba estas herramientas:
- La palabra clave "related:" de la Búsqueda de Google
- Función Sitios similares de Alexa
- SimilarWeb
Para obtener una imagen realista, intenta encontrar alrededor de 10 empresas de la competencia.
Presupuesto para los hitos de tiempo
En este ejemplo, nuestro motor de búsqueda de nicho tiene algunos competidores, y nos enfocaremos en optimizar la página principal para dispositivos móviles. Actualmente, más de la mitad del tráfico de Internet se produce en redes móviles, y usar números de teléfono celulares como opción predeterminada beneficiará no solo a los usuarios de dispositivos móviles, sino también a los de computadoras.
Crea un gráfico con los tiempos de FCP y TTI de todos los sitios web similares y destaca el más rápido del grupo. Un gráfico como este te brinda una idea más clara del rendimiento de tu sitio web en comparación con la competencia.
| Sitio o 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 una buena guía para ello es la regla del 20%. Las investigaciones indican que los usuarios reconocen una diferencia en los tiempos de respuesta cuando es superior al 20%. Esto significa que, si quieres ser 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 intentas optimizar un sitio existente, es posible que ese objetivo parezca imposible de alcanzar. Esta no es una señal para que te rindas. Comienza con pasos pequeños y establece un presupuesto un 20% más rápido que tu velocidad actual. Sigue optimizando a partir de ahí.
En el caso de Doggos.com, un presupuesto revisado podría verse así.
| Medir | Hora actual | Presupuesto inicial (20% más rápido que la hora 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 tiempos de los hitos y ahora agregaremos dos más:
- Métricas basadas en cantidades
- Métricas basadas en reglas
Presupuesto para métricas basadas en la cantidad
Cualquiera sea el peso total de la página que obtengas, intenta entregar menos de 170 KB de recursos de ruta de acceso crítica (comprimidos o minimizados). Esto garantiza que tu sitio web será rápido incluso en dispositivos económicos y con una conexión 3G lenta.
Puedes tener un presupuesto más grande para la experiencia en computadoras, pero no te excedas. Según los datos del Archivo HTTP del último año, el peso medio de las páginas en computadoras y dispositivos móviles supera 1 MB. Para tener un sitio web con buen rendimiento, debes apuntar a valores muy por debajo de estas cifras medianas.
Estos son algunos ejemplos basados en los presupuestos de TTI:
| Red | Dispositivo | JS | Imágenes | CSS | HTML | Fuentes | Total | Presupuesto de Time to Interactive |
|---|---|---|---|---|---|---|---|---|
| 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 |
| Wi-Fi | Computadora de escritorio | 300 | 250 | 50 | 50 | 100 | ~750 KB | 2 s |
Definir un presupuesto en función de las métricas de cantidad es un asunto complicado. Un sitio web de comercio electrónico con muchas fotos de productos es muy diferente de un portal de noticias que es principalmente texto. Si tienes anuncios o estadísticas en tu sitio, aumenta la cantidad de JavaScript que envías.
Usa la tabla anterior como punto de partida y ajústala según el tipo de contenido con el que trabajes. Define qué incluirán tus páginas, revisa tu investigación y haz una suposición fundamentada sobre los tamaños de los recursos 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 en funcionamiento, verifica tu rendimiento en las métricas de rendimiento centradas en el usuario y ajusta tu presupuesto.
Presupuesto para las métricas basadas en reglas
Las métricas basadas en reglas muy eficaces son las puntuaciones de Lighthouse. Lighthouse califica tu 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, incluidas Largest Contentful Paint y Time to Interactive.
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 aplicarlo en las solicitudes de extracción.
Prioriza
Pregúntate qué nivel de interacción esperas en tu sitio. Si se trata de un sitio web de noticias, el objetivo principal de los usuarios es leer el contenido, por lo que debes enfocarte en renderizar rápidamente y mantener un FCP bajo. Los visitantes de Doggos.com quieren hacer clic en 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 computadoras de escritorio y en dispositivos móviles, y prioriza en consecuencia. Una forma de averiguarlo es verificar lo que hace tu público en los sitios web de la competencia a través del panel del Informe sobre la experiencia del usuario en Chrome.
Próximos pasos
Asegúrate de que se aplique tu presupuesto de rendimiento en todo el proyecto y de incorporarlo en tu proceso de compilación.