Velocidad y caché en una tienda online

Módulo 6: Gestión y seguridad · Tiempo de lectura: 10 minutos

Objetivo de aprendizaje: Después de esta lección podrá configurar la caché de una tienda WooCommerce para que la tienda sea rápida y las páginas personales nunca entren en la caché, y podrá comprobarlo mediante las cabeceras HTTP.

Conceptos clave: caché de página, exclusiones (carrito, finalizar compra, Mi cuenta), cookies que evitan la caché, cabeceras no-cache, DONOTCACHEPAGE, caché de objetos, Redis, fragmentos del carrito, geolocalización con caché de página, limpieza de acciones programadas

Dos tipos de páginas

Los fundamentos de la caché (caché de página, caché del navegador, caché de objetos, OPcache, una CDN) se explican en el curso de WordPress, lección 6.2. Allí también aparece ya la regla más importante para las tiendas: las páginas personales no deben entrar en la caché de página. Esta lección la desarrolla.

Una tienda tiene dos tipos de páginas:

Si algo falla, lo verá enseguida: un cliente ve el carrito de otra persona o, peor aún, la dirección de otra persona en la página de pago. Eso es también una brecha de datos personales en el sentido del RGPD (KB 6749).

Lo que WooCommerce ya hace por sí mismo

WooCommerce ayuda a la caché de tres maneras, y conviene conocerlas para darse cuenta cuando algo las elimina:

1. Constantes. En el carrito, en finalizar compra y en Mi cuenta, WooCommerce define DONOTCACHEPAGE (y también las constantes para la caché de objetos y de base de datos). Muchos plugins de caché leen esa constante y omiten entonces la página.
2. Cabeceras. En esas mismas páginas, WooCommerce envía las cabeceras no-cache de WordPress: Cache-Control: no-cache, must-revalidate, max-age=0, private y un Expires con una fecha pasada. Un proxy o una CDN que respeten las reglas no guardarán entonces la página. Para los usuarios que han iniciado sesión se añade no-store.
3. Cookies. En cuanto alguien añade algo al carrito, WooCommerce crea cookies como woocommerce_items_in_cart, woocommerce_cart_hash y wp_woocommerce_session_.... Una buena caché deja de servir páginas guardadas a los visitantes con una de esas cookies, también en las páginas de producto, porque, por ejemplo, el carrito de la cabecera es entonces distinto para cada visitante.

La documentación de WooCommerce indica para los plugins de caché: excluya el carrito, Mi cuenta y finalizar compra, así como las cookies woocommerce_cart_hash, woocommerce_items_in_cart, wp_woocommerce_session_, woocommerce_recently_viewed y store_notice[...]. Para Varnish también ofrece reglas para las direcciones con ?add-to-cart=.

Dónde falla en la práctica

• Otras direcciones para las páginas de la tienda. Ha cambiado el nombre del carrito a /mandje/ o un plugin de traducción crea /de/warenkorb/. Una caché que excluye direcciones fijas como /cart no las detecta. Los plugins de caché que conocen WooCommerce leen las páginas de los ajustes; una caché en el servidor o en una CDN no lo hace.
• Una CDN que lo guarda todo en caché. Algunas reglas de CDN («cache everything») ignoran las cabeceras. En ese caso, excluya de forma explícita las páginas de la tienda y las cookies mencionadas.
• Un plugin que sobrescribe las cabeceras. Un plugin de seguridad o de velocidad a veces establece Cache-Control: public, max-age=... en todas las páginas. Entonces las cabeceras no-cache desaparecen.
• Una sesión para cada visitante. Normalmente, WooCommerce solo crea una cookie de sesión cuando hay algo en el carrito. Si un plugin o un tema inicia ya una sesión para cada visitante (una cookie wp_woocommerce_session_ o PHPSESSID en la primera visita), la caché de página deja de funcionar para todos y su tienda irá lenta cuando haya mucho tráfico.
• Geolocalización. En WooCommerce > Ajustes > General se elige la ubicación predeterminada del cliente. Con la opción normal «Geolocalizar», el servidor calcula el país de cada visitante, y con precios por país eso no encaja con una caché de página. Por eso WooCommerce ofrece la opción «Geolocalizar (con soporte de caché de página)», que determina el país mediante una petición adicional desde el navegador. Si no necesita precios ni IVA por país antes de finalizar la compra, elija el país de la tienda: es lo más sencillo. Para la geolocalización, WooCommerce descarga periódicamente una base de datos de MaxMind.

En un servidor LiteSpeed (como en WebOké), el plugin LiteSpeed Cache gestiona por sí mismo las exclusiones para WooCommerce; compruébelas en los ajustes de exclusión. Con otros servidores web y proveedores de alojamiento funciona de forma parecida con otro plugin de caché.

Lo que la caché de página no resuelve

El carrito y la página de pago siempre se generan con PHP y la base de datos. Cuando hay mucho tráfico (una promoción, un boletín), son precisamente las páginas en las que sus clientes gastan dinero. Ahí ayudan otras cosas:

• Una caché de objetos como Redis guarda en memoria el resultado de las consultas a la base de datos. En una tienda, con muchas páginas que no pueden entrar en la caché de página, eso aporta una mejora notablemente mayor que en un sitio normal. Su alojamiento debe ofrecer Redis (en WebOké es posible, DA 15.7); después lo activa con un plugin.
• Fragmentos del carrito. Los temas clásicos actualizan el carrito de la cabecera con un script (wc-cart-fragments) que hace una petición adicional cuando el carrito tiene productos. Los temas de bloques modernos con el bloque de minicarrito lo necesitan menos. No cargue esos scripts en páginas donde no hacen nada.
• Acciones programadas limpias. WooCommerce utiliza Action Scheduler para las tareas en segundo plano (lección 7.3). Las acciones completadas se eliminan de forma predeterminada al cabo de un mes. Si aun así la lista llega a cientos de miles, a menudo por una extensión que sigue programando algo o por acciones fallidas, las consultas a la base de datos se vuelven más lentas. Revise en WooCommerce > Estado > Acciones programadas el número de acciones fallidas y pendientes.
• HPOS. Los pedidos en tablas propias (lección 1.2) hacen que las búsquedas de pedidos sean más rápidas que en la antigua tabla de entradas. Las tiendas existentes deben hacer el cambio por su cuenta (lección 6.2 sobre las copias de seguridad previas).
• Una versión de PHP actual y memoria suficiente (lección 7.2).

En la práctica: así se ve en WooCommerce

Compruébelo en Theehuis Example en una ventana privada con las herramientas para desarrolladores de su navegador (F12, pestaña Red, primera petición):

1. Página de inicio, cargada dos veces: en la segunda, una cabecera como x-litespeed-cache: hit o cf-cache-status: HIT. Ninguna cookie wp_woocommerce_session_ en la primera visita.
2. shop.example.com/winkelwagen/, cargada dos veces: ningún acierto de caché, y cache-control con no-cache o private.
3. Lo mismo para finalizar compra y Mi cuenta.
4. Añada un producto al carrito y cargue una página de producto: verá su propio carrito, no una versión guardada.

Resumen

• Las páginas iguales para todos, en la caché; el carrito, finalizar compra y Mi cuenta, nunca.
• WooCommerce define por sí mismo DONOTCACHEPAGE, las cabeceras no-cache y las cookies; compruebe que nada las elimine ni las ignore.
• Preste atención a las direcciones renombradas, las reglas de la CDN, los plugins que sobrescriben cabeceras, las sesiones para cada visitante y la geolocalización.
• Redis, unas acciones programadas limpias, HPOS y una buena versión de PHP ayudan donde la caché de página no llega.
• Haga la prueba cargando dos veces en una ventana privada y lea las cabeceras.

Cuestionario

Ejercicio

Ejercicio A6.4: ¿Quedan el carrito y la página de pago fuera de la caché? Introduzca la dirección de su tienda y las direcciones de su carrito y de su página de pago (y, si lo desea, de Mi cuenta). El programa solicita la página de inicio dos veces con 2 segundos de intervalo, sin cookies, y después cada página de la tienda también dos veces. No se añade nada al carrito ni se realiza ningún pedido. Verde si la página de inicio sale de la caché en la segunda petición (o es claramente más rápida) sin crear una cookie de sesión, y si cada página de la tienda no tiene ningún acierto de caché en la segunda petición y envía un Cache-Control con no-cache, no-store, private o max-age=0. Naranja si la página de inicio no usa caché, o si una página de la tienda no tiene acierto de caché pero tampoco una cabecera no-cache. Rojo si hay un acierto de caché en el carrito, en finalizar compra o en Mi cuenta, o si la página de inicio inicia una sesión de WooCommerce para cada visitante.

Una marca verde significa que esta comprobación es correcta ahora, no que su tienda sea segura.

Para saber más

Los pasos en un panel se refieren a WebOké; con otros proveedores funciona de forma parecida.

• Curso gratuito de WordPress 6.2: Caché
• Curso gratuito de WordPress 6.3: Imágenes, PHP y otras mejoras de velocidad
• Manual de DirectAdmin 15.7: Redis
• Mi sitio web es lento o consume demasiada CPU: así puede hacerlo más rápido
• ¿Se trata de una filtración de datos y debo notificarla?
• Configuring caching plugins (developer.woocommerce.com, en inglés): https://developer.woocommerce.com/docs/best-practices/performance/configuring-caching-plugins/