Mejorar la velocidad de carga FÁCILMENTE en WordPress

Este es un post que nunca pensé que iba a escribir, pero vamos allá. En este blog hablo sobre WPO y WordPress, pero para mí es mucho más fácil explicar las técnicas WPO avanzadas que las técnicas WPO más simples.

Este post va orientado a usuarios principiantes, sin conocimientos técnicos. Por esa razón, vamos a empezar sustituyendo el concepto WPO por una terminología menos “especializada” o técnica. Hoy vamos a hablar de “velocidad de carga”.

Cuando me envían un email a través del formulario de contacto de mi blog, me resulta muy fácil reconocer el nivel de conocimientos del remitente por el modo en que se expresa y por cómo se refiere a lo que necesita. Por otro lado, cuando me llaman para una ponencia y me dicen que el público no va a tener grandes conocimientos técnicos, me cuesta bastante simplificar la información para poder explicarla de forma que no se pierdan nada.

Como la mayoría sabréis, mi ritmo de ponencias y congresos desde 2016 hasta el confinamiento por COVID de 2020 ha sido muy alto y siempre me ha costado mucho mantenerme actualizado por la agenda tan apretada que he llevado. Sin embargo, desde marzo de 2020 he pasado más tiempo en oficina al no poder viajar y eso me ha servido para darle una vuelta al WPO desde todos los puntos de vista posibles, incluido el de la gente que simplemente quiere tener una web rápida y no tiene ni quiere tener conocimientos técnicos.

WordPress sigue siendo el CMS más utilizado del mundo, también por la gente que entra desde cero al mundo web. Eso, junto a que soy consultor WordPress, es lo que hace que haya querido centrarme en dar soluciones a este tipo de público.

Si vienes a mi blog a leer sobre WPO avanzado y cosas específicas como los Resource Hints o el protocolo HTTP/3 con QUIC, siento decirte que este post no es para ti. Este post es para la gente que no tiene conocimientos técnicos y quiere mejorar la velocidad de carga de su WordPress.

Voy a ir al grano, voy a dejar de lado todo lo que yo considero “prescindible” si no tienes conocimientos técnicos, así como todo lo que requiera “calibrar”.

 

Introducción

Soy consciente de que lo que voy a hacer aquí es mejorable en cuanto a resultados pero, como he dicho, este post va orientado a conseguir resultados notables en velocidad de carga sin necesidad de conocimientos técnicos.

Hablaremos, sobre todo, de WP Rocket como plugin de cache y de Imagify para la optimización de imágenes y la parte de WebP.

¿Es WP Rocket el mejor plugin de cache? Pues depende. Como siempre digo, hay plugins mucho más avanzados como LiteSpeed Cache o W3 Total Cache, así como plugins mucho más simples como Cache Enabler o WP Super Cache. Sin embargo, WP Rocket se coloca justo en el centro y se orienta a un público general.

WP Rocket permite obtener grandes resultados con cero conocimientos técnicos y eso solo lo valora el que no tiene esos conocimientos. A mí personalmente me ha costado asimilar eso y a diario veo a gente técnica que sigue sin entenderlo.

¿Es Imagify la mejor solución para optimizar imágenes? Pues depende. Su algoritmo es bueno, el plugin es genial y no da los fallos que suelen dar otros plugins similares.

Si nos vamos al terreno del WebP, aquí sí que pienso que Imagify es lo mejor, ya que el mismo plugin que hace la conversión tiene que servir WebP adaptándose a la compatibilidad del navegador. En ese aspecto Imagify es impecable, de lo mejor que he visto en mi vida (y eso que he probado unos cuantos plugins).

No me voy a enrollar más con la introducción. Solo te pido que te leas el post completo y que al final te pares a leer mi conclusión personal antes de comentar, ya que creo que es importante recalcar que esto está basado en mi experiencia y en las necesidades de los clientes que llegan a mí a través de Raiola Networks.

 

1 – Cache de página: la base de todo

Como siempre digo, solo con un cache de página ya se pueden conseguir muy buenos resultados. Para mí, el cache de página es la técnica WPO básica de cualquier sitio web dinámico o creado con un CMS, es decir, donde entra en juego un lenguaje interpretable como PHP y una base de datos.

Lo que hace un cache de página es servir contenidos cacheados estáticos a los visitantes. Al no tener que procesar una y otra vez las peticiones, se ahorran recursos de CPU y RAM y también tiempo, ya que las respuestas son más rápidas.

En WordPress, el cache de página es muy común. Existen muchos plugins de este tipo pero no todos son iguales y, dependiendo del caso y de las circunstancias, no todos nos servirán.

Independientemente del “método” para servir cache, hay otras características por las que se distinguen los plugins de cache: políticas de vaciado de cache automáticas y exclusiones automáticas. He dicho automáticas porque, si el plugin de cache no trae preconfiguradas reglas para ambas cosas, las tendremos que poner nosotros.

Por otro lado, otro punto fundamental para los usuarios principiantes es la dificultad de configuración o, en este caso, la mal llamada curva de aprendizaje. Justo en este terreno es donde WP Rocket destaca.

WP Rocket puede presumir de que, simplemente con activarlo, ya tenemos listo el cache de página. Además, el resto de la configuración relacionada con el cache no es avanzada y se puede entender perfectamente aunque no se tengan conocimientos técnicos:

En cuanto a lo que decía más arriba sobre las exclusiones y las políticas de vaciado de cache, WP Rocket lleva integradas ciertas reglas para ser compatible con la mayoría de plugins importantes y muy dinámicos: WooCommerce, LearnDash, EDD, etc.

No obstante, si queremos añadir nuestras propias políticas de vaciado de cache o nuestras propias exclusiones también podemos hacerlo de forma fácil:

Personalmente, nunca he visto una interfaz de configuración de plugin de cache tan orientada al usuario principiante como la de WP Rocket. Todo está explicado incluso con vídeos y tienen una documentación bastante completa accesible desde la propia interfaz.

Independientemente de que es un plugin ideal para gente sin conocimientos técnicos que quiera implementar un cache de página en WordPress, a mí algunas funcionalidades de WP Rocket me encantan y creo que están muy bien al compararlas con otros plugins de cache incluso más configurables.

Un ejemplo es el Precache o Precargar, que se encarga de que siempre exista una versión de cache lista para servir a los visitantes:

Como ves en este post no he entrado en materia, pero he grabado el siguiente videotutorial y lo he subido a mi canal de YouTube:

En el vídeo anterior puedes ver cómo realizo una configuración bastante conservadora y fácil para que cualquiera pueda implementarla en su sitio web sin complicarse.

Si quieres leer más sobre WP Rocket, puedes consultar este post completo: https://alvarofontela.com/wp-rocket-plugin-cache-wordpress/

Y antes de que te me tires al cuello si has llegado hasta aquí y tienes otra opinión, recuerda que este post es para usuarios principiantes. Si sabes lo que significa el término “proxy cache”, por ejemplo, este post NO es para ti 🙂

 

2 – Optimización de imágenes y WebP

Siempre digo lo mismo en mis ponencias: el 99% de las imágenes que se suben a Internet tiene problemas de optimización en la compresión o en el escalado.

Si quieres repasar estos conceptos, los tienes explicados en este otro post: https://alvarofontela.com/optimizar-imagenes-wordpress-web/

Para solucionar los problemas de optimización de las imágenes existen varios caminos que se pueden seguir y que conllevan distintos flujos de trabajo:

• Optimizar las imágenes en local con una aplicación de ordenador como Photoshop y subirlas a WordPress con la compresión correcta y escalado máximo correcto.
• Optimizar las imágenes en un servicio online como Kraken.io, descargarlas de nuevo al ordenador y subirlas a WordPress ya listas.
• Optimizar las imágenes con un plugin para WordPress simplemente subiéndolas y que el propio plugin lo haga todo.

¿Cuál crees que es el método más efectivo, práctico y productivo de las opciones anteriores? Evidentemente la tercera y última opción, ya que subimos las imágenes y nos olvidamos de todo.

Existen muchos plugins para optimizar imágenes en WordPress, pero todos son diferentes a pesar de hacer exactamente lo mismo. Realmente, los que mejor resultado dan son los que realizan la compresión en un servicio externo de forma automática, ya que las librerías para trabajar con imágenes en el servidor suelen ser poco eficientes y, además, consumen bastantes recursos en el hosting o servidor.

Hay dos tipos de plugins de optimización de imágenes mediante servicio externo:

• Plugins con un excelente algoritmo de compresión, pero con un plugin mal desarrollado que puede dar problemas en la gestión.
• Plugins con un algoritmo de compresión normalito (por algo se paga…) y con un buen plugin para gestión de imágenes en WordPress.
• Plugins con un algoritmo potente, configurable y con un excelente plugin para la gestión.

Personalmente, cuando hablo de esta tercera y última opción estoy hablando de Imagify, el plugin de optimización de imágenes y conversión a WebP de los creadores de WP Rocket.

No es la primera vez que hablo de Imagify en este blog, ya que me encanta y más desde que WebP ha entrado en juego.

Imagify tiene tres ventajas:

• Plugin simple y fácil de configurar, ideal para usuarios principiantes.
• Algoritmo de compresión potente y configurable en 3 niveles.
• Conversión y sustitución de WebP: convierte y sirve WebP con poca configuración.

Como puedes ver en la siguiente imagen, la interfaz de Imagify es MUY fácil de entender:

No tiene mucha historia: solo hay que configurar el nivel de optimización (Agresivo es una buena opción) y después marcar las casillas correspondientes:

• Marcamos la casilla “Optimización automática de imágenes al subirlas”, ya que esto es lo que hará que las imágenes se optimicen automáticamente al subirlas.
• Marcamos “Backup de las imágenes originales”, que yo suelo dejar como opcional pero, si quieres utilizar la parte de WebP, tienes que dejarlo marcado.
• Dejamos desmarcada la opción “Mantén todos los datos EXIF de tus imágenes”, a no ser que seas fotógrafo y quieras esa información que en el mundo web no sirve para nada.

Adicionalmente, si bajamos un poco más, saltándonos la parte de WebP que vamos a explicar un poco más abajo, veremos esto:

Recuerda que, si no queremos complicarnos (ya que te recuerdo que este post es para usuarios principiantes), podemos dejarlo todo como está y no tocar nada.

Si queremos tocar alguna cosa, podemos poner la opción “Redimensiona las imágenes más grandes” en 2048, ya que es el tamaño mínimo que permite para el escalado pero resulta suficiente a no ser que tengas una web de fotografía.

Y si queremos tocar algo más, en “Carpetas personalizadas” podemos marcar “Añadir los temas a la optimización” para que se optimicen también las imágenes que lleven las plantillas guardadas en sus carpetas.

Ahora vamos con la parte de WebP, que es un poco más compleja porque el mismo plugin que hace la conversión debe ser capaz de servir las imágenes.

WebP es un formato apoyado por Google del que ya he hablado en este blog, por eso no voy a hacer “presentación”. Si quieres más detalles, te dejo este post: https://alvarofontela.com/webp-wordpress/

Vamos a separar en dos partes la explicación a partir de aquí:

• Conversión a WebP: Realmente cualquier plugin puede convertir. Hay decenas de opciones para hacerlo y el resultado es más o menos el mismo, siendo sinceros.
• Servir WebP: Muchos visitantes siguen sin usar navegadores compatibles (a pesar de que Apple ya se ha puesto al día) y eso hace que no podamos servir WebP siempre. El plugin que sirve WebP debe ser capaz de hacerlo de forma efectiva a los visitantes que tengan compatibilidad en su navegador.

Existen varias opciones, tanto gratuitas como de pago. El problema de las opciones gratuitas es que requieren configuración avanzada y eso implica conocimientos avanzados.

Vamos a comparar. Esta es la pantalla de configuración de WebP Express, un plugin gratuito para convertir y servir WebP en WordPress:

Y esta otra es la parte de configuración de WebP de Imagify:

¿Ves la diferencia? Si no tienes conocimientos, con la configuración de WebP Express te vas a volver loco. Sin embargo, con Imagify va todo rodado.

Otro tema es el funcionamiento, ya que yo con Imagify NUNCA he tenido un problema al convertir o servir WebP, mientras que con WebP Express y otras alternativas que convierten y sirven sí que me he encontrado problemas importantes.

También hay que destacar que la conversión de imágenes a WebP de Imagify NO consume cuota, es decir, Imagify no te cobra por ello sino solo por optimizar.

Para finalizar y por si no te ha quedado claro, te dejo un videotutorial donde puedes ver cómo ejecutar todo el proceso en menos de 2 minutos:

En este caso no puedo exportarte la configuración, pero el proceso puede hacerse en menos de 2 minutos si sigues las indicaciones anteriores, incluso sin conocimientos técnicos.

Si quieres mas información acerca de Imagify, puedes encontrarla en su sitio web oficial: https://imagify.io/wordpress/

Repito: Si has llegado hasta aquí y no estás de acuerdo conmigo, te recuerdo que este es un post para usuarios sin conocimientos técnicos. Si sabes lo que es la carga progresiva de WebP, este post NO es para ti 🙂

 

3 – Lazy Load para imágenes e iframes

Aquí volvemos a WP Rocket, pero para una funcionalidad que también tiene que ver con las imágenes de cierto modo.

Lazy Load es una técnica WPO mediante la cual servimos las imágenes (también aplicable a iFrames, como vídeos de YouTube) cuando el usuario hace scroll por la página y llega a ellas. Es decir, nos ahorramos las peticiones en el momento de cargar la página y esas peticiones se realizan mediante JS o de forma nativa con el navegador cuando el usuario realmente las necesita.

Con Lazy Load se ahorran recursos en la mayoría de las ocasiones y, además, también conseguimos mejorar la velocidad percibida por el usuario durante la carga de la página.

Personalmente, nunca hice mucho caso a esta técnica WPO hasta hace poco, cuando he visto lo que nos permite ahorrar en peticiones al cargar una web.

Existen cientos de plugins para implementar Lazy Load en WordPress, pero yo nunca he visto ninguno tan simple como WP Rocket y que además permita hacer Lazy Load de los vídeos de YouTube (iframes).

Lo que ves es lo que hay: con estas tres casillas o checkboxes de verificación tienes Lazy Load activado en tu sitio web.

Existen otros plugins muchísimo más potentes y configurables para aplicar Lazy Load en WordPress, como a3 Lazy Load, pero su configuración requiere conocimientos técnicos. Compara la captura anterior con esta otra del panel de configuración de a3 Lazy Load:

Como ves, si no tienes conocimientos con a3 Lazy Load te va a ser mucho más difícil la configuración.

Adicionalmente, si quieres utilizar el Lazy Load nativo que funciona mediante navegador en lugar de JavaScript, puedes instalar este plugin complementario de WP Rocket en el navegador. No tiene configuración: https://docs.wp-rocket.me/article/1292-chrome-native-lazyload En el momento de escribir esto, solo Google Chrome y Microsoft Edge son compatibles con el Lazy Load nativo.

Una vez más, te recuerdo que si quieres saber más sobre WP Rocket puedes leer este post completo: https://alvarofontela.com/wp-rocket-plugin-cache-wordpress/

 

4 – API Heartbeat y su impacto en el hosting

El API Heartbeat, como siempre digo, es una gran ventaja en WordPress pero que puede ser bastante problemática en algunas instalaciones.

Como comentaba en secciones anteriores, no voy a hacer “presentación” del API Heartbeat porque ya lo expliqué en profundidad en este post: https://alvarofontela.com/api-heartbeat-admin-ajax-php-wordpress/

Puede ser interesante reducir el impacto del API Heartbeat en WordPress y WP Rocket te ofrece dos soluciones para ello.

Por un lado, en la configuración de WP Rocket tenemos una sección orientada a esto:

Y por otro, la misma configuración podemos encontrarla en un plugin gratuito que tienen colgado en el repositorio de WordPress: https://es.wordpress.org/plugins/heartbeat-control/

Es curioso porque, hace unos años, para hacer esto era necesario meter una función PHP dentro del functions.php del theme activo. En cambio ahora, con 4 clics, podemos aumentar el tiempo entre peticiones de 15 a 60 segundos o más. Esto hará que nuestro WordPress consuma menos recursos de CPU y RAM del hosting.

Si no sabes de lo que hablo y quieres profundizar, te dejo este post donde explico cómo funciona un hosting y cuáles son sus recursos: https://alvarofontela.com/como-funciona-hosting-cpu-ram-recursos/

 

5 – Optimizar JS y CSS: Saliendo de la zona principiante…

Estamos llegando al final y me toca hablarte brevemente de la parte de optimización JS y CSS en WordPress.

De esto también tengo un post, y bastante completo, que puedes encontrar aquí: https://alvarofontela.com/optimizar-carga-javascript-css-wordpress/

Y ya que en este artículo estamos explicando cómo hacer todo con WP Rocket e Imagify, ya que bajo mi punto de vista están orientados a usuarios principiantes o sin conocimientos técnicos avanzados, pues vamos a seguir por esta línea y a dar por hecho que usamos WP Rocket como plugin de cache.

WP Rocket también tiene las funcionalidades integradas para optimizar el JS y CSS servido, además de toda la parte de cache.

¿En qué se diferencia WP Rocket de otras alternativas como Autoptimize? Ambos son simples en este terreno, pero WP Rocket cuenta con la “desventaja” de ser de pago.

Y es justo aquí donde entra en juego el soporte de WP Rocket, ya que he visto casos de clientes míos de Raiola Networks que han contactado con el soporte de WP Rocket para que les solucionaran problemas relacionados con la optimización de JS y CSS y estos les han proporcionado las exclusiones necesarias para añadir:

Yo soy consciente de que esta parte es mucho más compleja para un usuario que empieza o que no tiene conocimientos técnicos. De hecho te recomiendo que, si no quieres líos, dejes vacía esta sección de WP Rocket.

Si recurres a un consultor WPO como yo para esta parte, seguramente combinará WP Rocket con otros plugins o directamente no utilizará WP Rocket para la optimización, ya que hay herramientas muchísimo más avanzadas. Aun así, WP Rocket no es una mala herramienta en este terreno.

A continuación, te dejo una captura completa de una configuración conservadora para esta sección. Si te da problemas o te descoloca la página, consulta con el soporte de WP Rocket sin problema y ellos te ayudarán a ajustarla a tu sitio web con las exclusiones:

Si has llegado hasta aquí y no estás de acuerdo, antes de que comentes nada te recuerdo que este post está orientado a gente con pocos conocimientos técnicos. Para usuarios más avanzados, tengo posts como este: https://alvarofontela.com/optimizar-carga-javascript-css-wordpress/ Y para usuarios avanzados también recomiendo otros plugins, como Assets CleanUp Pro o la parte de optimización de W3 Total Cache. Ambos son muy configurables, pero suponen un reto en la mayoría de ocasiones.

 

6 – BONUS: El hosting, el gran olvidado

El tema final del que vamos a hablar es el hosting porque, si hay un cuello de botella en el hosting, todo lo anterior que hemos comentado en este post no sirve para NADA.

Por si no lo has visto aún, te dejo mi post donde explico cómo funciona un hosting: https://alvarofontela.com/como-funciona-hosting-cpu-ram-recursos/

Hay tres puntos clave en un hosting por los que una web puede cargar lenta aunque hayamos aplicado todo lo anterior:

• Overselling: El proveedor llena más los servidores de lo que pueden aguantar y, en picos u horas punta, estos se saturan.
• Tecnologías obsoletas: Muchos proveedores de hosting siguen usando Apache como servidor web o incluso IIS de Microsoft, sin cambiar a servidores web mucho más eficientes y rápidos como Nginx o LiteSpeed.
• Saturación de red: Esto suele ser puntual y no depender del hosting. Puede ocurrir y, realmente, nadie puede hacer nada.

La solución suele ser la siguiente, aunque depende de las circunstancias:

• Overselling: Huye, escapa, corre… Esto es un sinónimo de que para el proveedor eres solo un número y no un cliente.
• Tecnologías obsoletas: Si es hosting compartido huye, escapa, corre… Significa que el proveedor es un “dinosaurio”. Si es un servidor VPS o dedicado, la solución puede ser la anterior o que cambies de sysadmin.
• Saturación de red: No puedes hacer nada. No depende ni de ti ni del proveedor, simplemente a veces ocurre. Lo único que podrías hacer es contratar Argo de CloudFlare, pero eso ya es entrar en otro tema.

Siempre explico los puntos anteriores porque precisamente son los que evitamos a toda costa en Raiola Networks. Odiamos el overselling ya no desde el punto de vista del negocio, sino desde el punto de vista ético. También invertimos en I+D y tecnología y somos uno de los pocos proveedores españoles que invierten en ofrecer LiteSpeed como servidor web a sus clientes.

Si buscas hosting WordPress rápido con LiteSpeed, este enlace con un 20% de descuento te interesará: https://alvarofontela.com/hosting-wordpress

Y si necesitas consejo sobre hosting, no dudes en contactar conmigo a través del formulario de este blog: https://alvarofontela.com/contacto/

 

Conclusión final y personal

Sí, he hablado solo de dos plugins, pero es que realmente no necesitas mucho más si eres un usuario principiante. Además, ambos están orientados a facilitar las cosas a gente sin conocimientos técnicos. Soy consciente de que son plugins de pago, pero la alternativa es pagar a un consultor WPO como yo, de modo que al final te gastarás el dinero igual.

En cierto modo estoy yendo en mi propia contra pero no quiero engañar a nadie y a mí, profesionalmente, como consultor WPO lo que me interesan son los retos. No pienso “estafar” a nadie cobrando un precio alto por la instalación de un plugin de cache y 4 cosas más, ya que en la mayoría de los casos es lo que hay que hacer.

Está claro que no es lo mismo optimizar un WooCommerce con 30 plugins que optimizar un blog simple con un theme GeneratePress y pocos complementos. En el primer caso puedes necesitar un consultor WPO para no liarla, pero en el segundo puedes hacerlo fácilmente tú con WP Rocket e Imagify. Además, no solo podrás hacerlo sino que también podrás mantenerlo tú mismo, ya que los plugins y las optimizaciones más avanzadas en muchos casos requieren revisión cada pocos meses.

Resumiendo, que ya me he extendido mucho más de lo que quería… Creo que no es necesario matar moscas a cañonazos (esto va por la gente que tiene conocimientos técnicos altos y está leyendo esto) y que actualmente existen soluciones adaptables a todos los públicos y circunstancias. No es como hace 10 años, cuando solo estaba WP Super Cache y era malo con ganas pero lo “tragábamos” igual porque era lo que había. Actualmente se compite en dos terrenos diferentes:

• Facilitar la configuración a los usuarios con pocos conocimientos técnicos y guiarlos para que puedan implementar las técnicas WPO básicas.
• Ofrecer nuevas opciones para aplicar nuevas técnicas WPO a WordPress, con configuraciones específicas y manteniendo la coherencia en el resultado.

Normalmente, los plugins compiten por uno de los caminos. No conozco ninguno que compita en ambos, aunque alguno se queda en medio.

En el caso de las imágenes es más o menos lo mismo. Aunque WebP ha cambiado algunas cosas, hay algo que no ha cambiado: los plugins de optimización gratuitos no pueden competir en eficiencia al contar con algoritmos mucho más simples y que comprimen menos. Merece la pena pagar por este tipo de plugins con mejores algoritmos, como Imagify.

Si tienes cualquier duda sobre el contenido del post, puedes contactar conmigo a través del formulario de esta web: https://alvarofontela.com/contacto/