WP Rocket para acelerar WordPress con cache de página

Dificultad del post: facilmediadifícil
[Total:3    Promedio:4.3/5]
wp rocket wordpress

Personalmente, a principios de 2015, yo pensaba que en relación a temas de cache para WordPress, ya estaba todo inventado, y que para optimizar al máximo la velocidad de carga de las instalaciones WordPress, tendríamos que intentar combinar plugins y técnicas WPO para conseguir afinar cada milisegundo.
La cuestión es que descubrí WP Rocket, y cuando no creía que iba a merecer la pena pagar por un plugin de cache para WordPress, aparece este plugin, y me cambia por completo la visión de todo.

wprocket wordpress

Los plugins son una parte fundamental de WordPress, por eso hablando de WPO, siempre es necesario hablar de plugins de cache para WordPress.
Aunque como dice Pablo Lopez de @desarrollowp en su Twitter: cache no es simplemente instalar un plugin de cache, es una estrategia.

wp rocket

¿Qué ha cambiado WP Rocket en relación a otros plugins de cache para WordPress?

No voy a decir que WP Rocket es el mejor, ya que han aparecido otros plugins como Swift Performance que más o menos se ponen al mismo nivel e incluso lo superan, además, existen otros como W3 Total Cache, que llevan mucho tiempo en el mercado y que son plugins ideales para situaciones concretas.
Todo esta información sobre plugins de cache, podéis revisarla en este post sobre los mejores plugins de cache para WordPress que he escrito en este blog.

Entonces, ¿Qué ha aportado WP Rocket?

  • Un plugin de cache fácil de configurar, con una curva de aprendizaje mucho más simple y autoconfigurable que el resto de plugins. Si comparamos WP Rocket con W3 Total Cache, tenemos el día y la noche.
  • Un soporte brutal apoyando a un plugin que en pocas ocasiones se había visto, ya que el soporte por parte de los desarrolladores de WP Rocket es brutal y te ayudan, incluso cuando tienes problemas con el minificado y combinado de recursos en tu theme WordPress.
  • Unos tiempos de respuesta brutales que unidos a ciertas opciones WPO conseguían que WP Rocket tuviera (y tenga) unos tiempos de respuesta MUY superiores a la mayoría de plugins de cache para WordPress.

Estas tres cosas, en este orden, hicieron que WP Rocket poco a poco ganara cuota de mercado entre los profesionales de WordPress, y poco a poco mucha gente como yo, que no tenía pensado pagar por un plugin de cache porque estábamos convencidos de que sería “más de lo mismo” acabáramos utilizando WP Rocket en la mayoría de los casos.

En el momento de escribir este artículo, WP Rocket tiene en el contador de su web más de 600.000 instalaciones de WP Rocket activas y más de 81.000 clientes han comprado WP Rocket para sus WordPress, y suben cada hora.
Por otro lado, el proyecto WP Rocket es muy transparente, y en su blog explican cosas sobre sus políticas o su filosofía de trabajo en equipo.

wp rocket equipo

Y aunque WP Rocket no es perfecto (nada es perfecto), y personalmente considero que le faltan algunas opciones como por ejemplo el cache de objetos en Memcached, creo que el proyecto mola mucho, y una de las razones son esos pequeños detalles de transparencia y escucha de la comunidad.

Ademas, desde hace algún tiempo, al proyecto WP Rocket se le suma el proyecto Imagify, un plugin de optimización de imágenes para WordPress muy potente que yo utilizo desde ya hace algún tiempo y que me encanta.

imagify

Imagify optimiza las imágenes en la nube consiguiendo muy buenos resultados y con un precio por uso bastante competitivo.

Cambiando un poco de tema, y pasando ya a lo que viene siendo el plugin WP Rocket y su funcionamiento, voy a detallar rápidamente algunos puntos que considero que son los puntos fuertes de WP Rocket a la hora de optimizar WordPress:

  • WP Rocket sirve el cache de forma simple mediante el .htaccess, al solo ofrecer el guardado de cache en disco puede aprovechar el .htaccess para servir cache, en caso de usar Nginx o tener activo el cache independiente para dispositivos móviles, se utilizará PHP para servir cache, con la correspondiente “penalización” de velocidad que puede ser compensada o no.
  • El precache o la precarga de cache de WP Rocket es MUY potente, ya que sus desarrolladores le dan mucha importancia. Personalmente, creo que una precarga (preload) muy flexible y con mucha configuración nos permite crear una buena estrategia de cache eficiente.
  • Las políticas de vaciado de cache y exclusiones de WP Rocket son buenas, además son bastante “semiautomáticas” y casi no necesitan que el usuario toque, salvo si queremos hacer algo muy específico o personalizado, en ese caso debemos tocar el apartado “Reglas avanzadas”.
  • El apartado para configurar CDN de WP Rocket es bueno, tiene la configuración justa para realizar la implementación de un CDN sin darnos muchos dolores de cabeza, pero al mismo tiempo tiene algunas opciones necesarias para hacerlo de la forma correcta y eficiente.
  • Desde la versión 3.1, WP Rocket nos permite “tocar” y configurar el API HeartBeat de WordPress, permitiéndonos aumentar el tiempo o periodo entre pulsos e incluso nos permite desactivar el API HeartBeat en algunas partes de nuestro WordPress donde nosotros previamente debemos asegurarnos de que no usamos esta funcionalidad de nuestro WordPress.
  • Existen dos addons para que WP Rocket guarde localmente en el servidor los scripts correspondientes al pixel de Facebook y el script de Google Analytics, con el fin de mejorar el cache de navegador.

Todas estas opciones y muchas más, están mostradas en un panel de control interfaz dentro de la sección “Ajustes” del panel de administración o dashboard de WordPress de una forma muy intuitiva y adaptada para usuarios sin muchos conocimientos.
La verdad es que la interfaz de WP Rocket es un ejemplo de cómo hacer las cosas bien en este campo, si comparamos las interfaces de WP Rocket y de WP Fastest Cache Premium, este último da “asco”.wp rocket

Vamos a ver las principales acciones y técnicas WPO que podemos implementar usando WP Rocket en WordPress, si quieres saltarte todo esto, también puedes ver el videoanalisis que he grabado para ti y que he subido a mi canal de Youtube.

Si quieres seguir leyendo, el índice de contenidos de este artículo sobre WP Rocket para WordPress es este:

Si quieres comprar WP Rocket, debes ir a su página web oficial, allí encontraras sus precios: https://wp-rocket.me/es/

 

Configurar cache con WP Rocket

Al activar el plugin WP Rocket, automáticamente se activa el cache de página, es decir, la funcionalidad principal del plugin.

Pero, aun así, debemos configurar algunas cosillas más del cache, como por ejemplo la precarga de cache o especificar el TTL (tiempo de expiración) del cache.

Lo primero que vamos a hacer después de activar el plugin es ir a la sección “Cache” donde podremos ver algo similar a esto:

optimizar wordpress

Aquí tenemos las siguientes opciones:

  • Habilitar la cache para dispositivos móviles: Esto debemos dejarlo SIEMPRE activado.
  • Guardar separadamente los archivos para dispositivos móviles: Si no usamos ningún plugin para servir una versión especifica de cache, DEBEMOS DEJAR ESTO DESACTIVADO.
  • Habilitar la cache para los usuarios conectados a WordPress: A no ser que nuestro WordPress sea un foro o similar, dejamos esto DESACTIVADO.
  • Vida útil de cache: Normalmente yo lo dejo a 0, y juego con las políticas de vaciado de cache, pero si quieres una cifra conservadora, configura 12 horas.

Lo siguiente es configurar la precarga de cache, también llamado “preload”. Esta funcionalidad hace que siempre exista una versión cacheada de cada página para poder enviarse a los visitantes sin esperas.

Para configurar la precarga de cache nos dirigimos a “Precargar”, en la siguiente imagen puedes ver más o menos su apariencia:

optimizar wordpress

Normalmente la función Precargar de WP Rocket puede leer el sitemap para crear un índice de todas las páginas del sitio web, si tenemos instalado alguno de los plugins conocidos de SEO para WordPress que nos permiten configurar el sitemap.xml en WordPress, como es el caso de Yoast SEO.
En caso de usar un plugin “no detectado” para configurar el sitemap.xml, debemos especificar la ruta del sitemap.xml en el cuadro “Mapas del sitio para precargar” que he rodeado en rojo en la imagen anterior.
Yo SIEMPRE recomiendo tener la precarga activa, para eso debemos dejar marcada la casilla “Activar la precarga” y si tenemos sitemap (deberíamos), marcar la casilla “Activar la función de precarga de cache a través del mapa del sitio “.

En la sección “Precarga de peticiones DNS” podemos configurar el DNS Prefetch, esta funcionalidad nos permitirá especificar hostnames externos para cachear las peticiones DNS recurrentes realizadas a esos hostnames.

Como es complicado de explicar, en este video que he grabado para ti y he subido en mi canal de Youtube, puedes ver exactamente cómo utilizar Pingdom Tools para ver las peticiones externas y como añadirlas al listado de cache DNS:

Con el DNS Prefetch no vamos a ganar mucha mejora en la velocidad de carga, y dependerá del número de peticiones externas realizadas, pero… el DNS Prefetch nos ayudará cuando tenemos muchas peticiones realizadas por botones, contadores y cajas sociales a las principales redes sociales, ya que estas peticiones suelen ralentizar bastante la carga.

Si queremos llevar un poco más allá el cache de WP Rocket, debemos dirigirnos a la sección “Reglas avanzadas” en la configuración de WP Rocket.

optimizar wordpress

No voy a explicar esta sección parte por parte, ya que no puedo hacerlo. Es una sección compleja que nos ayudara a adaptar el funcionamiento del cache de WP Rocket a nuestro caso y configuración, por lo que existen posibilidades de configuración infinitas.

Adicionalmente, si queremos llevar un poco más allá el cache de navegador, en la sección “Add-on” de la configuración de WP Rocket podemos configurar el script de Google Analytics y el script de Facebook Pixel para que se guarden en local y de esta forma especificar el cache de navegador:

optimizar wordpress

Lo ideal es activar las opciones correspondientes a lo que utilicemos, es decir, si no usamos Facebook Pixel, lo normal es no marcar esta opción.

Con esto toda la parte de cache de WP Rocket quedara configurada, lo único que debemos tener en cuenta, es que con la sección “Reglas avanzadas” podemos personalizar el funcionamiento del cache de acuerdo a las necesidades y configuraciones de nuestro sitio web y de los plugins que tengamos instalados en nuestro WordPress.

wp rocket

 

Minificar, combinar y carga asíncrona con WP Rocket

Aunque minificar y combinar código durante un tiempo ha tenido mucha importancia según los themes actuales se iban haciendo cada vez más complejos, actualmente debemos balancear, ya que con la funcionalidad PUSH de HTTP/2 y con la posibilidad de enviar varios recursos en una única conexión TCP por HTTP/2, ya no es tan necesario optimizar el código HTML, JS y CSS.

Aun así, la sección “Optimizar archivos” de WP Rocket tiene algunas funcionalidades interesantes que debemos tocar.

Quiero decir, que, en este articulo, voy a recomendar una configuración, pero va a ser muy conservadora, es decir, lo justo y necesario para afinar un poco el funcionamiento, pero sabiendo que es compatible en la mayoría de los casos.

Esta sección “Optimizar archivos” está formada por 3 bloques de opciones:

  • Opciones básicas.
  • Archivos CSS.
  • Archivos Javascript.

Vamos a empezar por la primera sección llamada “Opciones básicas”, donde activamos todas y cada una de las opciones, tal y como se ve en la siguiente imagen:

acelerar wordpress

Las opciones que hemos marcado son las siguientes:

  • Minificar el HTML: Esta opción sirve para reducir el peso del código HTML, eliminando saltos de línea, comentarios y espacios del código generado, no suele dar fallos.
  • Combinar los archivos Google Fonts: Actualmente se abusa bastante de las “bonitas” fuentes de Google Fonts y muchos themes y plugins hacen multiples peticiones a los servidores de Google, con esta opción se unirán todas las peticiones a fuentes de Google en un único archivo y se guardara en local, reduciendo el número de peticiones y simplificando la carga de la web.
  • Suprimir los query strings de los recursos estáticos: Esto eliminara una serie de variables que se ponen en las URL (por GET) y que, aunque en la teoría sirven para algo, en la práctica simplemente sirven para “joder” el cache de esos elementos con query strings.

Como he dicho, de esta primera sección debemos marcar TODAS las casillas de verificación de todas las opciones.

Pasamos a la siguiente sección llamada “Archivos CSS” y simplemente decir, que yo en esta sección lo dejaría, todo lo contrario, a “Opciones básicas”, es decir, todas las opciones desactivadas, tal y como muestra la siguiente imagen:

acelerar wordpress

Voy a explicar un poco estas opciones de esta sección “Archivos CSS” de WP Rocket:

  • Minificar archivos CSS: Aligera las hojas de estilo CSS sacando saltos de línea, espacios y comentarios, pero suele dar problemas en themes muy “complejos” y “mal hechos” descuadrándonos la web.
  • Combinar archivos CSS: Junta varios archivos CSS en uno solo para reducir las peticiones HTTP y hacer que la carga de la web sea más simple, pero suele dar problemas de dependencias graves, sobretodo el themes muy complejos.
  • Optimizar la entrega de CSS: Esta opción sirve para que la carga de CSS no bloquee la visualización, lo que hace es generar la ruta critica.

Como mucho, si queremos probar, la opción “Optimizar la entrega del CSS” debería ayudarnos con bloqueos de visualización en la carga y no debería darnos problemas.

El resto de opciones yo recomiendo no tocarlas, a no ser que sepamos exactamente lo que estamos haciendo y podamos añadir exclusiones, el cuadro de exclusiones se abre después de activar la opción:

acelerar wordpress

También decir, que, como ves en la imagen anterior, cada vez que activamos una de estas opciones, WP Rocket nos mostrara un aviso de que nuestro sitio puede fallar.

En cuanto al último bloque de opciones de “Optimizar archivos” llamado “Archivos Javascript”, ocurre lo mismo que con el bloque “Archivos CSS”.
Si activamos algunas de estas opciones, vamos a tener un problema con el theme activo si es muy complejo.

Esta sección tiene esta apariencia, como puedes ver en esta imagen:

acelerar wordpress

Las opciones que nos encontramos en “Archivos JavaScript” son estas:

  • Minificar archivos Javascript: Esta opción sirve para reducir el tamaño de los archivos javascript eliminando espacios, saltos de línea y comentarios, suele dar bastantes fallos en webs dinámicas.
  • Combinar los archivos Javascript: Se trata de unir varios archivos javascript en uno solo, reduciendo las peticiones HTTP y simplificando la carga de la web, pero puede dar fallos según las dependencias Javascript.
  • Carga archivos Javascript de manera diferida: Es la famosa carga asíncrona de scripts Javascript, en WP Rocket es casi asistida y tiene en cuenta las dependencias de JQuery, la librería Javascript más utilizada.

Yo personalmente, lo único que haría si queremos evitar problemas, como en el caso de la sección “Archivos CSS”, es activar la última opción llamada “Carga archivos Javascript de manera diferida” y también marcaría la subsección que aparece llamada “Modo seguro para JQuery (Recomendado)”.

acelerar wordpress

Con esto que he comentado hasta ahora, tendremos la configuración de “Optimizar archivos” configurada de forma conservadora, pero debes tener en cuenta que aun así, en algunos casos puede dar algún fallo al manipular el código.

Este tipo de optimizaciones de carga y código de recursos de forma automática se realizan mediante patrones, y en themes / plugins que no siguen estos patrones pueden causar problemas, aunque esto no es un problema de WP Rocket solo, sino de cualquier plugin específico para realizar este tipo de optimizaciones de forma automática, como por ejemplo Autoptimize.

Por último, comentar que siempre podemos probar estas opciones y si se nos “descuadra” la web, simplemente desactivarlas y contactar con el soporte de WP Rocket, ya que como he dicho, su soporte por parte de los desarrolladores es uno de sus puntos fuertes a tener en cuenta.

wp rocket

 

Configurar CDN con WP Rocket

De todos los plugins de cache para WordPress que he utilizado y he probado, personalmente creo que WP Rocket junto con W3 Total Cache es de los que mejor sección para la configuración de un CDN tiene.

Desde la sección “CDN” en la configuración de WP Rocket podremos realizar las configuraciones necesarias para configurar un CDN mediante Domain Sharding o Carga Paralela, es decir, con subdominios o hostnames para cargar los recursos estáticos desde los POPs del CDN.

cache wordpress

Recordemos que un CDN es una red de distribución de contenidos, es decir, es un servicio que nos permitirá servir contenidos estáticos (imágenes, videos, pdfs, JS, CSS, etc… es decir, archivos pesados de una web) desde servidores más cercanos al visitante, con el fin de reducir las latencias y mejorar la velocidad de descarga de estos recursos en el navegador del visitante.

cache wordpress

Con la interfaz que puedes ver en la imagen anterior, podremos configurar servicios CDN como por ejemplo CDN77, KeyCDN o Amazon CloudFront.
Comento estos CDN ya que son mis servicios CDN favoritos, aunque en algunos casos también utilizo CloudFlare, pero no es como los anteriores, CloudFlare es un CDN por proxy inverso.

Recuerda que la parte de configurar los CNAME en el servidor DNS va a cambiar dependiendo de nuestro proveedor de nombres de dominio, por otro lado, en algunos casos vamos a necesitar añadir exclusiones por temas de compatibilidad.

Podemos configurar para que cada CNAME sirva un elemento diferente (imágenes, JS y CSS o todos los archivos), de esta forma también podemos modularizar la carga de los recursos estáticos cargados desde el CDN.

 

Configurar el API HeartBeat con WP Rocket

El API HeartBeat se ha convertido en una de las partes de WordPress con más importancia, ya que nos permite comunicar código AJAX con el núcleo de WordPress, es decir, nos permite que nuestro WordPress sea dinámico.

Algunos plugins como WooCommerce utilizan de forma intensiva el API HeartBeat, por otro lado, el backend de WordPress, también utiliza de forma intensiva el API HeartBeat.

cache wordpress

El problema que tiene el API HeartBeat es que realiza un consumo de recursos demasiado alto, genera un alto consumo en el servidor, ya que se hacen peticiones constantemente entre el navegador del visitante y el servidor web.

Hay dos formas de reducir el consumo de recursos de HeartBeat en WordPress, una es desactivando el API en algunos puntos de la instalación WordPress donde no necesitamos su presencia y otra forma es aumentando el tiempo o periodo entre pulsos.

cache wordpress

WP Rocket nos permite realizar esto desde la sección “HeartBeat”, es una sección que han añadido hace relativamente poco tiempo (pocas versiones) y que nos permite desactivar o reducir el tiempo entre pulsos.

Debemos tener en cuenta, que, en la mayoría de los casos, lo único que podremos hacer es aumentar el tiempo entre “pulsos”, ya que no es viable desactivar las funcionalidades del API HeartBeat sin dañar el funcionamiento de los plugins y de WordPress que necesitan el API para funcionar.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress y WPO.

Share on twitter
Twitter
Share on facebook
Facebook
Share on linkedin
LinkedIn
Á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.
¿Quieres recibir mi contenido semanal?
¡Te enviare todas las semanas mi contenido!
Cabecera del formulario de suscripción
  • 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í.