Analizamos WP Rocket el plugin que acelera tu sitio web

Hace poco comenzamos a usar en notiactual.com, WP Rocket un plugin para generación de cache en disco, lo hemos estado usando y probado cada una de sus funciones, en este articulo vamos a conversar sobre este plugin muy interesante.

Los plugins para WordPress son , add-ons que demás no está decir que desde hace 15 años que estamos online usamos WordPress para publicar nuestros contenidos, y que sirven para extender la funcionabilidades del CMS o Sistema de Gestión de Contenidos.

Dicho eso podemos afirmar que hemos probado casi todas las versiones de WordPress y sus complementos más importantes para sitios web de alto tráfico como notiactual.com.

En ese mismo orden de ideas es importante acotar que un sitio de alto tráfico necesita un complemento para liberar el sistema de gestión de base de datos de la alta carga que recibe cuando ocurren picos de visitas, y estos complementos se llaman Plugins para Cache. Estos, generan una copia entera del sitio web en disco de forma programática o bajo demanda, es decir cada vez que se publica algo nuevo se genera la imagen de cache respectiva, si el contenido ya está publicado cuando un usuario lo visita se genera la respectiva copia cache en disco.

Proceso de Instalación

Es super sencillo, descargamos el paquete que nos envían y lo subimos en la sección de plugins de WordPress

Proceso de configuración

Luego de activarlo vamos a ver una pantalla como la siguiente:

Desde ese momento WP Rocket comienza a generar el cache de tu sitio, es importante tener en cuenta los mensajes de conflicto que pueden aparecer como por ejemplo, si tienes un plugin de cache ya instalado va a indicar que debes desactivarlo, pero hay mas opciones que debemos explorar como la optimización de archivos que veremos a continuación.

Optimización de Archivos

En esta opción podemos activar minimizar el CSS elimina los espacios blancos y los comentarios para reducir el tamaño de archivo.

Otra opción muy importante es de remover el CSS no usado de forma dinámica y la de cargar el CSS de forma asíncrona.

Asimismo podemos optimizar la entrega de los archivos JavaScript del sitio, en este caso los podemos minimizar y combinar de forma que se reduzca la carga de contenidos.

Finalmente tenemos las opciones de Cargar archivos JavaScript de manera diferida y ejecución de JavaScript de forma diferida.

Funciones de optimización de carga de imágenes.

En esta sección podemos hacer cosas muy interesantes, una de la más importantes es la activación de Lazy Load o carga de imágenes diferida de acuerdo a la interación del usuario.

Esto funciona cargando la imágen o imágenes del contenido que este leyendo el usuario a medida que vaya haciendo scroll.

En este caso lo podremos activar para imágenes que ilustren contenidos, para imágenes que usemos como fondos, y para los Iframes y videos de los diferentes servicios o redes sociales de videos, de manera que los mismos sean reemplazados por imágenes hasta que el usuario les haga click y comience a ver el video.

Adicionalmente podremos excluir bajo demanda los iframes que así lo requieran.

Pero es que además tenemos la opción agregar las dimensiones en html a las imágenes que les falte esa declaración, la misma a veces la pasamos por alto y es muy importante para la lectura de los usuarios, ya que una imagen sin dimesiones declaradas retrasa la ejecución del HTML y por consiguiente la interación del usuario.

Funciones de Precarga

La función de precarga de cache es muy interesante, porque WP Rocket se encarga de mantener el sitio listo para que los visitantes lo vean acelerado y no se pierda tiempo de procesamiento en peticiones.

De forma tradicional un cache en disco funciona o se activa cuando un usuario visita una URL por primera vez, en este caso WP Rocket se encarga de hacer eso por los usuarios, lee el mapa del sitio y genera el cache de cada url del sitio automáticamente.

Otros caches adicionales como precargar los enlaces o las fuentes tambien ayudan a mantener el sitio optimizado.

En el caso de la precarga de enlaces, la función mejorará el tiempo de carga percibido de las páginas para un usuario que navega por su sitio. Si un usuario pasa el cursor sobre un enlace o lo toca durante 100 ms o más, el HTML de esa página se obtendrá en segundo plano, de modo que cuando haga clic en el enlace, la página parecerá cargarse casi instantáneamente.

Reglas Avanzadas

En esta sección tenemos una opción personalizable altamente importante, y no es más que la vida útil del cache, es decir, cada cuanto tiempo se va a regenerar el cache en disco.

Es importante tener en cuenta que el cache generado para cada URL o contenido publicado lo podemos gestionar en la caja de escritura del mismo post, ya que luego de publicarlo vamos a poder ver el boton de Borrar Cache , al hacerle click podemos limpiar el cache de ese articulo individualmente.

Pero si miramos más abajo podremos ver una caja con las siguientes opciones:

• Nunca poner en caché esta página (en el caso que queramos excluir la pagina actualmente en edición del cache)

Activar las opciones para esta entrada (se podrán activar o desactivar individualmente si están activadas de forma global):

• Minify CSS
• Remove Unused CSS
• Load CSS asynchronously
• Minify/combine JavaScript
• Cargar archivos JavaScript de manera diferida
• Retrasar la ejecución de JavaScript
• LazyLoad para imágenes
• LazyLoad para iframes/vídeos
• LazyLoad CSS backgrounds
• CDN

Hay que tener en cuenta que el cache se borra totalmente si ocurren alguna de las siguientes situaciones:

• Actualización de WP Rocket, dependiendo del tipo de cambios incluidos en la nueva versión
• Cambiar/actualizar los temas actuales y los temas principales (de los temas secundarios)
• Actualización de los menús de navegación
• Actualizando las opciones del tema
• Crear/actualizar/eliminar widgets de la barra lateral
• Crear/actualizar/eliminar categorías , etiquetas o estructuras de enlaces permanentes
• Creando/actualizando/eliminandotérminos registrados como ‘públicos’
• Cuando se guardan opciones en el Personalizador
• Cuando el tema Avada borra su propio caché
• Cuando se activa cualquier fragmento que utiliza la  rocket_clean_domain() función, como este trabajo cron

Y se borra parcialmente si ocurre algo como lo siguiente:

• Crear/actualizar/eliminar publicaciones, páginas o tipos de publicaciones públicas personalizadas
• Crear/actualizar/eliminar comentarios en una publicación
• Si la memoria caché de usuario está habilitada y se actualiza o elimina un usuario, solo se eliminará la memoria caché de ese usuario. (Si ha activado el complemento auxiliar para usar la misma memoria caché para todos los usuarios que hayan iniciado sesión , estas acciones de purga no se aplican).
• Contenido relacionado:  al actualizar una publicación, también se eliminarán la página de inicio, el feed de la página de inicio, la publicación siguiente y anterior (por ID y en la misma categoría), la página de publicaciones, la página de archivo de tipo de publicación, la página del autor y todos los antecesores de la publicación. Al usar WooCommerce, guardar una variación de producto activará la eliminación del producto principal.
• rocket_clean_post() Cuando se activa cualquier fragmento que utiliza la  función

La opción de renovación o vida util del cache la podemos ajustar como deseemos sea en horas o días.

Optimización de la base de datos

En esta sección podemos hacer limpieza de la base de datos desde borrar los datos transitorios hasta eliminar las revisiones guardadas de los post, algo que aliviaría la base de datos de contenido no inprescindible.

WP Rocket tiene más opciones, muchas más pero creemos que las más relevantes de mencionar en este análisis son las mencionadas, ahora vamos a conversar un poco sobre los cambios favorables al usarlo.

Es bueno mencionar que ellos han dispuesto una sección de tutoriales para que no nos perdamos de nada en lo respecto a la configuración:

Cambios favorables luego de instalarlo.

Anteriormente usábamos otro plugin de cache en su versión gratuita, luego de tiempo usándolo vimos que nos faltaba rendimiento en la generación del cache y la presentación de la información al usuario.

Siempre mantenemos nuestro diseño lo mejor posible técnicamente para poder presenta la información al usuario rápidamente hasta en conexiones lentas, que si bien están en desuso todavía existen millones de usuarios con este tipo de conexiones, como lo son las móviles 3G o 3G+.

Las Pruebas que realizamos.

Observamos al realizar las pruebas en Google Page Speed un incremento en la calificación casi de inmediato, y es que una de las mejores opciones de WP Rocket junto con la de comprimir y unificar el CSS y el JS, es la de retrasar la ejecución del JS. Ahora tenemos casi 100% y lo que faltan son por pequeños ajustes que debemos hacer en el diseño del sitio.

Antes de usar WP Rocket teníamos dos plugins, uno se encargaba de pasar todo el JavaScript hacia el Footer o pie de página y el otro cargaba el JavaScript de forma asíncrona, al instalar WP Rocket pudimos prescindir de 2 plugins, ya que estás opciones están integradas en él, lo que permite una reducción de la carga en el núcleo de WordPress.

Ellos afirman que su producto mejora el 80% de las mejores prácticas de performance web son aplicadas de manera automática, sin necesidad de tocar el código. y hemos confirmado que es cierto.

Disponen de las funciones Caché, LazyLoad, precarga caché, retrasar la ejecución del JS, eliminar el CSS no utilizado, sólo por nombrar algunas y son muy buenas, pero debemos saber cuales activar y ver los cambios uno a uno ya que cada tema WordPress es distinto y puede reaccionar diferente.

¿Como adquirir WP Rocket?

• Vamos a la web y damos click en Comprar
• Elegimos la licencia dependiendo de la cantidad de sitios web que tengamos.
• Damos click en Comprar y realizamos la compra con TDC o Paypal
• Inmediatamente obtendremos el link para descargar el plugin y nos muestra un enlace a la guía de instalación.
• Al mismo tiempo recibiremos un email de bienvenida con los datos de acceso

---