Aprende Cómo Configurar WP Rocket

1. Instalar WP Rocket

Lo primero que debes hacer es comprar y descargar el plugin. Para ello, ingresa en la página de a WP Rocket, adquiere la suscripción, descarga el plugin e instalalo en tu sitio web.

Tip: Puedes obtener un 10% de descuento si te suscribes a la lista de correo electrónico de WP Rocket en este enlace de descuentos.

Lo siguiente que debes hacer es medir el rendimiento de tu sitio web en Google PageSpeed y GTmetrix. Haz una captura de pantalla de los resultados para que puedas compararlos antes y después de configurar WP Rocket.

2. Escritorio

El escritorio de WP Rocket es sencillo y fácil de usar, notarás que todas sus opciones están ubicadas en una barra lateral a la izquierda. Recibiremos un mensaje de que WP Rocket ha sido activado con éxito y luego encontraremos 5 secciones:

• Mi cuenta: Información del estado y fecha de vencimiento de tu licencia.
• Rocket CDN: Detalles de servicio de CDN de Rocket.
• Mi estado: Aquí se te pide permiso para compartir datos analistico con WP Rocket. Lo mejor es que dejes desactivada esta opción para ahorrar recursos.
• Primeros pasos: Encontraras videos útiles para el buen uso del plugin.
• Preguntes frecuentes: WP Rocket incluye las preguntas y respuestas más comunes de los usuarios. Puede ser muy útil.

Como habrás notado, en el escritorio de WP Rocket no hemos realizado ajustes.

Cuando instalamos este plugin por primera, este inicia con su pre-configuración que ya mejora el rendimiento de nuestro sitio web, pero para obtener mejores resultados realizaremos nuestros propios ajustes.

3. Cache

Configurar la cache con WP Rocket es muy sencillo y solo realizaremos tres ajustes básicos para optimizar esta sección:

• Cache móvil: Active esta opción. Es necesario habilitar el almacenamiento en dispositivos móviles para un mejor rendimiento.
• Guardar separadamente los archivos: En la mayoría de los casos esta opción no es necesaria, porque la mayoría de los temas WordPress son responsivos.
• Caché de usuarios: Active esta opción si su sitio web es un foro o sitio web de membresía.
• Vida útil de la caché: Define el tiempo de utilidad de la caché, nuestra recomendación es cada 24 horas para ahorrar recursos del servidor. Si realiza más de una publicación diaria en su sitio web, puede reducir el tiempo a 12 horas.

4. Optimizar Archivos

Dividiremos los ajustes de optimización de archivos en dos secciones:

• Archivos CSS
• Archivos JavaScript (JS)

En esta sección es recomendable probar los cambios uno por uno. Cada vez que actives una opción borra la caché de tu sitio web y revisa el front-end para ver si hay algún conflicto.

Importante: En caso lo haya, solo debes desactivar la opción que lo causó y su sitio web volverá a la normalidad.

4.1 Archivos CSS

Estos son los ajustes de optimización de CSS que utilizamos en MagoWP y nos han dado los mejores resultados:

• Minificar archivos CSS: Activa esta opción. Sí al habilitar esta opción la apariencia de tu sitio web ha sido afectada; puedes excluir el CSS que causa el problema en el recuadro de excluir de la minificación.
• Combinar archivos CSS: Activa esta opción. Si tu sitio web es grande, es mejor que actives esta opción en un entorno de pruebas, así te aseguras de que no tendrá compatibilidad con tu sitio web.
• Optimizar la entrega de CSS: Esto solucionara el problema común de Google PageSpeed de eliminar los elementos que bloquean la visualización. WP Rocket realiza esto de manera automática una vez activada la opción.

4.2 Archivos Javascript

Al igual que la sección anterior, estos son los ajustes que nos han dado los mejores resultados; sin embargo, debemos ir probando uno por uno para identificar si causan algún conflicto en nuestro sitio web:

• Minificar archivos JavaScript: Active esta opción. Si su sitio web tiene problemas por JavaScript minificado, puede excluirlos en el recuadro de excluir JS.
• Combinar archivos JavaScript: Active esta opción si usa HTTPS en su sitio web.
• Cargar archivos JavaScript manera diferida: Active esta opción. Eliminará el error de elementos que bloquean la visualización que es común en GTmetrix y PageSpeed.
• Retrasar la ejecución de JavaScript: Active esta opción. Permitirá una mayor velocidad de carga y el JavaScript retrasado comenzará junto con la interacción del usuario. Mantén la lista que se encuentra por defecto sin cambios.

Como recordatorio, si por un archivo JS con carga diferida o retraso de ejecución notas que tu sitio web tiene algún problema, puedes excluir de la carga diferida o retardada el JS que causa el conflicto y así fácilmente solucionar cualquier inconveniente.

5. Medios

La optimización de medios como imágenes, videos y contenido incrustado mejora drásticamente la velocidad de carga de un sitio web. WP Rocket cuenta con las opciones necesarias para una excelente optimización de medios.

LazyLoad: Active todas las opciones de LazyLoad. Esto permite que medios como imágenes y videos se carguen al momento de mostrar la ventana gráfica al usuario. Esto reduce el número de peticiones HTTP. Por otro lado, si usas contenido incrustado como videos de youtube, activa la opción reemplazar video por imagen de vista previa. Recuerda, puedes excluir medios de este proceso en recuadro excluir imágenes o iframe.

Dimensión de imagen: Active esta opción. WP Rocket agrega los atributos de alto y ancho para las imágenes y soluciona los problemas de dimensión de imagen en los analizadores de velocidad.

Contenido incrustado: Active esta opción. Es sumamente recomendado, pues evita que otros sitios web usen su sitio como contenido incrustado y evitará que su servidor consuma ancho de banda en exceso.

Compatibilidad WebP: El formato de imágenes WebP permite cargar imágenes más rápido y de mayor calidad que JPG o PNG. Si usa el formato de imagen WebP, marque esta opción. Si no usa imágenes WebP es recomendable que ya comience a usarlas por las grandes ventajas que ofrecen.

6. Precargar

Aquí encontramos todos los elementos que podemos precargar para aumentar el rendimiento de nuestro sitio web.

Lo primero que haremos será activar la precarga de caché y también activamos la precarga a través del mapa del sitio o sitemap.xml.

Tip: WP Rocket puede reconocer el sitemap que utiliza nuestro sitio web; así que marcamos el sitemap que ha detectado. En caso no lo detecte podemos incluir la dirección del sitemap de forma manual.

Precargar la caché permite que WP Rocket maneje la caché de una forma eficiente. Cuando actualices tu contenido, WP Rocket borra la caché del contenido específico que actualizaste y precarga de forma inmediata el contenido actualizado.

Finalmente te recomendamos activar la precarga de enlaces. Esta función consiste en que cuando un usuario sitúa el cursor en un enlace, este empieza a cargarse en segundo plano y por lo tanto, cuando este le da clic; la página se carga casi de forma inmediata.

Para finalizar los ajustes de precarga, tenemos 2 opciones finales que debemos revisar:

• Precargar peticiones DNS
• Precargar fuentes

Precargar Peticiones DNS: Las solicitudes de sitios externos pueden afectar el rendimiento de su sitio web, pero puede hacer más rápido su sitio precargando estas solicitudes.

Le dejamos un listado que encontramos en github, que puede copiar y pegar en esta sección:

//maps.googleapis.com
//maps.gstatic.com
//fonts.googleapis.com
//fonts.gstatic.com
//ajax.googleapis.com
//apis.google.com
//google-analytics.com
//www.google-analytics.com
//ssl.google-analytics.com
//youtube.com
//api.pinterest.com
//cdnjs.cloudflare.com
//pixel.wp.com
//connect.facebook.net
//platform.twitter.com
//syndication.twitter.com
//platform.instagram.com
//disqus.com
//sitename.disqus.com
//s7.addthis.com
//platform.linkedin.com
//w.sharethis.com
//s0.wp.com
//s1.wp.com
//s2.wp.com
//s.gravatar.com
//0.gravatar.com
//2.gravatar.com
//1.gravatar.com
//stats.wp.com

Precargar fuentes: Las fuentes son uno de los principales elementos que afectan el renderizado de los sitios web, y la solución es precargar estos elementos. Puedes encontrar fácilmente las fuentes que debes precargar en la sección waterfall de GTmetrix y copiar las direcciones en el recuadro precargar font.

7. Reglas Avanzadas

Las reglas avanzadas de WP Rocket son útiles especialmente para sitios de comercios electrónicos.

WP Rocket es compatible con WooCommerce y si tiene un comercio electrónico usando otro tipo de plugin, es mejor que consulte la documentación antes de realizar algún ajuste.

• Nunca poner en caché estas URL: Si su carrito de compra no es compatible con WP Rocket, agregue la URL para excluirlo de la caché.
• Nunca poner en caché estas Cookies: Si su plugin de comercio electrónico no es compatible con WP Rocket, debe excluirse del almacenamiento en caché. Para hacerlo, sólo especifique el ID de las Cookies en el recuadro.
• Nunca poner en caché estos ajustes de usuarios: Esto evita que Googlebot y otros bots almacenan páginas en caché.
• Purgar siempre estas URL: Si deseas borrar la caché de una URL específica cada vez que actualizas contenido, puedes especificarla en este recuadro.
• Poner en caché estos query strings: Sirve para guardar en caché elementos como resultados de búsqueda, filtros de precios en comercios electrónicos y todo tipo de cadenas de consulta.

8. Base de Datos

Recuerde siempre la importancia de hacer una copia de su base de datos, antes de realizar algún ajuste sobre ella. WP Rocket, también le dará esta sugerencia.

• Limpieza de entradas: En esta opción podrá decidir qué tipo de datos de las entradas borrar permanentemente, como: Revisiones, borradores y entradas descartadas.
• Limpieza de comentarios: Lo recomendado es que actives esta opción en comentarios spam, así te ahorras el tiempo de borrado manual. También puedes activar la opción de comentarios descartados.
• Limpieza de transients: Los transients son archivos temporales generados por plugins en la base de datos de tu sitio web. Marca las dos opciones para contar con una base de datos optimizados. No hay ningún problema al borrar estos archivos, pues se regeneran cuando un plugin los necesita.
• Limpieza de base de datos: Active la opción optimizar base de datos. Esto reduce cualquier residuo o dato inútil en la base de datos.
• Limpieza automática: Esta opción permite programar la frecuencia de limpieza de su base de datos, le recomendamos una frecuencia de forma semanal.

9. CDN

Un CDN carga de forma secuencial y a mayor velocidad archivos estáticos como JS, CSS e imágenes. En esta sección de ajuste de WP Rocket podrás habilitar el uso de proveedores de CDN privados como Bunny CDN, Key CDN u otros.

Destacamos que para agregar compatibilidad con el CDN de Cloudflare o Sucuri, no lo hacemos en esta sección, pues sus ajustes están en la sección de Addons.

Habilitar el CDN: Marcamos la opción habilitar el CDN para activar un CDN privado con WP Rocket. Lo siguiente es añadir el CNAME del CDN, este dato se nos provee al comprar el servicio de CDN. Después de haber agregado el CNAME ya estará activado el CDN en tu sitio web.

Ten en cuenta que con WP Rocket puedes excluir ciertos elementos del CDN, solo es necesario incluir la ruta del archivo en el recuadro correspondiente como se muestra en la imagen.

10. Heartbeat

Heartbeat es un API de WordPress que le permite saber el trabajo de diferentes usuarios en su sitio web, como por ejemplo: La edición de entradas y páginas o conocer la actividad de plugins en tiempo real.

Lo mejor es deshabilitar o reducir su actividad, pues consume muchos recursos de su servidor, en especial de CPU.

11. Add-On

WP Rocket cuenta con complementos divididos en dos partes: Los complementos con activación en un clic y los que requieren ajustes adicionales.

• Complementos con activación en un click: Dentro de esta categoría encontramos a Google tracking, Facebook pixel y Varnish. Si en tu sitio web usas alguno de estos servicios, puedes activar su debida optimización con un solo click.
• Complementos con ajustes adicionales: Este tipo de complementos permiten la integración de servicios externos como Cloudflare y Sucuri. Si utilizas alguno de ellos, activa sus respectivos complementos e ingresa las claves API que te soliciten.

12. Optimización de Imágenes

WP Rocket recomienda Imagify para la optimización de imágenes y conversión a formato WebP (como vimos en la opción 5. Medios). Si estás de acuerdo puedes continuar con Imagify, o también puedes utilizar ShortPixel, que es el plugin que recomendamos nosotros.

Entre los más destacados además de Imagify y ShortPixel, también encontramos a TinyPNG, pero la realidad es que cada uno tiene sus ventajas y desventajas.

• ShortPixel e Imagify: Soportan imágenes en formato WebP, pero al comprimir las imágenes estas pierden algo de calidad.
• Tiny PNG: No soporta WebP, pero al comprimir la imagen, no pierde calidad.

Elige el servicio que más se adapte a tus necesidades.

13. Herramientas

Las herramientas de WP Rocket son sencillas y fáciles de utilizar. A continuación, te comentamos el funcionamiento de cada una de ellas:

• Exportar: Esta opción te permite generar un archivo. Json con tus configuraciones de WP Rocket, este archivo te puede servir como respaldo de tus ajustes o para implementarlos en otro sitio web.
• Importar: Si por alguna razón has perdido la configuración de WP Rocket puedes restaurarla importando el archivo. Json con las configuraciones del plugin.
• Rollback: Esta opción es de gran importancia, pues si una actualización de WP Rocket está ocasionando problemas en tu sitio web, puedes revertir a la versión anterior fácilmente.

14. Conclusiones

WP Rocket es el mejor plugin de optimización para WordPress y en esta guía hemos explicado paso a paso los ajustes óptimos para sacarle el máximo provecho. Para saber más sobre cómo mejorar el rendimiento de su sitio web, lo invitamos a revisar nuestro tutorial de optimización para WordPress.

Recuerda siempre medir el rendimiento de tu sitio web con Google PageSpeed y GTmetrix antes y después de hacer las optimizaciones para poder medir las mejoras de tu sitio web.

¿Que plugin de optimización utilizas en tu sitio web? Cuéntanos sobre tu experiencia en los comentarios.