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.
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:
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:
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.
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.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
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.
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.
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:
- Cache de página en WordPress: https://alvarofontela.com/plugins-cache-optimizar-wordpress/
- WP Rocket para WordPress: https://alvarofontela.com/wp-rocket-plugin-cache-wordpress/
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:
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.
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/
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.
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:
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.
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.
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.
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):
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:
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.
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:
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:
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:
¿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.
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.
- Tener siempre un ojo encima del Server Timing te ayudara a detectar cuellos de botella en la carga de la web y tambien te ayudara a medir correctamente la velocidad de carga de un sitio web.
- El servidor o hosting de un WordPress es una parte muy importante y puede ser la diferencia entre un WordPress lento y un WordPress rápido, ya que ciertos servicios como Nginx, LiteSpeed o ciertos tipos de combinaciones son mas efectivas al servir webs con WordPress.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
13 Responses
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 !!!
Gracias por tus palabras Marcos!!!
impecable!!!
Muy útil y muy bien explicado, Álvaro, paso a paso, muchas gracias. Voy a tener que hacer cambios en mi web… 😛 a ver cómo me planifico para poner todo en orden.
La velocidad de carga es algo imprescindible para la conversión (y mucho más cuando encima inviertes en Google Ads y/o Facebook Ads) y, sin embargo, muchos de mis clientes no le prestan la suficiente atención ¡Nunca está demás insistir en ello!
Hola Alba, si, exactamente, cuando estamos pagando SEM, es muy importante el WPO de un sitio web, ya que sino perdemos eficiencia ya que nos saldrán anuncios menos eficientes.
Hola Alvaro
Pura pasion y muy buenos tips aponerlos en practica
gracias
saludos
Buenas Juan, sobretodo “pasión”, ya que llevo muchos años con WordPress y muchos años con WPO, y cada día estoy mas enganchado 🙂
Hola Alvaro muy buena toda la info que brindas, igual necesito ayuda urgente soy de Argentina, podremos contactarnos por mail?
es para que me pases un presupuesto para optimizar un sitio que hice y ya no se mas que hacer.
Muchas gracias.!!!
Hola Daniel, sin problema, puedes escribirme aqui: https://alvarofontela.com/contacto/
Te contestaré el dia 17, ya que estoy de vacaciones hasta ese dia.
Muchas gracias por tanta y tan buena información. Nomse si has publicado algo sobre el tema de las bases de datos de wordpress, el caso es que me pregunto si todas esas bases de datos que se quedan ahí después de desinstalar un pluging afectan al rendimiento de la página (intuyo que algo afecta), y en caso de esas bases de datos afecten al rendimiento, como se pueden identificar?
Un saludo
Hola Xosé, si, he publicado esto: https://alvarofontela.com/entendiendo-base-datos-mysql-wordpress/
Lo que tu comentas, hay dos puntos clave: las tablas que se quedan y lo que se queda en el wp_option.
Para detectar tablas puedes hacerlo a mano o con el plugin WP Database Cleaner, con la versión premium de este plugin también puedes encontrar datos huérfanos en wp_options.
¿Que programa o script estás usando para hacer los test?.
He usado bench.php durante mucho tiempo, pero con php 8 no parece funcionar.
Gracias
Hola Tomás, ahora mismo no he probado ninguno en formato script, el que usaba yo también “peta” con PHP8.
Lo que si, en WP he usado este: https://wordpress.org/plugins/wpperformancetester/