¿Se pueden almacenar en caché los menús de WordPress? ¿se nota alguna mejora de rendimiento?

Todos sabemos que las llamadas a bases de datos son el principal cuello de botella en el rendimiento de WordPress. Lo que la mayoría de la gente no sabe es lo «caros» que salen los menús de WordPress en términos de rendimiento.

Por qué los menús de WordPress afectan al rendimiento de la web

Los datos de los menús están dispersos en seis tablas diferentes de la base de datos. Cuando un usuario visita una página, comienza una odisea por toda la base de datos.

• En las tablas ‘wp_terms‘, ‘wp_term_taxonomy‘ y ‘wp_options‘ encontraremos el ID del menú, el slug y la ubicación del tema. Luego ‘wp_posts‘ y ‘wp_postmeta‘ para encontrar los elementos nav del menú y sus metas.
• En las metas, encontraremos su objeto de destino, así que vamos a volver a visitar ‘wp_terms‘ o ‘wp_posts‘ para encontrar el objetivo del elemento de menú y ‘wp_termmeta‘ para encontrar sus metas.
• Son muchas tablas y aún más llamadas a la base de datos. Cuando se recogen todos los datos necesarios, se crea el HTML del menú y se muestra al usuario.

El mismo proceso se repite para cada menú de la página. El menú de escritorio, el menú móvil, algunos menús en el pie de página, un menú para la cuenta del cliente en la cabecera a la derecha del icono del carrito…

Imagina todos estos menús, algunos de ellos con decenas de elementos de menú, cargando en cada página para cada visitante de tu sitio.

Los cambios en los menús son muy poco frecuentes y esto los convierte en un blanco fácil para el almacenamiento en caché. El almacenamiento en caché del HTML generado del menú evitaría todas estas llamadas innecesarias a la base de datos y mejorará enormemente los tiempos de carga de la página.

Entonces, ¿por qué no cachear los menús de WordPress?

Caché de menús

El bueno de Theo Gkitsos se dio cuenta de este problema y ha creado un plugin que viene a solucionar este enorme problema de rendimiento con los menús de WordPress: Menu Caching.

Este plugin almacenará en caché el HTML del menú y mostrará la versión en caché a tus visitantes, ahorrando a tu base de datos demasiadas llamadas innecesarias.

Cómo funciona

Cada vez que un usuario visita una página con un menú, WordPress recoge todos los datos del menú de la base de datos, y luego ejecuta un módulo walker para crear el HTML del menú. Justo antes de que este HTML generado se devuelva al usuario, el HTML se guarda en la base de datos en un dato transitorio.

La próxima vez que un usuario solicite este menú específico, se le devolverá el HTML guardado, en lugar de crear el menú desde cero.

Qué hace

• Almacena en caché todos los menús clásicos de WordPress para mejorar el tiempo de carga de la página.
• Activa/desactiva la caché por menú.
• Borra la caché de todos los menús con un botón en la página de ajustes.
• Cada vez que editas un menú, su caché se purga automáticamente.
• Todos los datos en caché se purgan automáticamente cada 10 horas para mantener todo fresco, como nonces, etc.
• Compatible con plugins de caché como WPRocket, W3 Total Cache, etc.
• Compatible con la mayoría de los plugins de traducción. Probado con WPML y TranslatePress.

¿Se nota?

Veamos los resultados de algunas pruebas realizadas en un sitio de comercio electrónico de tamaño medio-grande con un mega menú con muchas categorías, un menú móvil independiente y un par de menús más pequeños.

Para usuarios administradores:

• Tiempo de carga de todos los menús – sin almacenamiento en caché: 0,46s (de media)
• Tiempo de carga de todos los menús – con almacenamiento en caché: 0,0015s (de media)
• Ventaja en cuanto a velocidad: más de 300 veces más rápido; los menús se cargan casi al instante.

Para visitantes de incógnito:

• Tiempo de carga de todos los menús – sin almacenamiento en caché: 0,232194 seg.
• Tiempo de carga de todos los menús – con almacenamiento en caché: 0,001185 segundos
• Beneficio de velocidad: ~200 veces más rápido – ¡el menú se carga casi instantáneamente!

Por supuesto, estas cifras dependen de su instalación de WordPress, de la configuración de tu servidor y de muchos otros parámetros, pero el resultado será el mismo.

Es más, lo llevo probando varios días, en sitios ya previamente con políticas extremas de caché, y aún así se nota la diferencia. Los menús cargan de inmediato, se nota muchísimo.

Con la caché de menús, en lugar de construir el menú cada vez y perder un tiempo precioso durante la carga de la página, tus menús se cargarán instantáneamente desde la caché.

¿Merece la pena?

Si utilizas un buen plugin de caché y una determinada página se sirve desde la caché, entonces puede que no veas una gran diferencia en los tiempos de carga globales. Aunque, en mi experiencia, se nota siempre, positivamente.

Luego… hay muchos casos en los que una página no se sirve desde la caché y en ese escenario notarás una enorme diferencia. Algunos de los escenarios cuando una página no se sirve desde la caché:

• Si no está utilizando un plugin de caché de página (¿Por qué no? ¡Ya tardas!).
• No existe una versión en caché de la página solicitada. Se beneficia de la caché de menús durante la primera carga de cada página, antes de que se guarde la versión en caché.
• Cuando los usuarios están conectados. Incluso cuando se utiliza una caché por usuario para los usuarios registrados, el almacenamiento en caché del menú sigue siendo muy útil para crear rápidamente el menú mientras se crean los archivos de caché.
• En sitios de comercio electrónico en páginas que no se pueden almacenar en caché de forma predeterminada, como carrito, pago, mi cuenta, lista de deseos, etc.
• En la mayoría de los sitios de comercio electrónico, cuando un cliente añade algo al carrito, se detiene el servicio de páginas desde la caché para evitar datos falsos en el minicarrito.
• En algunas peticiones AJAX que cargan contenido de páginas que incluyen menús.

Resumiendo: aunque uses un buen plugin de caché, se notará la mejora de rendimiento al cachear tus menús, especialmente en sitios de comercio electrónico o membresía, y especialmente con menús complejos.

¿Cómo se usa?

Solo tienes que instalar el plugin y activarlo, a partir de este momento se crean las versiones HTML de tus menús automáticamente en cuando reciba la web una visita.

La caché se vaciará y regenerará cada 10 horas automáticamente, o manualmente desde los ajustes del plugin.

Por defecto se almacenan en caché todos los menús existentes, pero puedes excluir los que no quieras, por el motivo que sea, desde la página de ajustes.

¿Hay algún requisito?

De momento el plugin de caché de menús solo funciona con temas clásicos, todavía no con los temas de bloques, pero el desarrollador está en ello. También está implentando la compatibilidad con los menús del tema Woodmart, un tema muy popular para tiendas online.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!