La importancia crítica del rendimiento web

Por qué la velocidad del sitio web importa más de lo que crees

Cuando visitas un sitio web, cada segundo de espera se siente como una eternidad. Pero para las personas que gestionan ese sitio, esos segundos tienen un costo muy real. Estudios de grandes empresas han demostrado una y otra vez que la velocidad afecta directamente cuánto dinero gana un sitio, cuántas personas lo visitan y si esos visitantes regresan.

Amazon descubrió que por cada 100 milisegundos de retraso, sus ventas caían un 1%. Google vio que un retraso de medio segundo reducía su tráfico en un 20%. Walmart encontró que mejorar su tiempo de carga en solo un segundo aumentaba las conversiones en un 2%. La BBC perdió el 10% de sus usuarios por cada segundo adicional que sus páginas tardaban en cargar. Y Pinterest, al hacer que su sitio se sintiera más rápido, vio un 15% más de personas registrándose. Estos números cuentan una historia clara: la velocidad importa.

Cómo mide Google la velocidad del sitio web

Google ha definido un conjunto de métricas llamadas Core Web Vitals que utiliza para medir qué tan rápido y fluido se siente un sitio web para las personas reales. Estas métricas ahora son parte de cómo Google decide qué sitios tienen un ranking más alto en los resultados de búsqueda, por lo que son importantes para cualquiera que quiera que su sitio sea encontrado.

La primera métrica es Largest Contentful Paint, o LCP, que mide cuánto tiempo tarda en hacerse visible el contenido principal de una página. Piénsalo como el momento en que realmente puedes ver algo útil en la pantalla. Google recomienda que esto ocurra dentro de los 2,5 segundos. La segunda es First Input Delay, que mide qué tan rápido responde una página cuando intentas hacer clic o tocar algo. Esto debería estar por debajo de los 100 milisegundos — cualquier cosa más lenta se siente lenta. La tercera es Cumulative Layout Shift, que mide cuánto se mueve la página mientras se carga. ¿Alguna vez has intentado hacer clic en un botón solo para que se mueva porque se cargó una imagen encima? Eso es lo que esta métrica intenta prevenir.

Otras mediciones importantes de velocidad

Más allá de las Core Web Vitals, hay otras mediciones útiles. Time to First Byte mide qué tan rápido responde el servidor cuando tu navegador solicita una página. First Contentful Paint es el momento en que aparece algo en la pantalla, aunque sea solo un color de fondo. Time to Interactive te dice cuándo la página está completamente lista para que hagas clic y escribas. Y Total Blocking Time mide cuánto tiempo el hilo principal del navegador está ocupado con trabajo pesado, impidiéndote interactuar con la página.

Formas prácticas de hacer un sitio web más rápido

Existen varias estrategias probadas para acelerar un sitio web. Las más impactantes se centran en lo que el navegador tiene que hacer antes de poder mostrar algo en la pantalla. Esto incluye minimizar la cantidad de archivos que deben descargarse, asegurarse de que el CSS crítico se cargue temprano y retrasar el JavaScript que no es necesario de inmediato.

Las imágenes suelen ser los archivos más grandes de una página. Usar formatos modernos como WebP o AVIF puede reducir su tamaño drásticamente sin perder calidad. Comprimir archivos de texto con Brotli o gzip, usar una CDN para servir contenido desde servidores cercanos al visitante y configurar un almacenamiento en caché adecuado para que los visitantes recurrentes no tengan que descargar todo nuevamente, todo esto marca una gran diferencia.

El code splitting es otra técnica útil: en lugar de enviar todo tu JavaScript de una vez, envías solo lo necesario para la página actual y cargas el resto después. Esto hace que la carga inicial sea mucho más rápida.

Seguimiento del rendimiento

La mejor manera de garantizar que un sitio se mantenga rápido es establecer presupuestos de rendimiento claros: límites en cosas como el tamaño de los paquetes de JavaScript, el peso total de las imágenes y la cantidad de scripts de terceros. Estos presupuestos actúan como un límite de velocidad para tu código.

Hay herramientas que miden el rendimiento desde usuarios reales que visitan tu sitio, lo que te da la imagen más precisa. El Chrome User Experience Report de Google recopila datos de millones de sitios reales. Lighthouse ejecuta pruebas en un entorno controlado y te da una puntuación. Y para una supervisión continua, puedes integrar estas herramientas en tu flujo de trabajo de desarrollo para que cada cambio se verifique en cuanto a su impacto en el rendimiento antes de que se ponga en marcha.