Cómo configurar WP Rocket (2023). El mejor plugin para optimizar WordPress WPO ¿Merece la pena comprar? + VÍDEO

WP Rocket es actualmente el mejor plugin para optimización de WordPress que hay en el mercado.

Con WP Rocket tendrás en un solo plugin lo que realiza WP Super Caché + Autoptimize + Lazy Load y mucho más, ya que con WP Rocket podrás implementar fácilmente funcionalidades difíciles de añadir con los anteriores plugins o que simplemente no se pueden incorporar. Por ejemplo, la carga optimizada de archivos CSS (Carga de archivos CSS críticos al principio y resto al final) es muy fácil de implementar en WP Rocket y bastante más follonero para usuario con perfil poco técnico con Autoptimize.

WP Rocket es un plugin de pago. Pero, desde luego que merece la pena. Su precio es bastante asequible y la mejora del rendimiento de WordPress es muy significativa.

QUIERO WP ROCKET

 

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES

VER CURSOS

 

 

 

 

¿Qué es la caché y para qué sirve?

 

WP Rocket incluye muchas funcionalidades de optimización para wordpress. Pero, seguramente la más importante es la creación de una caché.

Pero, ¿qué es una caché y para qué sirve?

La caché es un “almacén” y en él se guardan páginas de wordpress ya generadas. Cuando hablo de páginas me refiero a: páginas, entradas, productos, categorías, etc.

¿cómo funciona?

Cada vez que un usuario escribe una url de tu web en su navegador (Chrome, Firefox, etc.) tu wordpress ha de generar esa página y enviarla al usuario.

¿y sí esas páginas pudieran estar ya generadas previamente, guardadas en un almacén (caché) y fueran enviadas cuando se solicitaran? Pues eso es para lo que sirve una caché en WordPress. De esta manera la carga de la web será mucho más rápida, pues WordPress no tendrá que generar la página cuando se la soliciten sino que ya la tendrá guardada en la caché.

 

 

Planes y precios de WP Rocket

 

En la página de compra del plugin puedes ver 3 planes distintos. Todos ellos son planes anuales. Es decir, para seguir disfrutando de soporte y actualizaciones has de ir renovando cada año.

Los planes son:

👉 i.- Plan Single: este plan es el más habitual y el indicado para usuarios particulares, empresas o autónomos con 1 solo sitio web. Tiene un precio de 44 €  ($49) y sirve para 1 solo sitio web. Con este plan tendrás soporte y actualizaciones del plugin durante 1 año para 1 sitio web.

👉 ii.- Plan Plus: este plan está pensado para usuarios particulares, empresas o autónomos que tienen varios sitios web. El precio de este plan es de 88 € ($99) y da soporte y actualizaciones del plugin durante 1 año para 3 sitios web.

👉 iii.- Plan Infinite: este plan está pensado para agencias de diseño web, marketing, etc. El precio de este plan es de 222 € ($249) y da actualizaciones y soporte durante 1 año para un número ilimitado de sitios web.

VER PRECIOS DE WP ROCKET

 

 

Vídeo Tutorial Configuración del plugin WP Rocket para WordPress

 

 

 

Cómo instalar el plugin WP Rocket

 

Una vez hayas procedido a la compra del plugin WP Rocket, accede a tu cuenta en la página de WP Rocket, descarga el plugin y guárdalo en el escritorio de tu ordenador (guárdalo comprimido, no lo descomprimas)

A continuación, accede al panel de administración de tu wordpress y ves a “Plugins > Añadir nuevo”. Después, haz clic en el botón “Subir plugin”, clic en “seleccionar archivo”, selecciona WP Rocket y dale a “Instalar ahora”.

Una vez instalado haz clic en “Activar”.

 

 

Cómo configurar WP Rocket

 

Para proceder a configurar el plugin ve al panel de administración de WordPress. Después, a : “Ajustes > WP Rocket”

 

1.- Configuración del Apartado CACHÉ – WP Rocket

 

Una vez accedas a la configuración del plugin, haz clic en la pestaña: “CACHÉ”. Desde aquí podrás realizar las principales opciones de configuración de la caché del plugin WP Rocket.

En primer lugar verás un subapartado denominado “Caché movil” con las siguientes opciones:

👉 i.- Habilitar la caché para dispositivos móviles: es muy importante que marques esta opción para que la caché funcione cuando tu web sea visualizada desde dispositivos móviles. En caso contrario, no se activará y la web será más lenta.

👉 ii.- Guardar separadamente los archivos para dispositivos móviles: como norma general NO marques esta opción. No debes marcarla si usas una plantilla responsive, como hoy en día son la inmensa mayoría de plantillas, como por ejemplo: Divi, Astra, Flatsome, Avada, Ocean WP, etc. Mara esta opción solo en el caso de que no uses una plantilla responsive sino que uses una plantilla que genere una versión específica de la web para móviles (o si usas plugins que modifican la versión móvil). Lo que hace esta opción es generar una caché independiente para dispositivos móviles y otra para escritorio.

 

 

 

Apartado “Caché de usuario”

👉 i.- Habilitar la caché para los usuarios conectados a WordPress: como norma general NO marques esta opción. Normalmente la caché no se activa para usuarios registrados ya que se suele trabajar mejor así como administradores de wordpress. Solo sería interesante marcar esta opción en el caso de que tengas una zona privada en tu wordpress para clientes, tengas un membership site o cursos online. Es decir, cuando los usuarios acceden a la administración de tu wordpress.

 

 

 

Apartado “Vida útil de la caché”

En este apartado establecerás el periodo de tiempo desde se crea la caché hasta que se vacía. Es normal vaciar la caché cada cierto tiempo para que se vuelva a generar con páginas actualizadas.

Si subes o actualizas contenido de manera muy habitual, lo lógico es poner un tiempo de vida de la caché bajo, menor de 24 horas. Si por el contrario subes o actualizas muy poco contenido a tu web lo más recomendable es poner un tiempo de vida alto a la caché. Un tiempo de varios días: 48 o 72 horas

Un tiempo medio que puede valer para cualquier tipo de web es de 24 horas, que es el que voy a utilizar yo.

👉 i.- Especifica el tiempo tras del cual quieres borrar la caché global (0=ilimitado): 24 horas

 

 

Después guarda los cambios

QUIERO WP ROCKET

 

 

2.- Configurar apartado “OPTIMIZAR ARCHIVOS” de WP Rocket

 

Dentro de la configuración de WP Rocket, ahora ve a la pestaña “OPTIMIZAR ARCHIVOS. Optimizar CSS&JS”.

Desde aquí podrás establecer las principales opciones de optimización de código CSS y JavaScript de WP Rocket, principalmente consistentes en minificar y unificar archivos para que la descarga de éstos en el navegador sea más rápida.

 

Apartado “Archivos CSS” WPRocket

En primer lugar céntrate en el apartado de optimización de código CSS. Éste es el código de una web relacionado con el diseño y la parte estética.

Voy a mostrarte que opciones de configuración tenemos:

👉 i.- Minificar archivos CSS: marca esta opción. De esta manera se reducirán los archivos CSS, quitando espacios sobrantes en el código y saltos de línea sobrantes, consiguiendo archivos más pequeños, menos pesados y por tanto de carga más rápida.

👉 ii.- Combinar archivos CSS (es necesario activar antes la minificación CSS): marca esta opción como norma general (mira las excepciones). Lo que harás será combinar todos los archivos CSS en uno solo. Por lo tanto se reducirá el número de peticiones y número de archivos que tendrá que descargar el cliente, por lo que la carga de la web será más rápida.

EXCEPCIONES:

Nota: esta opción podría provocar problemas de visualización de la web. Marca esta opción y guarda los cambios. A continuación, visualiza tu web en una navegación privada y si detectas algún problema desmarca esta opción.

Nota: no marques esta opción si tu web usa HTTP2. ¿Cómo saberlo? la opción más fiable es escribir un ticket de soporte a tu hosting y consultarlo. Puedes comprobarlo también en páginas como esta: https://tools.keycdn.com/http2-test Pero, mi recomendación es que consultes a tu hosting. ¿Por qué no marcar esta opción en este caso? Porque la tecnología HTTP2 hace solo una petición para la carga de todos los archivos y éstos se cargan en paralelo (al mismo tiempo), no en serie (uno detrás de otro).

👉 iii.- Optimizar la entrega de CSS: marca esta opción. Marca esta opción. Esta es una opción muy fácil de implementar con WP Rocket y difícil con otros plugins gratuitos como autoptimize. Esta opción sirve para cargar en primer lugar los archivos críticos (fundamentales) de CSS y después cargar el resto. Así, la sensación de velocidad de carga es mucho mayor ya que no se produce bloqueo de la carga de la página al principio de ésta. Esta opción no suele dar problemas, pero es posible que al cargar, inicialmente durante algún segundo produzca alguna visualización extraña. Si no deseas esa circunstancia puedes desactivar esta opción.

👉 iv.- Removed Unused CSS (Beta): esta opción está en el momento de escribir este post en fase de pruebas. Así, que yo por el momento no la voy a marcar. La opción permite eliminar los archivos CSS que no se usan en la carga de cada página. Por lo que se reducirá el peso y tiempo de carga ésta. Así, como del número de peticiones.

Ten en cuenta que si activas esta opción, WP Rocket tendrá que realizar una análisis de todas las páginas de la web para “ver“ qué archivos CSS puede “apartar” de la carga. Si tienes una web con muchas páginas, entradas, productos, etc. WP Rocket puede tardar bastante tiempo en realizar dicho análisis.

 

 

 

Apartado “Archivos JavaScirpt” WP Rocket

Ahora te muestro las opciones de WP Rocket para la optimización de código JavaScript.

👉 i.- Minificar archivos Javascirpt: marca esta opción. De esta manera eliminarás espacios en blanco y saltos de línea en blanco de los archivos JavaScript, reduciendo su peso y por tanto la carga de páginas.

👉 ii.- Combinar los archivos Javascript (es necesario activar antes la minificación JS): No marques esta opción. Esta opción es incompatible con la siguiente “Cargar archivos JavaScript de manera diferida” por lo que déjala sin marcar. Esta opción sirve para unificar en un solo archivo los diferentes archivos JavaScript. A parte de la incompatibilidad con las siguiente opción, tampoco interesa marcarlo si tu web usa HTTP2 (como te expliqué antes con la misma opción en CSS)

👉 iii.- Cargar archivos JavaScirpt de manera diferida: marca esta opción. De esta manera los archivos JavaScript se cargarán al final. Por lo que NO se retrasará la visualización de la página cuando está cargando. El tiempo total de carga se reducirá y la sensación de velocidad de carga del usuario mejorará.

👉 iv.- Retrasar la ejecución de JavaScript: marca esta opción. De esta manera algunos archivos JavaScript no se cargarán hasta que no haya una interacción con el usuario, como por ejemplo la acción de scroll, clic, etc. Esto hará que la carga de la página sea más rápida.

 

Finalmente haz clic en guardar cambios

 

QUIERO WP ROCKET

 

 

3.- Configurar apartado “Medios”

 

Te voy a mostrar ahora las opciones de optimización de imágenes y vídeos.

 

Apartado “LazyLoad”

Con este sistema de Lazy Load harás que las imágenes y vídeos no se carguen hasta que el usuario no vaya a visualizarlos ¿y cuando va a visualizarlos? Cunado el visitante hace scroll, se desplaza por la página y se sitúa frente a uno de ellos. De esta manera se evita que se carguen todas las imágenes y vídeos en el momento de la carga inicial de la página, haciendo dicho carga inicial mucho más ligera.

👉 i.- Habilitar para las imágenes: marca esta opción. De esta manera activarás Lazy Load (carga diferida) para las imágenes.

👉 i.- Habilitar para iframes y vídeos: marca esta opción. Así, activarás Lazy Load para vídeos cargados en wordpress y vídeos insertados de Youtube o Vimeo.

👉 iii.- Remplaza el iframe de Youtube con una imagen en vista previa: marca esta opción. De esta manera el iframe de youtube se reemplazará por una imagen hasta que el usuario no comience la visualización del vídeo incrustado. Esto puede reducir bastante la carga de la página si tentemos muchos vídeos incrustados.

 

 

 

Apartado “Image Dimension”

Las páginas cargan en primer lugar el código HTML y después va cargando las imágenes. Con esta opción cuando se cargue el HTML el navegador conocerá el ancho y alto de cada imagen y podrá reservar el espacio de cada imagen. En caso contrario en el momento de la carga de las imágenes el navegador modificará el contenido circundante a la imagen causando una mala sensación al usuario.

Gtmetrix y Page Speed Insights recomiendan esta opción.

👉 i.- Add missing image dimensions: marca esta opción. De esta manera activarás esta opción de Image dimensions.

 

 

Apartado “contenido incrustado”

👉 i.- Desactivar la función de wordpress para contenido incrustado: marca esta opción. Así, evitarás que otras personas incrusten contenido de tu sitio web en sus sitios.

 

 

Apartado “Compatibilidad WebP”

Las imágenes tipo WebP aceptan una gran compresión con poca pérdida de calidad por lo que son un buen sistema para aligerar la carga de la página. Pero, aún hay problemas de compatibilidad por lo que es un sistema que no está del todo implantado.

👉 i.- Habilitar caché WebP: NO la marcaremos por el momento. Además, ten en cuenta que para disfrutar de imágenes tipo WebP no sería suficiente con marcar esta opción, sino que necesitarías también un plugin que generara dichas imágenes.

 

QUIERO WP ROCKET

 

 

4.- Configurar “Precargar” WPRocket

 

La caché por defecto funciona de la siguiente manera: cuando un usuario visita una página de tu sitio web, wordpress guarda esa página en el almacén (caché) y se la envía al usuario. Cuando después, un nuevo usuario solicita esa misma página, wordpress le envía la que hay en caché (almacén) en vez de generar una nueva.

Pero, hasta que un usuario no visita una página no se almacena dicha página en caché.

Con las opciones de “precarga” que te voy a mostrar en este apartado harás que WP Rocket almacene todas las páginas del sitio web en la caché, aunque no sean visitadas. De esta manera la disponibilidad de la caché será mayor.

 

Apartado “Precargar Caché”

👉 i.- Activa la precarga: marca esta opción. De esta manera activarás la precarga de la caché de WP Rocket

👉 ii.- Activar la función de precarga de caché a través del mapa del sitio: marca esta opción. Se optimizará la precarga al utilizar un mapa del sitio (site map)

👉 iii.- Mapa del sitio XML de Yoast SEO: marca esta opción. Evidentemente, esta opción te aparecerá si tienes instalado Yoast SEO. Al marcar esta opción WP Rocket usará el sitemap que genera Yoast SEO para crear la caché de la web. Si no usas Yoast SEO tendrás que indicar la url del sitemap de tu sitio.

 

 

Apartado: “Precargar Enlaces”

Esta opción aporta al usuario una sensación de carga más rápida de las páginas del sitio cuando está navegando por la web.

Cuando un usuario coloca el cursor sobre un enlace se comienza a cargar en segundo plano, por lo que cuando el usuario hace clic ya hay parte de la página cargada y la sensación del usuario es de una carga más rápida.

👉 i.- habilitar precarga de enlaces: marca esta opción. De esta forma activarás la precarga de enlaces.

 

 

5.- Configurar “Base de Datos” con WPRocket

 

Desde este apartado de la configuración podrás realizar algunas optimizaciones de la base de datos de WordPress. La optimización se realizará de manera puntual cuando hagas clic en: “Guardar cambios y optimizar”. Cada vez que quieras volver a realizar la optimización tendrás que ir a este apartado de “Base de Datos” y hacer clic en el botón de “Guardar cambios y optimizar”. Aunque como veremos, también tienes la opción de programar, para que esta optimización se realice cada cierto tiempo.

Esta optimización la realizarás en muchas ocasiones. Pero, las primeras veces es interesante que hagas una copia de la base de datos antes de optimizar. Por si las moscas.

 

Apartado “Limpieza de entradas”.

👉 i.- Revisiones: marca esta opción. Cada vez que guardas una entrada o página WordPress crea un revisión de página. Para que en teoría pudieras volver a una versión anterior del contenido de cada post o página. Este recurso pude llegar a ocupar mucho contenido en la base de datos. Yo lo cierto es que nunca lo he usado, por lo que marcaré esta opción para que se eliminen las revisiones. Evidentemente, si tu haces uso de las revisiones, no marques esta opción.

👉 ii.- Borradores automáticos: NO marques esta opción. No me parece adecuada ya que puede eliminar páginas o entradas que tengamos en borrador.

👉 iii.- Entradas descartadas: NO marques esta opción. Eliminaría entradas o páginas que tengas en la papelera. Yo personalmente, prefiero eliminarlas desde ahí de manera manual. Por si las moscas.

 

Apartado “Limpieza de comentarios”

👉 i.- Comentarios Spam: marca esta opción. Eliminará de forma permanente los comentarios tipo spam y te ahorrarás eliminarlos tú de manera manual.

👉 ii.- Comentarios descartados: marca esta opción. Eliminarás de forma permanente los comentarios que tú mismo envíes a la papelera.

 

 

Apartado “Limpieza de Transients”

Los plugins y plantilla generan datos temporales en la tabla wp_options de la base de datos de tu WordPress.

Estos registros no necesarios pueden acumularse y hacer que el acceso a la base de datos se haga lento. No hay ningún problema en eliminar estos datos temporales. Si algún plugin o plantilla los necesita, los volverá a generar.

👉 i.- Datos transitorios expirados: marca esta opción. Eliminarás los datos temporales caducados

👉 ii.- Todos los transients: marca esta opción. Eliminarás los datos temporales.

 

Apartado “Limpieza de la Base de Datos”

Esta opción también es muy interesante para la optimización de las tablas de la base de datos y por tanto para aligerar el acceso a datos.

👉 i.- Optimizar tablas:  marca esta opción para que se realice la optimización de tablas.

 

Apartado “Limpieza automática”.

Desde este apartado puedes programar que se haga esta limpieza de datos que has configurado con una determinada periodicidad. Si no quieres, no marques la opción y realízala de manera manual cuando prefieras.

 

 

Backup de la Base de datos y Optimizar

Las primeras veces que realices esta optimización es interesante realizar una copia de seguridad o backup de la base de datos.

En el apartado 4.b.ii) de este post tienes explicado como hacer una copia de seguridad de la base de datos. Además, también te mostraré como hacerlo en el vídeo. Deberás utilizar la herramienta: “PhpMyAdmin” de tu panel de administración del hosting (CPanel o Plesk)

 

Una vez realizada la copia de seguridad haz clic en “Guardar cambios y optimizar”

 

 

Activar licencia de WP Rocket

 

Para activar la licencia de WP Roket ve al panel de administración de WordPress, a: “Ajustes > WP Rocket > Escritorio”.

En el apartado “Mi cuenta”, haz clic en “VER MI CUENTA” e introduce tu email y contraseña para conectar wordpress con tu licencia de WP Rocket.

 

 

Limpieza de Caché

 

La caché se vaciará de forma periódica según la configuración que hayas realizado. Pero, si quieres hacerlo manualmente, puedes ir al menú superior en la administración de WordPress y hacer clic en: “WP Rocket > Borrar la Caché”.

 

 

Resolver problemas CRON con WP Rocket

 

En caso de que te salga en la administración de WordPress algún aviso acerca de que no se han podido realizar las tareas programadas por WP Rocket. En concreto, un mensaje de este tipo: “El siguiente evento programado no se pudo ejecutar. Esto podría indicar que el sistema CRON no está funcionando correctamente, lo que podría ocasionar que algunas de características de WP Rocket no funcionen según lo previsto: Limpieza de Caché Programada. Por favor, contacta a tu proveedor de alojamiento para verificar si CRON está funcionando.”

En este post te explican como realizar una configuración manual de cron para que ese fallo no se produzca, y desactivar el cron virtual de WordPress.

 

 

Configuración de Divi para WP Rocket

 

En el caso de que utilices la plantilla Divi, te recomiendo desactivar la siguiente opción: “Divi > Opciones del tema > Constructor > Avanzado”. Desmarca la opción “Generación de archivo CSS Estático” y guarda los cambios.

En mi caso particular, esta opción provocaba que la renderización de las entradas de blog no fuera correcta. Es decir, se vieran mal.