La optimización de la velocidad y el rendimiento de un sitio web es esencial para ofrecer una experiencia excepcional al usuario y mejorar el posicionamiento en los motores de búsqueda.

En este tutorial detallado, aprenderemos cómo utilizar WP Rocket, un plugin de caché y optimización para WordPress, para mejorar el rendimiento de tu sitio web y optimizarlo para los motores de búsqueda. Siguiendo este tutorial conseguirás configurar por completo WP Rocket para que tu página web vuele. Vamos a ello.

Introducción a WP Rocket

WP Rocket es un plugin premium para WordPress que está diseñado para mejorar la velocidad de carga y el rendimiento general de tu sitio web.

A medida que tu sitio web crece en contenido y funcionalidades, se vuelve cada vez más importante garantizar que los visitantes puedan acceder a tu contenido de manera rápida y sin problemas.

La lentitud en la carga de las páginas puede llevar a tasas de rebote más altas, lo que significa que los visitantes abandonan tu sitio antes de que tengan la oportunidad de interactuar con él.

Además, los motores de búsqueda como Google han dejado claro que la velocidad de carga es un factor de clasificación, lo que significa que los sitios web más rápidos tienen una ventaja en los resultados de búsqueda.

Puedes obtener WP Rocket directamente desde la página web del proveedor. Si tienes un Hosting WordPress contratado con nosotros, incluye una licencia de WP Rocket totalmente gratuita por cada hosting contratado. Contacta con el soporte técnico y ellos te facilitarán la licencia.

Cómo instalar WP Rocket

En primer lugar, una vez hemos descargado WP Rocket y ya tenemos la licencia del mismo, procedemos a la instalación. Podemos instalar WP Rocket siguiendo estos sencillos pasos:

1. Adquiere y descarga el plugin WP Rocket.
2. Ve a tu panel de administración de WordPress.
3. En el menú lateral, selecciona "Plugins" y luego "Añadir nuevo".
4. Haz clic en "Subir plugin" y selecciona el archivo zip descargado.
5. Activa el plugin una vez que se haya subido con éxito.

Tutorial WP Rocket. Todas las configuraciones.

Una vez ya hemos instalado WP Rocket, podremos acceder a su panel de control. Para ello, dentro del administrador de WordPress, a través del botón "WP Rocket" podemos ir a Ajustes -> WP Rocket, o bien en el sidebar superior, hacer click en el botón "WP Rocket -> Ajustes".

Escritorio

Una vez hecho esto nos encontraremos en el escritorio del plugin. Dentro de WP Rocket nos moveremos utilizando el menú que aparece a su izquierda. Cuando entramos a los ajustes del plugin, nos encontraremos con el escritorio en primer lugar.

En el escritorio nos aparecerá el tipo de licencia, la expiración de la licencia, si tenemos o no una subscripción a un CDN, y una sería de guías y tutoriales para poder utilizar el plugin.

En la parte derecha encontraremos un sidebar de "Acciones rápidas", donde encontraremos las dos acciones que más utilizaremos del escritorio:

• Clear and preload cache. Al hacer click eliminará la caché almacenada y volverá a cargar la página web en caché para mejorar la página web. Esto es muy útil cuando hacemos un cambio en la página, ya que es probable que, debido a la caché, el cambio no sea visible hasta que no hacemos una actualización de la caché.
• Remove Used CSS Cache. Desde hace unas versiones WP Rocket nos permite generar archivos que solo contienen los estilos CSS que utiliza nuestra página web, eliminado todos los demás que no se usan, y de esta forma aumentando la velocidad de carga de forma considerable. Si queremos actualizar estos archivos porque hemos hecho una modificación del CSS, debemos hacer click en este botón.

Ahora que ya tenemos claras las opciones del escritorio, pasamos a ver las principales opciones que nos ofrece este plugin.

Caché

Pasamos a la segunda opción del menú, el apartado "Caché". Aquí principalmente vamos a poder configurar algunas opciones sobre la caché. Ten en cuenta que, una vez activas WP Rocket, ya está funcionando todo el sistema de caché para ordenadores. El resto de opciones que ofrece WP Rocket son opciones para mejorar el rendimiento.

Caché móvil

En el apartado de Caché móvil podemos gestionar la caché para dispositivos móviles. Es posible que tengamos una página web en la que solo queramos que el sistema de caché funcione en ordenador, porque en móvil tenemos una app, o llevamos al usuario a otro dominio... En ese caso, no habilitaríamos la caché para dispositivos móviles.

En el resto de casos, páginas web de negocio, informativas o tiendas online, que sean responsive y que la versión móvil sea adaptable, es decir, que la página web se vaya adaptando al dispositivo, te recomiendo que marques esta opción. Esto aplicará el sistema de caché cuando un usuario navegue por tu página web en un móvil, mejorando sustancialmente la velocidad de carga.

Cuando hagas click en la opción, te aparecerá una nueva opción que permite guardar de forma separada la caché móvil de la caché de ordenador.

Esta opción es interesante cuando tenemos una plantilla diferente para móvil y otra para ordenador, es decir, que nuestra página web no es responsive y utiliza media query para adaptarse.

Si es tu caso, activando esta opción conseguirás cachear los archivos de la versión ordenador y de la versión móvil en directorios separados, mejorando la optimización. Si, por el contrario, tu página web es responsive, y una misma plantilla se adapta a todos los dispositivos, te recomiendo no marcar esta opción, ya que no es necesario guardar los archivos en directorios separados (los archivos de ordenador y móvil son los mismos).

Caché de usuario

La siguiente opción es la caché de usuario, y esta opción es sumamente importante. WP Rocket por defecto no hará funcionar el sistema de caché cuando un usuario ha iniciado sesión en tu página web.

Esto principalmente lo hace para no cachear los cambios que realiza el usuario administrador. Cuando entras a una página web con esta opción activada, puede ser muy frustrante tratar de hacer cambios gráficos en la web y que no puedas visualizarlos debido a la caché.

Entonces, no te recomiendo activar esta opción si tu página web no tiene alguna zona reservada para usuarios registrados. Es decir, si tu página web es una página web informativa, una página web para posicionar, o una página web de negocio, sin posibilidad de que los usuarios se registren e inicien sesión, no deberías activar esta opción.

Sin embargo, si tu página web es una tienda online, o tiene alguna página con acceso restringido solo a usuarios registrados, sí que es muy importante que marques esta opción. Si no la marcas ,lo que puede ocurrir es que tu página web cargue rapidísimo mientras el usuario no ha iniciado sesión, y una vez ha iniciado sesión, funcione mucho más lenta.

Con esto hemos finalizado toda la configuración a nivel de la caché. Ahora pasaremos a revisar otras configuraciones con las que cuenta WP Rocket y que pueden aumentar considerablemente la velocidad de nuestra página web.

Optimizar archivos

La optimización de los archivos es algo fundamental para mejorar la velocidad de carga de una página web. Una página web en WordPress esta compuesta principalmente por tres tipos de archivos: PHP, CSS, y JS.

Los archivos PHP son archivos que se ejecutan a nivel de servidor, por lo que estos se ejecutan antes de que se cargue la página web, y no podemos realizar ninguna optimización a los mismos. Sin embargo, los archivos CSS y JS son los que le dan forma y animaciones a nuestra página web, y estos sí pueden ser optimizados y reducidos de forma considerable.

Optimización de archivos CSS

La primera opción que nos ofrece WP Rocket es la optimización de los archivos CSS. Aquí disponemos de tres opciones que podemos marcar:

Minificar archivos CSS. En cualquier archivo de programación se producen espacios en blanco o saltos de línea. Estos espacios que, puede parecer que no ocupan espacio, realmente dentro del archivo ocupan espacio, ya que el archivo debe guardar donde se produce ese espacio o ese salto de línea.

Minificar es un proceso mediante el cual se eliminan todos esos espacios en blanco y saltos de línea, produciendo un archivo minificado de una sola línea, sin espacios ni saltos de línea.

Este proceso puede reducir hasta en un 50% el tamaño de los archivos, y es fundamental en la optimización de una página web. Por esto mismo, te recomiendo completamente activar esta opción. Notarás el cambio en la velocidad de tu página web.

Combinar archivos CSS. Si utilizas WordPress y una plantilla común, verás que este tipo de plantillas normalmente guardan el CSS en una gran cantidad de archivos. Además, cada plugin que añades trae más archivos CSS que tienen que ser cargados, haciendo que cuando se carga tu página web, el navegador tenga que cargar entre 30 y 40 archivos CSS.

Al activar esta opción, WP Rocket recoge todos los archivos CSS que tiene tu página web, lee su información, y genera un único archivo CSS con todos los estilos recogidos, de forma que en lugar de cargar 40 archivos, solo cargará uno.

En caso de que actives esta herramienta y te de error, WP Rocket nos permite excluir archivos CSS problemáticos. Es decir, si activas esta opción y se te desconfigurar por ejemplo la cabecera, puedes buscar en qué archivos está el CSS de la cabecera tu página web y excluirlos. Así tendrás la optimización sin romper ningún estilo.

Es una gran herramienta para optimizar la carga de la página web, sin embargo, solo te recomiendo activar esta opción si no te funciona la siguiente opción.

Optimizar la entrega del CSS. Esta opción es relativamente nueva dentro de WP Rocket, pero funciona perfectamente. En el mundo de la optimización de páginas web, antiguamente siempre se hablaba del CSS Crítico o Crítical CSS en inglés (si llevas un tiempo seguro que te suena). Esto era el CSS de la parte que el usuario veía primero. Incluso existían herramientas que extraían el CSS crítico y lo cargaban antes (WP Rocket hacía esto antiguamente).

Por suerte ahora todo esto ha evolucionado, y WP Rcoket nos ofrece dos posibilidades:

• Remove unused CSS. Esta opción es sin duda la mejor. Básicamente, WP Rocket analizará nuestra página web, y generará un archivo con todo el CSS que utiliza la página web, eliminando todo el código CSS que no utilice. Normalmente, las páginas web en WordPress utilizan librerías de CSS con muchísimas líneas de código, de las cuales se utilizará un 20%. Con esta opción se reduce muchísimo el tamaño de los archivos, y se mejora la velocidad de carga. Sin duda te recomiendo que marques esta opción.
• Load CSS asynchronously. Esta opción es más antigua que la anterior, y lo que hace es que carga el CSS de forma asíncrona, es decir, primero cargará el HTML de tu página web, y posteriormente el CSS. A mi personalmente esta opción no me gusta nada, ya que mientras la página web carga verás solo el HTML si ningún color ni forma, creando una impresión bastante mala.

Además, las opciones de entrega de CSS cuentan con un campo para excluir archivos CSS de la optimización. Igual que antes, si detectas que algo se desconfigura al aplicar las configuraciones, puedes detectar el archivo CSS que contiene sus estilos y añadirlo en el campo, de esta forma ese archivo cargará de forma normal y no te dará problemas.

Optimización de archivos JS

Una vez ya hemos optimizado los archivos CSS, podemos pasar a optimizar los archivos JS. Algunas de las optimizaciones de archivos JS son las mismas que las de los archivos CSS. A continuación las veremos en detalle.

Minificar archivos JS. Ahora ya sabes lo que es la minificación, así que esta opción realiza la eliminación de espacios y saltos de línea de los archivos JS para reducir su espacio. Te recomiendo activar esta opción.

Combinar archivos JS. Igual que en el caso anterior, lo que realiza esta opción es agrupar todos los archivos JS en un único archivo, optimizando así la velocidad de carga. No te recomiendo que la actives, ya que WP Rocket nos ofrece opciones mejores a continuación.

Cargar archivos JS de manera diferida. Esta opción nació para solucionar el famoso problema de render blocking que da PageSpeed cuando el JS bloquea la carga de la página. Básicamente, esta opción, lo que hace es primero cargar el HTML y el CSS de la página, y una vez está cargado y el usuario puede ver la página, carga el JS para no bloquear la carga.

Te recomiendo que actives esta opción, pero después de activarla debes comprobar que tu página web funcione correctamente. Es probable que después de activar esta opción los formularios no envíen, el javascript personalizado no te funcione, o el banner de cookies no aparezca. Debes revisar detalladamente si produce algún error en tu página web.

En caso de detectar algún error, tienes que buscar el archivo .js que contiene las funciones que están siendo bloqueadas, y añadirlo al campo que aparece a continuación para excluirlos. Esto arreglará el problema y tu JS estará completamente optimizado.

Retrasar la ejecución de JS. Y ya la última opción de la optimización de los archivos. Las funciones de javascript, como normalmente son funciones visuales de la propia página, no son funciones necesarias para la carga inicial de la misma.

Es por esto que esta opción lo que hace es retrasar la carga del JS hasta que el usuario hace alguna acción, como por ejemplo un click o un Scroll. De esta forma, se evita cargar el JS hasta que realmente hace falta.

También te recomiendo activar esta opción, pero como te comentaba antes, después de activarla debes revisar a fondo tu página web, ya que puede ser que algún plugin necesite de esos archivos JS que vas a bloquear para funcionar correctamente.

Otra de las funciones que se verá afectada cuando actives esta opción es todo el tema de analítica, ya utilices Google Analytics o cualquier otro. Hasta que el usuario no realice una acción en tu página, estos Scripts de analítica no se ejecutarán, y por lo tanto su visita no contará.

WP Rocket ha tenido en cuenta todo esto, y nos da un listado de servicios y Plugins que podemos excluir de esta optimización. Revisa tu página web, comprueba los errores, y marca los que necesites.

Si has llegado hasta aquí, ¡enhorabuena! Ya has optimizado el caché y los archivos de tu página web. Ahora vamos a ver algunas opciones más de optimización a nivel de imágenes y base de datos que ayudarán a mejorar la carga de tu página web.

Medios

Las imágenes son uno de los principales dolores de cabeza cuando queremos optimizar una página web, ya que son archivos relativamente pesados que tiene que cargar el usuario.

WP Rocket nos ofrece algunas opciones para mejorar la carga de nuestra página web cuando tenemos imágenes, pero es muy improtante que, antes de subir una imagen a WordPress, tomemos ciertas precauciones:

1. La imagen debe tener el tamaño exacto de donde va a ser colocada. Si vamos a colocar un banner en un espacio que mide 1920x300, es importante que la imagen también mida 1920x300. Si mide más, estaremos cargando una imagen más grande de lo necesario, y, por lo tanto, retrasando la carga de la página web. Si mide menos, la imagen tendrá que ser escalada, y en consecuencia se pixelará.
2. Debes subir la imagen optimizada. Cuando descargamos imágenes de un banco de imágenes, estas imágenes normalmente son muy grandes y muy pesadas porque tienen mucha calidad. Una página web no necesita imágenes de altísima calidad, es más, ese tipo de imágenes perjudica gravemente la velocidad de carga. Sube las imágenes ya optimizadas y reducidas.

Una vez has cumplido estas precauciones, vamos a ver que opciones nos da WP Rocket para mejorar la carga de las imágenes.

LazyLoad

El LazyLoad es una carga retardada de las imágenes, es decir, las imágenes no se cargan hasta que el usuario navega por la sección donde se encuentran las imágenes. El LazyLoad también es aplicable a iframes y videos, de forma que estos no se cargan hasta que el usuario no navega por esa sección.

Esta opción es muy interesante y te recomiendo que la actives, ya que no tiene ningún sentido cargar las imágenes del pie de página de nuestra web, si el usuario acaba de aterrizar y todavía está viendo la cabecera. Actívalo tanto para imágenes como para vídeos.

Dimensiones de imagen

Esta opción es un poco más difícil de entender. Si en nuestro código una image no tiene especificado su tamaño, es decir, no tiene las etiquetas de html width y height, lo que ocurre es que el navegador cuando se la encuentra no sabe exactamente que tamaño va a tener esa imágen, por lo que tiene que preguntarle a su contenedor cuanto ocupa, para poder calcular el tamaño de esa imagen. Esa consulta adicional provoca lentitud en la carga de la página web.

WP Rocket nos da la opción de añadir el tamaño de las imágenes que faltan activando esta opción. A mi personalmente esta opción me ha dado algún que otro dolor de cabeza, porque hay veces que WP Rocket no calcula bien el tamaño de las imágenes, y te las deforma. Yo personalmente no lo suelo activar, pero si te recomiendo que lo pruebes, lo actives y veas si te ha deformado alguna imagen de tu página web. Si todo está en orden, puedes dejarlo activado.

Precargas

Una precarga básicamente es adelantarte a lo que el usuario va a hacer, es decir, precargar los archivos de las páginas que el usuario puede navegar a continuación de la actual. Las precargas se hacen con base en el sitemap del sitio y con base en los enlaces de la página web.

Es decir, si el usuario está en la página principal de tu web, y tienes un enlace hacia la página de "Contacto", WP Rocket hará una precarga de todos los archivos JS, CSS y la Caché de esa página, por si el usuario va hacia allí en su siguiente acción, de esta forma esa página ya estará precargada y cargará muchísimo más rápido.

Te recomiendo activar todas las precargas, tanto las de caché como las de enlaces, DNS y fuentes. No supondrá una mejora significativa en la carga de la página, pero si que verás ese plus de velocidad gracias a la precarga.

Reglas avanzadas

El apartado de reglas avanzadas de WP Rocket nos permite especificar algunos archivos, URLs, cookies, o caché que queramos que sean excluidos del sistema de forma permanente. Este apartado está pensado para la resolución de problemas en el rendimiento una vez hemos activado WP Rocket.

Personalmente, solo en contados casos he necesitado configurar ninguna regla avanzada en WP Rocket, por lo que no creo que a ti te hagan falta este tutorial. De todas formas, si tienes dudas, puedes ponerlo en los comentarios e intentaré ayudarte.

Base de datos

La base de datos es el almacen de WordPress, es donde están almacenados los artículos de una tienda, las entradas, las páginas, los comentarios.. Todo.

WordPress para su correcto funcionamiento almacena muchos datos que no son necesarios, como pro ejemplo revisiones de entradas, comentarios de Spam, borradores automáticos, transients.. Toda esta información está ocupando espacio en tu base de datos, y cuantos más datos tiene la base de datos, más le cuesta a tu página web encontrar la información en ella.

Por esto te recomiendo que periódicamente hagas una limpieza de la base de datos (haciendo una copia de seguridad primero, por supuesto) para limpiar todos esos datos que están almacenados y no son necesarios.

WP Rocket nos da la opción de programar una limpieza de la base de datos de forma automática, pero yo no te lo recomiendo, ya que puede que cuando haga la limpieza se rompa algo y no tengas disponibilidad para arreglarlo. Cuando se trata de eliminar cosas, mejor tenerlo todo bajo control.

CDN

Un CDN o Content Delivery Network es un sistema de servidores pensado para acelerar la carga de tu página web. WP Rocket ofrece su propio CDN llamado RocketCDN con un precio de 8$ al mes.

El uso de un CDN debes valorarlo dependiendo de cada página web. Yo he utilizado CDN en algunas páginas web con mucho tráfico, mientras que en otras con menos tráfico no me ha supuesto una mejora.

La ventaja de utilizar RocketCDN es que está completamente integrado con WP Rocket, no hay que realizar ninguna configuracióna adicional, WP Rocket se encarga de todo.

Contratar o no un CDN ya es algo que hay que valorar dependiendo del tráfico y el rendimiento de la página web.

Heartbeat

La API Heartbeat es el corazón de WordPress, permite comunicarse con el navegador y ofrece muchísimas opciones fundamentales en el Backend de WordPress, como por ejemplo los autoguardados o la detección de errores. Hablaremos de Heartbeat en un post dedicado únicamente a ello.

Ahora mismo, simplemente que sepas que Heartbeat por norma general puede consumir muchos recursos, y WP Rocket nos permite limitar los recursos de Heartbeat para aumentar el rendimiento de nuestra página web.

Te recomiendo activar la opción de "Controlar Heartbeat" y jugar un poco con los parámetros de reducción de actividad de cada una de las opciones. Esto es completamente adaptado a cada página web y los recursos que consuma, por lo que no te puedo decir una configuración exacta para tu página web. Debes probar y dar con la configuración adecuada.

Add-ons

WP Rocket tiene compatibilidad con otros plugins y sistemas de optimización, como por ejemplo en servidores Varnish o si utilizas un proxy inverso como Cloudflare. Te recomiendo que revises estas opciones y las actives o desactives dependiendo de si utilizas alguno de estos servicios.

Pruebas de Velocidad y Rendimiento

Si has llegado hasta aquí, ¡tu página web tiene que volar! Si has aplicado todas las opciones recomendadas en este tutorial, deberías de notar la mejora de velocidad, así que es hora de medirla.

Realiza pruebas de velocidad utilizando herramientas como Google PageSpeed Insights, GTmetrix o Pingdom. Esto te ayudará a medir el impacto de las mejoras y a identificar posibles áreas de mejora que hayamos podido pasar por alto.

¡El 100/100 de Google PageSpeed es posible! Aunque te recomiendo que no te obsesiones con ello. Con obtener una nota superior a 90 es más que aceptable y tu página web cargará superrápido.

Beneficios de la velocidad de carga para el SEO

La velocidad de carga de un sitio web es un factor crucial en el SEO. Los motores de búsqueda favorecen los sitios que ofrecen una experiencia de usuario rápida y fluida.

Al implementar las optimizaciones de rendimiento proporcionadas por WP Rocket, puedes mejorar la velocidad de tu sitio y, en consecuencia, aumentar tus posibilidades de posicionamiento más alto en los resultados de búsqueda.

Además, la velocidad de carga afecta en otros muchos factores que afectan al SEO, como la tasa de rebote. Si una página web carga muy lenta, es muy probable que el usuario abandone la página web.

Conclusiones

WP Rocket es una herramienta poderosa para optimizar la velocidad y el rendimiento de tu sitio web WordPress.

Si has implementado todas las opciones que hemos explicado en este tutorial, estoy seguro de que habrá mejorado la velocidad de tu página web, mejorando todo lo que ello conlleva: menores tasas de rebote y mejor posicionamiento en los motores de búsqueda.

Si tienes un Hosting WordPress contratado con nosotros, recuerda que tienes la licencia de WP Rocket incluida. Y si tienes algún problema con la optimización de tu página web, contacta con el equipo de soporte técnico y te ayudaremos en la optimización de tu página web.