272 | WP Rocket: review del plugin de caché más popular

En el episodio 272 de WordPress semanal te hablo del plugin WP Rocket y todo lo que te permite hacer para mejorar la velocidad de tu web con WordPress. Vamos allá. Hola hola, soy Gonzalo de Gonzalo Navarro es y bienvenidos a WordPress Semanal en el podcast en el que aprendes WordPress de principio a fin. Porque ya lo sabes, no hay mejor inversión que la de aprender a crear y gestionar tu propia web con WordPress. Y hoy te voy a hablar de uno de esos plugins que son súper populares y de los que me habéis pedido contenidos, cursos, tutoriales. Así que vamos a ir con ello, no sólo en el podcast, sino también, como veremos ahora, en las novedades con un nuevo curso. Y no es otro que el archiconocido WP Rocket. Es un plugin premium, es un plugin de pago y es uno de los más populares que hay para optimizar el rendimiento de carga de una web para para hacer lo que se suele denominar en sus siglas WPO, que es Web Performance Optimization en inglés, es decir, optimización del rendimiento de carga de una web. Básicamente un plugin de caché para hacer que tu web vaya más rápida, pero eso sería reducirlo demasiado. Así que en este episodio te voy a explicar qué es, qué optimizaciones te hace de forma automática cuando lo instalas, qué opciones tienes a nivel de caché, qué opciones tienes a nivel de optimización de archivos, qué opciones tienes a nivel de precarga, que hablaremos de esa funcionalidad interesante de WP Rocket, qué puedes hacer en cuanto a la optimización de contenidos multimedia, otras características como la CDN o reglas avanzadas y por último responderé a la pregunta de si WP Rocket es el mejor plugins de caché y de WP o que hay ahora mismo. Pero todo eso en un momentito. Antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues bien, tenéis un nuevo vídeo de la zona código. Es el vídeo 222. 222 y en él aprendes a impedir que tus visitantes puedan seleccionar el texto de tu web o un trozo de texto determinado. Y lo vamos a hacer únicamente con CSS. Por supuesto que hay varios plugins en el directorio de WordPress enfocados a la protección de contenidos y son mucho más completos que lo que vemos en este vídeo. Pero si buscas una forma sencilla de impedir que ciertos textos de tu web, pues sencillamente no puedan ser seleccionados. El vídeo de esta semana, que recuerda que es el vídeo 222. 222 te interesa, ya sabes que puedes ir a gonzalonabarro es y si estás suscrito solo tienes que irte a la parte de snippets de código y ahí lo tendrás. Sí es muy facilito, os guío en el vídeo, os enseño qué trocito de código tenéis que poner, cómo ponerlo y lo tenéis, no tenéis que saber programación ni nada, simplemente seguir el vídeo como con el resto de vídeos de la zona código. Perfecto, eso en cuanto a la zona código. Después tenemos los cursos y hay nuevo curso, como ya os he adelantado. Tenemos el curso de WP Rocket. Básicamente lo que hacemos en este curso es ir paso a paso por todas y cada una de las opciones que nos trae este plugin. En este curso no hacemos un análisis de velocidad de la web, porque eso ya lo hago en otros cursos, por ejemplo el curso de WPO con gt Metrix, el cual os aconsejo ver primero, al menos la primera clase, donde os enseño pues cómo se utiliza gt Metrix, que es una herramienta donde pones la URL de tu web o de las distintas páginas de tu web, las que tú quieras medir y te hace un análisis y te arroja una serie de datos. Bueno, pues en ese curso no sólo te enseño a interpretar esos datos, sino que más avanzado el curso te enseño a solucionarlo y la mayoría de ellos se pueden solucionar o se puede hacer caso a esas sugerencias que nos arrojan este tipo de programas y mejorar mucho el rendimiento de carga de la web. Así que están un poco esos dos cursos, si te interesa este mundillo es muy recomendable que veas los dos, tanto el de WP Rocket, como digo, te enseño a utilizarlo de principio a fin, tanto el de WPO, es decir, en el que analizamos una web con gt Metrix y corregimos los fallos. Os dejo enlaces a todo lo que vaya a comentar, también al curso, no solo al de WP Rocket, sino también al curso relacionado de WPO. También os dejo un enlace a un tutorial premium, esto es solo para suscriptores, del plugin WP Optimize, que es un plugin que no llega hacer todo lo que hace WP Rocket, pero que se le acerca mucho y que es gratuito. Está muy bien, hablo de él en un episodio del podcast y al final de ese episodio tenéis un tutorial premium en el que os enseño a utilizar WP Optimize. Os dejo el enlace a estas tres Curso de WP Rocket, Tutorial Premium de WP Optimize y Curso de WPO con GTmetrix. Además de, por supuesto, el resto de detalles que vaya comentando. Para ir a los enlaces, ya lo sabéis, Gonzalo Navarro es barra y el número del episodio, que en este caso es 272. Gonzalonabarro es 272. Fantástico. Ahora sí, vamos con el tema central. Review del plugin WP Rocket. Y vamos a empezar definiendo qué es WP Rocket o qué te puede aportar. Bueno, es básicamente un plugin de caché. Ahora hablaremos un poquito más de qué es la caché, pero lo que hace, así dicho llanamente, es que tu web cargue más rápido. Básicamente te permite solucionar los problemas que muestran servicios de análisis de velocidad de carga como puedan ser GTmetrix, que ya te lo he mencionado, o Google PageSpeed Insights. Hay más, no, hay un montón, pero bueno, estos son dos de los más populares. ¿Pero qué hace WP Rocket? Es decir, yo lo instalo en mi web, me lo descargo, lo compro, ya sea en la web oficial o ya sabéis que yo tengo un servicio de activación de licencias, que como yo tengo la posibilidad de instalarlo en tantas webs como quiera, porque tengo esa licencia comprada ya para las webs que voy haciendo o para otros servicios, pues me podéis contratar a mí. Yo os lo activo, os voy a dejar como siempre el enlace para que podáis ver el servicio, que muchos no lo conocéis y cuando lo vais conociendo al final me pedís en muchas instalaciones porque la verdad que os resulta muy asequible. Bueno, eso os lo dejo como digo, enlazado. Entonces, ¿Qué pasa cuando instalamos WP Rocket? Bueno, por defecto nos viene ya con una serie de ajustes hechos. No los voy a comentar todos porque no tiene mucho sentido, pero básicamente el caché ya te lo tiene activo. ¿Qué es esto del caché? Bueno, tiene dos tipos de caché. Caché de página, que básicamente crea como una copia o guarda la parte de HTML de las páginas de tu web en caché. De esa forma esa parte se va a cargar más rápida y no se tiene que estar descargando todo el rato. Cuando una persona accede a tu web, descarga los archivos, vamos, el navegador descarga los archivos del servidor donde estén, los renderiza, es decir, los lee y ya te lo muestra en la página, pues si tiene que descargar menos cosas, tienen que descargarse menos cosas desde el servidor hasta el navegador para que haga su magia y te muestre todo, pues lógicamente va a tardar menos, ¿No? Pues eso es el caché y el más habitual es el caché de navegador que también se hace y que es básicamente eso, guardar en el navegador de las personas una copia de las páginas o de ciertos elementos o muchas veces una copia prácticamente completa. Por eso muchas veces cuando estás viendo, haces un cambio en una web e intentas ver ese cambio reflejado en la parte frontal, siempre te dicen refresca la caché o limpia la caché, porque puede ser que estés viendo una versión antigua que está guardada en tu navegador y tienes que como resetearlo para que vuelva a descargar todo y te muestra la versión más reciente. Pues eso es un poco el caché y eso ya viene habilitado por defecto. Tú no tienes, si tienes W Rocket instalado o activo, ya el caché está funcionando. Luego veremos que hay algunas opciones que puedes toquetear, pero básicamente cuando lo instalas tienes caché o tus páginas, tus contenidos se empiezan a guardar en caché. Después tienes la compresión gzip, dependiendo del tipo de servidor que tengas te la activa automáticamente o no, que esto básicamente es comprimir los recursos de una página antes de que sean servidos a los navegadores de los usuarios. Y otro ajuste automático que hace es combinar los scripts en línea de terceros, de terceros quiere decir, por ejemplo Google Fonts, que es una fuente que se descarga de un servidor de otro lado y en línea quiere decir que están puestos, ese código está puesto directamente en el archivo, pues si es la página de inicio, pues en el archivo index que se vaya a mostrar en ese caso, digamos, en el archivo que se está mostrando y no en una hoja aparte para los scripts, bueno, es un poco complejo, pero básicamente combina trocitos de código que pueden aparecer en esa página para que pues eso, todo cargue más rápido. Y luego, bueno, hay otra serie de ajustes que también vienen por defecto cuando instalas WP Rocket y que vemos en una de las clases también os lo explico todo esto en la primera clase del curso o en la segunda, no recuerdo, pero vamos, cuando digamos, os explico qué es lo que instalo WP Rocket por defecto. Yo os lo enseño por dentro un poco para que veáis lo que hace el plugin, que bueno, los que no os guste esta parte así un poquito tan técnica os lo podéis saltar, pero lo explico para que veáis el impacto que tiene en los archivos de vuestra web, ¿Vale? Eso es lo que hace WP Rocket por defecto. Así que ya de primeras ya lo normal es que notéis una mejora en el rendimiento de carga de vuestra web, porque ya viene digamos, con lo básico, con lo que ellos consideran que el 80% de las personas que tienen una web con WordPress van a necesitar, así lo dicen ellos, ¿Vale? Después, opción a opción qué podemos ir configurando o qué trae WP Rocket entre sus menús para que nosotros vayamos toqueteando y modificando cosas. Bien, en primer lugar tenemos un menú para la caché de WP Rocket, ya hemos dicho que se aplica por defecto, pero luego nosotros tenemos alguna serie de opciones a nuestro alcance. Por ejemplo, podemos decidir si habilitar la caché en móvil o no, que esto sobre todo para cuando no tienes webs responsive, cuando tu web no es responsive y tienes, pues no sé, como lo típico que añades una plantilla extra para que tu web se vea bien en móvil o algún plugin que te lo haga para que se vea bien. Esto ya casi no pasa, pero bueno, todavía queda gente que no lo tiene bien hecho porque tiene webs antiguas o lo que sea, pues si no es responsive quizás no te interesa habilitar la caché móvil. En el resto de casos, pues bueno, pues normalmente sí puedes establecer la vida además en esta zona de caché, la vida del guardado en caché, ellos te van a poner siempre mensajitos, te recomendamos que lo pongas en 10 horas o lo que sea. Esto es básicamente como estamos guardando en caché, es decir, estamos guardando copias de ciertas cosas de nuestra web. Hay que ir comprobando cada cierto tiempo que hay cosas nuevas y limpiando y que se vuelva a descargar todo. Pues básicamente eso, tú estableces ahí un periodo de tiempo para que se haga automáticamente siempre. WordPress Rocket es cada vez más inteligente en este sentido y detecta cuando hay cambios y refresca la caché además, en partes concretas, no todas, cada vez lo tienen más conseguido. Y luego tú siempre manualmente puedes quiero limpiar la caché de aquí o lo que sea. Y luego tiene una parte interesante que es la caché para usuarios conectados, que esto sobre todo para los que tenemos webs con usuarios, en mi caso no, como tengo muchos usuarios, algunos son suscriptores del curso gratuito de WordPress, otros sois suscriptores de la parte de pago, pues para este tipo de usuarios que están conectados también se puede crear una caché, incluso se puede crear una caché aparte. Después tenemos optimizaciones de archivos, es decir, un menú donde nos permiten optimizar archivos, esto es, archivos CSS y archivos JavaScript, nos permiten por un lado minificarlos, es decir, quitar todos los espacios que hay en esos archivos, ya sabéis que el CSS es para dar aspecto a nuestra web y el JavaScript es para dar sobre todo interactividad, por resumirlo, es decir, nuestra web está cargada de archivos CSS, de nuestros themes, de nuestros plugins, del propio WordPress, también de archivos JavaScript y normalmente tienen un formato para que los desarrolladores o los que vamos a modificarlos los podamos leer mejor, un formato legible. Esto quiere decir que hay mucho espacio, mucha indentación, hay comentarios y cada espacio es como si fuese un carácter, entonces ocupa y cuanto menos ocupe algo, menos pesa, más rápido se descarga y el navegador lo puede mostrar o renderizar antes para que lo vea la gente, nuestros visitantes. Bueno, pues existe la posibilidad y se suele hacer de minificarlos, es decir, quitar todos los espacios y dejarlo prácticamente ilegible para nosotros los humanos, para las máquinas, si lo leen bien, de hecho más rápido. Pues nada, esto lo puedes hacer desde estas opciones de optimización de archivos y también podemos optimizar su entrega, por ejemplo, podemos decir que ciertos archivos sólo se carguen cuando se haya cargado toda la parte visible de la página y que después al final se carguen esos archivos. Bueno, todo esto que así por audio no tiene mucho sentido explicarlo, más allá de que lo puedes hacer, pues lo cubrimos el curso, por supuesto, paso a paso. Bien, después tenemos el menú o la opción dentro de WP Rocket de controlar la precarga de archivos en tu web. Y esto de precarga de archivos y de enlaces es muy interesante porque da la sensación de navegación muy rápida por tu web, es decir, a lo mejor cuando llegan a la página de inicio tus visitantes, me refiero, a lo mejor tarda un pelín más en cargar, pero ya empieza a precargar otros enlaces que encuentra en la página o los archivos para que se puedan cargar esos otros enlaces que hay por la página, de modo que cuando vayan a la página de contacto se cargue súper rápido o cuando vayan a la página de blog, pum. Se cargue rapidísimo. ¿Por qué? Porque se estaba ya precargando todo cuando ese visitante ha caído pues en una landing o en donde sea, entonces WP Rocket detecta todos los enlaces que hay en esa página, incluso lo puede hacer detectando todo lo que tengas en el sitemap de tu web y lo va precargando. Entonces esto pues como digo, puede dar una sensación de que tu web vuela cuando los visitantes están navegando entre una página y otra. Después tienes la opción de la optimización multimedia. A ver, por defecto WP Rocket sólo trae un par de opciones para la optimización de la parte multimedia. Una de ellas es la mejora semántica del HTML de las imágenes. Esto no es más que añadir a las imágenes que tú pones con WordPress muchas veces no tienen establecido un ancho y un alto. Esto hace que los navegadores no tengan en cuenta ese espacio y entonces imagínate que se está cargando la página de inicio y que tú tienes pues se ve texto, luego una imagen y luego texto. Pues si tú no especificas un tamaño, el navegador no sabe hasta más tarde, cuando se cargue la imagen, qué tamaño va a tener esa imagen, entonces no te guarda el espacio, con lo cual se pueden ver a lo mejor dos párrafos de texto y luego cuando se cargue la imagen, esos dos párrafos como que se mueven y en medio se pone la imagen con el espacio que tenía que ocupar. Para evitar eso, WP Rocket te da una opción en la que se va a establecer automáticamente en el HTML el tamaño que va a tener esa imagen y como el HTML se lee, lo primero el navegador ya sabe qué espacio va a ocupar, o sea que va a dejar mientras un cuadrado va a dejar ese espacio y luego la imagen cuando se cargue se cargará ahí. Esto es si tarda en cargar, como alguien con conexión muy lenta, si la conexión es rápida, da igual como tengas esto, que no se va a apreciar tampoco gran cambio, pero está bien tenerlo para gente que vaya a acceder con conexiones lentas y que no tengan ese descuadre de la maquetación de los contenidos de tu web, que muchas veces es un poco raro cuando parece que va a tener una forma y de repente como entra un elemento se descuadra todo un poquito y bueno, la sensación del visitante puede no ser tan bueno, pero como decía, tiene muy poquitas opciones por defecto. Si quieres tener más opciones para los contenidos multimedia, te dan la opción de añadir un plugin que tienen ellos de optimización de imágenes que se llama Imagify, no hace falta que uses el plugin de ellos, si ya tienes otro plugin que estás usando para el lazy loading de tus imágenes, o para optimizar las, que se optimicen cuando las subes a tu web de forma automática, que hay muchos plugins y he hablado de ellos en otros episodios del podcast, pues no hace falta que instales el DWP Rocket, simplemente con el que tengas ahora haces la optimización y con WordPress Rocket haces todo lo demás, porque de todas formas tendrías que estar añadiendo otro plugin, en este caso Imagify, que es de los mismos creadores de WP Rocket y por eso ellos te lo recomiendan. Y luego hay otras características, por ejemplo hay una zona de reglas avanzadas que cubrimos en el curso, que esto no lo voy a comentar en el podcast porque es como digo avanzado, pero que sí que es interesante para excluir pues ciertas, no sé, excluir la página de carrito, excluir la de la caché, o excluir un archivo concreto, o excluir incluso decir que en el modelo de iPhone de no sé cuándo, que no se guarden en caché nuestras páginas, cosas de esas así como muy avanzadas, pues las vemos en una clase, por supuesto en el curso. Después tienes un menú dentro de WP Rocket para configurar la CDN, ellos te ofrecen una CDN de ellos, o si no tienes como addons, por ejemplo, si tienes la CDN de Cloudflare, como es mi caso, tienes un addon que lo instalas y automáticamente ya te permite hacer el vínculo, tú pones los datos de tu cuenta de Cloudflare y te permite hacer el vínculo. De esta forma WP Rocket, como la CDN suele tener, por cierto, bueno, la CDN es algo que se suele utilizar, las siglas son Content Delivery Network, básicamente es una red de entrega de contenidos y explicado así de forma llana, es que se guardan copias de tu web en distintos servidores a lo largo de todo el mundo, de modo que si alguien en África se lo va a descargar, pues se lo descarga del servidor más cercano. Si hay en África pues de África, si no del más cercano y en América lo mismo. Y en otro lado pues lo mismo, que normalmente los hostings ya te ofrecen una CDN, normalmente Cloudflare u otra y tú ya la contratas, algunas veces es gratuita, otras es de pago y bueno esto sobre todo es útil para alguien que imagínate si yo tengo mi servidor en Europa pero tengo muchos visitantes de América, pues me interesa tener una CDN para que los de América reciban el contenido más rápido. Es básicamente eso. Pues bueno, como esto también lidia con los contenidos y también los guarda en caché y puede ser un poco lioso, me refiero la combinación entre un plugin de optimización del rendimiento de los contenidos de tu web y otro que se encarga de moverlos por distintas zonas, pues conviene tenerlo vinculado con WP Rocket y es un poco la opción que te da en estos menús este plugin. Y luego tienes otros addons, por ejemplo si tienes el pixel de Facebook o el código de Google Analytics, pues tienen dos addons que puedes instalar y ya te optimiza la entrega o la carga de esos recursos, que esto es lo típico que te sale cuando vas a medir el rendimiento de carga de tu web y tienes el píxel de Facebook instalado o el código de seguimiento de Analytics, siempre te va a salir el típico mensaje de render blocking, es decir, de se está bloqueando la carga con un recurso externo y te pone que es de Facebook o te pone que es de Google Analytics, pues estas dos extensiones que simplemente las activas y ya te funcionan, pues te ayudan a quitar ese mensaje de los sitios de análisis de velocidad como pueden ser Google Page Speed o GT Metrix. Sí, pues como ves algo completísimo, WP Rocket te permite hacer prácticamente cualquier cosa que se te ocurra en términos de optimización de la velocidad de carga de tu web. Ahora, ¿Es WP Rocket el mejor plugin de caché y de WPO? Bueno, sin duda es uno de los mejores, es uno de los mejores de pago y también pues bueno, de los gratuitos, en general es uno de los mejores, pero hay otros buenos incluso gratuitos, por ejemplo SG Optimizer es el plugin de SiteGround, es decir, si tú estás, tu web está hospedada en SiteGround, ellos te ofrecen un plugin que además esta caché es a nivel de servidor, que suele ser mejor y ya viene como todo vinculado. Entonces yo en mi caso, que tengo mi web hospedada en SiteGround, pues tiene sentido que utilice el plugin de caché de ellos, que además cada vez tiene más opciones y muchas se parecen a algunas de las que hemos comentado que tiene WP Rocket, no tiene todas, pero tiene muchas de ellas. Hay otro muy interesante que te he comentado al principio de este episodio, que también es gratuito, con una parte premium que se llama WP Optimize y del cual tenéis también un tutorial. Y luego hay otros, es que hay gente que le va bien con otros plugins de caché, al final usa el que te vaya bien, el que encaje mejor con tu servidor. Yo hago el curso, o en este caso sacado el curso de WP Rocket porque me lo encuentro en webs de clientes, lo utilizo, es un muy buen plugin, a la gente le encanta, me lo habéis pedido y lo tenéis para que sepáis pues cómo son o cómo se usan cada una de sus opciones, pero no quiere decir que otros de los que hayamos hablado anteriormente o que otro que tú estés usando sea malo, es decir, si te da lo que necesitas, perfecto. Recuerda que tienes los enlaces en GonzaloNavarro es 272 a todo lo Curso de WP Rocket, Tutorial Premium de WP Optimize, Curso de WPO con GT Metrix, mi servicio de activación de licencias, incluso te he mencionado mi hosting SiteGround, el que yo utilizo, pues tienes un enlace directo que siempre vas a ir a la mejor oferta del momento, te la dejo también en la parte de enlaces. Nada más, recuerda si te ha gustado este episodio, pues te agradezco mucho si puedes tomar alguna acción para que siga creciendo, para que llegue a más gente, lo puedes compartir, si estás en iTunes o en Apple Podcast, me puedes dejar una reseña en Ivoox, me puedes dejar un comentario, un me gusta, compartirlo en Spotify, lo mismo, tienes opciones de compartir, que además sale como muy chulo, si lo puedes compartir en una story de Instagram o lo que sea. Pues cualquier acción que podáis tomar para ayudar a que este episodio o este podcast en general llegue a más gente, ya sabéis que lo agradezco un montón. Nada más por este episodio, recuerda que en GonzaloNabarro es tienes acceso a toda la parte premium, más de 55 cursos, más de 220 vídeos de la zona código. Nos seguimos, escuchando Adiós.