Sitio lento a pesar del almacenamiento en caché
¿Tu sitio está en caché pero aún se siente lento? Esto es lo que debes verificar.
1. Verifica que el almacenamiento en caché funciona
Primero, confirma que tu contenido realmente se está almacenando en caché. Comprueba los encabezados de respuesta:
X-Cache: HIT ← Contenido servido desde la caché
X-Cache: MISS ← Contenido obtenido del origenSi ves todos MISS, comprueba si tu origen está enviando encabezados Cache-Control: no-cache o private.
2. Comprueba los recursos no almacenados en caché
Incluso si tu HTML está en caché, los recursos de terceros lentos pueden afectar el rendimiento.
Causas comunes:
- Google Fonts cargadas de forma síncrona
- Scripts de analítica (Google Analytics, Facebook Pixel)
- Widgets de chat (Intercom, Drift, Crisp)
- Scripts de publicidad externos
- Incrustaciones de redes sociales
Consejo: Carga los scripts de terceros con los atributos async o defer para evitar que bloqueen la renderización de la página.
3. Imágenes grandes en la página
Incluso con la conversión a WebP, las imágenes sobredimensionadas ralentizan el LCP.
Soluciones:
- Redimensiona las imágenes al tamaño de visualización real (no sirvas imágenes de 4000px para contenedores de 800px)
- Usa imágenes responsive con
srcset - Carga diferida de imágenes fuera de la vista
- Considera usar una imagen principal optimizada para la ventana gráfica
4. Servidor de origen lento
Para los MISS de caché (primeras solicitudes, páginas dinámicas), la velocidad de tu origen sigue siendo importante.
Comprueba tu origen:
- Consultas lentas a la base de datos (revisa los registros de consultas lentas)
- Índices de base de datos faltantes
- Demasiados plugins (WordPress/WooCommerce)
- Recursos del servidor insuficientes
- Sin caché de opcode (PHP)
Objetivo: El TTFB del origen debería estar por debajo de 500ms. El almacenamiento en caché de Fast amplifica la velocidad de tu origen — un origen rápido significa respuestas en caché aún más rápidas.
5. Recursos que bloquean la renderización
El CSS y JS en el <head> bloquean la renderización de la página.
Soluciones:
- CSS crítico en línea en el
<head> - Carga CSS no crítico con
media="print" onload="this.media='all'" - Añade
defera los archivos JavaScript - Mueve los scripts al final del
<body>
Lista de verificación de rendimiento
- X-Cache muestra HIT para recursos estáticos
- Los scripts de terceros son async/deferred
- Las imágenes tienen el tamaño adecuado
- El TTFB del origen está por debajo de 500ms
- Sin recursos que bloqueen la renderización en el head