WPO básico para optimizar WordPress

Dificultad del post: facilmediadifícil
[Total:4    Promedio:4.8/5]
optimizar wordpress

El WPO básico para optimizar WordPress es simple. No es necesario tener muchos conocimientos técnicos para realizarlo y, como ya está comprobado, cualquier diseñador o implementador que tenga soltura manejando WordPress y sus plugins puede realizarlo.

Cuando hablo de WPO básico para WordPress, hablo de realizar la optimización de la velocidad de carga necesaria para un sitio web WordPress básico: blogs y páginas estáticas.

Si tenemos que optimizar un WooCommerce o BuddyPress de forma efectiva, eso ya no es WPO básico. Deberemos entender cómo funcionan este tipo de sitios web para conseguir una optimización efectiva sin dañar las funcionalidades o la experiencia del usuario. Si consultas mi post de WPO para WooCommerce, podrás entender de lo que hablo.

wpo wordpress

En este post, vamos a especificar tareas y acciones simples que casi no requieren conocimientos técnicos y que nos permiten conseguir mejoras en la velocidad de carga, como estas:

wpo wordpress

Esto es un ejemplo de una web real (concretamente, del sitio web mundoentrenamiento.com) antes y después de que yo le hiciera un trabajo de WPO para mejorar la velocidad de carga y reducir el consumo de recursos.

Para que veas un ejemplo de lo que se puede hacer con WPO al optimizar un WordPress (aunque sin profundizar mucho), esto es lo que se consigue simplemente implementando un cache de página en WordPress:

wpo wordpress

En el ejemplo anterior, el cache de página fue implementado utilizando el plugin WP Rocket sobre WordPress.

¿Qué puntos vamos a tocar en esta guía de WPO básico para optimizar WordPress?

¿Que se pueden hacer más cosas? ¡Claro que sí! Pero si profundizamos mucho más dejamos de hablar de WPO básico y lo convertiríamos en WPO a secas o WPO avanzado. En ese caso, podría escribir tantas palabras como en este post de WPO para WordPress que escribí hace tiempo en el blog de Raiola Networks: https://raiolanetworks.es/blog/optimizar-wordpress-guia-completa-gratis/

Adicionalmente, existen ciertos tweaks o ajustes simples que se pueden realizar en cualquier web, como activar la compresión GZIP o el cache de navegador o browser cache.

¿Por qué no hablo sobre estos tweaks de WPO? Pues porque el impacto en la velocidad de carga es mínimo en la mayoría de los casos, sobre todo si lo comparamos con cualquiera de los puntos clave anteriormente mencionados.

optimizar wordpress

De todas formas, independientemente de las técnicas WPO que podamos implementar en un WordPress para mejorar la velocidad de carga y reducir el consumo de recursos, lo ideal es que siempre que desarrollemos una web estemos ya pensando en los tiempos de carga y en la agilidad.

¿Cuál es la razón por la que debemos tener un sitio web rápido?

Existen 3 motivos principales que debemos tener en cuenta y que justifican la aplicación de técnicas WPO a un sitio web:

  • Mejorar la experiencia del usuario y con ello mejorar la conversión de los CTAs que tenga la web.
  • Mejorar la eficiencia de la web, reduciendo el consumo de recursos y consiguiendo estabilidad en picos de tráfico.
  • Mejorar la indexación y el crawleo por parte de los bots de los principales buscadores, como el de Google.

Personalmente, considero que las “técnicas WPO” se aplican a sitios web ya desarrollados. Sin embargo, no considero que sean técnicas WPO cuando estamos desarrollando un sitio web y lo hacemos pensando en la velocidad de carga. En ese caso, las denomino simplemente “buenas practicas”.

No voy a enrollarme más. Vamos con los puntos clave para optimizar WordPress.

 

Cache de página en WordPress

Este es un tema que tengo muy tocado en este blog y que siempre menciono como primer punto en todas las ponencias, clases y todos los contenidos que imparto sobre WPO.

Independientemente de que hablemos de WPO para WordPress o de WPO para cualquier otro sitio web desarrollado con cualquier otro CMS o lenguaje de programación, siempre considero que el cache de página es la base de TODO.

optimizar wordpress

El ejemplo anterior es la diferencia entre implementar un cache de página o no implementarlo en WordPress, utilizando el plugin WP Rocket (que recomiendo en el 90% de los casos).

Hace algunos meses, le dediqué un post entero al cache de página en WordPress. Te conté 3 alternativas para implementar un cache de página en WordPress de forma efectiva y para distintos tipos de sitios web. Puedes ver el post completo en este enlace: https://alvarofontela.com/plugins-cache-optimizar-wordpress/

Independientemente de esto, hay vida más allá de los 3 plugins mencionados en el post anterior.

En Raiola Networks utilizamos LiteSpeed Web Server para nuestros planes de hosting y, por esa razón, también recomendamos el plugin LiteSpeed Cache. Este se integra perfectamente con LiteSpeed Web Server y añade algunas funcionalidades bastante útiles.

optimizar wordpress

Los plugins de cache no son la única forma de implementar un cache de página en WordPress. Con servicios en el servidor web como Nginx o Varnish también podemos implementar un cache de página mucho más potente que con cualquier plugin para WordPress. Sin embargo, será más difícil de configurar.

Lo que debemos entender es que cachear es un arte, no una simple implementación.

Debemos planificar una estrategia de cache, no solo instalar y configurar un plugin de cache.

Es necesario cachear de forma inteligente, teniendo en cuenta el tipo de web y las funcionalidades.

Para que te hagas una idea: si tenemos un blog con los comentarios por defecto de WordPress, debemos prestar mucha atención a los tiempos y políticas de vaciado de cache para evitar problemas con el cache en los comentarios. En cambio, si tenemos un blog y usamos Disqus Comment System u otro sistema de comentarios externo, podremos cachear TODO sin ningún tipo de exclusión o cuidado.

¿Lo ves? El simple hecho de implementar una funcionalidad de una forma u otra va a marcar la diferencia en la estrategia a la hora de implementar el cache de página o cualquier otro tipo de cache.

Si quieres más información sobre cómo configurar un cache de página para optimizar WordPress, puedes consultar estos 2 enlaces:

 

Optimizar imágenes en WordPress

Las imágenes son una de las partes más importantes de una web, ya que gran parte del contenido de una web son imágenes o vídeos. Aunque las imágenes han perdido cierto peso en la “estructura” de la web, lo han ganado en el contenido, ya que nos permiten enriquecer el contenido del sitio web y, como se suele decir, “una imagen vale más que mil palabras”.

Este es otro tema del que ya he hablado en este blog y vuelvo a repetir lo mismo que digo siempre en mis clases y mis ponencias sobre WPO:

El 99% de los sitios web tienen problemas con el tamaño de las imágenes.

Para decir que tenemos las imágenes optimizadas no solo debemos prestar atención a la compresión, sino también al escalado.

Como puedes ver en el siguiente ejemplo, se nota mucho la diferencia entre una imagen que pesa más y una que pesa menos, sobre todo teniendo en cuenta que en un sitio web se suelen servir entre 10 y 50 imágenes de media:

optimizar wordpress

Existen varias formas de optimizar imágenes en WordPress, pero se pueden llegar a clasificar en dos grupos:

  • Optimizar ANTES de subir las imágenes a WordPress.
  • Optimizar DURANTE o DESPUÉS de subir las imágenes a WordPress.

En el primer caso, se suelen utilizar servicios online como Kraken.io o Abraia Compressor; o bien aplicaciones para el ordenador como Adobe Photoscape. En el segundo caso, se tiene que utilizar un plugin para WordPress como Imagify o Abraia, que optimice las imágenes al subirlas a la galería de medios de WordPress.

No me voy a enrollar más, ya que tengo un post sobre cómo optimizar imágenes y fotos en WordPress. Te lo dejo aquí: https://alvarofontela.com/optimizar-imagenes-wordpress-web/

Si quieres probar directamente un buen servicio de optimización de imágenes para WordPress, te sugiero que pruebes el plugin de Abraia para WordPress: https://alvarofontela.com/abraiawp

Te permitirá optimizar 500 MB de imágenes de forma gratuita para que puedas probarlo y, si tienes cualquier duda, tan solo tienes que contactar conmigo.

 

Minificar, combinar y carga asíncrona en WordPress

La optimización de recursos JS y CSS es el punto clave más complicado de todos los mencionados en este post, ya que dependemos de muchas variables.

Los sitios web actuales están formados por mucho Javascript, ya que es lo que les concede ciertas funcionalidades dinámicas. También tienen mucho CSS, que nos permite darle forma al layout y al diseño.

velocidad de carga wordpress

Existen 3 técnicas WPO generales para optimizar JavaScript y CSS:

  • Minificar
  • Combinar
  • Carga asíncrona

De forma adicional, podemos realizar algunas acciones o tweaks más en el JS y CSS como, por ejemplo, la carga condicional de elementos.

Con la optimización de la carga de CSS y JS no solo conseguimos mejorar la velocidad de carga del sitio web, sino también simplificar la carga de las páginas en el navegador del visitante.

Pero hay algo más… El navegador de los visitantes no es el único que tiene que interpretar esto, ya que los bots de los principales buscadores también. Al simplificar la carga de Javascript, conseguimos que los bots como Google Bot consigan ver más páginas de nuestro sitio web en menos tiempo, con la consecuente mejora en el crawleo:

velocidad de carga wordpress

El CSS provoca menos impacto, ya que las hojas de estilo CSS suelen ser mucho más fáciles de interpretar para los navegadores, aunque también podemos hacer ajustes para mejorar la entrega de CSS y agilizar la carga del sitio web.

También hay que destacar que la compresión GZIP, compresión Brotli o compresión Deflate afectan a los archivos o recursos base texto. Por esa razón, la carga de JS y CSS se optimiza “algo” al comprimir los recursos antes de enviarlos al navegador del visitante.

Otra vez no me voy a liar más, ya que he escrito un post MUY completo sobre la optimización de la carga de JS y CSS en WordPress: https://alvarofontela.com/optimizar-carga-javascript-css-wordpress/

 

Configuración de un CDN en WordPress

Y empieza el debate, ya que el tema de los CDN está bastante debatido sobre si merece la pena o no contratar y configurar un CDN.

Vamos a empezar por el principio: un CDN (Content Delivery Network) es una red de distribución de contenido que se utiliza para servir contenido estático desde servidores más cercanos al visitante. De esta forma, reducimos las latencias y con esto se mejora la velocidad de descarga de los archivos estáticos más pesados. Por ejemplo, imágenes, archivos CSS, archivos Javascript, archivos PDF, vídeos, etc.

velocidad de carga wordpress

El funcionamiento básico de un CDN guarda en los servidores, llamados POPs y repartidos por todo el mundo, una copia de esos archivos estáticos (que nunca o casi nunca cambian) y los sirve desde esos POPs repartidos por todo el mundo. De esta forma, los contenidos siempre se sirven al visitante desde los servidores más cercanos, en lugar de servirlos todos desde el hosting que aloja la web.

Como he dicho, una de las principales ventajas es la mejora en la velocidad de descarga pero, al mismo tiempo, también se balancea la carga entre distintos servidores, aliviando al hosting que aloja la web.

Hace algún tiempo (un par de años), cuando los servicios CDN no estaban tan extendidos, se decía que eran servicios pensados para sitios web muy grandes (como Youtube, Facebook o Instagram). No obstante, actualmente es recomendable utilizar un CDN en cualquier sitio web que tenga tráfico de distintas partes del mundo, como en el caso de un sitio web español alojado en España pero con bastante tráfico latinoamericano.

velocidad de carga wordpress

Evidentemente, si tienes un sitio web en España y tu tráfico o tus clientes potenciales SOLO son de España, un CDN no es necesario a menos  que quieras balancear la carga por exceso de tráfico (pero para esto existen otros métodos).

Existen muchos servicios CDN y cada día aparecen más, pero yo siempre recomiendo los mismos:

  • KeyCDN
  • CDN77
  • Amazon CloudFront

También suelo recomendar CloudFlare, aunque no lo he incluido en la lista anterior porque es un CDN que funciona de otra forma.

velocidad de carga wordpress

CloudFlare es un CDN que funciona mediante proxy inverso. Eso quiere decir que se coloca por delante de toda la web y “filtra” todo el tráfico a través de un proxy cache Nginx, por lo que tiene más funcionalidades que un CDN normal. Por otro lado, CloudFlare es el único CDN con servicio gratuito normal, ya que su plan gratuito yo lo he visto aguantar hasta 7,9 terabytes de tráfico mensual.

Para que veas las ventajas que tiene un CDN en la carga de una web, a continuación te dejo un ejemplo de carga de una web con y sin CloudFlare, ejecutando las pruebas de carga con Pingdom Tools desde la costa oeste de EE. UU. (California):

velocidad de carga wordpress

Y este es un ejemplo de prueba de carga con y sin CDN (también con CloudFlare) de una imagen cargada desde la costa oeste de EE. UU. (California) con Pingdom Tools:

velocidad de carga wordpress

Como puedes ver, hay bastante diferencia, aunque también es cierto que nos estamos poniendo en el peor de los casos, con una distancia geográfica de más de 10.000 kilómetros y cables intraoceánicos.

Si buscas mas información acerca de CloudFlare como CDN, también he escrito un post sobre CloudFlare en este blog y lo puedes encontrar aquí: https://alvarofontela.com/cloudflare-cdn-optimizar-web-blog/

Tengo un artículo publicado donde explico cómo configurar un CDN en WordPress. El CDN elegido es KeyCDN, ya que es uno de mis favoritos. Puedes encontrar el artículo completo sobre cómo configurar un CDN en WordPress con diferentes plugins en este enlace: https://alvarofontela.com/configurar-cdn-en-wordpress/

 

Servidor optimizado y potente para WordPress

Y llegamos al punto final, pero no por ello menos importante.

El hosting o servidor web que aloja la web es un punto clave importante ya que, si esto falla, podemos aplicar todas las técnicas WPO que nosotros queramos que no vamos a conseguir mejorar la velocidad de carga.

El servidor juega un papel bastante importante en todo esto, ya que debe tener implementadas las tecnologías necesarias y al mismo tiempo la configuración adecuada para una buena velocidad de carga en los sitios web alojados.

velocidad de carga wordpress

WordPress se ha convertido en un CMS complejo al añadirle plugins y themes, que cada vez son más COMPLETOS y COMPLEJOS.

Todas las facilidades de implementación que tenemos con WordPress, en la mayoría de los casos, las “pagamos” en rendimiento y por eso necesitamos un servidor potente que pueda servir páginas y procesar peticiones lo más rápido posible.

A la hora de elegir un buen hosting para WordPress, debemos prestar atención a varios puntos clave:

  • Que el servicio de servidor web sea eficiente, es decir, un Nginx o LiteSpeed está bien, aunque un Varnish con Apache tampoco está mal. Lo que NUNCA debe tener un hosting actualmente para ser eficiente es tener Apache como servidor web.
  • Que los recursos sean abundantes y suficientes para servir las páginas de forma rápida: la memoria RAM y los recursos de CPU no deben ir justos y deben ser suficientes para aguantar picos de trafico de al menos el 500%.
  • La versión de PHP debe ser seleccionable o, en su defecto, actualmente es necesario PHP7.1 o superior. Así conseguiremos mucha más velocidad y eficiencia a la hora de ejecutar código PHP.

A efectos de recursos, no es lo mismo contratar un hosting barato que uno más caro, al menos dentro de un mismo proveedor. Aunque no lo parezca, no tiene la misma potencia de proceso un hosting de 5 euros que uno de 10, aunque mucha gente piensa que SOLO se diferencian en el almacenamiento y eso no es exactamente así.

Como puedes ver en la siguiente imagen, se nota bastante la diferencia entre un plan de hosting básico y un plan de hosting más potente:

servidor optimizado wordpress

La prueba anterior es una comparación de la potencia de proceso PHP que tiene un Plan Inicio SSD de Raiola Networks y un Plan Pro SSD de Raiola Networks. Como puedes observar, NO solo se paga por más espacio de almacenamiento y la posibilidad de alojar más dominios, sino que también se paga por más potencia de CPU, más memoria RAM y más capacidad de I/O en disco; entre otras características técnicas.

Como siempre digo:

Los recursos ilimitados no existen, ya que hasta ahora los servidores no son reactores nucleares…

La diferencia entre un servidor con LiteSpeed y con Apache también es bastante notable como puedes ver en el siguiente gráfico donde se miden las request per second que son capaces de responder los tres servidores web en el mismo tiempo y con los mismos recursos:

servidor optimizado wordpress

Y también te dejo a continuación el benchmark de rendimiento de las diferentes versiones de PHP para que puedas ver la mejora de rendimiento que tiene PHP7 frente a PHP5.6:

servidor optimizado wordpress

¿Quieres un hosting potente para tu WordPress? Nosotros en Raiola Networks te ofrecemos un plan de hosting adaptado a tus necesidades y a las de tu proyecto. Nosotros NO vendemos humo e intentamos siempre que los recursos ni se pasen de largo ni se queden cortos con el fin de conseguir un precio JUSTO.

Por si quieres más información sobre nuestro hosting WordPress con discos SSD NVME y LiteSpeed Web Server, te dejo este enlace: https://alvarofontela.com/hosting-wordpress

Si necesitas ayuda para elegir un plan de hosting para tu proyecto web WordPress, puedes consultar el tema conmigo e intentare ayudarte.

 

¿Y cómo podemos mejorar aún más la velocidad de carga?

Como he dicho repetidas veces, estos puntos clave son WPO básico para optimizar WordPress. Sin embargo, si queremos optimizar WordPress AÚN MÁS, existen otro tipo de técnicas WPO más potentes y que no se notan tanto, pero que nos permiten darle a nuestro sitio web los últimos ajustes o “tocar” más en el punto débil.

Muchas técnicas WPO avanzadas pueden ser consideradas más técnicas de desarrollo que WPO, pero las podemos utilizar igualmente en nuestro beneficio para conseguir una buena velocidad de carga.

servidor optimizado wordpress

Algunas acciones destacadas o técnicas que podemos llegar a implementar para mejorar la velocidad de carga son estas:

  • Implementación de “resource hints” o precarga de recursos, de lo que ya he hablado en este blog.
  • Carga condicional de elementos en WordPress, sobretodo en el caso de Javascript, ya que en algunas partes de la web podemos simplificar mucho la carga haciendo que no se cargue el JS solo en esa parte si no se necesita.
  • Ajuste del API Heartbeat en WordPress, que se manifiesta y ralentiza normalmente a través de peticiones concurrentes al archivo admin-ajax.php. De esto ya he hablado en este blog hace algún tiempo.
  • Ajuste del wp-cron.php de WordPress y de su funcionamiento interno, cambiado por el CRON de Linux para reducir el consumo de recursos en cada visita a la web. De esto también he hablado en este blog anteriormente.
  • La minificación y el combinado de JS y CSS llevado al nivel extremo puede llegar a optimizar muchísimo la velocidad de carga de cualquier sitio web, no solo de los creados con WordPress.
Share on twitter
Twitter
Share on facebook
Facebook
Share on linkedin
LinkedIn
Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.

2 comentarios en “WPO básico para optimizar WordPress”

  1. Alvaro, gran artículo de los pasos a dar para mejorar WPO. Sigo de cerca tus consejos y hasta ahora había mirado por todos los lados para mejorar la velocidad del sitio web excepto mejorar el servidor. Y tengo delito siendo cliente de Raiola. Le daré una vuelta !!!

Deja un comentario

¿Quieres recibir mi contenido semanal?
¡Te enviare todas las semanas mi contenido!
Cabecera del formulario de suscripción
  • RESPONSABLE:

    RAIOLA NETWORKS, S.L.

    C.I.F.: B27453489

    Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo)

    Telefono: +34 982776081

    e-mail: info@raiolanetworks.es

    FINALIDAD:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
    LEGITIMACIÓN:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
    DESTINATARIOS:

    No se ceden datos a terceros, salvo obligación legal.

    Personas físicas o jurídicas directamente relacionadas con el Responsable

    Encargados de Tratamiento adheridos al Privacy Shield

    DERECHOS:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
    INFORMACIÓN ADICIONAL:Se puede consultar la política de privacidad de forma más detallada aquí.