WP Rocket para acelerar WordPress con cache de página

Dificultad del post: facilmediadifícil
wp rocket wordpress

Ya iba siendo hora de hablar de nuevo sobre WP Rocket y actualizar el post que tenía. Ya han pasado casi 3 años desde que publiqué el primer post sobre este plugin y WP Rocket ha mejorado mucho en este tiempo. Sin embargo, la versión 3.9 ha sido simplemente un salto brutal en general, llevando a WP Rocket mucho más allá de un plugin de cache normal.

Lo primero que quiero decir es que, aunque no considero que WP Rocket sea el mejor siempre, soy fan de WP Rocket y hasta que apareció NUNCA me había planteado pagar por un plugin de cache.

La principal ventaja de WP Rocket es que se adapta muy bien a la mayoría de los casos y facilita todos los procesos de configuración de cache de página guardado en disco en WordPress, así como la implementación de algunas técnicas WPO añadidas.

optimizar wordpress

Voy a hacer un pequeño listado resumen de las funcionalidades de WP Rocket (versión 3.9):

  • Cache de página guardado en disco, con políticas de vaciado de cache automáticas y exclusiones de cache manuales o mediante regex.
  • Optimización del CSS y JS cargado, con minificación y combinado.
  • Optimización del CSS sin usar cargado en las hojas de estilo, usando un API externa propia de WP Rocket para esta tarea.
  • Generación de la ruta crítica de CSS para los diferentes “layouts” del sitio web, incluso permitiendo generar la ruta crítica de CSS para cada página.
  • Carga asíncrona de Javascript con configuración automática, pero permitiendo exclusiones.
  • Retraso o delay de Javascript con configuración automática, pero permitiendo exclusiones.
  • Implementación de Lazy Load para imágenes, vídeos de Youtube y iframes (aunque aún no nativo).
  • Ajuste automático para especificar las dimensiones en el código al insertar las imágenes. Esto permite mejorar el CLS de Core Web Vitals.
  • Precarga de enlaces internos cuando el usuario pasa el ratón por encima.
  • Implementación de precarga DNS para hostnames externos.
  • Precarga de fuentes alojadas en el propio hosting o CDN propio.
  • Implementación de un CDN basado en CNAMEs o integración con CloudFlare para vaciado de cache. Además, también permite insertar fácilmente su propio CDN, llamado Rocket CDN y basado en StackPath.

WP Rocket tiene integración con Varnish y con CloudFlare, ambos como proxy inverso cache (sé que son diferentes, pero el concepto es el mismo). Adicionalmente, desde Raiola Networks les hemos ayudado a mejorar la integración de LiteSpeed Web Server y actualmente somos partners de WP Rocket.

También hay otras funcionalidades en WP Rocket, pero a mí personalmente no me gustan:

Pero su punto fuerte es que casi no necesita configuración. No obstante, es necesario entender cómo funciona cada una de las técnicas WPO que nos permite implementar WP Rocket para poder realizar una buena configuración.

Ahora bien, la implementación de cache con WP Rocket es lo más simple que he visto nunca. Simplemente con instalar el plugin ya está. Además, como las políticas de vaciado y exclusión de cache de este plugin son bastante compatibles, aunque usemos plugins complejos como WooCommerce no es necesario tocar nada (salvo casos contados).

Antes he comentado que en Raiola Networks usamos LiteSpeed Cache y no solo recomendamos el plugin LiteSpeed Cache, sino que también recomendamos WP Rocket. La principal razón es la simplicidad de WP Rocket frente a otras soluciones de cache para WordPress, independientemente de la “potencia” de cada plugin.

Además, en muchas funcionalidades la mayoría de plugins te piden que insertes “elementos” a optimizar, mientras que WP Rocket lo hace al revés. Por ejemplo, en el caso del delay de JS, en WP Rocket se carga una lista de scripts detectados previamente probada y, después, tú si quieres metes las exclusiones:

optimizar wordpress

Sin embargo, en otros plugins como Perfmatters tienes que insertar los scripts que quieres retrasar e incluso el tiempo de retraso:

wp rocket

Aunque son puntos de vista muy diferentes y ambos son válidos, el primer método es mejor para usuarios principiantes y el segundo método es mejor para tener más control.

No me enrollo más hablando de otros plugins: vamos a pasar directamente a WP Rocket, que es el objetivo de este post.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

 

Mi visión personal acerca de WP Rocket

Antes de nada, voy a hablar de mi visión sobre WP Rocket y todo lo que lo rodea.

Siento mucha admiración por WP Media, ya que han hecho algo que NADIE ha hecho: han conseguido que gente como yo pague por un plugin de cache.

Vuelvo a repetir: no creo que WP Rocket sea el mejor, pero sí que es recomendable en la mayoría de los casos para no complicarse la vida.

Yo suelo usar W3 Total Cache, LiteSpeed Cache y WP Rocket, junto con Swift Performance (en menor medida). También me gustan otros plugins de cache como FlyingPress, aunque no los utilizo de forma tan frecuente.

Cuando tengo prisa y no me la quiero jugar a probar nada, o cuando necesito algo seguro para un sitio web estándar, meto directamente WP Rocket.

Excepto para lo del CLS (añadir dimensiones a imágenes) tengo sustituto para TODO, pero en algunos casos con métodos más complejos y liosos de implementar.

 

¿Qué echo de menos en WP Rocket?

Me parece un buen plugin pero, como he dicho, no digo que sea el mejor.

Para mí, a WP Rocket le faltan funcionalidades relacionadas con el cache de objetos, aunque sea guardado en disco. Esto ayudaría bastante a ciertos sitios, como a ecommerce complejos creados con WooCommerce o simplemente a sitios web complejos que no se pueden cachear con un cache de página.

Sé que durante el último año se han centrado bastante en Core Web Vitals pero, como consultor WPO, me gusta decir que hay más cosas además de Core Web Vitals y PageSpeed. Existe el concepto “Performance” y en ese campo hay más jugadores que las puntuaciones.

Además de esto, a WP Rocket no le vendría mal algo más de tweaking, así como la posibilidad de implementar carga condicional. Lo que vendría siendo una mezcla entre WP Rocket y Perfmatters.

WP Rocket tiene su propia visión del WPO en WordPress y su propio público, lo entiendo perfectamente, pero hay algunas funcionalidades que se echan de menos cuando se trabaja con webs un poco más complejas.

 

Configurar cache con WP Rocket

Como he dicho antes, WP Rocket habilita el cache de página guardado en disco nada más se activa el plugin.

A nivel cache, WP Rocket es MUY simple. De hecho, solo permite cache de página guardado en disco y, si buscas cache de objetos, ellos mismos te recomiendan Memcached Redux para guardar cache de objetos en Memcached.

El cache se ajusta en 3 secciones y se puede personalizar con algunas opciones, aunque de forma automática ajusta su funcionamiento de exclusiones para los plugins complejos más populares: WooCommerce, LearnDash, EDD, etc.

 

Cache de WP Rocket

La primera pestaña de WP Rocket es esta, la de “Cache”.

wprocket

En esta pestaña podemos configurar el comportamiento del cache en dispositivos móviles, permitiéndonos guardar un cache separado o incluso si se va a servir cache en dispositivos móviles.

Por otro lado, podemos habilitar el cache privado para usuarios conectados. Se trata de un cache privado dedicado para cada usuario y que debería funcionar bien. Yo no lo utilizo salvo casos muy excepcionales porque no confío 100% en él y los problemas con la LOPD en España son complicados.

En esta sección, lo último que tenemos es la configuración de expiración o vida útil del cache. En webs estáticas yo suelo poner 0 y que las políticas de vaciado de cache se encarguen del resto. En webs un poco más complejas donde hay que jugar más con los TTL del cache, suelo poner entre 8 y 24 horas:

wpo wordpress

La configuración que puedes ver en la captura anterior es la que tengo en mi blog y la que normalmente implemento en sitios web normales con formato web corporativa o blog.

WP Rocket “monitoriza” el hook de publicación de comentarios y permite vaciar cache cuando el usuario publica un comentario en alguno de los contenidos del blog.

 

Precarga o preload de cache con WP Rocket

Para mí, uno de los puntos fuertes que siempre ha tenido WP Rocket frente a otras alternativas con las que peleaba inicialmente en desigualdad de condiciones (gratis vs premium) es el preload o precarga del cache.

Lo que hace esta funcionalidad de precarga de cache es usar un bot para pasarse por todas las páginas de la web y cachearlas. La finalidad es que cualquier visitante que entre a la web cargue la página desde cache.

wpo wordpress

Esta funcionalidad ha sido reescrita dos veces y actualmente ya no provoca saturación en hostings poco potentes, aunque antes tampoco era muy probable. Si quieres reducir la agresividad del bot de precache, desde la interfaz de WP Rocket no podrás hacerlo, pero sí con un miniplugin que hay en su documentación: https://docs.wp-rocket.me/article/8-how-the-cache-is-preloaded#crawl-interval

Como puedes ver en la captura anterior, detecta ciertos plugins de SEO muy conocidos como Yoast SEO o RankMath y usa sus XML Sitemaps para detectar todas las URL del sitio web y hacer correctamente el precache. También podemos especificar nosotros un XML Sitemap mediante URL.

Hay algunas cosas más que podemos hacer desde la misma sección “Precargar”, pero las vamos a ver en la siguiente sección.

 

Preload, prefetch y prefetch DNS en WP Rocket

De los resource hints ya hablamos en este blog hace tiempo y WP Rocket nos permite ajustar el preload, el prefetch y el prefetch DNS pero sin decirnos directamente lo que estamos ajustando.

Sé perfectamente que los resource hints tienen poco que ver con el cache de página, pero lo voy a comentar en esta sección porque la gente de WP Rocket tampoco le da mucha importancia y toda la configuración sobre esto la incluyen en la sección “Precargar” sin darle «bombo».

optimizar wordpress

Las secciones que podemos encontrar son estas:

  • Precargar enlaces: Implementa el prefetch a las URL para que se carguen cuando el usuario pase el cursor por encima del enlace o botón. Esto acelera la navegación en ciertos casos, dando por hecho que la intención del usuario es visitar la URL en un futuro.
  • Precarga de peticiones DNS o prefetch DNS: Nos permite cachear las peticiones DNS o DNS Lookups a hostnames externos. Podemos detectarlos con Pingdom Tools o con otra herramienta y los ponemos en el cuadro de texto.
  • Precarga de fuentes o preload: Nos permite hacer preload de los archivos de fuentes e iconos cargados desde nuestro propio sitio web. Podemos detectarlos con Pingdom Tools o con otra herramienta y los ponemos en el cuadro de texto.

Aplicar estos tres resource hints puede parecer una tontería, pero en algunos casos solucionaremos problemas de bloqueo de renderizado simplemente con una de estas acciones.

 

Reglas avanzadas y exclusiones de WP Rocket

No voy a profundizar demasiado en esto. Simplemente hay que saber que, como con todo buen plugin de cache, tendremos la posibilidad de excluir contenidos del cache en base a ciertas reglas o comportamientos.

rocket

Podemos hacer que ciertas URL nunca se guarden en cache, que no se sirva cache a usuarios que tengan una cookie concreta en el navegador o que no se sirva cache a cierto user-agent.

También podemos forzar el purgado de cache en ciertas URL (sobre todo listados personalizados), lo que resulta ideal para añadir cosas a las políticas de vaciado de cache automáticas.

De forma predeterminada los query string no se suelen cachear, pero desde esta sección también podemos forzar el cache de las URL con determinados query strings.

Adicionalmente, en la configuración de cada contenido usando el editor de WordPress tenemos un bloque como este:

rocket

Este bloque permite elegir si queremos desactivar alguna opción de WP Rocket solo en ese contenido o si queremos generar el “critical CSS” solo para ese contenido.

 

Desactivar cache en WP Rocket

No existe una opción en el dahsboard para desactivar el cache de pagina de WP Rocket, algo que ya dijimos que se habilita con solo activar el plugin.

No es algo común, pero podemos querer solo usar las funciones de optimización de CSS y JS de WP Rocket. En ese caso, podemos no querer el cache activado.

Para estas situaciones, existe un microplugin que tienen disponible los de WP Rocket en su web y que permite desactivar el cache de WP Rocket. Puedes descargarlo aquí y solo tienes que activarlo para desactivar el cache: https://docs.wp-rocket.me/article/61-disable-page-caching

 

Optimización de CSS y JS con WP Rocket

Este es otro de los puntos fuertes de WP Rocket, la optimización del JS y CSS servido.

Como la gran mayoría de plugins, permite minificar y combinar el CSS y JS, pero WP Rocket lo hace bien de forma automática y, salvo casos muy puntuales, en la minificación no se suele romper nada.

Otra cosa es el combinado, ya que aquí se juega de otra forma. También hay que añadir que actualmente, con el HTTP/2 y el HTTP/3, el combinado sería hasta contraproducente en teoría, aunque no en la práctica.

Adicionalmente, WP Rocket añade una opción para optimizar la entrega de CSS, otra para cargar asíncronamente el JS y otra para hacer retraso en la carga del JS.

optimizar wp

Estas tres opciones que acabamos de comentar no son exclusivas de WP Rocket, pero a nivel de implementación WP Rocket hace fácil lo difícil.

 

Minificacion de CSS y JS con WP Rocket

La minificación de archivos consiste simplemente en eliminar saltos de línea, espacios y comentarios dentro de los archivos para que pesen menos y así agilizar las peticiones HTTP.

Normalmente, cuando el motor de minificación es más agresivo es cuando hay problemas (se rompen cosas). En cambio, cuando es poco agresivo no es del todo efectivo. WP Rocket se queda en un término medio, ya que no arriesga mucho pero es bastante efectivo en la mayoría de casos.

La minificación NO sirve para solucionar problemas de JS y CSS sin usar en los archivos, es decir, no ayuda con el Unussed CSS o Unussed JS de Google PageSpeed.

La minificación no tiene muchos más secretos: simplemente, nos permite reducir el tamaño de los archivos.

En WP Rocket se echa de menos la posibilidad de hacer minificación del HTML servido, aunque también hay que ser conscientes de que esta opción suele dar problemas en los plugins que la permiten (por ejemplo, W3 Total Cache).

Hay que aclarar que, cuando activamos la minificación, estos plugins nunca trabajan sobre los mismos archivos, sino que generan un cache interno con archivos nuevos optimizados.

Tanto para la minificación de JS como la de CSS, podemos añadir exclusiones que también afectan al combinado:

optimizar wp

Cuando se rompe algo al aplicar estas técnicas WPO, podemos usar las exclusiones para afinar el funcionamiento de WP Rocket.

 

Combinado de CSS y JS con WP Rocket

Para poder usar el combinado de CSS y JS de WP Rocket, antes hay que activar la minificación.

El combinado consiste en unir varios archivos del mismo tipo (JS o CSS en este caso) en un único archivo, de modo que se reduzcan las peticiones HTTP realizadas. No obstante, con HTTP/2 y la multiplexación esto en teoría no es tan necesario.

Personalmente, no recomiendo el uso del combinado y advierto que suele traer más problemas de dependencias que la minificación y es más probable que se rompa la apariencia o ciertas funcionalidades de tu sitio web.

Créeme, aplicar combinado no es necesario siempre y cuando apliques correctamente las técnicas WPO que vamos a detallar a partir de aquí.

 

Optimización de la entrega de CSS u Optimize CSS Delivery

Esta es una de las funcionalidades que pueden llegar a hacer diferente a WP Rocket ya que, aunque parece que simplemente carga el CSS mediante carga asíncrona, realmente hace mucho más.

La opción “Optimizar la entrega de CSS” de WP Rocket aplica las siguientes técnicas WPO sobre el CSS del sitio:

  • Genera la ruta crítica de CSS para los diferentes “layouts” del sitio web.
  • Pasa el CSS restante a carga asíncrona.

Lo que se hace con el “critical CSS” es cargar el CSS necesario para empezar a darle forma al sitio web y después ya se carga todo el CSS en asíncrono.

Esto se puede hacer con otros plugins, pero WP Rocket lo hace automático y sin que nosotros tengamos que hacer nada.

optimizar wp

WP Rocket nos permite añadir el CSS faltante en caso de que, después de generarse automáticamente, faltara algo.

Si WP Rocket no detectara correctamente la ruta crítica de CSS para un contenido específico, podríamos entrar al editor del contenido en cuestión y generarlo manualmente:

rocket

En sitios web con muchas hojas de estilo CSS o archivos CSS muy grandes, la carga de la ruta crítica puede mejorar muchísimo la velocidad de carga en dispositivos con poca potencia.

También hay que destacar que, como la mayoría de servicios eficientes para generar la ruta crítica, WP Rocket genera este CSS mediante un API externa y en “background” tras su configuración o bajo demanda.

 

Eliminar el CSS sin usar o Remove Unussed CSS

Esta es una de las últimas funcionalidades incluidas dentro de WP Rocket, aunque en el momento de escribir esto se encuentra en beta, y ha sido un cambio radical para muchos sitios WordPress.

Lo que hace esta funcionalidad es limpiar todavía más que la minificación los archivos CSS, ya que puede detectar elementos no utilizados dentro de los archivos y permite generar un archivo combinado con todos los CSS sin los trozos que no se utilizan.

Aunque ya existían servicios para esto, yo los he probado todos y el de WP Rocket es el que más me ha gustado.

optimizar wp

Podemos añadir exclusiones si se nos rompe algo, acepta tanto archivos completos como clases e IDs especificas de dentro del CSS.

Podemos decir que esto es uno de los puntos fuertes de WP Rocket actualmente y una funcionalidad muy complicada de sustituir, ya que las alternativas de pago existentes no llegan al mismo nivel.

 

Carga asíncrona o diferida de Javascript

La carga asíncrona es la de siempre. A mí me encanta y, aunque soy consciente de que existen plugins que permiten configurar de forma más específica la carga, WP Rocket lo permite hacer fácilmente y como siempre, utilizando otro punto de vista.

La carga asíncrona permite iniciar la carga de los archivos Javascript después de que el resto de la web empiece a renderizarse. En función de las dependencias de las librerías, en algunos casos puede fallar y romper algunas funcionalidades.

wp optimizar

Como en los casos anteriores, WP Rocket ofrece otro punto de vista: activa la carga asíncrona de todo el JS y después nos permite añadir exclusiones al listado.

Personalmente, la carga asíncrona de Javascript no me gusta tanto como lo que voy a enseñarte a continuación.

 

Retrasar la carga de Javascript o delay de JS

Esta es otra de las últimas funcionalidades que han añadido hace relativamente poco tiempo a WP Rocket y que ha mejorado todavía más en la versión 3.9.

Como en los casos anteriores, WP Rocket nos permite configurar el delay de JS de forma distinta al resto de plugins alternativos.

optimizar wordpress

Lo que se consigue con el retraso de Javascript es hacer que primero cargue la página y que posteriormente, por tiempo o por interacción de usuario, cargue el Javascript. Con esto ocultamos el Javascript de los procesos de renderizado, mejorando las Core Web Vitals (Google PageSpeed) y, en cierto modo, el funcionamiento en dispositivos poco potentes que naveguen por nuestra web.

No es la primera vez que hablo del impacto que tiene el Javascript en los navegadores de los visitantes. Tienes un post completo aquí: https://alvarofontela.com/impacto-del-javascript-en-wpo-actual-benchmark/

Sinceramente, me encanta esta funcionalidad y, aunque he tenido dudas con el retraso de ciertos scripts, lo cierto es que confío en el listado de scripts que excluyen por defecto porque todos han pasado por pruebas y se comentó su compatibilidad y consecuencias en Github cuando salieron las versiones beta de la 3.9.

Si quieres ver todo el listado de scripts “conocidos” que retrasa esta funcionalidad de WP Rocket, puedes encontrarlo en su documentación: https://docs.wp-rocket.me/article/1355-list-of-scripts-automatically-included-in-delay-javascript-execution

 

Implementación de Lazy Load con WP Rocket

El Lazy Load es una técnica WPO que ha venido para quedarse y, aunque hace tiempo que existe, realmente ha empezado a cobrar importancia hace pocos años.

Mediante Lazy Load se retrasa la carga de ciertos elementos (inicialmente imágenes) hasta que el usuario las necesita, es decir, hasta que hace scroll y tiene esos elementos en la pantalla de su ordenador o dispositivo.

Actualmente se aplica Lazy Load no solo a las imágenes, sino también a los vídeos de Youtube y a los iframes de otros servicios.

Y normalmente en los incrustados también se hace carga asíncrona, pero eso no cuenta.

lazy load

El problema de WP Rocket es que por ahora utiliza el Lazy Load mediante una librería JS que, aunque es muy ligera, es JS.

Desde la versión 76 de Chromium se ha ido implementando el Lazy Load nativo en el navegador, es decir, sin necesidad de utilizar una librería Javascript para ello, lo que ha mejorado bastante su funcionamiento.

Para usar el Lazy Load nativo con WP Rocket podemos utilizar este miniplugin que consta en la documentación de WordPress: https://docs.wp-rocket.me/article/1292-chrome-native-lazyload

 

Mejora del CLS en Core Web Vitals con WP Rocket

Realmente, la opción se llama “Add missing image dimensions” y no he sido capaz de encontrar un sustituto para esta funcionalidad.

Lo que hace es mejorar el CLS de las Core Web Vitals (no voy a explicar aquí lo que es el CLS, ya que lo he explicado bastante en este blog y también en el del Raiola Networks) simplemente añadiendo las dimensiones al código HTML cuando se insertan las imágenes.

cls wordpress

No tiene más historia, es simplemente activar y ya está.

Hay que tener en cuenta que es normal que haya imágenes que no detecte esta funcionalidad. Un ejemplo típico es que no detecta las imágenes que están configuradas como “background”, ya que estas están en el CSS y no en el HTML.

 

Implementación de un CDN con WP Rocket

Cuando hablo de implementar un CDN con WordPress siempre hablo de WP Rocket y lo uso como una de mis principales alternativas.

WP Rocket nos permite implementar cualquier servicio CDN que funcione mediante “traditional pull”, es decir, usando CNAMEs apuntando a un hostname.

Por ponerte ejemplos: Amazon CloudFront, CDN77, KeyCDN, BunnyCDN, TransparentCDN, etc.

wprocket

Dispone de una sección completa para configurar un CDN, aunque no tiene nada diferente: a nivel UX se parece a casi todos los plugins que permiten realizar esta tarea.

Además, tiene un cuadro de texto para añadir exclusiones y que ciertos archivos no se sirvan desde el CDN.

Además, normalmente CloudFlare no se configura desde esta sección, aunque si quieres configurarlo como “Traditional Pull” el proceso que debes seguir sí que es desde la sección CDN. Pero mejor te dejo un vídeo:

 

CloudFlare y WP Rocket

Como la mayoría de plugins de cache, WP Rocket es “compatible” con CloudFlare.

CloudFlare es el CDN más utilizado del mundo. Esto se debe a que es el único que tiene versión gratuita real, así como uno de los pocos (por no decir el único) que trabaja como proxy inverso cache (aunque puede funcionar de otra forma, como enseño en el vídeo de arriba). También hay que destacar que CloudFlare ofrece las DNS Anycast gratuitas geodistribuidas más rápidas del mundo para webs.

En la primera línea de esta sección he puesto “compatible” entre comillas porque, como la mayoría de plugins, la compatibilidad se limita a permitir vaciar cache de CloudFlare CDN al vaciar el cache de página del plugin.

Esto que acabo de comentar te puede parecer una tontería, pero es muy cómodo y lo vas a agradecer cuando trabajes con la web o hagas modificaciones.

Debes configurar los datos de conexión con el API de CloudFlare:

cloudflare wprocket

Pero antes debes activar CloudFlare en la sección de “Addons”:

wprocket cloudflare

Repito: no vas a conseguir ninguna mejora milagrosa con esta compatibilidad. Simplemente te va a facilitar los vaciados de cache.

 

Otras funcionalidades de WP Rocket

Sé que hay otras funcionalidades que no he mencionado y que, por lo tanto, no voy a detallar, pero quiero dejar claro que existen.

Por un lado, esta la parte de ajuste de los pulsos del API Heartbeat que dije que no iba a comentar porque me parece mucho más potente el plugin Heartbeat Control. Se trata de un plugin gratuito creado por los mismos desarrolladores de WP Rocket.

Por otro lado, también he dicho que no iba a hablar a fondo del módulo de limpieza de la base de datos de WP Rocket, ya que incluso la versión gratuita de Advanced Database Cleaner es muchísimo mejor que esta funcionalidad.

En cualquiera de estos dos casos prefiero utilizar las alternativas, ya que me gusta usar los mejores plugins en cada área.

 

Otros tweaks y opciones para WP Rocket

Aunque WP Rocket intenta ser un plugin adaptable y automático que pueda ser utilizado por distintos perfiles de usuario sin importar sus conocimientos técnicos sobre WordPress, es bastante extensible mediante pequeños tweaks y plugins que encontramos en su documentación oficial: https://alvaro.click/wprocketdocs

Sin darle más vueltas, aquí te dejo algunos tweaks interesantes para este plugin.

 

Forzar actualizaciones de WP Rocket

En algunos casos, puede que exista una nueva versión de WP Rocket pero que no te haya saltado la actualización.

Esto es porque los desarrolladores de WP Rocket liberan los cambios por fases, escalonando la distribución de actualizaciones. En el changelog se puede ver esto:

changelog wprocket

Si quieres forzar la actualización, puedes hacerlo con la ejecución de esta URL aplicada a tu sitio web:

Esto a veces funciona y a veces no, pero es el método que ellos enseñan en la documentación del plugin.

Puedes ver el changelog aquí: https://alvaro.click/changelogwprocket

 

Evitar la versión de cache de tablets

Normalmente, los plugins para WordPress distinguen 3 tipos de “tamaños de pantalla”: Mobile, Tablet y Desktop.

Si por alguna razón tenemos una versión para móviles y otra para ordenadores y queremos que las tablets sean tratadas como móviles, debemos instalar el siguiente plugin que podemos encontrar en la documentación: https://docs.wp-rocket.me/article/708-mobile-caching

 

Convertir el cache privado de usuario en público

Como he dicho al principio del post, de forma nativa cuando marcamos la casilla “Habilitar la cache para los usuarios conectados a WordPress” lo que se hace es que se crea una cache privada específica para cada usuario conectado.

Si queremos que esta cache sea común para todos los usuarios y realmente se mejore el desempeño, tenemos que instalar un mini plugin que podemos encontrar en la documentación: https://docs.wp-rocket.me/article/313-user-cache

Además, podemos desactivar el cache para los administradores: https://docs.wp-rocket.me/article/919-disable-cache-for-logged-in-administrators

 

Limpiar cache de WP Rocket desde CRON

Si por alguna razón el WP-CRON no te funciona y necesitas forzar la limpieza de cache desde el CRON de Linux, también puedes hacerlo. Desde WP Rocket nos proporcionan la documentación necesaria para configurar esta tarea programada.

Podemos encontrar las instrucciones y el código necesario aquí: https://docs.wp-rocket.me/article/494-how-to-clear-cache-via-cron-job

 

Desactivar las políticas de vaciado de cache

Si especificamos 0 en el tiempo de limpieza de cache, desactivaremos la limpieza periódica de cache de WP Rocket.

En cambio, si queremos desactivar POR COMPLETO las políticas de vaciado de cache, podemos hacerlo utilizando otro plugin que encontraremos en la documentación de WP Rocket: https://docs.wp-rocket.me/article/137-disable-automatic-cache-clearing

Con esto desactivaremos POR COMPLETO el vaciado de cache y solo lo podremos vaciar pulsando el botón “Borrar cache”, es decir, no se borrará ni al publicar un post, ni al editar, ni con los comentarios, etc.

 

Modificar el lugar de guardado de cache de WP Rocket

Como he dicho varias veces en este post, WP Rocket solo realiza cache en disco.

Podemos modificar las rutas de las carpetas donde se guarda el cache, pero no podremos hacerlo desde la interfaz.

Para modificar estas rutas debemos modificar algunos parámetros añadidos en el wp-config.php.

Podemos encontrar más información aquí: https://docs.wp-rocket.me/article/1118-specify-a-custom-cache-folder

 

Desactivar el generar la ruta crítica de CSS

De forma nativa, aunque no configuremos nada en la parte de optimización de código, WP Rocket nos generara la ruta crítica de CSS.

En caso de que utilicemos otro plugin para realizar esta tarea, podemos desactivar esta funcionalidad con un plugin que podemos encontrar en la documentación: https://docs.wp-rocket.me/article/1266-optimize-css-delivery

 

Solucionar problemas de cache con SLASH en el SLUG

En algunos casos y desde hace bastantes versiones, WP Rocket tiene problemas de cache con / y sin / (es decir, slash).

Estos problemas pueden ser muy graves para el SEO de un sitio web ya que, si la web carga de las dos formas, Google lo puede ver como contenido duplicado.

Podemos solucionar ese problema con este plugin que podemos encontrar en la documentación, aunque también está disponible un código para el .htaccess: https://docs.wp-rocket.me/article/131-redirection-to-enforce-trailing-slash-on-urls

 

Cachear los resultados de búsqueda con WP Rocket

En sitios web muy grandes y con mucho contenido (y también con mucho tráfico) puede ser necesario cachear los resultados de búsqueda para evitar problemas.

Podemos hacerlo con un plugin que podemos encontrar en la documentación de WP Rocket: https://docs.wp-rocket.me/article/29-caching-the-search-page-result

 

Casos reales de mejora con WP Rocket

Recomiendo WP Rocket porque lo uso en mis proyectos.

Como he comentado antes, uso más plugins de cache para WordPress, no solo WP Rocket.

Pero uso WP Rocket en bastantes proyectos, incluido este blog y la web de Raiola.

No me voy a alargar mucho, pero te voy a enseñar un par de cosas para que veas el potencial de WP Rocket ya no solo de cara a tiempos de carga reales medidos en segundos, sino también para Core Web Vitals, a pesar de que yo no estoy muy a favor de este tipo de métricas.

Aquí tienes unos resultados combinados de velocidad de carga real y puntuaciones.

 

Caso de alvarofontela.com

Sí, este mismo blog está optimizado con WP Rocket desde SIEMPRE y, aunque he probado otros plugins de cache en él, siempre vuelvo a usar WP Rocket con CloudFlare CDN configurado como “traditional pull”.

Esta es la velocidad de carga en tiempo de alvarofontela.com sin WP Rocket y sin ningún tipo de optimización:

wprocket pingdom tools

Y esta es la velocidad de carga de alvarofontela.com con WP Rocket y todas las técnicas WPO aplicadas:

wprocket pingdom tools

Ahora vamos con Google PageSpeed y Core Web Vitals. Esta es la puntuación obtenida sin WP Rocket:

pagespeed alvarofontela

Y esta es la puntuación conseguida con WP Rocket y todas las técnicas WPO correspondientes aplicadas:

pagespeed alvarofontela

Como ves, el cambio es radical y sin necesidad de forzar la máquina y gastar horas en hacer un esquema de carga con prioridades script por script y CSS por CSS.

 

Caso de raiolanetworks.es

Otro ejemplo de buenos resultados con WP Rocket es la web de mi empresa: Raiola Networks.

Tenemos una web creada con WordPress y Elementor Pro (como esta) que, debido a la gran cantidad de contenido y a la complejidad de la arquitectura de contenido, pues tenía muy mala puntuación.

Con WP Rocket y con la funcionalidad de delay de JS hemos conseguido un buen resultado y una buena optimización.

El resultado de velocidad de carga sin optimización alguna con Pingdom Tools es este:

pingdom raiola networks

Y el resultado con WP Rocket y las técnicas WPO correspondientes activas es este:

pingdom raiola networks

Como ves, no hay mucha diferencia entre las velocidades con y sin plugin, pero es por el servidor, ya que raiolanetworks.es funciona sobre un stack de servicios muy optimizado con muchos más recursos de los que necesita y casi no se nota la falta de cache de página.

Si cambiamos al plano Google PageSpeed y Core Web Vitals, las cosas mejoran todavía más.

Esta es la puntuación en Google PageSpeed Insights sin ninguna optimización:

pingdom raiola networks

Y esta es la puntuación obtenida con WP Rocket activo y las técnicas WPO correspondientes activas, haciendo especial hincapié en la parte de Javascript:

pagespeed raiola networks

Como ves, en estas dos webs complejas (la de Raiola Networks más que la mía) WP Rocket consigue muy buenos resultados.

Tal vez te interese...

Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.
Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.

43 respuestas

  1. Excelente guía. Yo utilizo WP Rocket en uno de mis blogs y la facilidad con la que se puede configurar todo es asombrosa. Como alternativa gratuita LS Cache es muy bueno también si el servidor usa Litespeed.

    PD: Me encantó el diseño del blog, en especial la animación de los banner cuando haces pasas el mouse por encima. Creo que aplicar eso para los anuncios de adsense sería muy bueno ¿cómo lo hiciste? 🙂

    1. Hola Marthael, muchas gracias por tus comentarios.

      Lo de los bordes es CSS, mis compañeros que lo han diseñado le han metido bastante CSS personalizado a GeneratePress + Elementor.

      Con el tema de Adsense y ese tipo de bordes debes de tener cuidado, por sus políticas.

  2. Excelente guía. Yo utilizo WP Rocket en uno de mis blogs y la facilidad con la que se puede configurar todo es asombrosa. Como alternativa gratuita LS Cache es muy bueno también si el servidor usa Litespeed.

    PD: Me encantó el diseño del blog, en especial la animación de los banner cuando haces pasas el mouse por encima. Creo que aplicar eso para los anuncios de adsense sería muy bueno ¿cómo lo hiciste? 🙂

    1. Hola Marthael, muchas gracias por tus comentarios.

      Lo de los bordes es CSS, mis compañeros que lo han diseñado le han metido bastante CSS personalizado a GeneratePress + Elementor.

      Con el tema de Adsense y ese tipo de bordes debes de tener cuidado, por sus políticas.

  3. Hola Álvaro

    Uso WP Rocket desde hace años. Desde hace unos meses también vi el plugin de cache Litespeed que se integraba con los nuevos servidores de Raiola. Mi duda es ¿cual de los dos plugins de cache me recomiendas dejar instalado en mis webs en Raiola?

    Gracias
    Un saludo
    Daniel

    1. Hola Daniel, tengo aun pendiente un post sobre eso, ya que me lo están preguntando mucho…

      He hecho pruebas, y en el soporte de Raiola Networks tambien han hecho algunas pruebas, el tema es que no hemos obtenido resultados concluyentes en los tests y benchmarks como para sacar conclusiones reales.
      En algunos casos va mejor con WP Rocket y en otras con LSCache, todo depende de las funcionalidades añadidas, son las que marcan la diferencia.

      De todas formas, para temas de vaciado de cache de LiteSpeed (que lleva un sistema de cache interno), solo el propio plugin es capaz de «jugar» con el desde la API, WP Rocket solo lleva soporte para Varnish como cache y proxy inverso.

      Un saludo.

  4. Hola Álvaro

    Uso WP Rocket desde hace años. Desde hace unos meses también vi el plugin de cache Litespeed que se integraba con los nuevos servidores de Raiola. Mi duda es ¿cual de los dos plugins de cache me recomiendas dejar instalado en mis webs en Raiola?

    Gracias
    Un saludo
    Daniel

    1. Hola Daniel, tengo aun pendiente un post sobre eso, ya que me lo están preguntando mucho…

      He hecho pruebas, y en el soporte de Raiola Networks tambien han hecho algunas pruebas, el tema es que no hemos obtenido resultados concluyentes en los tests y benchmarks como para sacar conclusiones reales.
      En algunos casos va mejor con WP Rocket y en otras con LSCache, todo depende de las funcionalidades añadidas, son las que marcan la diferencia.

      De todas formas, para temas de vaciado de cache de LiteSpeed (que lleva un sistema de cache interno), solo el propio plugin es capaz de «jugar» con el desde la API, WP Rocket solo lleva soporte para Varnish como cache y proxy inverso.

      Un saludo.

  5. Muy útil y completo, Álvaro!!! Personalmente, yo suelo usarlo en la mayoría de mis proyectos e incluso minimizo y combino los archivos JS, lo que me da muy buenos resultados.

    Estoy deseando leer tu próximo post 🙂 Nos vemos en 5 de abril

  6. Hola muy buen artículo. Tengo una consulta, si instalo el WP Rocket podría seguir teniendo el Autoptmize o sería mejor desisntalarlo?? En parte cumplen la misma función no? Ahora mismo yo tengo el WP Super Cache y el Autoptimize.

    1. Hola Oscar, yo teniendo WP Rocket, sacaria Autoptimize de la ecuacion, ya que para optimizar código CSS y JS, es mas efectivo WP Rocket ademas de tener mejor soporte.

      Ademas, hay que tener muchisimo cuidado con el cache de cualquier plugin de cache de pagina para WordPress y el de Autoptimize si los juntas, para que no se solapen.

  7. Excelente artículo Alvaro. Tengo intención de pasarme a wprocket, pero me gustaría que me dijeras que plugins me debería quitar al hacer el cambio.

    Ahora mismo tengo: Async JavaScript, Autoptimize, Comet Cache, Flying Pages by WP Speed Matters, Heartbeat Control by WP Rocket, Really Simple CAPTCHA y WP-Optimize – CleanCompressCache.
    ¿Podría eliminarlos todos?

    Muchas gracias. Saludos

    1. Hola Justo, de los que me has puesto, los únicos que NO puedes cubrir con WP Rocket son:
      – Reaply Simple Captcha
      – Flying Pages

      1. Gracias Álvaro.
        Entonces, ¿me recomiendas que haga el cambio dejando solo los dos plugins que dices?

        ¿Crees que sería recomendable en mi página web soymatematicas.com , según la velocidad?
        * Borra el nombre de la página si quieres.

        Saludos!

        1. Hola Justo, creo que te va a dar mejores resultados WP Rocket que Autoptimize para minificar y optimizar código y el cache de WP Rocket es muchísimo mas potente que el de WP Optimize.

  8. Estupendo artículo Álvaro.
    Tengo dos preguntas:
    1) Para un ecommerce con Woocommerce ¿Qué plugin de caché me recomiendas?
    2) Tengo instalado Litespeed en vuestro servidor en la tienda online. Me imagino que no es compatible con wp rocket. ¿Es así?
    Gracias de antemano

    1. Hola Jesus, te contesto por partes:

      1) WP Rocket o W3 Total Cache, depende de la complejidad de la tienda online. Si estas en un hosting con LiteSpeed, el plugin LiteSpeed Cache también es una muy buena opción que puede ponerse a la altura de W3 Total Cache.

      2) Tienes que elegir entre uno u otro, ambos son plugins de cache y solo debes tener uno al mismo tiempo, ya que causan conflicto entre ellos al usar mas o menos los mismos archivos.

  9. Hola Álvaro, excelente artículo apliqué los ajustes y la velocidad en pagespeed mejoró muchísmo.

    Soy novato en esto, estoy haciendo mi primera web de afiliación, y revisando en pingdom me salen URLs de Amazon, quería preguntarte si esas deberías incluirlas en el pre-cacheo DNS,
    ws-eu.amazon-adsystem.com/
    m.media-amazon.com/

    Y esta me imagino que sí debo incluirla:
    fonts.gstatic.com/

    Gracias, saludos!

  10. Hola. ¿Qué tal? Quería hacerte una pregunta y estaría muy agradecido de tu respuesta.

    En un hosting con Varnish, ¿Trae algún beneficio el tener Varnish y Rocket juntos (solo hablando de caché, no de minificaciones, css, etc)?

    Muchas gracias
    Saludos
    Victor

    1. Hola Victor, el cache de Varnish siempre va a ser mas eficiente que el de WP Rocket, pero…a la vez desde el punto del usuario es mucho menos configurable (por no decir nada) y quizás es el problema.

      Varnish al final se rige por unas reglas que el usuario puede gestionar o no, ya que en un servidor donde no tiene poderes de administrador, el usuario no puede gestionar el Varnish. Justo por esto existen los plugins de cache, para poder ofrecer un sistema de cache adaptado a la web del usuario aunque sea un poco mas «flojo» que los sistemas de cache a nivel servidor.

  11. Genial artículo y buen video. Muy bien explicado. Tengo una duda, acabo de adquirir el Wp Rocket, pero también tengo el Optimize, este último debería desinstalarlo o recomiendas tener ambos?

    1. Hola Oscar, yo te recomendaría desactivar WP Optimize o al menos desactivar todas las funcionalidades de cache que tiene desde hace unas cuantas versiones.

  12. Hola buenos días Alvaro, una consulta. Sabes porque hay tantas diferencia de puntuación de métricas entre PageSpeed Insights con lighthouse?. Si no lo tengo mal entendido el pagespeed «corre» sobre lighthouse. Me da métricas en versiones móvil, mu dispares una de la otra. GRACIAS

  13. Hola, Álvaro espero que este bien, tengo una inquietud si utilizo el plugin para evitar las políticas de vaciado de cache y dejo el apartado de limpieza periódica por defecto ósea en 10 hora ¿Este ultimo seguirá funcionando?

    Comentando mi inconveniente

    Cuando se utiliza el plugin para evitar las políticas de vaciado de cache y publicas algo no aparecerá en la portada entonces tengo dos forma realizar el vaciado de cache por políticas o bajar el tiempo de limpieza periódica

    Porque utilizo el plugin «evitar las políticas de vaciado de cache» Es un sitio web de informativo entonces tengo muchas usuario entrando y a la vez voy publicando cada vez que publico hago un borrón a la cache, lo cual afecta el rendimiento de lo usuario y hasta los anuncio que se muestran de Google AdSense Estoy usando el plugin Clear CSS este crea el css en cache y cada ves que publico como borro cache se vuelve a crear nuevamente y eso daña los resultado de Speed Index con un tiempo de hasta 10 segundo

    Muchas gracias disculpa el largo mensajes

    1. Hola Osvaldo, tambien puedes añadir la URL de la home al listado de URL que se van a purgar siempre en WP Rocket (seccion Advanced).
      Si con esto no funciona, es que hay otro cache interfiriendo en la web.

      De todas formas, sin ver nada más no puedo decirte nada. El cache es una estrategia, no simplemente instalar un plugin y ya, hay que tener muchos factores en cuenta….y….si me dices que usas el miniplugin de WP Rocket para desactivar las politicas de vaciado…eso hay que tenerlo en cuenta y plantear una estrategia teniendo en cuenta eso.

      Tu caso no tiene una respuesta fácil, es más un caso de consultoría que una duda.

      1. Bueno te comento Álvaro lo sucedido después de estudiar mucho la situación mía sucedio que al colocar /home/ en la regla avanzada de wp-rocket no funciono lo que funciono fue /home/(.*)/ para evitar problema de cache gracias a tu video de como configurar clouflare de forma tradicional realice esto cambio y estuvo super

  14. Hola Álvaro,
    Excelente artículo, gracias por toda la información. Pero lo cierto es que mi experiencia con WP Rocket no es muy buena. Verás, tengo una tienda online con bastantes páginas creada con Woocommerce.
    Y de vez en cuando sin un motivo aparente, las páginas de la tienda dan errores. Por ejemplo, en el móvil se ve la versión desktop o solo cargan las fotos de los productos (sin texto, ni botones) o directamente la tienda online no carga.

    Sé que el problema es de WP Rocket, porque en cuanto lo desactivamos los problemas se resuelven.

    Tenemos todos los plugins actualizados, el tema y woocommerce también.

    ¿Hay algún tipo de incompatibilidad entre Woocommerce y WP Rocket? ¿Nos conviene tener un plugin de este tipo? ¿Hay alguno más apropiado para usarlo junto a Woocommerce?

    Muchas gracias.

    1. Hola Daniel, lo que explicas no es un problema de incompatibilidad de WP Rocket con WooCommerce, sino que tienes un problema de doble cache e incompatibilidades en el vaciado.

      Hay 3 opciones:
      – Que tengas algún otro plugin haciendo optimizaciones en el JS y CSS y generando un caché de estos archivos mificados o combinados.
      – Que tengas un caché de página a nivel servidor: Nginx o Varnish.
      – Que tengas un problema grave de configuración en el cache de navegador.

      Yo apostaría quizás por la primera o la segunda opción. Ya no es la primera vez que me encuentro un Varnish sin reglas o un Autoptimize por detrás de WP Rocket haciendo de las suyas con los hash.

      ¿Por que se soluciona al desactivar WP Rocket? Pues fácil, si el problema es de un cache de pagina por delante, con desactivar 1 ya estarias solucionado el problema, y claro, el del servidor en circunstancias normales no lo desactivas. Si el problema es por un plugin de optimización como Autoptimize, el problema se soluciona al desactivar WP Rocket porque directamente deja de servirse cache con las rutas erroneas a los recursos, estas rutas están erróneas porque el plugin que hay por detrás las ha cambiado al renovar cache.

      Yo de todos los plugins de cache que conozco, WP Rocket es de las mejores opciones para WooCommerce, y aunque en tiendas MUY complejas puede quedarse corto, nunca va a funcionar mal porque detecta perfectamente los hooks, las cookies e incluso las sesiones de WooCommerce.

      1. Gracias por tu respuesta Álvaro,
        Una persona con conocimientos a nivel de usuario como yo, ¿cómo puedo detectar de dónde viene el problema y cómo lo puedo solucionar para que mi web funcione de la mejor manera?

        Muchas gracias

        1. Hola Daniel, pues…lamentablemente solo te puedo decir que actives y desactives plugins hasta que encuentres el problema.

          Hay más formas, pero requieren experiencia y entender como funciona cada uno de los plugins que pueden dar el conflicto.

          Precisamente para estos casos existimos los consultores WordPress con 12 años de experiencia como yo xD

  15. Álvaro gracias por todo la ayuda ofrecida pero tengo una duda
    cuando analizo tu pagina con https://www.thinkwithgoogle.com/intl/es-es/feature/testmysite/ puedo observar que tiene un análisis para España por ejemplo como puedo yo segmentar esta analística para visualizar la velocidad de mi pagina desde diferente paises por ejemplo tu pagina aparece con España pero otra aparecen con México argentina etc. como puedo configurar para que esto se muestre así

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículos destacados

Copias de seguridad en WordPress

wp-config.php de WordPress

WebP en WordPress

Optimizar la carga de JavaScript y CSS en WordPress

wp-cron.php de WordPress

Desinfectar un WordPress hackeado

Share on twitter
Share on facebook
Share on linkedin

Alvaro Fontela
Consultor WordPress especializado en WPO y rendimiento web; CEO y co-fundador de Raiola Networks.

¡Puedes encontrarme en redes sociales!

¿Te gusta mi blog?

Si quieres recibir mis últimos artículos en tu email, suscríbete a mi lista de correo y te enviaré semanalmente mis últimos contenidos.

RESPONSABLE:

RAIOLA NETWORKS, S.L.

C.I.F.: B27453489

Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo)

Telefono: +34 982776081

e-mail: info@raiolanetworks.es

FINALIDAD:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
LEGITIMACIÓN:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
DESTINATARIOS:

No se ceden datos a terceros, salvo obligación legal.

Personas físicas o jurídicas directamente relacionadas con el Responsable

Encargados de Tratamiento adheridos al Privacy Shield

DERECHOS:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
INFORMACIÓN ADICIONAL:Se puede consultar la política de privacidad de forma más detallada aquí.