¿Cuántas veces has pensado en mejorar la velocidad de carga de tu WordPress? Hablemos. Hoy os traemos un plugin perfecto para ayudaros en esta tarea, WP Rocket, ¡entremos en materia! ;)
El internet andaluz.
¿Pero de qué hablas Pablito? ¿A qué viene lo de "internet andaluz"? - Tranquilos, no se me está yendo la cabeza a ninguna parte. Uso esta comparación entre el acento andaluz y la velocidad que perseguimos en Internet, porque hace poco escuché en un podcast, que el andaluz está considerado una manera de hablar más eficiente que el castellano en sí, porque, básicamente, se dice más en menos tiempo. (má en meno).
Y eso me recuerda en que por ejemplo, cuando leemos un post de blog (como este mismo), estoy seguro de que no estáis leyendo palabra a palabra, entendiendo cada uno de los conceptos, y asimilándolos al detalle. Básicamente lo que estáis haciendo es escanear párrafo a párrafo, en busca de negritas, cursivas o links.
Cuando una web carga, son tres cuartos de lo mismo.
Buscamos inmediatez, y ver esa foto del perrito que sonríe, ya, no en dos segundos. (Una de las cosas que más rabia me da de Instagram es que a veces los vídeos tardan en cargar unos segundos y el iconito del vídeo se queda parpadeando sin hacer nada).
Otro ejemplo es con Whatsapp. Ya no hace falta descargar el vídeo antes de verlo, si no que se va haciendo streaming del propio vídeo, en el momento que le damos al play.
¿No es una pasada? (Sí, yo también era de Nesqüik, porque el Colacao tardaba en diluirse).
Con todo este rollo inicial, básicamente tenéis que tener claro que tenéis que hacer sí o sí que vuestra web cargue en menos de 3 segundos, tenga el contenido que tenga. Ya sea a través de optimización de vuestros archivos web, o mejorando el cómo y cuándo se presenta el contenido al usuario final (mejora de carga por Usabilidad de Usuario (UX)).
A lo largo de este post-review sobre el plugin premium que más me gusta para la carga rápida de webs, WP Rocket, vais a conocer, paso a paso, cómo implementarlo en vuestra web para que desde el minuto uno gane en velocidad, y por consiguiente, ganéis ranking en Google, visitas contentas, y más conversión.
Haz la prueba: ¿Cuánto tarda en cargar tu web?
Si nunca habéis tocado temas de optimización de velocidad web, sobretodo con WordPress, os invito a que ahora mismo abráis una nueva pestaña en el explorador y vayáis a Pingdom y hagáis un test de vuestra web. Haced otro con Google Page Insights y otro con GTmetrix.
A lo largo del post, vamos a usar un ejemplo concreto: mi portfolio. Yo tengo dos webs, una que actúa como embudo de conversiones para posibles clientes que quieran una web mejor, o trabajos de diseño gráfico, pcortes.com, y otra en la que pongo las cositas que voy haciendo a lo largo de mi carrera: pablications.com. Esta última está llena de fotos, vídeos embebidos y diseños, por lo que tiene mucho peso. Además es de reciente creación (hace menos de un mes) y creo que es un buen ejemplo para ver si este plugin cumple su función o no.
Estos son los resultados que yo obtengo ahora mismo en Pingdom:
Ventajas de WP Rocket frente a otros
Antes de nada, aclarar que WP Rocket no me ha contactado para hacer un post, ni me paga por escribir sobre ellos, ni lo patrocina. Tampoco encontraréis ningún enlace de afiliado ni nada por el estilo. Simplemente he usado varios plugins de caché y optimización, evaluando lo bueno y lo malo de cada uno, y finalmente (además de ser muy fan de los plugins premium, y no gratuitos), me quedo con este plugin.
Y cómo no, comparto con vosotros las ventajas que tiene frente a otros plugins:
Plugin más sencillo
Encontramos aquí un plugin muy sencillo de configurar, al contrario que otros plugins como por ejemplo W3 Total Caché (el cual es bueno, pero te da una bofetada de configuraciones al instalarlo). WP Rocket ya se pone a funcionar y hacer tu web más rápida desde el mismo momento en que lo activas en tus plugins.
UX friendly y en español
El plugin no solamente es sencillo y fácil de utilizar, si no que tiene un panel de administración fácil de entender y agradable de usar para el usuario. Tiene explicaciones de cada una de sus opciones de configuración, y además, importante para muchos de vosotros, está en español.
Soporte impresionante
En el panel de configuración encontraréis pestañas de Soporte, Preguntas Frecuentes y Documentación. Al ser un plugin premium, de licencia anual, contáis con su apoyo y soporte mientras tengáis una licencia.
Varios plugins en uno
Una de las ventajas que más me gusta del plugin es que hace lo que solamente se consigue usando un combinado de varios plugins gratuitos a la vez. Recordad que cuantos más plugins se utilicen en una web de WordPress, más afectará al rendimiento y carga de la misma, por lo que esto ya es un factor importante a tener en cuenta para optar a dicho plugin.
Precio
Para todo lo que hace, me parece un plugin muy asequible. Su precio para una web es de 39 dólares al año. Si sois implementadores de WordPress y queréis añadir este plugin a vuestro servicio de creación y optimización web, tiene una licencia anual de 199 dólares, que os permitirá instalarlo en sitios ilimitados.
Conociendo la web de WP Rocket y a sus creadores
Si vais a la web de WP Rocket os encontráis con un bonito diseño para un buen plugin. Ahora mismo tienen más de 220.000 sitios web usando el plugin, cuenta con un chat en el que podéis preguntar cualquier duda al equipo de soporte en español. Lo más interesante que quiero mencionar es la página de características en donde te comparan su plugin con otros plugins famosos de Caché (Hyper Cache, Super Cache y W3 Total Cache).
Por último añadir que los creadores de WP Rocket son franceses, de Lyon, y cuenta con un equipo joven y con ganas de trabajar.
Mini-tutorial sobre WP Rocket
Pasamos ya al corazón de este post. Voy a hacer un "antes y después" de la web que os he mencionado previamente (pablications.com) y hablaremos de 3 pasos: Compra, Instalación/Configuración, Resultados. Y en lugar de explicarlo todo por escrito y mediante screenshots, lo que voy a hacer es un vídeo para cada apartado, en donde me podré explicar mejor para que lo entendáis todo a la primera.
1. Análisis actual de mi web, creación de cuenta y compra del plugin en WP Rocket.
A continuación analizamos la web actual, y hacemos un test de velocidad previo, para poder compararlo luego con lo que consigamos tras configurar el plugin:
Ahora toca registrarse en la web de WP Rocket y adquirir el plugin, para descargarlo e instalarlo en nuestra web. Analizamos también cómo mejora la web, solamente por activar el plugin, sin ninguna configuración previa:
2. Instalación en la web y configuración perfecta
Antes de pasar al vídeo, os voy a comentar brevemente para que sirve cada una de las funciones que os vais a encontrar en el plugin:
2.1. Opciones básicas:
Lazy Load
Las imágenes que haya en la web se irán cargando conforme se vaya haciendo scroll hacia abajo. Hay gente que le gusta más y gente que le gusta menos, pero la opción es interesante. A veces da problemas con los iframes (Tus tweets embebidos por ejemplo) y con algunos vídeos.
Optimización de archivos
Los archivos se minimifican. Esto quiere decir que se eliminan espacios en blanco, se pone todo el código en una sola línea y en un solo archivo, etc. Si por ejemplo tienes 3 archivos de css, te los pone todos juntos. Hay que llevar cuidado con esta opción porque algunos temas o plantillas se rompen si se activa. Yo recomiendo ir activando uno a uno, y ver qué pasa con el sitio. Lo bueno es que si tienes problemas puedes contactar con WP Rocket y te ayudan a solucionarlo.
Caché móvil
No hace falta activarlo si no se usa una plantilla o tema específico para móvil (si usáis WP-Touch por ejemplo). Si usáis un tema responsive, no hace falta activarlo. Lo ideal es saber cuánta gente os visita desde móvil. Podéis saber cómo leyendo el post sobre Google Analytics.
Caché de los feeds (RSS)
Si tenéis una web normal con un blog normal (que no se actualiza varias veces al día) lo podéis dejar activado.
Caché para usuarios conectados
Normalmente no se muestran páginas cacheadas para los usuarios conectados. Si vuestra página tiene varios autores, es interesante activar esta opción.
Caché SSL
Si tienes un sitio con SSL activado, activa esta opción.
Limpiar caché cada...
Cada cuanto se vacía la caché. Lo puedes dejar tal y como está.
2.2 Opciones avanzadas:
Precarga de peticiones DNS
Hace que se carguen antes los scripts con peticiones externas (Google Fonts, Fonts Awesome, etc.). En el vídeo os explico cómo se configura esto.
Vaciar caché de las siguientes páginas cuando se actualizan
Si actualizáis algo en un post, la página de inicio o donde sea, ponedlo aquí.
Nunca poner en caché las siguientes páginas
Si no quieres que algunas páginas se cacheen, ponlas aquí. Si usas Woocommerce o Easy Digital Downloads, son perfectamente compatibles con WP Rocket y no cachea ninguna página de producto o de carrito.
No poner en caché páginas con ciertas cookies
El título lo describe bien. :)
Páginas en caché con strings GET
Un recurso que necesite parámetros de otras webs, no debe cachearse nunca. Aquí podéis incluir dichas páginas.
Nunca enviar páginas a caché con user agents
Un user agent es un cliente web para ver contenido de internet. Por ejemplo, Chrome, Safari en iPhone, etc. Con algunos user agents puede que tu web se vea mal. Puedes introducir aquí dichos user agents (ej: Apple-iPhone). No se si esta opción os hará falta alguna vez.
Fusionar los archivos minificados en uno solo
Cuidado con esta opción, suele ser la que rompe muchos temas. Recordad ir activando una a una cada opción para ver cuál os funciona y cuál no, y contactar con soporte de WP Rocket para que os ayuden.
Archivos CSS y JS a excluir de la minificación
Esta puede ser la solución al problema anterior. Los archivos que os den problemas, los incluís aquí, y problema resuelto.
Archivos JS en el footer
Hay algunas plantillas que necesitan tener algunos archivos JS al principio. Para el resto de archivos que no requieran carga inicial, mejor ponerlos en el footer. Esto aumentará la velocidad de carga.
Archivos JS con carga diferida
Te carga los archivos JS de manera asíncrona.
Pasamos a continuación a revisar las opciones básicas del plugin:
Toca ahora analizar las opciones avanzadas del plugin:
Y por último revisamos el resto de pestañas del panel de administración del plugin:
3. Resultados y comparación con resultados anteriores.
Ya hemos dado un buen repaso a todas las posibilidades de configuración del plugin. Es el momento de ver si ha merecido la pena la implementación del mismo. Hacemos ahora un testeo de velocidad con la herramienta de Pingdom, para analizar el antes y el después:
Como veis la web ha mejorado bastante en tiempo de carga, en tamaño de la web y en peticiones que hace. Recordad que también es muy importante optimizar el tamaño de las imágenes que hay en la web, para que la carga sea incluso más rápida.
Si esto añadís el uso de un CDN (Content Delivery Network) conseguiréis aún más velocidad.
Aquí os dejo la imagen del antes y después que resume la potencia del plugin WP Rocket:
¡Un saludo y nos vemos en el siguiente post!