Tutorial de WP Rocket, el plugin para optimizar WordPress más completo, con el que podemos mejorar la velocidad de carga de nuestra web.

¿Qué es WP Rocket?

WP Rocket es un plugin de caché para WordPress que además incluye las técnicas más utilizadas para la optimización de páginas web convirtiéndolo en una suite de optimización WPO.

Ventajas:

• Es el plugin de caché más eficaz.
• Es el plugin de caché más fácil de configurar.
• Cuenta con opciones de optimización avanzadas.
• Nos ahorra la instalación y configuración de varios plugin de optimización.
• Podemos gestionar gran parte de la optimización de nuestra página web desde un solo lugar.
• Documentación oficial en español.

Inconvenientes:

• Como casi todo en esta vida, lo bueno es de pago.

Características de WP Rocket

Además de la memoria en caché típica, este plugin incluye:

• Precarga de caché
• Gestión de los headers (expires, etags…)
• Compresión Gzip
• Lazy load
• Minificación y concatenación de HTML CSS JS y Google Fonts
• Precarga de peticiones de DNS
• Eliminación de los query string de los recursos estáticos
• Limpieza y optimización de la base de datos

Con estas técnicas de optimización web conseguiremos:

• Acelerar la carga de nuestra página web.
• Reducir las peticiones HTTP.
• Disminuir el uso de ancho de banda del servidor.

Instalar WP Rocket

WP Rocket es un plugin de pago que puedes comprar en su página oficial.

Su licencia es anual, con derecho a un año de soporte y de actualizaciones y tiene varias ofertas según el número de licencias compradas.

Una vez comprado, descarga el archivo Zip e instálalo desde el panel de control Plugin > Añadir nuevo.

¿Cómo configurar WP Rocket?

En este tutorial vamos a ver todas las opciones de WP Rocket para sacarle el máximo partido.

Es un plugin muy sencillo de configurar, ya que la caché se activa automáticamente y debajo de las opciones normalmente encontraremos una breve descripción de su función.

También se puede consultar la documentación oficial.

Algunas de las imágenes de este tutorial contienen iconos que te ayudarán a decidir si activas o no ciertas opciones del plugin. Este sistema ha sido creado especialmente para Alba e Isaac que son un poco Dummies (con cariño) ¡Jajajaja!.

WP Rocket Caché, compresión Gzip y otras medidas de optimización

La caché de navegador de WP Rocket empieza a funcionar automáticamente nada más activar el plugin.

Para ello se crean automáticamente varias reglas de WP Rocket en el archivo .htaccess que configuran la caché y tiempos de expiración para los diferentes ficheros (headers, imágenes, videos, audios, css, js, feed etc…)

WP Rocket también reconocerá automáticamente el tipo de servidor que utilizas y buscará los módulos del servidor que se usan para optimizar el rendimiento.

Los servidores compatibles con WP Rocket son Apache, NGINX, Microsoft IIS y Litespeed.

Si encuentra los módulos de optimización generará automáticamente las reglas de optimización en el archivo .htaccess necesarias para utilizarlos.

Los módulos que analizará y usará en caso de que nuestro servidor sea Apache y los tenga implementados son:

• mod_alias
• mod_deflate (Gzip)
• mod_expires
• mod_filter
• mod_headers
• mod_mime
• mod_rewrite
• mod_setenvif

Si la compresión Gzip u otras optimizaciones no se activaran, puede ser que tu servidor no tenga instalada esa funcionalidad y tendrás que preguntar al servicio técnico de tu hosting si pueden implementar los módulos del servidor correspondiente.

Explicación sencilla de lo que hace WP Rocket: Nada más activar el plugin WP Rocket se crea automáticamente la caché, la compresión Gzip y otras medidas de optimización (si tu servidor las soporta) sin tener que marcar ninguna opción.

Además las páginas de plugin con funcionalidades de tienda online como “WooCommerce, Easy Digital Download, iThemes Exchange, Jigoshop & WP-Shop” quedan excluidas automáticamente de la caché para no crear errores al cachear carritos de la compra, sesiones de usuarios u otras páginas.

Opciones básicas de WP Rocket

Opciones de la «pestaña Básicos» donde encontramos optimizaciones adicionales del comportamiento de la caché y opciones adicionales de Lazy Load.

LazyLoad – Carga Perezosa: Carga progresivamente las imágenes y/o los Iframes y videos de tu página web.

Con esta opción, el contenido se irá cargando a medida que el usuario se desplace por nuestra página web, para ganar velocidad de carga inicial.

El efecto Lazy load para las imágenes pasa muy desapercibido para el usuario, para los Iframes y vídeos se nota un poco más este efecto pero si utilizas muchos vídeos en tu web mejorara significativamente la carga inicial.

Si quieres ver plugins alternativos de Lazy load puedes leer el artículo: Los mejores plugin de lazy load en WordPress

Caché móvil: Activa la caché para la versión móvil. Es recomendable que actives esta opción si tu web es responsive o utilizas una versión móvil de tu web.

Esta caché solo actúa en los móviles y no en otros dispositivos como tablets.

Al activar la caché para móvil veremos la opción adicional «Guardar separadamente los archivos para dispositivos móviles», esta opción crea archivos separados de la caché para asegurar que funciones y elementos que son únicos para la versión móvil no tengan problemas con la caché normal.

Actívala si utilizas plugins adicionales para crear versiones móviles. Si tienes dudas sobre si deberías activarla o no, actívala.

NOTA: Esta opción puede venir activada por defecto y no se puede desactivar si utilizas plugins como WP Touch o similares.

Caché para los usuarios conectados: Por defecto, la caché está desactivada para los usuarios registrados.

Pero puede ser útil si quieres cachear el contenido para usuarios de foros y comunidades creadas en WordPress.

Y también es útil si tenemos contenido que solo los usuarios registrados pueden ver como cursos privados.

Caché SSL: Activar la caché para las páginas con protocolo SSL. Si nuestra web utiliza el protocolo https esta opción debería estar activada y no se podrá desactivar.

Caché Emoji: Esta opción Reemplaza los emojis (iconos de emociones) predeterminados de WordPress por los del navegador. Si activas esta opción cambia un poco el aspecto de los emoticonos dependiendo del navegador utilizado pero cargan más rápidos.

Contenido incrustado: Desactivar la función WordPress para el contenido incrustado. Con esta opción impedimos que alguien pueda mostrar nuestro contenido a través de una web de terceros. Es útil para reducir peticiones y también si detectamos que alguien está suplantando nuestro contenido mediante iframes o marcos en otras web.

Vida útil de la caché: Podemos elegir cuando la caché se tiene que borrar automáticamente para que se vuelva a generar. Por defecto se borra cada 24 horas pero puedes ajustar este valor dependiendo de tu frecuencia de publicación o si muestras elementos con información externa, como perfiles de Twitter, Facebook, Instagram que quieras que estén actualizados siempre con el nuevo contenido.

Nota: la caché se actualiza total o parcialmente cuando:

• Cambiamos de tema o modificamos sus opciones.
• Creamos o modificamos usuarios.
• Creamos o modificamos menús de navegación o Widgets.
• Creamos o modificamos categorías o etiquetas.
• Creamos o modificamos enlaces o la estructura de los permalinks.
• Cuando guardas opciones en el personalizador.
• Creamos o modificamos artículos o páginas.
• Creamos o modificamos comentarios.

Comprimir Archivos estáticos con WP Rocket

En la «pestaña Archivos Estáticos» encontramos opciones para comprimir archivos y combinarlos.

Minificar archivos: Comprime los archivos y códigos HTML, CSS, JS para reducir su peso y que los navegadores los procesen más rápidamente.

Una vez activadas estas opciones navega por tu web y fíjate en que los Slider, efectos paralax, animaciones, formularios de contacto, la versión responsive y demás elementos funcionan correctamente.

Combinar archivos: Al minificar los archivos WP Rocket divide estos archivos en varios para mejorar la compatibilidad y el rendimiento de los archivos. Con esta opción podemos forzar a que se genere un solo archivo de Google Fonts, CSS o JS más grande.

No se recomienda combinar archivos porque aunque reducen peticiones HTTP es más rápido descargar varios archivos pequeños que uno grande.

Esta opción puede sernos útil, por ejemplo, si queremos reducir las peticiones HTTP y estamos utilizando un tema creado a medida y que utiliza poco CSS y JS.

Si utilizas estas opciones asegúrate de que todos los elementos de la web funcionan correctamente, y además fíjate en que al navegar entre tus páginas el tiempo de carga no sea alto, ya que si tarda unos segundos significa que la descarga de los archivos combinados está ralentizando la navegación de los usuarios.

Si detectas algún fallo dirígete a la sección Solucionar problemas de compresión de archivos al final de este tutorial.

Excluir CSS y JS: Si detectamos que algún elemento de nuestra web se está generando incorrectamente después de minificarlos o combinarlos puedes indicar la URL de su archivo para excluirlo de estas opciones.

Suprimir query strings: Suprimir las query string de los recursos estáticos.

Las query string son información adicional que identifican la versión o variantes de los archivos. Esta información se incluye mediante caracteres especiales en las URL de los archivos JS y CSS de la web.

Con esta opción forzamos a que la información se codifique dentro del nombre del archivo en vez de mostrarla en la URL.

Y de esta manera solucionamos el error “Remove query strings from static resources” que muestra Gtmetrix.

CSS/JS que bloquean la visualización: Podemos cargar el CSS de manera asíncrona y cargar los JS de manera diferida para reducir peticiones HTTP y mejorar las notas de rendimiento paginas como Gtmetrix o Pagespeed insights.

Aunque estas opciones pueden mejorar la puntuación de las herramientas, no mejoraran significativamente la velocidad de nuestra web en la mayoría de casos.

El modo seguro de carga de archivos JS puede intentar cargar el JS de una manera más compatible.

Aun así, en muchos casos no será posible implementar esta medida ya que es muy difícil que los códigos de los temas y plugins se generen y carguen en el orden que deben para no crear errores derivados.

Ruta crítica del CSS: Cuando el CSS se cargue de manera asíncrona puede ocurrir que nuestra web se vea sin estilo durante unos instantes.

Para solucionar este efecto puedes especificar el CSS necesario para visualizar bien el contenido.

Para ayudarte a generar automáticamente las reglas CSS necesarias puedes utilizar la herramienta Critical Path CSS Generator

Estas opciones son avanzadas y para que funcionen correctamente puedes ser necesario editar código.

Opciones avanzadas de WP Rocket

En la «pestaña Avanzados» encontramos opciones avanzadas para excluir elementos de la caché.

Nunca poner en caché (URLs): Si quieres que alguna página no utilice la caché indica su URL. Las páginas del carrito y del pago quedan automáticamente excluidas de la caché para WooCommerce, Easy Digital Download, iThemes Exchange, Jigoshop & WP-Shop.

Nunca poner en caché (cookies): Si quieres que las páginas con alguna cookie en concreta no utilice la caché indica el nombre de las cookies.

Nunca poner en caché (agentes de usuario): Si no queremos utilizar la caché en navegadores específicos indica el nombre del “user agent” del navegador.

Purgar siempre (URLs): Si quieres que la caché de una página en concreto se renueve al actualizar una entrada indica su URL.

Poner en caché los query strings: Hazlo si quieres que las páginas con query strings especiales sean cacheadas. Por lo general no se cachean las páginas con query strings excepto en algunos casos ,ya que WP Rocket lo hace automáticamente.

Opciones para limpiar la base de datos de WP Rocket

WP Rocket también tiene la función de limpiar la base de datos de la basura que vamos generando cuando trabajamos con WordPress.

Es importante mantener una base de datos limpia ya que afecta a la velocidad de la web.

Cuanta más basura tengamos en la base de datos más tiempo le costará a WordPress consultar la base de datos.

Aviso: Asegúrate de realizar una copia de seguridad de la base de datos antes de utilizar estas opciones.

Limpieza de las entradas: Esta opción nos permite borrar de la base de datos las revisiones de los post que se crean cada vez que actualizamos una entrada, las entradas que sean borradores y las entradas de la papelera.

Limpieza de los comentarios: Con esta opción podemos borrar los comentarios marcados como spam y los comentarios descartados.

Limpieza de transients: Los transients son información temporal que utiliza WordPress y los plugin. Esta información temporal se vuelve a generar si es necesaria y expira en un determinado tiempo.

Con esta opción podemos borrar todos los transients para ahorrar espacio en la base de datos.

Limpieza base de datos: Optimiza las tablas de la base de datos.

Limpieza automática: Configura que se ejecuten limpiezas automáticas de la base de datos con las opciones dadas anteriormente.

Precargar la caché de WP Rocket

En la pestaña Precargar de WP Rocket encontraremos opciones para precargar la caché.

Normalmente la caché de una página se genera cuando un usuario ha visitado previamente esa página, es decir, que la caché se activa en la segunda visita del usuario.

Para que la caché esté disponible en la primera visita puedes «precargarla».

Precargar el sitemap: Se trata de un tipo de precarga adicional a la del bot manual o automático que veremos más adelante y está activado por defecto. Con esta opción podemos precargar todas las URL del sitemap.

Tiene la ventaja de que puedes precargar toda o una gran parte de la web, pero el inconveniente de que puedes sobrecargar los recursos de tu servidor.

Al activar esta opción WP Rocket puede detectar los sitemap de los principales plugin de SEO como Yoast Seo o All In One Seo y mostrará opciones para elegir el sitemap fácilmente. Si no lo detecta tendrás que introducir la URL del sitemap en la opción “Sitemaps para precargar”.

Intervalo de rastreo de URL: con esta opción podemos definir cuándo se rastreará el sitemap para realizar una nueva precarga del contenido. Si nuestro servidor tiene recursos limitados tendrás que indicar una frecuencia alta.

Si quieres utilizar un tiempo personalizado que no aparece en las opciones consulta el artículo “Como se precarga la caché” de la documentación oficial donde encontraras un plugin adicional para hacerlo.

Sitemaps para precargar: Puedes introducir un sitemap personalizado indicando las URL de los archivos que quieras que sean precargados.

Robot de precarga: Con esta opción un bot de WP Rocket visitará nuestras páginas para activar la caché y así tener disponible la caché desde la primera visita de los usuarios.

La opción manual activa el botón de Precargar la caché en la barra de herramientas para que seamos nosotros los que llamemos al bot para que realice la precarga.

La opción automática indica al bot que realice la precarga automáticamente cuando modificamos contenido de nuestra página web.

El bot solo precarga ciertas páginas principales o páginas relacionadas entre ellas.

Cuando activamos la precarga desde el botón de la pestaña “herramientas” o la caché caduca, se precarga la página de inicio y todas las páginas y entradas que tengan un enlace en esta página.

Cuando actualizamos una entrada se precarga esa entrada y todo el contenido relacionado desde ella como la página de inicio, categoría, etiquetas y paginación, entre otras.

Precarga de peticiones DNS: La precarga de las DNS sirve para resolver más rápidamente elementos de nuestra web que son dados por servicios externos.

Por ejemplo elementos de terceros como las fuentes de Google o los videos de YouTube que son cargados desde sus propios dominios.

Para acelerar los servicios externos de nuestra web podemos indicar el nombre del domino sin el protocolo de estos elementos.

Ejemplo: //ajax.googleapis.com //fonts.googleapis.com

Puedes ver el vídeo donde se explica cómo puedes configurar la precarga de peticiones DNS.

Opciones de CDN de WP Rocket

Un sistema CDN es una red de servidores repartidos por el mundo donde se copia parte del contenido estático de nuestra página web para poder servirlo a los usuarios más rápidamente por cercanía con el servidor.

Estas redes CDN también cuentan con sus propias opciones de caché y compresión de archivos.

En la pestaña «CDN de Wp Rocket» podemos configurar sistemas de red de distribución de contenidos como CloudFlare o maxCDN.

CloudFlare: Activa una pestaña adicional con las opciones para configurar el sistema CDN de CloudFlare que tiene un plan gratuito.

CDN: Activar Content Delivery Network. Con esta opción se activa la función CDN que cambiará las URL de los archivos estáticos y archivos de medios, CSS y JS por la URL del sistema CDN y que tienes que indicar en la opción “CNAME(S) del CDN:”

CNAME(S) del CDN: En este campo introducimos la URL del alias de dominio que utilizara nuestra CDN. Podemos tener varias CDN que sirvan diferentes archivos.

CDN sin SSL: Desactivar CDN en páginas HTTPS. Si tu red CDN no soporta SSL puedes desactivar la CDN en páginas que se sirvan con SSL.

Excluir archivos: Podemos indicar las URL de los archivos que queramos que no utilicen CDN.

Opciones para CloudFlare en WP Rocket

Al activar la opción “ajustes de CloudFlare” dentro de la pestaña CDN aparecerá la pestaña «CloudFlare» donde tendremos acceso a configuraciones adicionales para esta red CDN.

Cuenta mail CloudFlare: Indicamos el email con el que te registraste en el servicio de CloudFlare.

Clave API global: Indica la clave API de CloudFlare que puedes encontrar en el panel de control de este servicio.

Dominio: Añade tu dominio.

Modo desarrollo: El modo desarrollo desactiva la caché y la minificación propias de la CDN para que puedas ver los cambios mientras desarrollas sin tener que estar vaciando la caché de la CDN.

Ajustes óptimos: Cambia automáticamente varias opciones de Cloudflare y de WP Rocket para mejorar la optimización y la compatibilidad.

• Configura la caché Standard
• Activa la minificación
• Desactiva la función Rocket Loader de CloudFlare
• Configura la caché de navegador a un mes

Protocolo relativo: Si tu servidor no cuenta con un certificado SSL y quieres que el contenido que sirva la CDN sí utilice ese certificado, esta opción te permite rescribir las URL para que se utilice HTTPS en el contenido dado por la CDN si utilizas la opción Flexible SSL de Cloudflare.

Vaciar la caché Cloudflare: vacía la caché de Cloudflare.

Caché Varnish en WP Rocket

Si nuestro servidor utiliza el sistema de caché Varnish dentro de la pestaña Varnish puedes configurar que esta caché se borre cuando lo haga la caché de Wp Rocket utilizando la opción “Sincronizar caché Varnish”

Herramientas de WP Rocket

En la pestaña «Herramientas» encontraremos varias opciones adicionales de WP Rocket y botones para vaciar las diferentes cachés.

Probar versión beta: Si quieres utilizar las versiones de prueba de WP Rocket para probar las funcionalidades de forma anticipada puedes activar esta opción. Las versiones beta del plugin pueden funcionar mal y crear errores.

Vaciar la caché: Vacía la caché del plugin.

Precargar la caché: Precarga la caché de la página principal y de todas las páginas y entradas que tengan un enlace en la página principal.

Purgar OPcache: OPcache es un tipo de caché que se utiliza para los script PHP, de esta manera PHP no necesita volver a analizar los script si ya los ha utilizado. Podemos vaciar esa caché con esta opción si fuera necesario.

Exportar ajustes: puedes descargar un archivo con la configuración de WP Rocket para configurar las mismas opciones en otra instalación de WordPress.

Importar ajustes: Sube el archivo que genera el exportador de opciones para configurar rápidamente WP Rocket.

Vuelta atrás: Actualiza WP Rocket a una versión inferior estable, muy útil si encuentras incompatibilidades con las nuevas versiones del plugin.

Soporte de WP Rocket

En la pestaña “Soporte” puedes contactar con el soporte de WP Rocket a través de este formulario si encuentras un problema.

Habilitar la marca blanca de WP Rocket

Si quieres qué el nombre de WP Rocket no aparezca en las opciones para que nadie sepa que plugin de caché utilizas puedes habilitar la marca blanca.

Esta opción no tiene demasiado sentido porque si inspeccionas el código se puede averiguar que es WP Rocket.

Para que se muestre la pestaña de marca blanca tienes que introducir la siguiente línea en el archivo wp-config.php.

define ('WP_RWL', true);

En esta pestaña puedes modificar el nombre, la URL, la descripción del plugin y del autor.

Como nos indica en rojo, si cambias algo, las pestañas de preguntas frecuentes y soporte se ocultarán.

Verificar que la caché de WP Rocket funciona

Nada más activar WP Rocket la caché debería estar funcionando y podemos verificar que nuestras páginas están siendo cacheadas de varias maneras.

Nota: Antes de la comprobación visita tu web sin estar logueado, en modo incógnito o con el modo de caché activado para usuarios conectados para que se verla firma de caché.

Buscando la firma de WP Rocket: Al inspeccionar el código fuente de nuestra página web desde el navegador deberías ver al final la firma del plugin.

Comprobando los archivos de caché: En algunos casos la firma del servidor puede no mostrarse aunque funcione correctamente. En este caso puedes verificar si los archivos de la caché se están generando.

Para ello mediante el administrador de archivos del servir o por FTP, busca la carpeta wp-content/cache/wp-rocket y dentro tienes que encontrar una carpeta con el nombre de tu dominio que contiene archivos .html que son archivos de caché.

Desinstalar WP Rocket

WP Rocket se puede desinstalar desde la administración de WordPress como cualquier otro plugin o eliminando la carpeta del plugin mediante FTP.

Si lo desinstalas desde el panel de control de WordPress se borrarán automáticamente los archivos que crea el plugin y las reglas que introduce en el archivo .htaccess

En cambio, si lo desinstalas manualmente tendrás que borrar a mano una serie de archivos, una entrada de la base de datos y las reglas del .htaccess que genera el plugin. Puedes encontrar información detallada para eliminar WP Rocket de forma manual.

Solucionar problemas de compresión de archivos en WP Rocket

Si detectas algún problema en la compresión de los archivos, en la mayoría de casos que me he encontrado es la compresión de JavaScript la que da problemas pero también puede ocurrir con la compresión de CSS.

También suele ocurrir si estamos utilizando la opción combinar archivos y utilizamos un tema comercial que contiene mucho CSS y JS.

Existen varias soluciones para estos problemas.

1º Desactiva todas las opciones de archivos estáticos: Pruébalos uno a uno para averiguar si el problema es al minificar HTML, CSS, JS o al combinar los archivos.

Si hay problemas los elementos que más suelen romperse son: Slider, efectos paralax, animaciones, formularios de contacto, la versión responsive.

También puede aumentar en gran medida el tiempo que tarda en generarse una página al navegar por los menús. Este problema sería un síntoma de usar la opción de combinar archivos cuando tenemos demasiado código CSS y JS.

2º Excluir archivos de la compresión: Si un elemento de nuestra web creado con un plugin ha dejado de funcionar correctamente (por ejemplo si ha dejado de funcionar las estrellas de puntuación), puedes excluir el archivo JavaScript del plugin de la compresión.

Primero busca el archivo .JS del plugin o elemento inspeccionando el código desde el navegador y después, exclúyelo de la compresión indicando la URL del archivo desde Archivos estáticos > Excluir JS

3º Utiliza el plugin Autoptimize: En el caso de que los archivos no se estén comprimiendo correctamente o dejen de funcionar puedes intentar usar otro plugin de compresión de archivos como Autoptimize.

Primero desactiva las opciones de “Archivos estáticos” de WP-Rocket e instala el plugin Autoptimize para crear la compresión de estos archivos.

Autoptimize es compatible con WP-Rocket, que te avisara si estas generando la compresión desde este plugin en las opciones de comprimir archivos.

Conclusión

WP Rocket es un plugin fantástico que nos ahorra tener multitud de plugin instalados para implementar las optimizaciones WPO mas utilizadas.

Sobre todo la opción de precachear las DNS de servicios externos, que no lo he visto en ningún otro plugin similar.

Es un plugin que hace que tener una caché implementada no sea una odisea de interfaces espartanas y opciones exageradamente técnicas como estamos acostumbrados con w3 Total Cache o WP Super Cache.

Se agradece, sobretodo por los usuarios medios, aunque los desarrolladores echaran en falta algunas opciones técnicas para personalizar la caché.

¿Qué te parece WP Rocket? ¿Pagarías su precio o utilizarías varios plugin de optimización gratuitos?