Tutorial WP Rocket, el plugin de caché que hará volar tu web WordPress

Tutorial WP Rocket

En este tutorial te voy a explicar como instalar y configurar WP Rocket en WordPress, uno de los mejores plugins de caché.

Aunque también hay otros y que puedes ver en mi post de los mejores plugins para optimizar WordPress.

Reconozco que soy algo pesado con el tema de la optimización de WordPress.

Pero es que viendo como está el panorama, que la mayoría de visitas vienen de dispositivos móviles.

Que los usuarios no tenemos espera cuando una web carga lenta.

Y que la velocidad de la web es un factor de SEO que nos afecta seriamente.

Tener una web bien optimizada es imprescindible a día de hoy.

Hace ya tiempo hice mi tutorial sobre WP Super Caché, uno de los mejores y más ligeros plugins para meterle caña a tu WordPress.

Pero hoy vengo con otro mega plugin que te recomiendo encarecidamente para tu web.

WP Rocket, el mejor plugin de caché para mí a día de hoy

WP Rocket es un maravilloso plugin premium de caché que llevo usando en mi web desde 2016 y que además instalo de forma gratuita a mis clientes cuando les optimizo la web.

Tiene un coste de 49$ al año, pero que es un precio ínfimo para lo que ofrece.

Para ponerte al día, primero empecé usando WP Super Caché, después el sistema de caché que tiene Siteground y que no es moco de pavo, y ahora este.

El motivo de estos cambios, es básicamente porque no me puedo estar quieto y que también me gusta ir probando todo lo nuevo para darte mi punto de vista.

Te lo voy a resumir en una frase.

Este plugin consigue un nivel de optimización, que para conseguirlo de otro modo, necesitas instalar varios plugins, más varias optimizaciones manuales que no son sencillas para alguien con pocos conocimientos.

Si quieres optimizar WordPress y no complicarte la vida te lo recomiendo.

¿Por qué WP Rocket y no otro plugin de caché?

Uno de los motivos que me llevó a cambiar es porque es muy sencillo de usar.

No tengo miedo a paneles de ajustes complejos, pero sí quiero herramientas que sean sencillas de usar para mis clientes, pero que además sean potentes.

Influye que su panel de control esté totalmente en español, para quien se le resista el inglés.

Como te comentaba antes, también porque integra las funciones de varios plugins juntos.

Desde las funciones de un plugin de caché de hacer copias de las páginas para entregarlas mucho más rápido.

Pasando por la carga de imágenes solo cuando la imagen se muestra o lo que se llama lazy Load.

Más varios ajustes añadidos al archivo .htaccess para mejorar considerablemente la velocidad.

Hasta la optimización directa de la base de datos.

Osea un todo en uno.

También debes de saber que tiene una documentación increíble y en español.

Pero yo he decido hacer un tutorial indicando mi punto de vista, problemas que he tenido y recomendaciones a la hora de usarlo.

Comprando e instalando WP Rocket

Para empezar a usar WP Rocket debemos ir a su web y contratarlo desde el botón “Cómpralo Ya” que hay en la parte de arriba a la derecha.

Nos mandará directamente a su apartado de planes, en el que escogeremos en el más nos interese.

Para 1 solo sitio, para 3 sitios o para sitios ilimitados.

Precios WP Rocket

Recuerda que para seguir teniendo actualizaciones y soporte después del primer año, hay que seguir renovando la licencia anualmente.

Después nos mandará a la típica pantalla de pago para rellenar nuestro datos, elegir el método de pago Paypal o tarjeta.

Una vez hecha la compra, podremos entrar en el panel de control y descargar nuestra copia desde el enlace de color naranja que nos ofrecen.

Aquí también podremos gestionar las licencias de los sitios que tengamos activadas y desactivarlas en caso de que lo necesitemos para liberarlas.

Mis sitios

Instalar WP Rocket

Después nos vamos a nuestro WordPress al apartado pluginsañadir nuevo y le damos a subir.

Lo instalamos, activamos y otra ventaja de este plugin es que la licencia se activa de forma automática.

Ya nos deberá aparecer la opción en el menú ajustes llamada WP Rocket.

Escritorio

En el escritorio de WP Rocket podremos ver algunas opciones como herramientas, además de acceder a preguntas frecuentes y soporte.

Escritorio WP Rocket

Están las opciones de:

  • Rocket tester: para que tu sitio forme parte del programa tester y probar nuevas versiones. Pero ojo, que no son estables y pueden tener fallos.
  • Analíticas Rocket: básicamente les das permisos para que analicen qué pasa en tu web para que los ayude a mejorar.

Después tienes algunas herramientas:

  • Vaciar la caché: para que la regenere de nuevo. Ojo, si necesitas vaciar la caché de una URL, puedes hacerlo desde la barra de herramientas de WordPress, una vez que estés en esa URL.
  • Precargar la caché: para que se cargue toda del tirón.
  • Purgar OpCache: que es una caché que tienen algunos hostings.
  • Generar la ruta crítica del CSS: para que genere el CSS que la web carga antes.

Como puedes ver, son cosas sencillas.

Más abajo hay algunas preguntas frecuentes y puedes acceder directamente al soporte.

Un apartado para poder contactar con soporte sin tener que salir de tu sitio web.

Pones un titulo de resumen, la descripción de tu problema, lo envías y listo.

¿Qué más se le puede pedir no?

Caché

En el apartado de caché podremos gestionar esta función.

WP Rocket panel caché

Caché móvil

La caché móvil sirve para separar la caché de los dispositivos móviles de la del escritorio.

Es interesante si usas un tema móvil específico.

O si usas plugins que crean una vista móvil diferente como WP Touch, el tema móvil de Jetpack o algún otro.

Hay temas que tienen CSS y JS específicos y hace que la velocidad mejore mucho.

También puedes guardar separadamente los archivos para dispositivos móviles, lo que mejora mucho esta función.

Caché usuario

Es para que se active la caché para usuarios logueados y lo recomiendo.

Un error que suele cometer la gente es que revisa la web estando logueado y de este modo no ves los errores que hay.

De este modo te enteras de todo y además la web será más rápida para ti.

Vida útil de la caché

Básicamente indicas cada cuanto tiempo quieres que se vacíe la caché.

Esto obviamente depende de cada cuanto actualices tus contenidos.

Optimizar archivos

En el apartado de optimizar archivos podremos configurar algunas opciones interesantes para mejorar la carga de archivos CSS y JS o JavaScript.

Aunque lo ideal es usar temas y plugins que no usen tantos.

Lo bueno de esto es que mejora sustancialmente la velocidad y el ranking en herramientas como Pagespeed.

Lo malo es que hay plantillas o plugins que pueden dejar de funcionar con esta función.

Mi recomendación es que vayas activando una por una y probando que tu sitio se ve correctamente.

Ojo: Entra desde una ventana de incógnito, dado que si entras desde ahí mismo, WP Rocket no cachea las páginas a usuarios registrados.

Minificar el HTML

La función de minificación del HTML reduce el tamaño del código HTML eliminando cosas que no sirven como comentarios, espacios y otros.

Combinar los archivos de Google Font

Casi todas las webs usan las fuentes de Google, pero estas hacen muchas peticiones.

Con esto combinas las Google Fonts y reduces el número de peticiones.

Suprimir los query string de los recursos estáticos

Los query strings son básicamente un control de versiones de los archivos estáticos.

El problema de eso es que esa comprobación ralentiza mucho la web y esto elimina las versiones.

Minificar HTML, combinar Google Fonts y suprimir query string

Minificar archivos CSS

Los archivos CSS u hojas de estilo son muy pesados y suelen ralentizar mucho la web.

Lo ideal sería usar buenos plugins que no metan muchas peticiones, pero con esto lo puedes mejorar mucho.

Esto elimina lo que no es necesario como comentarios, espacios y otros, haciendo que estos archivos carguen más rápido.

Combinar archivos CSS

Al combinarlos, los archivos CSS harán menos peticiones.

Osea que si tienes por ejemplo 10 archivos CSS, todos se unirán en uno solo.

Excluir archivos CSS

En el caso de que falle algo en la web, hay que excluir los archivos que fallen.

Lo excluyes y puedes seguir usando esa función que mejora mucho la velocidad de tu web.

Optimizar la entrega de CSS

Básicamente crea un archivo CSS con el código que se carga primero de la web, para que esta cargue más rápido.

Minificar, combinar, excluir y optimizar la entrega de archivos CSS

Minificar archivos JavaScript

Los archivos se minificarán, osea que se eliminarán todos los espacios en blanco, comentarios y otros códigos que solo hacen que esos scripts pesen más.

Combinar los archivos JavaScript

Los combina en uno para que se hagan menos peticiones al servidor, lo que acelera mucho.

JavaScript integrado excluido

Si tenemos JavaScript integrado en el HTML, con esto podemos hacer que se excluya de la optimización.

Excluir archivos JavaScript

En el caso de que nos deje de funcionar algo, revisamos y excluimos los archivos.

Carga archivos JavaScript de manera diferida

Con esto los archivos no bloquean la carga de la web, con lo que será más rápida.

Modo seguro para JQuery

Esto hace que JQuery no falle, pero hará que la web cargue algo más lenta.

Minificar, combinar, excluir y carga diferida de archivos JavaScript

Medios

En medios podremos optimizar todo lo que tenga que ver con imágenes y contenido similar.

LazyLoad

La función de LazyLoad o carga perezosa hace que las imágenes, iframes y vídeos no se carguen hasta que el usuario llegue hasta donde están y se tengan que mostrar en pantalla.

Esto reduce considerablemente el número de peticiones.

Es una buena herramienta para acelerar una página web y que hasta el momento se necesitaba un plugin aparte, aunque con este ya no lo necesitamos.

Yo recomiendo activarlo para las imágenes y comprobar inmediatamente que nos gusta el funcionamiento y no entorpece la navegación.

He tenido clientes que no les ha gustado.

Respecto a los iframes y vídeos, también he notado algunos problemas en algunos sitios.

Así que revisa bien el funcionamiento de tu web después de activarlos.

Emoji

WordPress hace una petición al archivo emoji que a veces es algo lenta y desde aquí la desactivamos.

Eso sí, ya dejarán de funcionar.

Contenido incrustado

Con el contenido incrustado evitamos que otros sitios usen contenido nuestro, cosa que ralentiza nuestro servidor.

Pero además también evita que en WordPress se pueda incrustar cierto contenido.

Medios, Lazy Load, emoji y contenido incrustado

Precargar

La función de precarga hace que la caché se cree antes de que el usuario visite una URL, como suele ser lo normal.

Con esta función activamos para que la precarga se haga de forma automática.

Además, WP Rocket la puede crear usando el sitemap de varios plugins como pueden ser Yoast SEO, All-in-one-one, Rank Math SEO o The SEO Framework, si lo activas.

Ten cuidado porque esto aumenta el consumo de CPU del servidor.

Precarga de peticiones DNS

También puede hacer una precarga de las peticiones DNS.

Es básicamente que si tu web llama por ejemplo a un mapa de Google Maps, se carga previamente el DNS para que se haga más rápida la petición.

Esto sirve para Google Maps, Google Font, Google Fonts, Fonts Awesome o cualquier archivo externo.

Solo tienes que insertar el dominio y subdominio sin http para que funcione.

Precargar la cache y peticiones DNS

Reglas avanzadas

En las reglas avanzadas podremos configurar varios parámetros interesantes para cuando nos surgen problemas.

Nunca poner en caché estos URLs

Para cuando no queremos que ciertas URLs se carguen en caché.

Por cierto, WP Rocket ya es compatible con muchos plugins de ecommerce como WooCommerce y Easy Digital Downloads y nunca cachea ninguna de sus páginas como carrito, pago, checkout, etc.

Piensa que si se cacheasen, a algunos usuarios se les mostraría páginas de otros usuarios como el carrito de compra o la página de cuenta.

Este es de los pocos plugins que te ahorran hacer la tarea de agregar las páginas de la tienda manualmente.

Nunca poner en caché estos Cookies

A veces puede ser interesante que algunas cookies se carguen en caché y para ello está esta función.

Nunca poner en caché estos agentes de usuario

Puedes evitar que se cacheen diferentes agentes de usuario, como por ejemplo ciertos navegadores que puede que te den problemas.

Un caso es por si no quieres enviar a la caché páginas que se vean mal, por ejemplo en el navegador de iPhone.

Para ello usas el user agent que es el navegador con el que se entra en la web.

Agregas el user agent Apple-iPhone de esa versión de iPhone y listo.

Purgar siempre estos URLs

También puede ser interesante que se purgue la caché de algunas páginas o entradas.

Poner en caché estos query strings

Si hay query string que no estén en caché, con esta función puedes agregarlos.

Nunca poner en caché estas URLs, cookies, agentes de usuario, query string

Base de datos

Desde este apartado puedes optimizar la base de datos de WordPress, sin necesidad de entrar al hosting, ni instalando otros plugin para este tarea como el caso de WP Optimize.

Yo personalmente recomiendo hacer una limpieza más efectiva desde el hosting, pero esto la mejora mucho.

Revisiones

Con esto podemos eliminar las revisiones que va creando WordPress cada vez que actualizamos un contenido.

Cosa muy importante porque no veas las que se crean cada vez que editas una entrada.

Por cierto, yo tengo desactivadas las revisiones en el wp-config.

Borradores automáticos

Los borradores automáticos se crean cuando estamos actualizando contenido y con esto podemos eliminarlos.

Entradas descartadas

Esta función elimina las entradas descartadas de nuestra base de datos.

Comentarios spam

Puedes programar para que se eliminen automáticamente los comentarios spam, pero personalmente te recomiendo revisarlos de vez en cuando.

Ten cuidado con borrar comentarios buenos que han caído en spam por mala suerte.

Comentarios descartados

También se podrán eliminar comentarios que estén descartados.

Trasients espirados

Los trasients son una especie de caché de datos temporales que crea WordPress de las llamadas a la base de datos.

Hace que las peticiones a la base de datos se hagan más rápidamente y así WordPress accede más rápidamente a los datos.

Osea que cuando se realiza cierta llamada, se almacena como trasient para volverla a usar posteriormente.

Lamentablemente tener muchos también la puede ralentizar, así que esta función elimina los que ya no sirven.

Como tienen fecha de caducidad, desde aquí podemos borrar los que ya no sirven.

Todos los trasients

También puedes eliminar todos los trasients, pero esto hará que las peticiones sean algo más lentas.

Tablas optimizadas

Una vez que hemos limpiado la base de datos, hay que optimizar las tablas.

Esto se hace mediante una función en la base de datos que por explicarlo de algún modo, ordena y mejora la velocidad de la misma.

Esto hace que vaya más rápida y además pese menos.

Si eres de los que no se maneja con bases de datos o phpMyAdmin, esto te va a venir genial.

Con un solo clic optimizaremos la base de datos para que las consultas se hagan mucho más rápido.

Programar limpieza automática

Podemos programar para que esta limpieza se haga cada cierto tiempo de forma automática a diario, semanal o mensualmente.

¿Qué más le vas a pedir?

Optimizar base de datos, revisiones, borradores, comentarios spam, trasients y optimizar las tablas

CDN

Con WP Rocket podemos configurar un CDN o Content Delivery Network en nuestro WordPress.

Un CDN es un sistema de servidores que copia nuestros contenidos estáticos como imágenes, vídeos, scripts CSS y JS por el mundo.

Entonces si un usuario entra en nuestra web desde Estados Unidos, esos archivos se les sirve desde el servidor más cercano.

Desde aquí puedes activar esta función y configurar el CDN que más te convenga.

También podemos usar nuestra web como CDN.

Si creamos en nuestro hosting un subdominio que se llame por ejemplo cdn.miweb.com, multiplicará la velocidad de nuestra web.

Unos archivos se descargan de nuestro dominio principal y otros desde el subdominio cdn.

Eso hace que la web cargue más rápido, al hacerse la descarga simultánea.

Podemos crear tantos CDNs como queramos: cdn1, cdn1, cdn3, etc.

Este mismo truco lo usaba con WP Super Caché.

Excluir archivos del CDN

Si ves que hay problemas o simplemente no quieres que algunos archivos se carguen desde él, desde aquí puedes excuirlos.

Configurar CDN y excluir archivos

HearBeat

El HeartBeat o latido de WordPress es una función que hace que WordPress esté activo constantemente comprobando ciertas cosas.

Un ejemplo de ello es cuando estás redactando y el están guardando los cambios de forma automática.

Desde aquí puedes activar el control del HeartBeat.

Reduce o desactiva la actividad de Heartbeat

Una vez que está activado, debemos elegir donde queremos desactivarlo y donde limitarlo.

Obviamente esto ya depende de las necesidades de cada proyecto.

Controlar HeartBeat y limitar actividad

Add-on

WP Rocket dispone de varios addons que mejora mucho la velocidad y te recomiendo usarlos.

Google Tracking

Con Google Tracking podemos hacer que el script de Google Analytics se guarde localmente, lo que ahorra una petición externa.

Al ser local, se guardará en la caché de los navegadores, lo que también mejora la velocidad.

FaceBook píxel

El píxel de FaceBook es otro que normalmente suele ser bastante lento y esta función también o guardará de forma local, con sus respectivas ventajas.

Varnish

Hay hostings que aparte de que tú uses algún sistema de caché, ellos implementan los suyos propios como es el caso de Varnish.

Lamentablemente la mayoría de las veces no tienen un plugin como en el caso de Siteground que sí nos ofrece la posibilidad de gestionar su sistema de caché.

Con esto lo que nos puede pasar es que estés haciendo algún cambio en tu web y veas que el cambio no se realiza por mucho que limpies tu caché del navegador o la del plugin.

Con este método por lo menos podremos subsanar ese problema si nuestro hosting usa este sistema de caché.

Si tu hosting no lo tiene, ni le hagas caso.

Lo malo de tener 2 cachés es que aunque vacíes la del plugin, la del hosting se sigue manteniendo intacta.

Así que con este addon y con un solo clic, vaciamos las dos.

Cloudflare

Si usas ClouFlare este complemente te vendrá de perlas, dado que podrás controlar algunas funciones sin tener que acceder a su panel de control.

Desde activar el modo desarrollo para ver en tiempo real los cambios que haces, activar unos ajustes óptimos que mejora la velocidad de la web y activar el protocolo relativo, en el que en los recursos estáticos se eliminan los protocolos http: y hppts:.

Sucuri

Si usas Sucuri para proteger tu web, con esta unción podrás vaciar su caché sin salir de WordPress.

Addons Google Analytics píxel FaceBook Varnish CloudFlare Sucuri

Herramientas

También dispone de varias herramientas interesantes para los que trabajamos a diario con él.

Exportar ajustes

Puedes exportar los ajustes para tenerlos guardados o si sueles usar la misma configuración en varios sitios web.

Importar ajustes

Desde la función importar ajustes puedes importarlos y que el plugin se configure con un clic.

Rollback

La herramienta de Rollback es de las más interesantes, puesto que te permite volver a una versión anterior del plugin si tienes problemas con la actualización.

Herramientas

El archivo .htaccess de WP Rocket

Nada más activarlo, el plugin ya nos configura correctamente nuestro archivo .htaccess con unos parámetros que aceleran nuestra web de forma automática.

Osea que sin haber hecho, ni configurado nada, tu web ya va a cagar más rápido.

Esta captura es solo una pequeña parte de todos los ajustes y mejoras que agrega el plugin.

Archivo htaccess de WP Rocket

Termino

Espero que este tutorial de WP Rocket te haya servido.

Ahora puede que te hagas algunas preguntas.

¿Me basta con instalar este plugin para mejorar la velocidad de mi WordPress?

La respuesta es SI.

¿Con esto ya tengo mi web totalmente optimizada?

La respuesta es NO.

Aparte instalar un sistema de caché, hay que hacer muchas más optimizaciones en una instalación de WordPress.

Primero porque cada instalación de WordPress, según los plugins instalados, necesita una configuración deferente.

Y segundo, porque aparte de la caché, se deben hacer muchas más mejoras a nivel de scripts, imágenes, servidor, bases de datos y otros.

Espero que esta guía te haya sido de utilidad.

Y tú ¿usas WP Rocket? ¿Tienes alguna duda sobre él? ¿Quieres aportar algo?

Espero tu comentario.

avatar
el más nuevo el más antiguo el más votado
Miguel
Invitado
Miguel

Hola Raul
Buen articulo
Hace poco me cambie a Siteground que como sabes tiene su propio plugin de optimizacion ¿Cual crees mejor el de Siteground o WP Rocket?
¿Que nos recomiendas a los que estamos con Sitegrond?

Alain
Invitado
Alain

La verdad estoy un poco decepcionado porque lo compré e instalé y no he podido configurarle nada más que lo de WP-Optimize, porque le activé lo de minify y me dió errores, lazy load también. No he podido activarle casi nada. Y me cuesta creer que solo con instalarlo mejorará algo.

Jorge
Invitado
Jorge

Hola, gracias por el tutorial.

Cuando dices que ofreces el plugin a tus clientes, ¿les compras una licencia para 1 sitio? ¿o teniendo tú la licencia de infinitos sitios se puede utilizar esa a modo de “reventa”?

Gracias!

Alf
Invitado
Alf

Lo que me pregunto es… ¿Habrá problemas con los banners de por ejemplo adsense?

Alejandro
Invitado
Alejandro

Me he aventurado a comprarlo gracias a este artículo y no me arrepiento en absoluto.

Un pluging muy efectivo, realmente sencillo de configurar y no demasiado caro, además de aumentar significativamente al velocidad del blog.

abel vital ceja
Invitado
abel vital ceja

gracias muy bueno me abente un rato en tu web leyendo gracias

Tuvant
Invitado
Tuvant

Increíble Plugin. Ya desde hace un año que lo vengo usando y me va de maravilla lo mejor de todo es que lo actualizan constantemente. Altamente muy recomendable usarlo en nuestro WordPress.