24/01/2022

ūüöÄ Como configurar WProcket (el mejor servicio de cache para WordPress)

WProcket es de lejos el mejor servicio de cache que podemos contratar para WordPress. 

Recordatorio cortito de la utilidad de disponer de un buen servicio de caching... Caching sirve para que cuando un usuario visita nuestra web por primera vez, WordPress no tenga que leer toda nuestra base de datos y generarle la p√°gina on-the-fly - al vuelo - al usuario en base a lo que haya visto en la base de datos.

Con WProcket, WordPress simplemente muestra a los usuarios visitantes las p√°ginas que WProcket guarda en el cache a nivel local. De est√° manera reducimos la actividad de carga en el servidor y se reduce el tiempo que tarda WordPress en mostrarle el contenido al usuario.

En definitiva, WProcket hace que nuestras webs vayan mucho más rápido. Combínalo con un buen servicio de CDN y la experiencia de carga será fantástica.

Cómo configurar WProcket desde 0

Vale, vamos paso a paso a configurar WProcket en nuestra web. 

Nota: Los ajustes √≥ptimos de WProcket van a variar en funci√≥n del tema que est√©s usando, los plugins que estes ejecutando, el page builder que estes utilizando...

Nosotros os vamos a hacer el análisis con una cantidad de plugins mínimo, utilizando Thrive Theme Builder como nuestro tema y Thrive Architect como nuestro page builder.

Lo primero que vamos a hacer determinar si queremos dos archivos de cache distinto - uno para ordenadores y otro para dispositivos m√≥viles. La respuesta en la mayor√≠a de casos va a ser no. A menos que est√©is utilizando un tema que sea exclusivo para dispositivos m√≥viles no necesit√°is activar esta funci√≥n.

Tampoco es necesario que activéis la opción de cachear a usuarios loggeados. Esta opción está bien si tenéis una web donde la gente este iniciando sesión a menudo. Pero, aun en este caso, nosotros normalmente no tenemos está opción activada.

Por √ļltimo, simplemente determinad cada cuanto tiempo quer√©is que el cache se actualice. Nosotros siempre lo dejamos en el ajuste por defecto - 10 horas.

Optimizar CSS y javascript con WProcket

Vamos ahora con la segunda parte que nos importa... La dde optimizar archivos CSS y javascript con WProcket.

WProcket tiene una utilidad increíble a la hora de acelerar nuestra web. Y es que, optimizando los archivos CSS y javascript, WProcket puede alterar la forma en la que los navegadores cargan el contenido de nuestra web. Vamos a verlo paso a paso.

Nota importante: estos ajustes pueden alterar - y romper - el dise√Īo de nuestra web. Es por eso que es importante que activemos y desactivemos las siguientes opciones de una en una, asegur√°ndonos que ninguna funcionalidad de nuestra web queda da√Īada.

Optimizar CSS con WProcket

First things first, hablemos de c√≥mo optimizar CSS con WProcket. La primera opci√≥n que nos ofrece WProcket es la de minificar archivos CSS. Esto siempre se activa, siempre. Rara vez hemos notado que nuestro dise√Īo se estropee por minificar CSS. Ojo, no decimos que sea imposible, pero bueno, probad y si algo se os estropea desactivadlo otra vez y ya est√°.

Lo siguiente que vamos a hacer es combinar archivos CSS. De nuevo, activad y mirad que pasa. Nosotros siempre lo tenemos activado y nunca nos ha dado problemas.

Por √ļltimo, optimizar la manera en la que se muestra el CSS. Aqu√≠ es posible que not√©is m√°s fallos. De nuevo, siempre podemos desactivar esta funci√≥n y listo. 

Nota: nosotros no podemos activar la funci√≥n de remover el CSS que no se est√° utilizando. Siempre se nos ha roto el dise√Īo cuando hemos intentado activar esta opci√≥n - esta en beta todav√≠a. Pero si que pod√©is activar la opci√≥n de cargar el CSS de forma asincr√≥nica. 

Optimizar javascript con WProcket

Vale, con javascript vamos a hacer algo similar como con CSS. Vamos a ir una por una activando las funciones que nos presta WProcket asegur√°ndonos de que nuestro dise√Īo no se rompe. Lo primero es minimizar javascript. Nosotros casi siempre hemos podido hacer esto sin problemas.

La segunda opci√≥n - combinar archivos de javascript - no la activamos nunca por que por lo general notamos mejor velocidad de carga activando la opci√≥n de cargar javascript en diferido. Hay que elegir una u otra y nosotros preferimos esta √ļltima.

La tercera y cuarta opción van de la mano. Activad ambas, sobre todo delay javascript execution.

Con esta funci√≥n, WProcket permite que cualquier codigo javascript en nuestra p√°gina no cargue hasta que el usuario haya interactuado con la misma. Es decir, hasta que no haya movido el cursor, haga click o haga scroll. 

Optimizar im√°genes con WProcket

Tercer paso, optimizar imágenes con WProcket. Y sí, con WProcket no optimizamos las imágenes como tal. Para eso necesitamos utilizar un plugin como Shortpixel. Aquí os explicamos cómo optimizar imágenes para WordPress utilizando Shortpixel. Pero con WProcket podemos activar una función conocida como lazy loading.

Lazy loading nos permite no obligar a los usuarios a descargar im√°genes que no est√°n - en tiempo real - en pantalla.

Os pongo un ejemplo real de cuando esto ocurre. Fijáos en este mismo artículo, por ejemplo. Este artículo contiene varias imágenes. Algunas de ellas se presentan de forma inmediata al cargar la página - las de la cabecera principal, que son las que veis nada más llegar. Sin embargo, el resto de las imágenes que no veis de forma inmediata no se cargan hasta que empezáis a hacer scroll. Esto, obviamente, aumenta la velocidad de carga ya que esos recursos no los tenéis que cargar de golpe nada más entrar en la web.

Configurar WProcket con tu CDN

Hay que confesar que no hemos probado RocketCDN. Probablemente combinar el CDN de WProcket con WProcket cache en s√≠ sea la opci√≥n m√°s f√°cil de configurar. Probablemente sea cosa de un par de clicks. Sin embargo, $7.99/mes nos parece un precio un poco alto si est√°is empezando. 

Nosotros utilizamos BunnyCDN y es incre√≠blemente barato. Pag√°is en funci√≥n del trafico que llega a vuestra web. Y, a menos que teng√°is decenas de miles de visitas repartidas por todo el mundo, es muy probable que no pagu√©is ni la mitad de lo que os va a costar RocketCDN. 

Si decidís proceder con un servicio de CDN de terceros, podéis introducir - en el rectángulo verde que veis en la imágen - vuestra dirección de CDN y WProcket se encarga de hacer el resto.

Importar y exportar ajustes y restaurar versión de WProcket

Vale ya para concluir lo √ļltimo que os queremos decir es que si quer√©is importar y exportar ajustes de una web a otra, WProcket lo hace posible. 

No se tarda mucho en ir pesta√Īa por pesta√Īa y activar las funciones que quer√°is, pero bueno, que tengamos esta opci√≥n suponemos que nunca esta de mas. 

Nosotros nunca la utilizamos, m√°s que nada por que como os hemos dicho antes, la mayor√≠a de funciones de WProcket las queremos ir activando una por una y ver como responde el dise√Īo de nuestra web a dichas acciones. Si importamos ajustes de otra web y nuestra web rompe, nos va a costar mucho m√°s encontrar d√≥nde esta el fallo dentro de WProcket.

Tambi√©n est√° la posibilidad de volver a la versi√≥n previa de la versi√≥n actual que teng√°is instalada de WProcket. Esta funci√≥n si que es super √ļtil, la hemos usado mucho. Es probable que con el tiempo WProcket lance una actualizaci√≥n que estrope√© algo de vuestra web. Simplemente volved a la versi√≥n anterior mientras lo arreglan y ya est√°, problema resuelto.

>