Tutorial de WP Rocket para optimizar la velocidad web

Cada vez es mayor el peso que tiene la optimización de la velocidad de carga en su influencia en los rankings de los buscadores y por supuesto en la experiencia del usuario con nuestra web. En el ecosistema WordPress, han convivido durante años distintos plugins como WP Super Caché, W3 Total Caché, Swift Performance o WP Rocket.

De este último hemos querido hacer una guía completa para que no te pierdas en la multitud de sus opciones y tengas el mejor rendimiento en la velocidad de carga de tu web. ¡Vamos allá!?

¿Qué es WP Rocket?

WP Rocket es un plugin que nació como solución para las diferentes optimizaciones de la caché en WordPress. Actualmente es mucho más y no solo podemos optimizar caché, sino prácticamente todo lo relacionado con el rendimiento en la optimización de carga de la web. ?

Para poder demostrarte su impacto, mira el rendimiento de nuestra propia web CON o SIN WP Rocket:

¿Por qué utilizar WP Rocket?

Aunque hemos dicho que existen otras alternativas para la optimización de WPO, y cada uno es libre de utilizar el que considere oportuno, en nuestro caso tenemos especial predilección por WP Rocket. Su interfaz intuitiva a un golpe de check, las múltiples opciones que nos brinda en configuración de caché y en cargas de los recursos,  hace que entre todas las opciones WP Rocket sea la preferida.

Menú Principal de WP Rocket

Dando por hecho que no hemos tenido ningún problema para instalar WP Rocket, comenzamos con la explicación de su su interfaz y las diferentes opciones para realizar la optimización.  Al pulsar sobre la pestaña de escritorio se nos muestra esta pantalla:

Un mensaje de bienvenida y opciones que en un principio podremos dejar sin actuar en ellas pero que vamos a explicar.

Mi Cuenta

Si has adquirido WP Rocket la casilla «Ver mi cuenta» te llevará a la página de usuarios de WP Rocket para que una vez allí puedas completar y consultar todo lo referente con tu perfil de usuario: Datos, facturación, etc…?

RocketCDN

RocketCDN, es un servicio de CDN que ofrece desde hace relativamente poco WP Rocket. El objetivo, es poder facilitar las herramientas necesarias para lograr el mejor rendimiento sin tener que buscar soluciones fuera del plugin. Existen otros servicios CDN muy populares como Cloudflare o Amazon CloudFront e igual de eficaces.

Mi estado

Dentro de esta opción tenemos dos conmutadores para habilitar:

• Rocket Tester: es el programa de mejoras WP Rocket para probar sus versiones BETA. Tienes que ponerte en contacto con ellos a través de un email.
• Analíticas de Rocket: Aceptas compartir datos de tu rendimiento del wordpress de forma anónima con el equipo de desarrollo para ayudar a mejorar WP Rocket.

Aquí hay poco que decir, esto es una decisión personal que no debe afectar al rendimiento.

Configuración de la Caché en WP Rocket

Es el momento de meternos con las opciones de configuración y comenzamos con la de caché:

En la segunda pestaña del plugin, podemos ver que opciones de caché nos ofrece. Recordemos que en WP Rocket estamos optimizando la caché de página y como veremos ahora, también tenemos una opción para los usuarios logueados, pero hay que tener cuidado con esta opción.

Caché móvil

Normalmente, cuando se habla de móvil también se incluyen las tablets, pero en esta ocasión solamente hablamos de dispositivos móviles. WP Rocket detecta a través del user agent que estamos navegando desde smartphones.

Esta opción siempre la activaremos, ya que por norma general los diseños de desktop y móvil son diferentes, a menos que no tengamos una versión responsive esta opción siempre estará habilitada. Para tenerlo claro, ¿Por qué íbamos a querer que nos entregaran 2 versiones de la cache si el diseño fuera el mismo? Es decir, si no tuviéramos versión móvil, no querríamos que se tratara de forma diferente esta caché ¿Verdad? ?

Es en este punto donde se añade una excepción. Cuando tenemos una versión móvil con recursos o elementos que solo se carga en esa versión, guardaremos archivos por separado.

Ejemplo: 

• Tenemos una publicidad que en móvil carga un JS que en la versión desktop no lo tiene.

En este caso sí guardaríamos por separado los archivos para móviles.

Caché de Usuario

La caché de usuario es una opción que nos facilita WP Rocket para aquellos usuarios que navegan logueados.

Activando esta opción, podremos ofrecer una versión de caché individualizada para cada caché. Lo mejor es habilitarlo si se loguean, pero hay que tener un especial cuidado qué páginas guardan caché y cuáles no, porque si el usuario mete datos personales (por ejemplo datos bancarios) guardarlo en caché nos podría causar problemas legales.

¿Cómo excluir que se cachee una página?

En el caso de querer evitar problemas de este tipo,  lo mejor es ir directamente a la página que queremos excluir y en las opciones de WP Rocket (sidebar o parte inferior) seleccionamos «nunca poner en caché esta página» .

Vida útil de la caché

En esta parte solo tenemos que indicar qué tiempo queremos de duración en los archivos que se generan de caché. Es decir, que WP Rocket genera un archivo guardando la versión de tu página, y éste archivo será el que entregue al usuario cuando acceda a la web.

A través de un administrador de procesos (CRON), los archivos generados con más duración de la indicada, se borrarán y se crearán unos nuevos.

Consideraciones a tener en cuenta

WP Rocket ya tiene en cuenta ciertos procesos para borrar y generar nuevos archivos de caché y son los siguientes:

• Generación de nuevas entradas, páginas, categorías, taxonomías  o editados
• Generación y edición de nuevos módulos, witgets o cualquier elemento de la web
• Cuando se cambien configuraciones de WP Rocket que afecten al frontend.

Por lo demás, debes tener en cuenta que el almacenamiento de los archivos de caché ocupa un espacio en tu servidor  y este espacio es limitado. También es recomendable ir borrando la caché desde WP Rocket para que se actualice y no se queden archivos que ya no son necesarios.

Como tiempo puedes dejar el que viene predefinido.

Optimización de archivos en WP Rocket

Después del breve paso por la configuración de la caché, es el momento de trabajar la optimización de archivos. La optimización de archivos se hace para aligerar la carga y renderizado del HTML ¿Cómo podemos trabajar esta optimización?

De varias maneras:

• Aligerando los pesos de los archivos
• Eliminando archivos no necesarios y
• Ejecutando archivos progresivamente según son necesarios.

Archivos CSS

Los archivos CSS son los encargados de la parte visual de la web. Las hojas de estilo que dan forma, color y estilo a nuestro WordPress. En este aspecto un diseño atractivo puede que no sea un diseño optimizado, porque el diseñador a la hora de construir los CSS no haya seguido una serie de reglas básicas de optimización.

Entre los problemas más comunes que nos solemos encontrar con las hojas de estilos son:

• Archivos CSS pesados
• Archivos CSS que se cargan en páginas que no utilizan esos estilos
• Archivos CSS mal construidos
• Cargar demasiados CSS externos
• Utilizar @import para traer hojas de estilos externas

En fin hay un mundo de prácticas que se suelen utilizar que no son aconsejables para la optimización de un buen diseño pero vayamos a lo que nos ofrece WP Rocket.

Minificar archivos CSS

Esta opción pretende reducir el peso de los archivos CSS eliminando los espacios y los salto de línea. WP Rocket lo implementa activando la casilla.

Consejo SEO Alive:  Siempre que realicemos una acción conviene probar a cargar la web para ver si todo está correcto, hazlo en modo incógnito del navegador.

El proceso está representado en la siguiente imagen extraída de la herramienta minifier.org

Combinar archivos CSS

Esta funcionalidad realiza una especie de «copia y pega» del código de un CSS en otro para evitar que se carguen varios CSS y tener uno solamente.

Lo recomendable es ir haciendo pruebas porque depende mucho de cómo se haya desarrollado el theme, porque si yo tengo un archivo CSS que solo se carga en una tipología de página, lo que no quiere es que ese código se cargue en un único archivo en todas las páginas.

Lo ideal es cargar el código que utilice la URL. Marca la casilla y prueba a través de alguna herramienta tipo GTMETRIX si has mejorado la velocidad de carga.

El beneficio de combinar archivos CSS es reducir las peticiones al servidor. ?

Optimizar la carga del CSS

WP Rocket, se ha ido actualizando teniendo en cuenta las recomendaciones que nos indica las distintas herramientas de Google para la optimización de la velocidad de carga. Si ya hemos tenido experiencia con estas herramientas, seguramente nos habremos encontrado el aviso de «Eliminate render-blocking resources», al activar este check evitamos que el CSS bloquee la carga haciendo que este se cargue de forma asíncrona.

Es decir, que el renderizado del HTML no se detiene al tener que descargar el archivo CSS, éste archivo se carga en un segundo plano evitando que el proceso de carga se detenga. Así que conviene activarlo.

Archivos JS (Javascript)

El Javascript ha sido uno de los grandes problemas que se ha encontrado Google a la hora de procesar el HTML, sin entrar mucho en profundidad con este tipo de lenguaje, WP Rocket ha diseñado 5 acciones básicas a la hora de optimizar este tipo de archivos. ¡Vamos a verlas!?

Eliminar jQuery Migrate

jQuery Migrate es una librería javascript que permite la compatibilidad del código jQuery, desarrollado para versiones de jQuery anteriores a la 1.9. Esta librería viene de modo nativo en WordPress pero prácticamente tiene utilidad (puede que algunos plugins sí la necesite).

Con esta acción queremos evitar una petición innecesaria y una carga de un JS que no se va a utilizar. ¡Desactívala y navega por tu web para ver si todo está funcionando correctamente! ?

Minificar Archivos JavaScript

Al igual que lo explicado con los archivos CSS esta acción se aplicaría sobre los archivos JS, reduciendo ligeramente el tamaño de los archivos JS.

Combinar los archivos JavaScript

Otra acción similar al módulo de optimización CSS. Recordad que cuando activemos estas casillas debemos comprobar si todo está funcionando como antes.

Cargar archivos JavaScript de manera diferida

El check en esta acción realiza dos mejoras en el rendimiento:

1. Añade el atribudo «defer» en los JS para evitar que el renderizado del HTML se pare por la carga de un JS. Con esta acción se descarga en paralelo y se ejecuta al final del procesado del HTML.
2. Mueve el JS que bloquea el renderizado inicial.

WP Rocket nos avisa de que este tipo de activaciones puede causar problemas, por este motivo introduce un modo seguro para evitar problemas de carga de elementos indispensables para la visualización correcta de la página.

Retrasar la ejecución del JavaScript

Otra opción para retrasar la ejecución del JavaScript que no es imprescindible hasta que el usuario interactúe con la página. Este acción no parece muy importante pero sí que nos hace ganar un tiempo para que la carga se realice más rápidamente. La interacción puede ser un click, scroll, movimiento del ratón…

Optimización de Medios

En esta pestaña, abarcaremos la optimización de elementos clave en los primeros pasos de la optimización WPO. Hablamos de imágenes, videos, iframes y elementos que vienen incorporados en WordPress cuya funcionalidad es, al menos, cuestionable.

Lazyload

Una acción indispensable en toda optimización de la velocidad de carga. La función Lazyload produce que los elementos como imágenes, videos e iframes no se carguen hasta que sean imprescindibles en la visualización.

Os pongo un ejemplo. A medida que vamos haciendo «scroll», las imágenes se van cargando. Imaginad lo que sería la carga de esta página si se cargaran 30 imágenes en un primer momento, imagines que no las está viendo el usuario en un primer momento.

Emoji

Los navegadores ya incorporan sus propios emojis por lo que nos podemos ahorrar esa petición que se realiza si no accionamos este check. Mi recomendación es que la activéis.

Contenido Incrustado

Evita que otras personas incrusten contenido de su sitio (embebed) y también que puedas incrustar contenido de otros sitios no permitidos. Se reduce las peticiones que se realizan con este JS.

Compatibilidad WebP

El WebP es un nuevo -relativamente- formato que introdujo Google hacia 2010, para la compresión con pérdida de gráficos de 24 bits en la web, mejorando la disposición de estos recursos a la hora de agilizar su carga.

Actualmente no todos los navegadores la soportan por lo que tendrás que tener cuidado y conocer qué navegador usan tus usuarios a la hora de trabajar con este formato. Habilita esta opción si trabajas con imágenes WebP.

Configuración de la Precarga de Caché

Hay que entender bien cómo se genera los archivos de caché de WP Rocket para entender la función de Precarga.

Cuando un usuario visita por primera vez una página de nuestro sitio, es en ese momento cuando se cachea la página y se genera un archivo cacheado que será entregado a los usuarios posteriores. Sucede del mismo modo cuando expira la caché (el tiempo que hayamos determinado) y se elimina la versión cacheada o eliminamos nosotros la caché de todas nuestras URLs.

Precargar Caché

Activando la opción de Precarga lo que haremos es cargar una versión previa cacheada para que hasta el primer usuario tenga una versión más rápida de nuestro site. Esta acción se realiza a través de los enlaces del sitemap por lo que necesitaremos un sitemap.

El sitemap es un archivo generado donde se muestran las urls de nuestro sitios, con plugins como «Rank Math» o «Yoast» podemos generarlo fácilmente. Si quieres ver cómo hacer un sitemap con Rank Math aquí te lo enseñamos.

Precargar Enlaces

Esta es una función que hay incorporado WP Rocket en las última versiones. El objetivo es anticiparse a la carga de las «páginas siguientes que va a visitar el usuario» al pasar por encimar el cursos se realiza la precarga de la página por si el usuario clica en el enlace.

WP Rocket ha adoptado esta función que ya venían haciendo plugins concretos como «Flying Pages» que mejoran la fluidez en la navegación dentro de la propia web  (experiencia de usuario). Eso sí, esto no es un factor de mejora en tiempo de carga y no veras la mejora en las métricas de las herramientas de auditoria de WPO.

Precargar de Peticiones DNS

La precarga de peticiones DNS viene muy bien cuando utilizamos recursos de terceros como Youtube, Facebook, fuentes o iframes cuya petición hacemos frecuente.

Cuando realizamos cualquier conexión en Internet, se realiza una petición de DNS que tiene que ser resuelta y enviada al servidor, esto tiene una duración que podemos mejorar si añadimos las URLs de los recursos necesarios en este cuadro que nos facilita WP Rocket.

Como vemos en el ejemplo, solo es necesario utilizar el nombre del dominio //youtube.com //facebook.com

La resolución de las DNS tiene un tiempo aproximado de 20 a 120 milisegundos según nos indica GTMETRIX el navegador no descargará nada del host hasta que este proceso se complete.

Precargar Fuentes

La precarga de las fuentes requiere un paso previo, y es el de descargar las fuentes y tenerlas en nuestro servidor. Una vez en él podremos hacer la misma acción que hemos hecho con la precarga de la caché, haciendo una versión mucho más rápida del archivo de fuentes y facilitándosela al usuario cuando se conecte a nuestra página.

Una vez alojadas las fuentes, indicaremos a WP Rocket la ruta exacta de las fuentes utilizadas. Se recomienda no abusar de distintas fuentes en nuestras páginas porque requieren distintas descargas. También indicar que las peticiones al servidor se realiza con las distinta variaciones de la fuente, me explico:

• Fuente en negrita –> 1 petición
• Fuente subrayada –> 1 petición
• Fuente en Mayúsculas –> 1 petición

Configuración de las Reglas Avanzadas de WP Rocket

Nunca poner en caché estas URLs

Hay ciertas URLs que por su singularidad no queremos que se guarde una versión en caché. Desde esta pestaña WP Rocket nos facilita introducir una lista de URLs que nunca queremos que se guarden en caché.

Nunca poner en caché estas cookies

WP Rocket, nos da otra herramienta más de control a parte de hacerlo por las URLs. Muchos plugins trabajan con sus propias cookies o incluso podemos instalar las nuestras propias para identificar a ciertos usuarios, hay muchas formas de utilizar estos pequeños archivos.

Con WP Rocket podemos dejar de cachear URLs identificadas por el id de la cookie, una vez descargadas en el navegador del usuario, así personalizar más el tipo de URLs que queremos que se cacheen.

Nunca poner en caché estos agentes de usuario

El agente de usuario o user agent es un campo descriptivo dentro del protocolo HTTP, para dar información del dispositivo que está realizando una petición. Nosotros conociendo esta información podemos evitar que se entreguen páginas cacheadas para estos user agent.

Por ejemplo uno de los user agent de google es Googlebot pues indicándolo en esta parte de la web, cada vez que acceda a nuestra web le ofreceremos las páginas sin cachear.

Purgar siempre estos URLs

Esta opción es muy interesante para un tipo de URL que, por ejemplo, te interesa que siempre se elimine su archivo de caché cuando se actualice.

Por ejemplo tengo unas URLs de resultados deportivos y lo que no quiero es entregarle al usuario una versión cacheada, ya que los resultados se actualizan con mucha frecuencia.

Poner en caché estos query strings

Las query string o cadenas de consultas podemos decir que son datos que se envían en el momento que se hace un requerimiento, petición o solicitud a una página web a través de la URL.

Se suele identificar por el símbolo de interrogación «?» y como norma general WP Rocket no cachea este tipo de URL. Nosotros en esta opción podemos forzar a que si lo haga.

Configuración de base de datos con WP Rocket

Como hemos dicho en repetidas ocasiones durante el artículo, WP Rocket ha dejado de ser un plugin de caché para convertirse en un plugin de optimización en la velocidad de carga de nuestra web. En esta parte de configuración podremos profundizar en la optimización de la base de datos.

A medida que vamos trabajando en nuestro contenido dentro de WordPress, generamos otro tipo de información que no es útil y perjudica al rendimiento de nuestra web. Para ello, WP Rocket nos facilita esta herramienta para hacer una limpieza más o menos profunda.

Limpieza de entradas

Como vemos en la imagen existen 3 elementos que pueden estar ocupando espacio en la BBDD sin que nos interese. Cuando actualizamos un contenido se guarda una versión anterior, también se genera un borrador automático de lo que estamos editando y las entradas descartadas.

Si eliminamos estos elementos aligeraremos espacio en nuestra BBDD.

Limpieza de comentarios

Esta parte es importante porque a veces se nos llena la BBDD de comentarios «spam» de ahí que WP Rocket haya introducido esta opción para limpiar este tipo de elementos.

Limpieza de Transients

Limpieza de la Base de Datos

Configurar CDN con WP Rocket

Antes de ponernos a profundizar sobre cómo configurar los CDN con WP Rocket, quiero explicar qué es y por qué se utiliza un CDN?

¿Qué es un CDN?

Un CDN (Content Delivery Network) es un servicio que tiene como objetivo mejorar la velocidad de transferencia del contenido al usuario. Para ello realiza un red de distribución del contenido en diferentes servidores por el mundo para acortar los tiempos en la petición del recurso por parte de un usuario. Es decir si el usuario se encuentra en Brasil un CDN le ofrece el contenido alojado de un servidor más cercano que el del propio alojamiento web.

Imágenes extraídas de la página de WP Rocket

¿Cómo funciona un CDN?

El funcionamiento se realiza a través de estos otros servidores que guardan una copia en caché de la página web y cuando el usuario pide este contenido / recursos es un servidor más cercano el que realiza la transferencia.

Este tipo de servicios son muy útiles cuando se dispone de un contenido pesado como imágenes, audios, video y/o muchas visitas. Si en un principio tienes un sitio web con pocas visitas no deberías preocuparte por este aspecto.

RocketCDN

WP Rocket nos ofrece la posibilidad de contratar su CDN a un precio de 7,99 dólares al mes menos de 7 euros.

CDN

Cuando contratamos un CDN se nos da la información para poder utilizarlo. Uno de estos elementos que nos facilitan es el CNAME aunque de no dárnoslo podemos obtenerlo.

El CNAME es un tipo de registro DNS que asigna un nombre de dominio de origen a un nombre de dominio de destino

Para utilizar esta función solo tendremos que indicar ese CNAME y decirle para qué archivos lo queremos.

Excluir archivos del CDN

La siguiente opción como era de esperar es para excluir aquellos archivos que no queremos que pasen por en CDN.

Optimización de la función Heartbeat en WordPress

El heartbeat de WordPress es una transferencia de datos de control para establecer la comunicación entre el backend y el frontend del WordPress y el servidor. Este tipo de proceso puede ser una de las causas por las que se experimente lentitud en tu WordPress.

Entre las acciones que se pueden limitar están:

• Autoguardado y revisiones en el editor del post.
• Notificaciones en el panel de administración de WordPress.
• La información de quién está editando.
• Los datos en tiempo real.

Si nuestro WordPress funciona correctamente no recomiendo hacer nada en este punto pero si notamos lentitud podemos probar a limitar la actividad en las diferentes opciones.?

Configurar Add-ons de WP Rocket

Hay ciertos elementos como los scripts de Google Analytics y Facebook, que simplemente activándolos en esta parte de la configuración podemos obtener una versión de caché y mejorar el rendimiento. Esta acción, viene a responder directamente a una de las peticiones que nos suele indicar en las auditorias de velocidad de carga como Pagespeed «Leverage browser caching».

Optimización de Imágenes

La optimización de imágenes es un proceso que por su complejidad podría tener su propia guía. WP Rocket, ofrece un plugin independiente para trabajar estos recursos. Desde WP Rocket podemos acceder a la descarga de su versión «Free».

Herramientas WP Rocket

Las configuraciones de WP Rocket pueden ser guardadas e importadas para evitar volver a tener que dedicarle un tiempo a este proceso. También nos da la opción de hacer un «Rollback», es decir un paso atrás en cuanto a la versión instalada.

Tutoriales WP Rocket

Para finalizar esta guía de WP Rocket, el propio plugin facilita una serie de vídeos dando información de las diferentes acciones que se realizan y cómo llevarlas a cabo.

Conclusiones

Como habrás visto WP Rocket es más que un plugin de caché, disponemos en nuestra mano un suite completa para optimizar la velocidad y el funcionamiento de nuestra web, así que ahora solo nos queda probar las diferentes opciones. ¿A qué esperas para hacer que tu WordPress vuele?

¿Conocías WP Rocket? ¿Has podido mejorar tu rendimiento con esta guía? ¿Tienes alguna duda? ¡Te esperamos en los comentarios!