Una auditoría de rendimiento web te permite identificar qué está ralentizando tu sitio y cómo mejorarlo. En esta guía te explicamos cómo realizar una auditoría completa, qué herramientas usar y cómo interpretar los resultados.
¿Por qué auditar el rendimiento de tu web?
El rendimiento web afecta directamente a:
- Experiencia de usuario: Los usuarios abandonan sitios lentos
- SEO: Los Core Web Vitals son factor de ranking
- Conversiones: Cada segundo de carga reduce las conversiones un 7%
- Costes: Sitios lentos consumen más recursos del servidor
Métricas clave de rendimiento
Core Web Vitals (esenciales)
- LCP (Largest Contentful Paint): Tiempo hasta que el contenido principal es visible. Objetivo: < 2.5s
- INP (Interaction to Next Paint): Latencia de interacciones. Objetivo: < 200ms
- CLS (Cumulative Layout Shift): Estabilidad visual. Objetivo: < 0.1
Métricas adicionales importantes
- TTFB (Time to First Byte): Tiempo hasta recibir el primer byte. Objetivo: < 200ms
- FCP (First Contentful Paint): Tiempo hasta ver cualquier contenido. Objetivo: < 1.8s
- Speed Index: Velocidad con la que el contenido se vuelve visible
- Total Blocking Time: Tiempo que el hilo principal está bloqueado
Herramientas para auditar rendimiento
Google PageSpeed Insights
La herramienta oficial de Google. Proporciona puntuaciones para móvil y escritorio, datos de campo (usuarios reales) y de laboratorio.
Cómo usarla:
- Ve a pagespeed.web.dev
- Introduce tu URL
- Analiza puntuaciones y recomendaciones
Lighthouse
Integrado en Chrome DevTools. Más detallado que PageSpeed Insights y permite auditorías offline.
Cómo usarlo:
- Abre Chrome DevTools (F12)
- Ve a la pestaña Lighthouse
- Selecciona categorías y ejecuta auditoría
WebPageTest
Herramienta avanzada con cascada de carga detallada. Permite probar desde diferentes ubicaciones y conexiones.
GTmetrix
Combina datos de Lighthouse con métricas propias. Buen historial de rendimiento.
Proceso de auditoría paso a paso
1. Establece la línea base
Antes de optimizar, documenta el estado actual:
- Puntuación PageSpeed (móvil y escritorio)
- Valores de Core Web Vitals
- Tiempo de carga total
- Peso total de la página
- Número de peticiones
2. Analiza el TTFB
El tiempo de respuesta del servidor es el primer cuello de botella. Si es alto (> 200ms), los problemas están en:
- Hosting lento
- Base de datos sin optimizar
- PHP/backend ineficiente
- Falta de caché de servidor
3. Analiza la cascada de carga
La cascada (waterfall) muestra qué recursos se cargan y cuándo:
- Recursos que bloquean: CSS y JS en el head que impiden renderizado
- Recursos grandes: Imágenes pesadas, scripts voluminosos
- Cadenas de dependencias: Recursos que cargan otros recursos
- Recursos externos: Dependencias de terceros lentos
4. Audita las imágenes
Las imágenes suelen ser el mayor peso. Verifica:
- ¿Están optimizadas/comprimidas?
- ¿Usan formatos modernos (WebP, AVIF)?
- ¿Tienen dimensiones correctas o se redimensionan en el navegador?
- ¿Se usa lazy loading para imágenes no visibles?
5. Audita JavaScript
JavaScript excesivo es causa común de problemas de rendimiento:
- ¿Hay código no utilizado?
- ¿Se usa async/defer correctamente?
- ¿Hay librerías pesadas que podrían reemplazarse?
- ¿El código está minificado?
6. Audita CSS
- ¿Hay CSS no utilizado?
- ¿El CSS crítico está inline?
- ¿Está minificado?
- ¿Hay fuentes que bloquean renderizado?
7. Verifica la caché
Una buena estrategia de caché mejora visitas repetidas:
- ¿Están configurados headers de caché?
- ¿Se usa caché de servidor? (plugins de caché en WordPress)
- ¿Hay un CDN configurado?
Problemas comunes y soluciones
| Problema | Solución |
|---|---|
| LCP lento | Optimizar imagen hero, mejorar TTFB, preload recursos críticos |
| CLS alto | Especificar dimensiones de imágenes, reservar espacio para anuncios |
| INP alto | Reducir JavaScript, dividir tareas largas |
| Imágenes pesadas | Comprimir, usar WebP, implementar lazy loading |
| JS bloqueante | Usar async/defer, mover al final del body |
Priorización de mejoras
No intentes arreglar todo a la vez. Prioriza por impacto:
- TTFB: Si es alto, todo lo demás se ve afectado
- Recursos críticos: Lo que bloquea el renderizado inicial
- Imágenes: Generalmente el mayor peso
- JavaScript de terceros: A menudo fuera de tu control pero muy impactante
- Optimizaciones finas: CSS crítico, preconnect, etc.
Monitoreo continuo
Una auditoría puntual está bien, pero el rendimiento puede degradarse con el tiempo. Configura monitoreo continuo:
- WatcherWolf para monitorizar Core Web Vitals automáticamente
- Alertas cuando las métricas empeoren
- Auditorías periódicas después de cambios importantes
Monitorea el rendimiento de tu web
Checklist de auditoría rápida
- ☐ Ejecutar PageSpeed Insights (móvil y escritorio)
- ☐ Documentar Core Web Vitals actuales
- ☐ Verificar TTFB < 200ms
- ☐ Analizar cascada de carga
- ☐ Comprobar que imágenes están optimizadas
- ☐ Verificar que JS no bloquea renderizado
- ☐ Confirmar que caché está configurada
- ☐ Identificar recursos de terceros problemáticos
- ☐ Crear lista priorizada de mejoras
- ☐ Configurar monitoreo continuo
Conclusión
Una auditoría de rendimiento web te da visibilidad de qué está ralentizando tu sitio. Usa las herramientas adecuadas, prioriza las mejoras por impacto, y no olvides monitorear continuamente para que los problemas no vuelvan a aparecer.
Complementa esta auditoría verificando también el uptime y la seguridad de tu web para tener una visión completa de la salud de tu sitio.
¿Listo para monitorear tu web?
Empieza gratis y recibe alertas instantáneas cuando tu sitio tenga problemas.
Crear cuenta gratis