Caché

Módulo 6: Velocidad · Tiempo de lectura: 9 minutos

Objetivo de aprendizaje: Tras esta lección podrá explicar qué tipos de caché existen y configurar y comprobar correctamente una caché de página.

Conceptos clave: caché de página, caché del navegador, Cache-Control, caché de objetos, Redis, OPcache, CDN, plugin de caché, LiteSpeed Cache, excepciones (sesión iniciada, carrito, pago), vaciar la caché, plugins de caché duplicados

Caché: no hacer el mismo trabajo dos veces

Una caché guarda el resultado de un trabajo, de modo que la próxima vez no haya que repetirlo. En un sitio WordPress hay cuatro lugares donde esto ocurre, de mayor a menor impacto:

La caché de página

La lección 1.2 ya lo mostró: sin caché, WordPress vuelve a generar toda la página en cada visita. Con una caché de página, el primer visitante la genera y los siguientes reciben el HTML ya guardado. Un TTFB de un segundo puede así reducirse a unas pocas centésimas de segundo, y su plan de alojamiento puede atender a muchos más visitantes a la vez.

Cómo obtener una caché de página depende de su servidor web:

• LiteSpeed (muchos alojamientos compartidos, entre ellos WebOké): el propio servidor web dispone de una caché. El plugin gratuito LiteSpeed Cache la gestiona desde WordPress: qué páginas pueden guardarse en caché y cuándo se vacían. Como la caché está en el servidor web, PHP ni siquiera se inicia para una página guardada.
• Apache o nginx: un plugin de caché que guarda el HTML como archivos, como WP Super Cache, W3 Total Cache o un plugin de pago como WP Rocket. O una caché que el proveedor de alojamiento gestiona a nivel de servidor.
• Alojamiento WordPress gestionado suele tener su propia caché; en ese caso normalmente no instala un plugin de caché.

Elija uno solo. Dos plugins de caché a la vez (por ejemplo LiteSpeed Cache y WP Rocket) se interfieren entre sí: trabajo duplicado, páginas que no se vacían, errores extraños. En un servidor LiteSpeed, LiteSpeed Cache trabaja con la caché del propio servidor web; otro plugin de caché no puede hacer eso.

Qué no puede ir en la caché

Una caché de página entrega el mismo HTML a todo el mundo. Esto falla en páginas que son distintas para cada visitante:

• usuarios con sesión iniciada (la barra de administración, «Te damos la bienvenida, Lisa»);
• el carrito, el pago y Mi cuenta en una tienda online;
• páginas con un formulario con un código de un solo uso (nonce), que caduca al cabo de un tiempo;
• páginas que muestran algo distinto según la ubicación, el idioma o una cookie.

Los buenos plugins de caché excluyen automáticamente a los usuarios con sesión iniciada y las páginas habituales de WooCommerce. Con otros plugins (una zona de socios, un sistema de reservas) debe configurar usted mismo las excepciones. La señal de que algo falla: un visitante ve el carrito de otra persona, o un formulario muestra «caducado» o «solicitud no válida».

Vaciar: ¿cuándo queda obsoleta la caché?

Si modifica una página, la versión guardada debe desaparecer. Los plugins de caché suelen vaciar, al guardar una entrada, esa página, la página de inicio y los archivos. Al modificar el menú, el tema o un widget, a menudo es necesario vaciar toda la caché. Si tras un cambio sigue viendo la versión antigua, vacíe la caché (en la barra de administración del plugin de caché) y compruébelo en una ventana privada, para que su propia caché del navegador no interfiera.

La caché del navegador

El servidor indica al navegador, mediante cabeceras, cuánto tiempo puede conservar un archivo:

cache-control: public, max-age=31536000

Esto significa: conservarlo durante un año. Para hojas de estilo, scripts, tipografías e imágenes, un tiempo largo está bien, porque WordPress añade un ?ver= distinto tras la dirección al publicar una nueva versión, y el navegador lo interpreta entonces como un archivo nuevo. Para el propio HTML es habitual un tiempo corto (o ninguno), de modo que los visitantes vean los cambios rápidamente.

Muchos proveedores de alojamiento y plugins de caché gestionan esto. En el ejercicio de esta lección lo comprobará.

Caché de objetos y Redis

Una caché de página no ayuda con usuarios con sesión iniciada ni con el carrito. Ahí ayuda una caché de objetos: WordPress guarda el resultado de las consultas a la base de datos en memoria, en un programa como Redis o Memcached. La próxima vez que llegue la misma consulta, WordPress obtiene la respuesta de la memoria en lugar de la base de datos.

Esto resulta especialmente útil para tiendas online, sitios de socios y sitios con muchos redactores con sesión iniciada. Para un sitio informativo normal con una caché de página, la diferencia es pequeña. Una caché de objetos requiere que su proveedor de alojamiento ofrezca Redis o Memcached; después la activa con un plugin (LiteSpeed Cache puede hacerlo, y también existen plugins independientes).

Un CDN

Un CDN (content delivery network o red de distribución de contenidos) es una red de servidores situados en muchos puntos del mundo que guardan copias de sus archivos (y a veces de sus páginas completas). Un visitante los recibe del servidor más cercano. Esto ayuda sobre todo con visitantes lejanos y con mucho tráfico. Para un sitio europeo con visitantes europeos en un servidor europeo, la ganancia es pequeña. Un CDN con proxy (como Cloudflare) también modifica su DNS y su certificado (curso de DNS, lección 7.5); no lo haga sin entender qué implica.

En la práctica: así se ve en un panel

Como ejemplo usamos LiteSpeed Cache en un servidor LiteSpeed. Otros plugins de caché tienen ajustes similares con otros nombres.

1. Instale y active LiteSpeed Cache en Plugins > Añadir nuevo plugin.
2. Abra LiteSpeed Cache > Cache: «Habilitar caché» está activado, «Caché para usuarios con sesión iniciada» desactivado (a menos que sepa lo que hace).
3. En una tienda online: compruebe en Excluir que el carrito, el pago y Mi cuenta están incluidos (con WooCommerce esto ocurre automáticamente).
4. Deje desactivados primero los demás apartados (optimización de CSS y JavaScript, imágenes). Actívelos uno a uno y pruebe tras cada paso: precisamente esos apartados a veces rompen un tema.
5. Compruebe en una ventana privada con las herramientas de desarrollo (F12, Red, primera solicitud): en la segunda carga debería aparecer x-litespeed-cache: hit.

Resumen

• Existen cuatro tipos de caché: de página (la mayor ganancia), del navegador, de objetos y OPcache.
• En un servidor LiteSpeed, LiteSpeed Cache gestiona la caché del propio servidor web; en Apache o nginx se usa otro plugin de caché. Elija uno solo.
• Los usuarios con sesión iniciada, el carrito, el pago y las páginas personales no deben estar en la caché de página.
• Vacíe la caché tras cambios en el menú o el tema y compruébelo en una ventana privada.
• Una caché de objetos (Redis) ayuda en tiendas online y con usuarios con sesión iniciada; un CDN ayuda sobre todo con visitantes lejanos y mucho tráfico.

Cuestionario

Ejercicio

Ejercicio A6.2: ¿Funciona su caché de página? Introduzca la dirección de su sitio. El programa solicita la página de inicio dos veces seguidas en poco tiempo, sin cookies, y observa en la segunda solicitud las cabeceras que indican un acierto de caché (x-litespeed-cache: hit, x-cache: HIT, cf-cache-status: HIT, un valor age mayor que 0, o la cabecera de otra caché conocida). A continuación solicita una hoja de estilo de la página de inicio y comprueba si el navegador puede conservarla al menos siete días (cache-control: max-age o expires). Anote qué caché utiliza.

Para saber más

Estos artículos describen los pasos en los paneles de WebOké; en otros paneles funcionan de forma similar.

• Manual de DirectAdmin 18.3: Mi sitio web va lento
• Manual de DirectAdmin 15.7: Redis
• Mi sitio web es lento o consume demasiada CPU: así puede hacerlo más rápido
• OPcache: 30 segundos de retraso al modificar un archivo PHP
• ¿Está activado gzip en DirectAdmin y LiteSpeed o Apache?
• Caché en WordPress (developer.wordpress.org, en inglés): https://developer.wordpress.org/advanced-administration/performance/cache/