3.3Rendimiento & caché
Lo esencial en 30 segundos
- La caché sirve una versión pregenerada de las páginas en lugar de reconstruirlas en cada visita: la palanca de velocidad n.º 1.
- Se combinan caché + imágenes optimizadas + lazy loading; la minificación CSS/JS y una CDN completan según las necesidades.
- No se adivina: se mide con PageSpeed Insights o GTmetrix antes y después de cada optimización.
Minicaso hilado — Ocho segundos es demasiado
El sitio del taller tarda ocho segundos en mostrarse: las fotos son pesadas y cada página se reconstruye en cada visita. Samir mide el punto de partida, instala una caché adaptada al alojamiento, activa la minificación y comprueba que nada se rompe. Vuelve a medir y presenta la mejora a Hassan con cifras.
Continuación del caso 3.2 — el sitio es visible, también debe ser rápido.
1. La caché, palanca n.º 1
Sin caché, WordPress reconstruye cada página en cada visita: PHP consulta la base de datos, ensambla el HTML y lo envía. La caché conserva una versión ya generada y la sirve casi al instante. Suele ser la mejora más espectacular para un sitio corporativo o un blog.
La elección de la extensión depende del alojamiento: LiteSpeed Cache si el servidor es LiteSpeed, WP Super Cache o W3 Total Cache en gratuito, WP Rocket de pago por su sencillez. Samir activa una sola extensión de caché y vacía la caché tras cada modificación importante.
2. Completar y medir
La caché no basta si las imágenes pesan varios megabytes. Se combina con la optimización de imágenes (sección 1.3) y el lazy loading. La minificación elimina espacios y comentarios del CSS/JS; una CDN acerca los archivos a los visitantes, sobre todo con un público internacional. Cada opción debe probarse: una minificación agresiva puede romper una visualización.
Samir mide con PageSpeed Insights o GTmetrix antes y después. Anota las puntuaciones, el tiempo de carga y las recomendaciones, y luego corrige una cosa cada vez. En rendimiento, la prueba es numérica: eso también tranquiliza al cliente.
🔎 Ejemplo concreto — Acelerar el taller (caso Samir)
Antes: 8,2 s, puntuación PageSpeed 38.
1. Imágenes redimensionadas y comprimidas.
2. LiteSpeed Cache activado (caché de páginas + lazy loading).
3. Minificación CSS/JS probada en una página.
Después: 2,1 s, puntuación 82.
→ Verificar carrito y formularios tras la activación.Resultado: una mejora medida y presentable al cliente.
Lección: una optimización cada vez y, después, medir.
Vocabulario de la sección
- Caché
- Versión pregenerada de las páginas, servida en lugar de reconstruirse en cada visita.
Ejemplo sencillo: la página Colecciones se carga casi al instante.
Lo que no es: dejar que WordPress reconstruya cada página en cada visita.
Reflejo: caché = velocidad n.º 1.
- Extensión de caché
- Módulo que genera y sirve la caché: LiteSpeed, WP Super Cache, WP Rocket.
Ejemplo sencillo: una sola extensión activa a la vez.
Lo que no es: acumular tres extensiones de caché.
Reflejo: una extensión, bien configurada.
- Minificación
- Eliminación de espacios y comentarios del CSS/JS para reducir el peso.
Ejemplo sencillo: activar la minificación y luego probar la visualización.
Lo que no es: minificar sin comprobar que la página funciona.
Reflejo: probar tras la minificación.
- CDN
- Red de servidores que acerca los archivos al visitante.
Ejemplo sencillo: Cloudflare para un público fuera de Marruecos.
Lo que no es: pagar una CDN sin audiencia internacional.
Reflejo: CDN = útil según la audiencia.
- Medición (PageSpeed)
- Herramientas que puntúan la velocidad y enumeran los problemas que hay que corregir.
Ejemplo sencillo: PageSpeed Insights antes y después.
Lo que no es: juzgar la velocidad por la sensación.
Reflejo: cifras antes y después.
En la práctica — Acelerar el sitio y demostrarlo
- Mida una página en PageSpeed Insights y anote la puntuación.
- Instale una sola extensión de caché adaptada al alojamiento y active la caché de páginas.
- Active las opciones útiles (lazy loading, minificación) y compruebe que el sitio funciona.
- Vuelva a medir y compare las puntuaciones y el tiempo de carga.
Guion listo para decir — presentar la mejora (20 s)
«Antes, su sitio tardaba más de ocho segundos en mostrarse. Tras la optimización, bajamos a unos dos segundos: los visitantes se quedan y Google valora los sitios rápidos. Le muestro las mediciones antes y después.»
Apoyarse siempre en cifras medidas, no en una impresión.
Modelo copiar-pegar — ficha de rendimiento
PÁGINA MEDIDA: _______________
PUNTUACIÓN ANTES: _______________ / TIEMPO: _______________
CACHÉ ACTIVADA: sí / no (extensión: _______________)
IMÁGENES OPTIMIZADAS: sí / no / LAZY LOADING: sí / no
PUNTUACIÓN DESPUÉS: _______________ / TIEMPO: _______________
ANOMALÍAS VERIFICADAS: carrito / formularios / menúAlojamiento LiteSpeed
LiteSpeed Cache ofrece caché, minificación y lazy loading integrados.
Alojamiento compartido clásico
WP Super Cache basta para un sitio corporativo; medir tras la configuración.
Tienda
Excluir el carrito y la cuenta de la caché, probar el proceso de compra.
Audiencia internacional
Añadir una CDN y comprobar el rendimiento desde varias regiones.
✓ Buenas prácticas
- Medir antes y después de cada cambio.
- Una sola extensión de caché.
- Probar carrito y formularios tras la optimización.
✗ Errores frecuentes
- Acumular varias extensiones de caché.
- Minificar sin comprobar la visualización.
- Optimizar por sensación sin medir.
Puntos clave
- La caché es la palanca de velocidad n.º 1.
- Caché + imágenes + lazy loading forman el trío del rendimiento.
- Una sola extensión de caché, bien configurada.
- Se mide con PageSpeed antes y después.
Reto 48h — aplica mañana
Mida una página, active la caché y optimice las imágenes, y vuelva a medir. Anote las dos puntuaciones y el tiempo ganado. 20 minutos.
- Mido la velocidad antes de optimizar.
- Activo una caché adaptada sin duplicados.
- Compruebo que las optimizaciones no rompen nada.
Preguntas frecuentes
¿Es útil la caché en un sitio pequeño?
Sí: incluso un sitio corporativo con pocas visitas gana un tiempo de respuesta claro, y la caché reduce la carga del servidor. Es una de las optimizaciones más rentables.
¿Por qué vaciar la caché tras una modificación?
Porque la caché sirve una versión antigua de la página. Tras una modificación de contenido, diseño o extensión, se vacía la caché para ver y servir la nueva versión.
¿Es imprescindible la CDN?
No. Resulta interesante cuando la audiencia está lejos del servidor o el tráfico es importante. Para un público local, un buen alojamiento y una caché bien configurada suelen bastar.
El sitio del taller tarda ocho segundos en mostrarse. ¿Cuál es la palanca más rentable?