Cómo mejorar el rendimiento de tu web WordPress

Hoy en día, si tu web no aparece en la primera página de los resultados de búsqueda de Google, significa que eres prácticamente invisible para tus posibles clientes. Y si quieres que Google te quiera más y te muestre lo más arriba posible, una de las cosas más importantes que debes hacer es mejorar la velocidad de tu web en WordPress. Además, tus usuarios estarán más contentos si no tienen que ir a tomar un café antes mientras se carga tu sitio 😉

He escrito este artículo para ayudar a quien necesita optimizar el rendimiento de su web pero no quiere perderse entre cientos de páginas y/o no entiende mucho del tema. Este tutorial tiene como objetivo cubrir todos los puntos esenciales necesarios para aumentar la velocidad de tu web de manera sencilla.

Echemos un vistazo a lo que puedes hacer para optimizar el rendimiento de tu sitio web.

En esta entrada
  1. Contrata un buen hosting
  2. Configura el servidor web
  3. Usa la menor cantidad de plugins posible
  4. Usa los mejores plugins
  5. No uses un maquetador de páginas
  6. Elige un buen tema
  7. Usa una CDN
  8. Cachea tu web
  9. Optimiza todas las imágenes
  10. Optimiza el JavaScript
  11. Optimiza el CSS
  12. Optimiza las fuentes
  13. Precarga recursos
  14. Optimización general de WordPress
  15. Actualiza la versión de PHP
  16. Limpia la base de datos
  17. Optimiza los recursos externos

1) Contratar el mejor hosting WordPress

Es muy molesto visitar un sitio web y ver esto durante más de 0.5 segundos:

Esto es lo que pasa cuando tu web está en un servicio de alojamiento de una empresa que ofrece planes super baratos. Estarás en un servidor antiguo compartido con muchas otras personas, las cuales usarán la misma CPU, disco duro y RAM que tú. Y no solo eso, si tu sitio web tarda demasiado en cargar, tus visitantes simplemente lo abandonarán. Si tienes un sitio de WordPress lento, estás perdiendo clientes y visitantes.

¡Así que tal vez sea hora de cambiar de proveedor de alojamiento web! Pero, ¿dónde deberías empezar a buscar? Hay varias categorías de hosting, para todos los presupuestos y necesidades. Aquí los describo y te daré mis recomendaciones honestas.

Alojamiento compartido

En inglés, «shared hosting», esta es la opción más económica, adecuada para sitios web con poco tráfico (alrededor de 50.000 páginas visitadas al mes o menos) y sin plugins que necesiten mucha potencia (como WooCommerce o WPML).

Los mejores proveedores de alojamiento compartido son:

  • Webempresa: Quizás la única empresa española que recomendaría. Los planes no son muy baratos, pero el rendimiento es suficientemente bueno para sitios pequeños.
  • Cloudey: Muy activo en foros online. No encontrarás muchas reviews y precisamente por eso son una buena opción; hoy en día la gran mayoría de las reviews son pagadas.
  • Krystal: Empresa con sede en el Reino Unido, con clientes satisfechos y muy buenas críticas en varios grupos de Facebook y foros online.
  • WebHostFace: Empresa americana con planes muy baratos y aunque sus servidores no están en el #1, son lo suficientemente buenos para sitios pequeños.
  • MechanicWeb: Otra empresa pequeña muy querida por profesionales. Tienen servidores LiteSpeed.

Por experiencia, evita todos los proveedores de alojamiento que pertenecen a Newfold Digital, como BlueHost o HostGator. Evita también especialmente GoDaddy, OVH, NameCheap, 1and1 y otras empresas low-cost. Todos estos tienen recursos limitados y una arquitectura lenta con tecnología obsoleta. Entonces, ¿por qué son tan populares? Fácil, precios extremadamente bajos, tienen presupuestos enormes para marketing, y el marketing de afiliados. Una buena regla general para reconocerlos es: te ofrecen recursos ilimitados (disco duro, CPU, ancho de banda, sitios web…) y su precio súper bajo solo aplica si te comprometes por 1, 2 o 3 años.

Evita también SiteGround. En otra entrada hablo más sobre el tema, pero en pocas palabras, hoy en día viven del marketing de afiliados, porque ni son baratos ni ofrecen un rendimiento fuera de lo normal. Y tienen todo tipo de límites molestos.

Si quieres más recomendaciones sobre hosting compartido, te recomiendo que investigues por tu cuenta, ya que cada persona tiene necesidades diferentes y cada proveedor de alojamiento ofrece algo diferente, pero para empezar, estos son los requisitos mínimos que debes tener en cuenta al buscar un nuevo proveedor de alojamiento compartido:

  • Evita las ofertas ilimitadas: En el mundo del hosting nada es ilimitado (espacio en disco, dominios, ancho de banda…), y si el proveedor te ofrece eso, es que te está limitando por otro lado.
  • Suficiente espacio en disco: calcula cuánto espacio de disco necesita tu web (la mayor parte se lo llevan las imágenes) y duplícalo para tener suficiente espacio para al menos una copia de seguridad local.
  • Buen soporte técnico: asegúrate de que si necesitas soporte técnico lo tendrás las 24 horas del día, los 7 días de la semana y que podrás comunicarte por correo electrónico o aún mejor, chat y/o teléfono. No querrás que tu web se caiga un domingo y no tengas a nadie que te ayude. Incluso puedes intentar enviar un breve correo electrónico o mensaje al proveedor que estés considerando y ver cómo responden y si son útiles.
  • Certificados SSL gratuitos: tu proveedor de alojamiento debe ser compatible con Let’s Encrypt, el cual ofrece certificados SSL gratuitos, y además deberías poder instalarlo en un clic, o incluso mejor, que los instalen por ti. Esto es muy importante no solo para la seguridad de tus usuarios, sino también para una mejor optimización de motores de búsqueda, ya que a Google no le gustan los sitios web que no son https.
  • Copias de seguridad: un buen hosting debería al menos proporcionar copias de seguridad gratuitas. Si eliges un plan económico, muchas veces vas a tener que pagar para restaurar una copia de seguridad, pero al menos la tendrás.
  • LiteSpeed: intenta elegir un proveedor de alojamiento que ofrezca LiteSpeed o NGINX como servidor web. Apache ya es demasiado antiguo y no ofrece las mismas ventajas de velocidad.
  • Buena reputación: Olvídate de los primeros resultados en Google. Están (casi) todos pagados. Investiga en Reddit, el grupo de Facebook WP Speed Matters, foros como Web Hosting Talk o similares. Allí encontrarás las mejores recomendaciones. Sí, desafortunadamente toda la información buena está en inglés.

Hosting WordPress administrado

Primero, hablemos de qué se supone que es el «hosting WordPress gestionado».

En inglés lo encontrarás bajo el nombre de «managed WordPress hosting«. El hosting WordPress administrado ofrece un rendimiento superior al del alojamiento compartido siguiendo la misma fórmula (varios sitios web compartiendo recursos). En teoría, estas empresas no limitan los recursos de hardware, sino que restringen el tráfico para mantener un alto rendimiento.

Además, tal y como se intuye por el nombre, este tipo de alojamiento está indicado para empresas o individuales que no tienen ni tiempo ni ganas de ocuparse de la parte técnica y/o webs con alto tráfico de usuarios para las que el alojamiento compartido se queda corto. Además, te ofrecerán su propio panel de control fácil de usar con solo las opciones necesarias para que puedas gestionar lo necesario de tu web. Si buscas buen soporte, normalmente lo encontrarás aquí, aunque eso es de esperar dado el precio…

El inconveniente es que suelen haber muchas restricciones sobre lo que se puede instalar en tu web. Por ejemplo, notarás que la mayoría de opciones no permiten plugins de caché como WP Rocket o WP Super Cache. A veces, tampoco te permitirán instalar según qué plugins, como optimizadores de imágenes, creadores de copias de seguridad, u otros que pueden utilizar muchos recursos del servidor. Tampoco sabrás nunca cuántos recursos (CPU, RAM…) te dan para tu sitio, aunque se podría decir que de eso se trata: no tienes que preocuparte de eso y confías en ellos para que se encarguen de todo.

Ahora, veamos qué es realmente el «hosting WordPress gestionado».

En la práctica, las cosas no siempre son tan ideales como parecen. Muchas empresas han aprovechado la etiqueta de «hosting WordPress gestionado» para cobrar más mientras ofrecen lo mismo—o incluso menos—que un plan de hosting estándar. La mayoría de los proveedores en esta categoría no tienen un rendimiento mucho mejor, y no solo eso, sino que imponen más restricciones sobre lo que puedes hacer con tu web. En otras palabras, casi siempre estás pagando un extra solo para tener un mejor soporte y un panel de control más bonito y limitado.

En mi experiencia, deberías evitar WP Engine, Pressable y Flywheel. Su rendimiento es mediocre y tienen muchas restricciones. Por ejemplo, Pressable ni siquiera te permite añadir un cron job, y WP Engine desactiva las revisiones por defecto. No incluyo a SiteGround aquí porque, aunque se anuncian como hosting WordPress administrado, en realidad siguen siendo hosting compartido. Por otro lado, el mejor hosting WordPress gestionado es:

  • Kinsta: Es uno de los proveedores más populares debido a su facilidad de uso y buen rendimiento. No solo eso, su soporte es de 10.
  • Cloudways: La fórmula de Cloudways es interesante; te dejan escoger exactamente el VPS que quieras (mira abajo para ver qué es un VPS), así que sabes de cuánta RAM o CPU dispones, y luego ponen su panel de control encima, y gestionas todo desde allí. Al final obtienes el rendimiento de un VPS y la facilidad de uso del hosting administrado. Comparado con Kinsta, es un pelín menos fácil de usar pero da unos resultados un poco mejores en cuanto a rendimiento. Consejo: escoge Vultr High Frequency al añadir el servidor!
  • Rocket.net: No confundir con WP Rocket, el plugin de caché; el secreto de Rocket.net está en Cloudflare y en su panel de control. Muy pocas opciones, solo las necesarias, y toda tu web está todo el rato detrás de Cloudflare. Además, es imposible de desactivarlo, por lo que la mayoría del tiempo tu web se estará sirviendo desde Cloudflare y sus cientos de servidores en el mundo. Sí, esto significa que podrías estar usando cualquier otro proveedor más barato, configurar Cloudflare tú mismo, y obtener los mismos resultados. Pero Rocket.net te lo pone mucho más fácil de empezar a usar.

VPS

Con un VPS (servidor virtual privado, del inglés «Virtual Private Server»), te dan una «parte» de un servidor. La empresa de alojamiento te da un servidor virtual privado y asigna recursos (CPU, memoria, disco…) a tu cuenta que nadie comparte contigo, a diferencia del alojamiento compartido o administrado. Por lo tanto, normalmente tendrás un mejor rendimiento que con ellos, y es ideal para cuando tu negocio comienza a crecer y no te importa tener que ocuparte de algunos temas técnicos.

Hay que tener en cuenta que un VPS es más barato pero más complicado de configurar. Necesitarás algunos conocimientos técnicos y de administrador de sistemas para configurar todo, desde gestionar las actualizaciones de tu servidor hasta configurar el servidor de correo electrónico. En otras palabras, tú alquilas un servidor y el proveedor te da acceso a él y te dice «haz lo quieras». Si necesitas más facilidad de uso, pero no quieres perder todo el control como en los planes de hosting WordPress administrado, te conviene combinar un VPS con un «cloud panel». Sigue leyendo.

Los mejores proveedores de VPS:

Cloud panels

Como he comentado antes, ¿qué hacemos si queremos el rendimiento de un VPS pero la facilidad de uso del hosting administrado? La respuesta es un VPS con un «cloud panel» o un panel en la nube.

En este caso, contratas por una parte el servidor y por otra parte el «cloud panel» (sí, tendrás dos facturas) y los conectas. Para ello, cada proveedor de paneles tiene sus propias instrucciones, pero normalmente implicarán acceder al servidor y ejecutar una serie de comandos. Una vez conectados, el «cloud panel» se encargará de gestionar el servidor: copias de seguridad, instalación de WordPress, cuentas FTP, etc. Todo a golpe de clic.

Importante: No esperes que el equipo de soporte de uno de estos paneles te guíe en cómo hacer según que cosas básicas. Si el problema está en WordPress, es tu problema, no de ellos.

Los mejores proveedores de «cloud panel» o paneles de administración de servidores online:

  • RunCloud: la mejor opción para administrar VPS que ofrece un rendimiento de primer nivel. Buen soporte y compatible con NGINX y OpenLiteSpeed.
  • SpinupWP: de los creadores de ACF y WP Offload Media, aquí tenéis otro producto suyo maravilloso, un «cloud panel» para administrar tu VPS. Es uno de los competidores de RunCloud y ofrece precios similares con un rendimiento excelente también.
  • Enhance: Un nuevo jugador en el sector, pero que ha estado añadiendo muchas funciones y ahora tiene muchas más que los dos anteriores, y a un precio mucho más bajo si tienes pocas webs. También es compatible con NGINX y OpenLiteSpeed.

Servidor dedicado

Si te encuentras en una situación en la que el hosting para WordPress administrado o un VPS de nuestras recomendaciones no es suficiente, entonces deberías ir con un servidor dedicado (o varios). Esto significa un servidor entero para tu web.

Los servidores dedicados deben ser administrados por alguien, y el rendimiento que se puede obtener de ellos depende de cómo de bien se haga y cómo de bueno es el hardware del servidor. Por esta razón, te recomiendo que alguien te asesore profesionalmente. Definitivamente lo necesitarás si tu negocio tiene tanto éxito 😉

Consejos generales

Independientemente del tipo de hosting que elijas, aquí tienes unos cuantos consejos y recomendaciones:

  • Ubicación del servidor: Elige un centro de datos cercano a tu audiencia objetivo para reducir los tiempos de respuesta.
  • Servidores web de alto rendimiento: Si tienes la opción, evita Apache; usa LiteSpeed, OpenLiteSpeed o Nginx para un mejor rendimiento, especialmente en sitios con mucho tráfico. Algunos hosts utilizan una opción híbrida Nginx+Apache, principalmente para permitir que los clientes puedan seguir usando el archivo .htaccess, ya que Nginx es bastante difícil de configurar para un usuario normal. Esta opción es mejor que solo Apache, pero peor que solo Nginx.
  • Desactivar servicios sin usar: Apaga los servicios innecesarios que vienen activados por defecto en tu servidor, como FTP/SFTP, SSH, correo electrónico, New Relic, etc. Todo consume recursos, aunque sea en pequeñas cantidades.
  • MariaDB: Elige un hosting que use MariaDB en lugar de MySQL, ya que ofrece un rendimiento ligeramente superior.

2) Configuración del servidor web

Existen muchos ajustes y optimizaciones que se pueden realizar en el servidor donde se aloja un sitio web. Sin embargo, ten en cuenta que la cantidad de cambios que puedes hacer dependerá del tipo de hosting que utilices. El hosting WordPress administrado, en particular, es muy restrictivo, por lo que no esperes poder hacer muchas modificaciones.

HTTP/2 y HTTP/3

HTTP significa protocolo de transferencia de hipertexto. Como protocolo, define cómo deben comunicarse el cliente (por ejemplo, tu navegador) y el servidor.

HTTP/2 trajo muchas mejoras clave para el rendimiento de las webs, siendo la más importante la multiplexación. Con HTTP/1.1 (la versión anterior), los recursos se cargan uno tras otro, lo que significa que si un recurso falla al cargar, puede bloquear a todos los demás que vienen detrás de él. En cambio, HTTP/2 permite el uso de una única conexión TCP para enviar múltiples recursos al mismo tiempo, evitando bloqueos. Esto es fundamental hoy en día, donde cada vez se descargan más recursos al cargar una página (archivos JavaScript, CSS, fuentes, vídeos, imágenes, etc.).

Si bien HTTP/2 representó una gran mejora, HTTP/3 va aún más allá en la optimización del rendimiento web. HTTP/3 se basa en un protocolo de transporte diferente llamado QUIC («Quick UDP Internet Connections»), que reemplaza al tradicional TCP («Transmission Control Protocol»). Una de las principales ventajas de QUIC es su capacidad para manejar la pérdida de paquetes de manera más eficiente. A diferencia de TCP, donde la pérdida de paquetes ralentiza toda la conexión, QUIC permite que el navegador continúe descargando recursos sin verse afectado por paquetes perdidos. Además, HTTP/3 reduce la latencia al establecer conexiones, lo que hace que las webs se sientan más rápidas, especialmente en redes inestables o de baja calidad.

Tanto HTTP/2 como HTTP/3 deben estar activados en el cliente y en el servidor. Afortunadamente, no es necesario preocuparse por el cliente, ya que todos los navegadores modernos ya son compatibles con HTTP/2 y HTTP/3. Lo que debes hacer es asegurarte de que tu servidor los tenga activados.

Cómo activar HTTP/2

Primero, comprueba tu web con esta herramienta. Si ya estás usando HTTP/2, no tienes que hacer nada más.

Si aún no usas HTTP/2 y tu servidor es administrado por otra empresa (alojamiento compartido o administrado), simplemente pregunta a tu proveedor si pueden activarlo por ti. Si no pueden, quizás sea momento de cambiar de hosting 😉

Si administras tu propio servidor, los pasos para activarlo dependerán del servidor web que utilices:

  • Si estás usando NGINX, KeyCDN tiene una excelente guía para ti.
  • SI por el contrario estás con Apache, dale un vistazo a esta guía.
  • Y si estás usando LiteSpeed u OpenLiteSpeed, HTTP/2 debería estar activado por defecto si usas HTTPS. Si no es así, actualiza el servidor web a la última versión y prueba nuevamente. Para más detalles, revisa estas y estas instrucciones.

Cómo activar HTTP/3

También puedes verificar si tu sitio web ya usa HTTP/3 con esta herramienta: http3check.net.

Aquí se trata de hacer lo mismo, si tu proveedor de hosting te da la opción de activarlo, te recomiendo hacerlo. Y si administras tu propio servidor, ten en cuenta que Apache aún no es compatible con HTTP/3. Sin embargo, si estás usando Nginx aquí tienes las instrucciones oficiales. Y si estás con LiteSpeed u OpenLiteSpeed, aquí están las instrucciones que necesitas.

También, una forma sencilla de usar HTTP/3 sin tocar el servidor es simplemente configurar una CDN. Tanto Cloudflare como QUIC.cloud permiten activarlo con un solo clic en sus opciones.

Compresión HTTP

¡Sí! Al igual que puedes comprimir archivos en tu ordenador, ¡las páginas web también pueden comprimirse! Esta técnica se llama compresión HTTP, pero ¿por qué deberías usarla? Muy simple: para ahorrar ancho de banda y acelerar tu sitio web. Como muestra Pingdom (expertos en rendimiento web), puedes reducir fácilmente el tamaño de tu sitio en más del 75%.

Hoy en día, es muy común que tu alojamiento ya tenga activada la compresión por defecto, ya que es una configuración a nivel de servidor. Puedes verificar si este es tu caso usando esta página. Como verás, la página comprueba dos algoritmos de compresión diferentes: gzip y Brotli, siendo este último mejor que gzip. Sin embargo, hay una nueva incorporación a los algoritmos más utilizados en la compresión HTTP, Zstandard, que ofrece tasas de compresión aún mejores.

Debes tener en cuenta que algunos navegadores (muy) antiguos pueden tener problemas con la compresión HTTP, especialmente con Brotli o Zstandard. Considera esto si tu web recibe visitas desde estos navegadores más antiguos.

Cómo activar gzip

gzip es el algoritmo de compresión HTTP más fácil de implementar, y eso se debe a que gzip está activado por defecto en todas las nuevas instalaciones de Apache, Nginx y LiteSpeed. Sin embargo, si no pasaste la prueba anterior, hay varias formas de asegurarte de que gzip esté activado.

Primero, existen varios plugins de WordPress que te ayudan a comprimir el código, generalmente en un solo clic, como WP Super Cache o WP Rocket. Estos dos, en particular, también son plugins de caché de página (lee más abajo), por lo que matas dos pájaros de un tiro. Solo ten en cuenta que, aunque los plugins te ayudarán con la caché, la compresión solo funcionará si tu servidor web usa Apache o LiteSpeed (puedes comprobarlo aquí).

Si no quieres usar un plugin pero sí que tienes Apache o LiteSpeed, simplemente añade el siguiente código a tu archivo .htaccess:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

¿Pero qué pasa si no tienes Apache o LiteSpeed? Lo más probable es que estés usando Nginx. La compresión HTTP en Nginx tiene que ser configurada por tu proveedor de hosting, ya que lo más probable es que no puedas hacerlo tú mismo. Pero si administras tu servidor, solo necesitas asegurarte de que los archivos de configuración de Nginx tengan los ajustes correctos. Consulta la sección de Nginx de este artículo para más información.

Cómo activar Brotli

Brotli es un poco más complicado de configurar, y eso se debe a que, a diferencia de gzip, Brotli no está activado por defecto en la mayoría de los entornos de servidor. Esto se debe en gran parte a que se creó relativamente hace poco tiempo y a sus capacidades de compresión más avanzadas, que pueden requerir pasos adicionales de configuración según tu servidor. Brotli ofrece tasas de compresión aún más altas que gzip, lo que significa tiempos de carga más rápidos y una menor transferencia de datos. Dado que LiteSpeed y OpenLiteSpeed tienen Brotli activado por defecto, aquí te explico cómo activarlo en servidores Apache y Nginx.

Activar Brotli en servidores Apache

Primero, asegúrate de que Brotli sea compatible con la instalación de Apache en tu servidor. Brotli está disponible como un módulo, mod_brotli, que puede ser necesario instalar por separado si no está presente. Por ejemplo, en algunas distribuciones de Linux, puedes habilitar Brotli ejecutando:

sudo a2enmod brotli

Después de activar Brotli, añade las siguientes líneas a tu archivo .htaccess para configurarlo para tipos de archivo específicos:

<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript application/json application/xml
    BrotliCompressionQuality 4
</IfModule>

Después de añadirlas, reinicia tu servidor Apache para aplicar los cambios.

Aquí tienes unas buenas instrucciones si necesitas más ayuda.

Activar Brotli en servidores Nginx

Si estás usando Nginx, activar Brotli podría necesitar algo de configuración adicional, como suele ocurrir con Nginx. Primero, debes asegurarte de que Brotli esté instalado como módulo, ya que a veces no viene incluido por defecto. Muchas instalaciones de Nginx permiten añadir soporte para Brotli activando el módulo ngx_brotli.

Para configurar Brotli en tu archivo de configuración de Nginx, puedes agregar las siguientes líneas en el bloque server:

# Habilitar compresión Brotli
brotli on;
brotli_comp_level 4;
brotli_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Aquí, brotli_comp_level establece el nivel de compresión (1-11). Configurarlo en 4 ofrece un buen equilibrio entre velocidad de compresión y reducción de datos. Después de actualizar tu archivo de configuración, reinicia Nginx.

Consulta estas instrucciones para más información.

Configuración de Apache/Nginx/LiteSpeed

La mayoría de los servidores web ya vienen configurados con buenos ajustes por defecto, especialmente los más populares: Apache, Nginx y LiteSpeed. Sin embargo, si tienes un sitio más exigente con mucho tráfico o un tipo de sitio especial, probablemente querrás ajustar algunas configuraciones.

Cada servidor web y cada web son un mundo diferente, y existe una gran cantidad de documentación disponible. Por esta razón, y dado que esta es una optimización a nivel experto, simplemente recomiendo que investigues por tu cuenta. Es imposible y poco recomendable intentar sugerir una configuración específica que funcione para todos.

Como punto de partida, aquí tienes algo de documentación que puedes seguir (ojo, necesitas buen inglés):

Configuración de PHP

Para optimizar el rendimiento de WordPress a través de la configuración de PHP, hay varios ajustes que pueden tener un impacto directo. Ajustar estos parámetros ayuda a gestionar mejor los recursos del servidor, acelerar la ejecución y garantizar un manejo eficiente de las solicitudes de WordPress, especialmente en condiciones de alto tráfico. Sin embargo, estos cambios también pueden romper la web, por lo que hay que saber qué se está tocando. De todas formas, aquí están los parámetros más importantes a ajustar, junto con los valores recomendados:

  • memory_limit – Define la cantidad máxima de memoria que un script PHP puede usar. Un valor demasiado bajo causará errores de falta de memoria, pero un valor demasiado alto puede afectar a otras webs en el mismo servidor, o incluso provocar que el servidor se bloquee, por ejemplo, si un plugin consume demasiados recursos. El valor predeterminado de 128M funciona bien para la mayoría, pero si usas plugins pesados como WooCommerce o WPML, necesitarás al menos 256M, y 512M debería ser el máximo absoluto para el 99% de los sitios.
  • max_execution_time – Limita el tiempo máximo (en segundos) que un script PHP puede ejecutarse. Al igual que con memory_limit, un valor bajo evita que los scripts se queden colgados indefinidamente y ralenticen el servidor. Sin embargo, si es demasiado bajo, tareas complejas como importar archivos grandes o ejecutar copias de seguridad pueden fallar por tiempo de espera. 30 segundos es un buen equilibrio entre ejecución de scripts y rendimiento del servidor, pero si es necesario, puedes aumentarlo hasta un máximo de 60.
  • opcache.memory_consumption – Este ajuste en PHP determina «el tamaño de la memoria compartida utilizada por OPcache, en megabytes». Esta memoria se usa para almacenar scripts PHP compilados, evitando que tengan que recompilarse cada vez que se ejecutan. La cantidad adecuada de memoria depende del tamaño y la complejidad del código que se está almacenando en caché. Si la memoria de OPcache está llena o casi llena, algunos archivos podrían no ser almacenados en caché, lo que ralentizaría el rendimiento; sin embargo, asignar demasiada memoria puede limitar la disponibilidad para otros procesos del servidor. Un valor de 128 (el predeterminado) es adecuado para sitios pequeños y medianos, mientras que los sitios más grandes podrían beneficiarse de 256.
  • opcache.max_accelerated_files – Define el número máximo de archivos PHP que OPcache puede almacenar en caché simultáneamente. El valor predeterminado de 10000 debería ser suficiente en la mayoría de los casos, teniendo en cuenta que una instalación normal de WordPress contiene menos de 1200 archivos PHP. Sin embargo, los plugins y temas pueden aumentar rápidamente este número, por lo que recomiendo ejecutar un comando como find . -type f -print | grep php | wc -l (suponiendo que tienes acceso a una terminal Linux) para comprobar si necesitas aumentar este valor. Ten en cuenta que el número real utilizado será el primer número en el conjunto de estos números primos, lo que significa que, por defecto, el valor no es 10000, sino en realidad 16229.

Para configurar estos ajustes de PHP, tienes tres formas de hacerlo: mediante el archivo php.ini, el archivo .htaccess o el archivo wp-config.php.

php.ini

El archivo php.ini es el archivo de configuración principal de PHP y suele usarse cuando tienes control total sobre el entorno del servidor, como en un VPS o un servidor dedicado.

Para añadir los valores en php.ini, usa este formato:

memory_limit = 512M
max_execution_time = 60
opcache.memory_consumption = 256M
opcache.max_accelerated_files = 10000
  • Ubicación: El archivo php.ini generalmente se encuentra en el directorio de instalación de PHP (por ejemplo, /etc/php/8.0/apache2/php.ini para Apache en Ubuntu o C:\xampp\php\php.ini en XAMPP para Windows). Sin embargo, lo he visto ubicado en muchas otras partes.
  • Efecto: Los cambios realizados aquí se aplican globalmente a todas las aplicaciones que usan PHP en el servidor.
  • Nota: Después de editar el php.ini, reinicia el servidor web (por ejemplo, Apache o Nginx) para aplicar los cambios.

.htaccess

Si no tienes acceso al php.ini, puedes configurar algunas opciones de PHP a través del archivo .htaccess si estás usando Apache o LiteSpeed como servidor web.

Para añadir los valores en el .htaccess, usa este formato:

php_value memory_limit 512M
php_value max_execution_time 60
php_value max_input_time 120
php_value upload_max_filesize 128M
php_value post_max_size 128M
php_value session.gc_maxlifetime 3600
  • Ubicación: El archivo .htaccess se encuentra en el directorio raíz de tu WordPress (donde está wp-config.php).
  • Efecto: Los cambios aquí aplican al directorio específico donde se encuentra el .htaccess y a sus subdirectorios, lo que significa que generalmente solo afectarán al WordPress actual.
  • Nota: OPcache y otras configuraciones avanzadas (como opcache.memory_consumption y realpath_cache_size) no se pueden configurar en el .htaccess. Solo funcionarán directivas generales de PHP (como los límites de memoria y subida de archivos). Además, asegúrate de no aañadir directivas php_value dentro de secciones <IfModule> en el .htaccess, ya que podrían no ejecutarse correctamente.

wp-config.php

En el wp-config.php, puedes establecer valores de PHP directamente usando la función ini_set(). Este método es ideal para configuraciones específicas de la web en uso.

Para añadir los valores en el wp-config.php, usa este formato:

@ini_set( 'memory_limit', '512M' );
@ini_set( 'max_execution_time', '60' );
@ini_set( 'max_input_time', '120' );
@ini_set( 'upload_max_filesize', '128M' );
@ini_set( 'post_max_size', '128M' );
@ini_set( 'session.gc_maxlifetime', '3600' );
  • Ubicación: El archivo wp-config.php se encuentra en el directorio raíz de tu WordPress (generalmente public_html o htdocs).
  • Efecto: Las configuraciones aquí solo aplican a la web WordPress donde está ubicado el wp-config.php.
  • Nota: OPcache y algunas otras configuraciones de PHP no se pueden modificar a través del wp-config.php, ya que requieren acceso a nivel de servidor (generalmente en el php.ini). Además, los cambios en wp-config.php solo se aplican después de que WordPress se cargue, por lo que ciertas configuraciones a nivel de servidor pueden no surtir efecto de inmediato.

Configuración de MySQL/MariaDB

Y finalmente, llegando al apartado de optimización de la configuración de la base de datos, hay varios aspectos que se pueden ajustar para mejorar el rendimiento del sitio. Esta parte es especialmente importante hacerla bien, ya que las páginas no siempre estarán en caché y, cuando eso suceda, la solicitud irá al servidor de origen, que hará las consultas necesarias a la base de datos. Queremos que esas consultas se resuelvan lo más rápido posible.

Es importante destacar que esta es una técnica de optimización avanzada y que debes tener experiencia manejando la terminal de Linux. La mayoría de los sitios no necesitarán ajustar la configuración de la base de datos, pero puedes intentarlo si tienes una web fuera de lo normal (por ejemplo, con alto tráfico).

MySQLTuner

MySQLTuner es un script gratuito en Perl que analiza la configuración y el rendimiento de tu base de datos MySQL/MariaDB, ofreciendo recomendaciones para optimizarla. Es especialmente útil porque la optimización de bases de datos es compleja, y MySQLTuner ayuda a identificar mejoras potenciales sin necesidad de conocimientos (tan) avanzados.

Para instalar MySQLTuner, accede a tu servidor por SSH y ejecuta los siguientes comandos para descargar y configurar el script:

wget http://mysqltuner.pl/ -O mysqltuner.pl ; chmod +x mysqltuner.pl

Luego, ejecuta el script (es posible que necesites proporcionar las credenciales de root de la base de datos para que el script pueda acceder a ella):

./mysqltuner.pl

MySQLTuner analizará el uso de tu base de datos, la carga y la configuración, y generará recomendaciones específicas sobre qué parámetros puedes ajustar en MySQL o MariaDB.

Para aplicar los cambios, edita el archivo de configuración my.cnf, que generalmente se encuentra en /etc/mysql/ o /etc/, y luego reinicia MySQL/MariaDB para que los cambios surtan efecto. Ten en cuenta que solo debes editar el archivo de configuración manualmente si gestionas tu propio VPS (y no usas un panel de control en la nube, hosting administrado o hosting compartido). De lo contrario, el panel o herramienta que uses podría sobrescribir los cambios o, peor aún, generar conflictos o incluso romper el sitio.

Usar MySQLTuner cada pocos meses (o semanalmente en sitios con alto tráfico) es una buena práctica, ya que ayuda a mantener la base de datos optimizada a medida que el sitio crece y evoluciona.

Ajustes de MySQL/MariaDB

Para optimizar MySQL/MariaDB en WordPress, es importante enfocarse en varios parámetros clave dentro del archivo de configuración my.cnf. Estos ajustes deben hacerse con precaución y con un buen entendimiento del funcionamiento interno de las bases de datos.

Puedes comenzar con MySQLTuner para identificar exactamente qué aspectos debes mejorar. Si no puedes ejecutar el script, al menos deberías revisar y optimizar (si es necesario) las siguientes configuraciones clave:

  • key_buffer
  • max_allowed_packet
  • thread_stack
  • thread_cache_size
  • max_connections
  • table_cache

Si pruebas diferentes configuraciones, también debes tener en cuenta el estado actual de tu sitio, ya que los valores de cada parámetro dependen de varios factores: la carga del servidor, el tráfico del sitio web, la cantidad de sitios en el servidor, la carga de la base de datos y los recursos de hardware del servidor.

3) Usa la menor cantidad de plugins posible

Esta situación es similar a la de un teléfono o un portátil recién comprados. Viene con mucho software que no vas a usar, y eso hace que el dispositivo vaya más lento. Con WordPress sucede lo mismo cuando instalas muchos plugins.

Trata de mantener la lista de plugins lo más pequeña posible y usa solo los necesarios; de lo contrario afectarás el rendimiento de tu WordPress. Esto es lo que puedes hacer para limpiar tu instalación de WordPress:

  • En general, mira cada plugin y pregúntate si lo necesitas. Si no lo necesitas, quítalo. No lo guardes “por si acaso”. Por ejemplo, ¿tienes un plugin que le da un efecto muy chulo a los títulos del área de administración? Innecesario.
  • ¿Tienes dos plugins que hacen el mismo trabajo? Deshazte de uno. Un ejemplo que veo a menudo: dos plugins de caché, lo que no tiene sentido, porque almacenar en caché tus páginas dos veces no aporta nada.
  • ¿Estás utilizando un plugin muy grande solo para una sola función incluida en ese plugin? Intenta encontrar un plugin más pequeño cuya función sea exactamente la que buscas, o incluso puedes buscar en Google el fragmento de código que necesitas para sustituirlo.
  • ¿Podrías reemplazar los plugins con una alternativa más simple? Por ejemplo, mucha gente piensa que necesita un pase de diapositiva en la página de inicio. El problema es que un deslizador afecta mucho a la velocidad de carga y es muy difícil de optimizar. En su lugar, podrías usar una imagen fija. Al fin y al cabo, casi nadie ve la segunda diapositiva.

Recuerda, el objetivo es reducir la cantidad de plugins para que WordPress no tenga que cargar demasiadas cosas.

4) Usa buenos plugins de WordPress

Un solo plugin mal desarrollado puede arruinar toda tu web y hacerla más lenta. Para elegir el mejor plugin para cada función, ten a mano esta lista. Con el tiempo, podrás identificar fácilmente qué plugins son los mejores en cada categoría:

  • Última actualización: Si un plugin no ha recibido ninguna actualización en los últimos 6 meses, generalmente significa que ya nadie se ocupa de él y probablemente tiene problemas de funcionalidad o compatibilidad, o incluso problemas de seguridad. Te recomiendo que evites los plugins obsoletos a menos que sepas que puedes usarlos de manera segura.
  • Compatible con la última versión de WordPress: Si el plugin indica que es compatible con la última versión de WordPress, normalmente significa que el desarrollador se ha tomado la molestia de probar el plugin con la última versión de WordPress.
  • Ten cuidado con los plugins gratuitos con versión pro/premium: Está bien que la versión gratuita incluya un pequeño anuncio promocionando la versión de pago. Sin embargo, no está bien que muestre un banner de «¡Actualiza ahora!» en cada pantalla de configuración, así como en la barra de herramientas y el menú lateral, si sabes a lo que me refiero. El plugin debería ser 95% funcionalidad y 5% publicidad, no al revés; demasiados anuncios indican que el plugin es más bien bloatware y prioriza los ingresos sobre la experiencia del usuario.
  • Capturas de pantalla: Esta es una de las cosas que muestran si el desarrollador se preocupa por los usuarios o no, ya que algunas buenas capturas de pantalla les ayudarán a ver si el plugin satisface sus necesidades o no.
  • Buena descripción: Es importante tener una buena descripción para saber qué hace el plugin y cómo funciona. Si primero tienes que instalar el plugin para ver cómo funciona, no es una buena señal.
  • Preguntas frecuentes: Lo mismo que las capturas de pantalla. Esto muestra que el desarrollador quiere que entiendas cómo funciona el plugin.
  • Calificación promedio: Obvio, pero asegúrate de comparar las reseñas con la cantidad de ellas, porque un plugin con una sola review de 5 estrellas no significa que sea mejor que otro con 37 reviews de 4 estrellas. La única review de 5 estrellas es probablemente del autor…
  • Tamaño: Imagina que quieres un plugin solo para añadir un bloque de Gutenberg de Google Maps en tu web. ¿Cogerías un plugin que pesa 300 KB, o uno que pesa 3 MB? Normalmente, un plugin que pesa 300 KB va a estar mejor programado y optimizado, y será más eficiente que uno que pesa 3 MB.
  • Soporte: Querrás tener un buen soporte en caso de que algo salga mal. Comprueba si el plugin tiene un área pública donde puedas ver preguntas y respuestas. WordPress, por ejemplo, tiene foros públicos de soporte. También te recomiendo que contactes directamente con los autores del plugin y les hagas una pregunta simple. No se trata de la respuesta en sí, sino de cómo el soporte técnico responde a tu pregunta.
  • Perfil del desarrollador: Vale la pena ver quién es el desarrollador, qué hace, si es activo en WordPress… Además, yo normalmente suelo preferir los plugins de un solo desarrollador en vez de los que van bajo el nombre de una empresa. Hoy en día, si el plugin va a nombre de una empresa, muchas veces el plugin es básicamente un anuncio para la versión «pro» por X€ al mes.
  • Pruébalo: Crea un sitio web de prueba en tastewp.com o similar e instala el plugin en cuestión allí. Un buen plugin simplificará las cosas y seguirá las pautas de la interfaz de usuario de WordPress. Si necesitas demasiado tiempo para comprender cómo funciona el plugin o si tiene una interfaz de usuario altamente personalizada, probablemente deberías considerar otra opción (aunque siempre hay excepciones, por supuesto).
  • Comprueba la base de datos: si tienes la oportunidad de tener un sitio de prueba con acceso a phpMyAdmin o un visor de base de datos, instala el plugin allí, actívalo y luego desinstálalo. Luego comprueba los restos del plugin en las tablas de la base de datos. Si es un buen plugin, al desinstalarse debería limpiarse por si mismo y dejar poco o ningún resto detrás suyo.
  • Evita los plugins multifunción: si quieres añadir una pequeña función a tu sitio que no está disponible de forma nativa en WordPress, deberías buscar un plugin que haga exactamente eso. Por ejemplo, supongamos que quieres añadir un icono a tu página creada con el editor de bloques nativo de WordPress, Gutenberg. ¿Por qué instalar un plugin que incluye muchísimos bloques adicionales y que por casualidad incluye un bloque de iconos, cuando puedes simplemente instalar The Icon Block?

¿Quieres adelantarte y descartar algunos plugins? Evita cualquier plugin de estos autores:

  • Awesome Motive: OptinMonster, WPForms, MonsterInsights, All in One SEO, WP Mail SMTP, BuddyBoss, etc. Estos plugins suelen promocionarse entre sí en exceso, lo que resulta en plugins demasiado grandes y lentos. Además, sus prácticas éticas son cuestionables…
  • WPMU DEV: Smush, Forminator, Defender, Hummingbird, etc. Las versiones gratuitas existen principalmente para vender la versión premium, lo que da lugar a un rendimiento deficiente y diseños sobrecargados e infantiles, además de imitar a la competencia.
  • SiteGround: Speed Optimizer, Security Optimizer, etc. Existen principalmente para promocionar sus servicios de hosting y ofrecen un rendimiento mediocre.
  • YITH: Versiones gratuitas extremadamente limitadas y un rendimiento muy pobre. A veces, demasiados plugins pueden jugar en tu contra.

En este blog estoy comparando diferentes tipos de plugins para descubrir cuál es el mejor en cada categoría:

5) No uses un maquetador de páginas

El interés en los maquetadores de páginas (en inglés «page builders») aumentó significativamente en la segunda mitad de 2010. WordPress era el sistema más popular para crear sitios web y todo el mundo quería una. Pero WordPress no tenía una forma amigable y fácil de usar para crear páginas. Todo dependía del tema en sí. Y ahí fue cuando los maquetadores de páginas entraron en juego.

Los maquetadores facilitaron mucho la creación de webs. Todo lo que necesitabas hacer era instalar uno o dos plugins y, ¡listo!, podías crear páginas simplemente arrastrando y soltando elementos. Y el gran boom llegó con Elementor. Una pequeña empresa de Israel creó el maquetador de páginas más popular en la actualidad. Basta con echar un vistazo a Google Trends:

Pero hoy en día la gente exige velocidad. Los maquetadores de páginas han hecho que todo sea mucho más fácil, pero debido a que hay que adaptarlos para que funcionen bien en millones de webs diferentes con necesidades diferentes, añaden muchos scripts, CSS y funcionalidades que deben cargarse en cada página. Esto hace que la página sea lenta.

Afortunadamente, WordPress notó cómo los maquetadores de páginas arruinan la experiencia de usuario y decidió desarrollar Gutenberg: una forma de construir tus páginas con bloques. Es similar a un maquetador, pero diferente. Añades solo los bloques que necesitas (imagen, encabezado, vídeo…) y listo. Y debido a que está estrechamente integrado con WordPress (es WordPress), es muy ligero.

Elementor (o cualquier otro maquetador de páginas) vs. Gutenberg

Solo mira esta comparación. He creado esta página de muestra en un nuevo sitio de prueba primero con Elementor y luego con bloques de Gutenberg. Sólo unos pocos colores, imágenes y texto.

Cuando abrimos las herramientas de desarrollo del navegador («DevTools») y examinamos la página, estos son los resultados con Elementor:

Y estos son los resultados con Gutenberg:


Con Elementor, el usuario tiene que cargar más del doble de recursos y el navegador tarda más del doble de tiempo en analizar la página. ¡Y esto es solo para una página super-simple!

Lo de arriba son los resultados reales de un navegador real, pero si probamos la web en un test de velocidad, las cosas son igual de interesantes. Este es el resultado de la prueba creada con Elementor:

Y esta es la misma página creada solo con bloques de Gutenberg:

Si estás pensando “Bueno… la diferencia no es tan grande…”, recuerda que esta es una página de ejemplo extremadamente simple. En una página web normal con pases de diapositivas, muchas fotos, animaciones, contenido… la diferencia es mucho más drástica.

En pocas palabras: No utilices un maquetador de páginas para una nueva web. No uses Elementor, Beaver Builder, Divi, WPBakery u otros. Y si tu sitio web ya existe, rediseñalo con Gutenberg. Notarás la diferencia.

6) Elige uno de los mejores temas para WordPress

Algo similar sucede con un tema. Digamos que no usas un maquetador de páginas y construyes todas sus páginas con bloques de Gutenberg. ¿Sabes que podrías arruinar tu web eligiendo un mal tema?

Un tema es lo que le da un aspecto al sitio web. Podemos dividir el mercado temático en tres categorías:

  • Temas simples con un solo diseño y poca o ninguna personalización. Por lo general, son gratuitos y están disponibles en wordpress.org. Una buena opción.
  • Temas con algunos ajustes básicos que permiten cambiar botones, colores, fuentes o algunos diseños prefabricados. Por lo general, requieren de una suscripción mensual para obtener acceso a todas las funciones, pero también ofrecen una versión limitada gratuita en wordpress.org. También son una buena opción.
  • Temas pesados con infinidad de opciones que intentan emular un maquetador de páginas sin serlo. Esto es lo que encontrarás en la mayoría de las webs dedicadas a ofrecer temas fuera del repositorio principal de WordPress, como por ejemplo Themeforest. Entonces tiene sentido que si estás tratando de dirigirte a la misma audiencia que un maquetador de páginas, te verás obligado a incluir tantas configuraciones y funciones en tu tema que ralentizará cualquier sitio web. Claros ejemplos son Avada, The7, Betheme, Enfold, Flatsome, Salient, etc.

Por lo tanto, queremos que nuestro tema esté en las categorías n.° 1 y n.° 2, mientras tratamos de evitar la n.° 3. Aquí os muestro otra comparación entre un buen tema y un mal tema.

Este es el tamaño y la cantidad de solicitudes de uno de los sitios de demostración del tema Enfold, un éxito de ventas en Themeforest:

La captura de pantalla no lo muestra (es demasiado grande), pero vemos que Enfold necesita 104 archivos JS, CSS y fuentes, con un tamaño transferido de 265 KB.

Ahora comparémoslo con Blocksy, uno de los mejores temas que puedes comprar:

Aquí sí te puedo mostrar la captura de pantalla completa. Solo 6 solicitudes y 30 KB transferidos en comparación. Los números hablan por sí mismos. Por supuesto, esta no es la única manera de valorar un tema, y no debería serlo, pero nos ayuda a ver si vale la pena elegir un tema en particular o no.

A continuación te dejo una pequeña y honesta lista de temas recomendados que no te arrepentirá de elegir. Los temas más rápidos para WordPress son:

Si estos no te gustan, ¡hay muchos otros que son geniales! Intenta seguir estas pautas. Por experiencia, esta lista casi siempre garantiza que elegirás un buen tema:

  • No compres un tema que te obligue a instalar un maquetador de páginas. Eso incluye a Divi.
  • No compres temas de las principales tiendas de temas, como Themeforest.
  • Evita temas que claramente se promocionen como «temas multifuncionales» o «multipurpose themes».
  • Si buscas, por ejemplo, “mejores temas para WordPress”, ignora las recomendaciones de los primeros resultados de Google o YouTube. Estas casi nunca son recomendaciones honestas de expertos en WordPress. Las mejores recomendaciones estarán en las comunidades como los grupos de Facebook.
  • Explora el repositorio de temas de WordPress, y si ves un tema que te gusta, cómpralo solo si no contradice las pautas anteriores.

7) Usa una CDN

CDN son las sigles de «Content Delivery Network» en inglés, o «red de distribución de contenidos«. Con una CDN, los recursos de tu web se duplican en una red mundial de servidores. Esto significa que los recursos de tu web se cargarán tan rápido en el país donde esté tu servidor como lo harán para alguien en el otro lado del mundo. Esta es una configuración de rendimiento imprescindible de WordPress si tus visitantes están repartidos por todo el mundo.

Una CDN se puede configurar de dos maneras. La primera es la configuración tradicional de pull zone, donde tu web indica al navegador del visitante que descargue los recursos directamente la CDN. Con este método, cada solicitud del contenido HTML sigue llegando a tu servidor, pero los archivos estáticos (imágenes, fuentes, CSS, JS, etc.) son entregados por la CDN.

Como puedes imaginar, una configuración de pull zone acelera la entrega de los archivos estáticos, pero no mejora la velocidad de carga del HTML en sí, ya que este sigue siendo entregado por tu servidor.

La segunda forma de configurar una CDN es como proxy inverso. Un proxy inverso actúa como un servidor intermediario que recibe las solicitudes del cliente y las reenvía al servidor de origen. A diferencia de la pull zone, un proxy inverso puede almacenar en caché el contenido HTML. Esto significa que cuando un visitante solicita una página, el proxy inverso puede entregar el HTML en caché directamente, reduciendo la carga de tu servidor y acelerando el tiempo de carga total de tu web.

Aquí tienes una pequeña lista de las CDN más populares para WordPress (y para otras webs también):

  • Cloudflare: Cloudflare tiene uno de los servicios CDN más eficientes del mundo, y entre muchas características de velocidad y seguridad también ofrece servidores DNS desde no hace mucho tiempo: 1.1.1.1. Sin embargo, ten en cuenta que su plan gratuito solo almacena en caché los recursos estáticos, no el HTML de tus páginas, aunque actúe como un proxy inverso por defecto. Para que Cloudflare también sirva tu contenido HTML, necesitarás pagar $5/mes para usar Cloudflare APO. Alternativamente, si tu proveedor de hosting tiene una asociación con Cloudflare, como Kinsta, es posible que te den esta característica de forma gratuita.
  • bunny.net: Una de las CDNs más rápidas (o la más rápida), anteriormente llamada BunnyCDN. Se supone que también es más asequible que Cloudflare. Si quieres comprobar dónde tiene puntos de presencia, echa un vistazo a esta página.
  • QUIC.cloud: Esta CDN la crearon los desarrolladores de LiteSpeed (el servidor web) y LiteSpeed Cache (el plugin de WordPress). Ofrece servicios gratuitos de optimización de imágenes, optimización de páginas y CDN, con HTTP/3 y también planes de pago muy baratos para aquellos que necesitan más. Hace de proxy inverso, y por supuesto, está estrechamente integrada con LiteSpeed Cache, por lo que si tienes un servidor LiteSpeed, no lo dudes.

Es importante señalar que añadir una CDN a tu web no siempre es necesario. En algunos casos, incluso puede ser contraproducente. Si la audiencia de tu sitio es principalmente local, de una región o país específicos, podría ser mejor optar por un servidor ubicado en esa misma región o país. Esto podría proporcionar tiempos de carga más rápidos que una CDN cuyo punto de presencia más cercano esté más lejos que tu servidor original.

Como regla general, considera usar una CDN en una de dos situaciones:

  1. Tu alojamiento es muy lento (en este caso deberías cambiar de proveedor) y necesitas la CDN para compensarlo.
  2. Tu audiencia es internacional.

8) Cachea tu web

¿Sabías que podrías tener disponibles varios servicios de almacenamiento en caché de páginas entre el usuario y el servidor y tú ni siquiera lo sabías?

Caché de archivo / caché de página

Dependiendo de la tecnología que utilice tu sitio web, es posible que tengas algunos plugins o extensiones para el almacenamiento en caché de páginas. Estos crean archivos HTML en el disco y los sirven en cada solicitud, en lugar de ejecutar código PHP y consultas de base de datos MySQL por cada solicitud de página. Con WordPress, por ejemplo, los mejores son estos (no son todos, ¡recuerda que WordPress tiene muchísimos plugins!):

Vale la pena señalar que LiteSpeed Cache se puede instalar en cualquier web hecha con WordPress, pero su funcionalidad de caché solo está disponible en servidores LiteSpeed. Entonces, si no tienes un servidor LiteSpeed, deberías escoger uno de los otros.

Si bien el almacenamiento en caché basado en archivos suena maravilloso (y lo es), no deberías poner en caché todas las páginas. Las páginas que cambian dinámicamente según otras variables deben excluirse de la caché. Estas suelen incluir el carrito, la página de finalizar compra y las páginas de cuenta en una tienda online, así como los paneles de afiliados o clientes, e incluso, en algunos casos, las páginas de contacto. Lo último que quieres es que un usuario vea datos incorrectos o, peor aún, información perteneciente a otro usuario.

Aquí tienes una comparativa entre todos los plugins de caché.

Caché de servidor

Algunos proveedores de hosting te ofrecen funciones de caché del servidor con diferentes nombres comerciales. SiteGround tiene «Supercacher», RunCloud tiene RunCache, Cloudways tiene Varnish (en este caso no le cambiaron el nombre). Todas estas son soluciones de almacenamiento en caché a nivel de servidor, técnicamente llamadas «proxies inversos» como una CDN.

Como ya te he explicado, un proxy inverso es un servicio que se ejecuta de forma independiente y se encuentra entre el cliente y la web, por lo que no forma parte de WordPress y acepta solicitudes al servidor de WordPress. Al igual que un plugin de caché, sirve una copia guardada de una página de WordPress cuando se pide (aunque esta no es la única función de un proxy inverso). La diferencia es que los plugins de caché necesitan que WordPress se ejecute, lo que puede volverse lento a medida que aumenta la carga. Herramientas como Varnish se especializan en atender solicitudes de caché directamente desde el servidor y pueden ser mucho más eficientes que WordPress.

Ten en cuenta que el almacenamiento en caché en el mismo servidor no reemplaza necesariamente los plugins de caché de archivo. Por ejemplo, puedes usar tu plugin de caché favorito junto con Varnish. De esta manera, si algo no está en la caché del servidor, la solicitud se devolverá desde WordPress más rápido porque el plugin de caché probablemente sí tenga en caché ese algo.

Presta especial atención a las exclusions también; la misma regla se aplica a la caché de servidor: no cachees páginas dinámicas.

Caché del navegador

Por un lado, tenemos los niveles de caché que controlamos del lado del servidor (ver arriba), pero ¿sabías que tus clientes también pueden almacenar en caché tu web para que no tengan que solicitar todo nuevamente cuando vuelvan a visitar tu web?

Cuando visitas un sitio web, tu navegador almacena todos los recursos (JS, CSS, fuentes…) en tu disco duro para que se carguen más rápido en visitas posteriores; el navegador simplemente carga los recursos desde tu disco duro en lugar de solicitarlos nuevamente desde un servidor que está lejos. Esto se llama almacenamiento en caché del navegador y es algo que puedes controlar (más o menos). Esto también está relacionado con el famoso mensaje «Publica recursos estáticos con una política de caché eficaz» o «Serve static assets with an efficient cache policy» que ves en los tests de velocidad.

Todo lo que necesitas hacer es configurar tu web para decirles a los navegadores cuánto tiempo pueden guardar todos los recursos antes de que deban volver a solicitarlos. 6 meses o 1 año es un buen número porque, al fin y al cabo, estos recursos no cambian tan a menudo. El problema de esto es que la configuración no es tan sencilla como parece, ya que cualquier nivel de tu web puede anular la configuración de otro.

Echa un vistazo a mi guía sobre la forma correcta de publicar recursos estáticos con una política de caché eficaz en WordPress.

Caché de objetos persistente

La caché de objetos de WordPress almacena en memoria los datos de la base de datos que se utilizan con frecuencia. De este modo, elimina la necesidad de consultar la base de datos repetidamente para la misma información, lo que puede ser un proceso que consume muchos recursos y ralentiza la velocidad de carga, especialmente en webs grandes como tiendas de comercio electrónico.

La caché de objetos por defecto en WordPress no es persistente, lo que significa que es temporal y solo existe durante la carga de una página (se almacena en la memoria de PHP). Como puedes imaginar, esto la hace poco útil si deseas reutilizar los mismos datos en varias páginas.

Por lo tanto, la «persistencia» en este tipo de caché se refiere a su capacidad de almacenar datos más allá de una sola carga de página. El almacenamiento en caché de objetos persistente utiliza sistemas externos como Redis o Memcached para guardar los datos en caché. Estos sistemas mantienen la caché en memoria incluso después de que finalice la solicitud, lo que permite que los datos estén disponibles para futuras peticiones de páginas. Para simplificar, nos enfocaremos en Redis y Memcached, ya que son los más populares, aunque existen otras opciones disponibles.

Como he mencionado, el almacenamiento en caché de objetos persistente es especialmente beneficioso para sitios web grandes o con mucho tráfico, ya que reduce muchas consultas repetitivas a la base de datos y por tanto la carga del servidor. Sin embargo, en sitios más pequeños, como la típica web estática de una empresa, podría no ser la mejor opción; en algunos casos, consultar los datos desde la caché puede tardar más que consultarlos directamente en la base de datos.

Configuración de Redis o Memcached

Antes de usar uno de estos sistemas, necesitas configurar tu servidor. La mayoría de los proveedores de hosting ofrecen Redis o Memcached como parte de sus servicios, a menudo de forma gratuita. Tienes dos opciones para configurarlo:

  • Si gestionas tu propio servidor, puedes instalar y configurar un servidor Redis o Memcached. Ten en cuenta que si usas Memcached, también necesitas la extensión Memcache de PHP. Dado que cada servidor es diferente, este artículo no cubreel proceso de instalación manual de Redis o Memcached.
  • Si no gestionas tu servidor (por ejemplo, en alojamiento compartido, hosting administrado o un VPS administrado), consulta con tu proveedor de hosting si Redis o Memcached pueden activarse en tu sitio. Ten cuidado, ya que algunos proveedores cobran extra por esta función, como Kinsta.

Una vez que tu servidor esté configurado, necesitarás instalar y configurar un plugin adicional en WordPress:

  • Para Redis, usa Redis Object Cache.
  • Para Memcached, puedes usar Memcached Object Cache. Importante: Lee las instrucciones de instalación, ya que este no es un plugin que deba permanecer instalado en WordPress.
  • Si usas LiteSpeed Cache, puedes configurar su sistema de caché de objetos integrado en lugar de depender de los plugins de antes.

Esta es una comparación para demostrar el impacto del almacenamiento en caché de objetos persistente. Este es el número de consultas SQL realizadas al acceder a la página de administración de productos en una tienda online real sin Redis activado:

Y aquí está la misma página con caché de objetos persistente a través de Redis:

9) Optimización de imágenes

Si tu web contiene imágenes, casi seguro que es la parte más pesada del sitio. Por lo general, las imágenes representan más del 90% del tamaño de tu sitio web. Entonces tiene sentido optimizarlas tanto como sea posible.

Compresión de imágenes

Una imagen normal sacada con un móvil o cámara suele tener un tamaño de varios MB. Eso es simplemente demasiado grande. Debemos asegurarnos de que nuestras imágenes a tamaño completo no superen los 200-300 KB, y las imágenes que aparecen antes de desplazarse deberían ser aún más pequeñas: como máximo 100 KB, pero cuanto más pequeñas, mejor.

Para comprimir las imágenes, te recomiendo ShortPixel. Tienen dos plugins para la compresión de imágenes: ShortPixel Image Optimizer (SPIO) y ShortPixel Adaptive Images (SPAI).

ShortPixel Image Optimizer (SPIO)

ShortPixel Image Optimizer es un plugin ligero y fácil de usar que te permite comprimir todas tus imágenes y documentos PDF en un solo clic desde el panel de administración de WordPress.

Cojamos una imagen aleatoria de Unsplash como ejemplo. La imagen a la que he enlazado pesa 4’45 MB y tiene una resolución de 5184×3456. Parece una foto que uno sacaría con una cámara normal. Así es como se ve cuando se procesa con ShortPixel Image Optimizer:

Después de escoger una compresión con pérdida y un tamaño máximo de 1920 px, ¡se ha reducido el tamaño en un 87’52%! Ahora pesa solo 398 KB. Impresionante. Y la calidad de la imagen es casi la misma.

Si quieres comprobar cómo funciona el servicio de optimización de imágenes de ShortPixel con tus imágenes, puedes probarlo con su herramienta web.

ShortPixel Adaptive Images (SPAI)

El plugin ShortPixel Adaptive Images optimiza tus imágenes con los mismos algoritmos que SPIO, pero ofrece 2 servicios adicionales: una CDN y un servicio para cambiar de tamaño la imagen dinámicamente, muy útil para solucionar el mensaje «Usa un tamaño adecuado para las imágenes» de PageSpeed Insights. Así funciona:

  1. El usuario visita una página con imágenes
  2. Mientras se carga la página, SPAI ve todas las URL de las imágenes en el código de la página.
  3. Luego, SPAI reemplaza las URL con nuevas que apuntan a la CDN de ShortPixel, donde se encuentran las versiones comprimidas y redimensionadas de las imágenes. Al redimensionar, se tiene en cuenta el dispositivo del usuario, de modo que, por ejemplo, un dispositivo pequeño no tenga que solicitar una imagen demasiado grande.

Todo esto pasa al cargarse la página, en tiempo real. SPAI no toca ninguno de los archivos físicos originales.

Por ejemplo, cojamos el siguiente sitio web. Este es un informe de GTmetrix (una herramienta en línea que te permite verificar el rendimiento de la web de WordPress) antes de instalar ShortPixel Adaptive Images:

Y esto es después de instalar y configurar ShortPixel Adaptive Images:

¡Y la instalación y configuración de SPAI es aún más fácil que SPIO! Este es literalmente un plugin de optimización de imágenes de los de instalar y olviderse, como puedes leer en esta guía paso a paso sobre cómo installar y usar ShortPixel Adaptive Images.

SPIO vs SPAI

SPAI es más fácil de usar y configurar, pero en algunos casos puede ser un poco peor en términos de rendimiento bruto porque debe ejecutar código JavaScript para todo el procesamiento en tiempo real. Dado que cualquier ejecución de JavaScript es más costosa que no ejecutar nada, algunas webs pueden beneficiarse más de SPIO que de SPAI. En este caso, puedes hacer lo siguiente para reemplazar las principales ventajas de SPAI:

  • Usa otra CDN como Cloudflare o QUIC.cloud.
  • Deja que WordPress gestione el redimensionado de imágenes. WordPress lo hace por defecto, aunque no es tan preciso como SPAI, ya que SPAI redimensiona las imágenes para que coincidan exactamente con el tamaño del marcador de posición de la imagen. Por ejemplo, si un marcador de posición tiene 356px de ancho, SPAI mostrará una imagen de 356px. Por otro lado, WordPress usa miniaturas predefinidas, eligiendo el tamaño más cercano dentro de un rango, lo que puede no ser siempre un ajuste exacto. Sin embargo, no siempre se necesita esta precisión y vale la pena mostrar una imagen unos pocos píxeles más grande si con ello evitamos todo el procesamiento de JavaScript.

Aunque prefiero SPIO y es lo que uso en esta web, te recomiendo comparar ambas opciones y elegir la que mejor se adapte a tus necesidades.

Si quieres leer más sobre ambos plugins, echa un vistazo a estos documentos:

– ¿Cómo se compara ShortPixel Adaptive Images con ShortPixel Image Optimizer?
– ¿Cómo funciona ShortPixel Adaptive Images?
– ¿Cómo funciona ShortPixel Image Optimizer?

Publica imágenes con formatos de próxima generación

Los formatos de imagen de próxima generación, como WebP y AVIF, son alternativas modernas a los formatos tradicionales como JPEG y PNG. Estos formatos están diseñados para ofrecer una mejor compresión, lo que significa que reducen el tamaño del archivo de las imágenes sin perder calidad. WebP, por ejemplo, puede generar imágenes hasta un 30 % más pequeñas que sus equivalentes en JPEG, mientras que AVIF ofrece tasas de compresión aún mejores. Y como puedes imaginar, archivos de imagen más pequeños se cargan más rápido, lo que mejora el rendimiento de tu web y la experiencia de usuario.

Te recomiendo usar ShortPixel Image Optimizer para convertir tus imágenes a WebP o AVIF y luego entregarlas a tus visitantes. Estas son las instrucciones en vídeo (en inglés):

YouTube video

Si decides usar ShortPixel Adaptive Images en su lugar, solo necesitas activar la opción de WebP/AVIF en la configuración del plugin.

Pospón la carga de imágenes que no aparecen en pantalla

La carga diferida (lazy loading) es una técnica utilizada para retrasar la carga de ciertos elementos en una página web, especialmente imágenes, hasta que sean necesarios. En concreto, la carga diferida de imágenes significa que las imágenes solo se cargan cuando entran en el área visible del usuario (viewport), es decir, cuando se hacen visibles a medida que el usuario se desplaza por la página. Esto puede reducir significativamente el tiempo de carga inicial de tu sitio, ya que evita que el navegador cargue todas las imágenes a la vez.

WordPress incluye una función de carga diferida nativa, conocida como native lazy loading, que aprovecha la capacidad del navegador para retrasar la carga de imágenes. Esto se consigue mediante el atributo HTML loading="lazy", que WordPress añade automáticamente a cada imagen que tenga un atributo de ancho (width) o alto (height). Aunque esta función es muy útil, tiene algunas limitaciones importantes:

  • Falta de control: No puedes excluir imágenes específicas de la carga diferida.
  • Sin soporte para imágenes de fondo: La carga diferida nativa solo funciona con etiquetas <img>, por lo que no afecta a las imágenes de fondo, que suelen ser esenciales para el diseño y la apariencia de tu sitio.

Para tener un mayor control sobre la carga diferida, aquí tienes algunos de los mejores plugins para gestionar la carga diferida de imágenes en WordPress:

Excluir imágenes antes de desplazarse

Un aspecto importante de la carga diferida es asegurarse de que las imágenes que aparecen antes de desplazarse, es decir, las que son visibles para los usuarios justo al cargar la página, no se carguen de forma diferida. Retrasar estas imágenes puede generar una mala experiencia de usuario, ya que la parte superior de la página podría aparecer en blanco o incompleta mientras se cargan las imágenes. Además, si las cargas de forma diferida, tu LCP aumentará considerablemente.

Todas las opciones que he mencionado arriba te permiten excluir estas imágenes de la carga diferida.

10) Optimización de JavaScript

La gran mayoría de las webs son básicamente una combinación de:

  • HTML
  • CSS
  • JavaScript

Mientras que el HTML y CSS añaden contenido a tu sitio web, lo estructuran y lo diseñan, JavaScript es responsable de (pero no se limita a) hacerlo interactivo. JavaScript controla el comportamiento de los diversos elementos de tu sitio web. Entre las funciones de JavaScript puedes encontrar:

  • Búsquedas en tiempo real
  • Analítica
  • Animaciones de elementos, como imágenes o controles deslizantes
  • Ventanas emergentes
  • Gestión de datos dinámicos
  • Cajas de chat
  • etc.

Como puedes ver en la lista, lo que da JavaScript casi nunca tiene prioridad cuando se carga la página. Nuestro objetivo debe ser presentar al usuario una bonita página lo más rápido posible y cargar las funciones adicionales lo más tarde posible para reducir el tiempo de carga inicial.

Diferir la ejecución de JavaScript

Hay dos formas principales de diferir la ejecución de JavaScript:

  1. Añadir el atributo async a los archivos JS
  2. Añadir el atributo defer a los archivos JS

Esta explicación visual de Growing with the Web es una excelente manera de entender las diferencias.

Ten en cuenta estos puntos:

  • No difieras (defer) nada que afecte al contenido de antes de desplazarse.
  • Diferir (defer) puede darte un mejor tiempo de carga inicial, pero puede romper más cosas que async.
  • async es más seguro.
  • Si no sabes lo que estás haciendo, no hagas async ni defer al archivo jquery.min.js.
  • ¡Asegúrate que todo funciona bien después de diferir JavaScript!

Async JavaScript

Una opción gratuita y probablemente la mejor es el plugin Async JavaScript, creado por la misma persona que desarrolló Autoptimize. Simplemente instálalo, ve a Ajustes > Async JavaScript, y en la parte superior podrás activar o desactivar async o defer.

Si te desplazas un poco hacia abajo, verás más campos si quieres un poco más de control, en caso de que quieras incluir o excluir algunos scripts, plugins o temas (lo necesitarás).

Plugins de caché/optimización

Otra opción es usar tu plugin de caché favorito, como WP Rocket, LiteSpeed Cache o, de nuevo, Autoptimize o Perfmatters. Estos suelen incluir una opción para hacerlo.

Perfmatters puede ayudarte, por ejemplo, a diferir la ejecución de JavaScript en la configuración de JavaScript. Busca la opción «Defer Javascript».

Añade un fragmento de código en functions.php

Siempre hay una manera de hacer las cosas a través del archivo functions.php, ¿verdad? Aquí también. Añade el siguiente fragmento de código a tu archivo functions.php:

function defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );


Básicamente, esto le dice a WordPress que añada el atributo defer a todos tus archivos JavaScript excepto jquery.js. Óbviamente esto no es tan flexible como Async JavaScript u otros plugins, pero es más eficiente en términos de rendimiento. Pruébalo y si no notas ningún problema, ¡hecho!

Retrasar la ejecución de JavaScript

Retrasar la ejecución de JavaScript es una técnica más agresiva que simplemente diferirlo. Mientras que diferir JavaScript indica al navegador que espere hasta que el HTML se haya analizado completamente antes de ejecutarlo, retrasarlo va un paso más allá: le dice al navegador que espere hasta que haya una interacción del usuario antes de descargar y ejecutar los archivos JavaScript. ¿Qué cuenta como interacción? Pulsaciones de teclas, desplazamiento o movimientos de ratón. Este enfoque permite que el navegador se concentre exclusivamente en analizar el HTML y renderizar la página.

Esta técnica de optimización puede ofrecer resultados impresionantes en herramientas como PageSpeed Insights u otros, principalmente porque estas herramientas simulan visitas sin interacción del usuario, lo que da como resultado que prácticamente no se descargue JavaScript. Aunque debemos recordar que a Google no le importan las puntuaciones por sí solas, este método sigue siendo efectivo para mejorar el tiempo de carga percibido y optimizar algunas métricas de Core Web Vitals, en particular Largest Contentful Paint (LCP).

Flying Scripts

El plugin más sencillo para lograr esto es Flying Scripts. Es un plugin ligero y sencillo que hace exactamente lo que necesitas, sin opciones innecesarias ni sobrecarga. Después de instalarlo, solo tienes que ir a su página de configuración e introducir las palabras clave que identifican los scripts que se deben cargar tras la interacción del usuario. El nombre del archivo del script suele ser suficiente. Por ejemplo, al introducir youtube se retrasarán todos los scripts provenientes de youtube.com, y gtm retrasará el script gtm.js de Google Tag Manager.

Plugins de caché/optimización

Otra forma de retrasar la ejecución de JavaScript es utilizando uno de los plugins mencionados anteriormente: Perfmatters, WP Rocket, LiteSpeed Cache o FlyingPress. Todos ellos permiten hacer esto fácilmente. Por ejemplo, en Perfmatters, solo tienes que ir a la sección de JavaScript y activar la opción de Delay JavaScript.

Estos plugins te dan mayor flexibilidad. Además de opciones avanzadas de configuración, a diferencia de Flying Scripts, donde debes añadir manualmente cada palabra clave, con estos puedes optar por retrasar absolutamente todo el JavaScript y luego excluir archivos específicos, lo cual es necesario en muchos casos.

Precauciones al retrasar JavaScript

Cuanto más agresiva sea la optimización, mayor es el riesgo de que algo deje de funcionar correctamente. Ten en cuenta lo siguiente:

  • No retrases ningún archivo JavaScript necesario para el contenido antes de desplazarse. Por ejemplo, si tienes un slider en la parte superior de la página, no retrases sus archivos de JavaScript; necesitas que se cargue lo antes posible.
  • Haz muchas pruebas: cuadros de búsqueda, secciones de comentarios, menús móviles, etc. Es probable que algunos scripts deban ser excluidos del retraso para que funcionen correctamente.
  • Evita el retraso de la primera interacción. Una buena forma de probar esto es en tu móvil (o usando las herramientas de desarrollador con la función de emulador de móvil). Actualiza la página y asegúrate de que el primer toque activa una interacción, como el botón del menú. Si el primer clic tiene un retraso inesperado, estamos hablando de una «sobreoptimización», y deberías excluir del retraso el archivo JavaScript responsable de procesar el clic. No solucionar este problema podría afectar negativamente al Interaction to Next Paint (INP).
  • Navega por todas las páginas de tu web y revisa la consola del navegador en busca de errores.
  • Los scripts de WordPress (cualquier archivo en /wp-includes y /wp-content alojado en tu sitio) tienen más probabilidades de causar problemas al retrasarse en comparación con los scripts de terceros (Google Analytics, Tag Manager, Facebook Pixel, Google Ads, etc.).
  • Algunos plugins permiten cargar automáticamente los scripts después de un cierto tiempo. Recomiendo activar esta opción en algunos casos. Por ejemplo, podrías querer rastrear a un usuario en tu herramienta de analíticas incluso sin que haya interacción, o mostrar anuncios de Google independientemente de la actividad del usuario.
  • Si retrasas los scripts de analítica web, es posible que notes cifras ligeramente más bajas en tus informes. Esto ocurre porque los scripts solo se cargan cuando hay interacción del usuario, lo que significa que no se activarán cuando un bot visite tu sitio. Esto, en realidad, estará dando resultados más precisos.

Minimizar los archivos JavaScript

¿Qué significa minimizar? Básicamente, eliminar todos los caracteres innecesarios de tus archivos HTML, CSS o Javascript. ¿Qué son caracteres innecesarios?

  • Caracteres de nueva línea
  • Caracteres de espacio en blanco
  • Comentarios

Un código minimizado generalmente se verá así:

Como puedes ver, no hay nuevas líneas, comentarios o espacios innecesarios.

En WordPress, casi todos los plugins de caché u optimización te permiten hacer esto. Autoptimize, Perfmatters, WP Rocket, FlyingPress y LiteSpeed Cache incluyen opciones en sus ajustes para hacerlo fácilmente.

11) Optimización de CSS

Optimizar el CSS es un poco más complicado que optimizar archivos JavaScript, ya que, con JavaScript, simplemente tenemos que liberar al navegador de procesarlo mientras carga la página. Con CSS, la historia es diferente: si dejamos de cargarlo o lo retrasamos, la página se verá «rota», sin apariencia, durante un tiempo, y eso no es una opción.

CSS crítico

Cuando un usuario visita tu web, su navegador carga todos los recursos necesarios para mostrar la página, incluyendo HTML, imágenes, JavaScript y archivos CSS. El CSS es el responsable de definir el diseño y la apariencia de tu sitio. Sin embargo, no todo el CSS es necesario de inmediato. Hay CSS esencial para el contenido visible en pantalla (above the fold) y el resto que se usa para el resto de la página.

El CSS crítico se refiere al CSS necesario para renderizar la parte visible de la página de inmediato. Al aislar y cargar solo este CSS prioritario primero, los usuarios pueden empezar a interactuar con el contenido visible sin esperar a que se carguen por completo todas las hojas de estilo, que suelen ser grandes y tardan más en procesarse. Este CSS crítico se incrusta directamente en el HTML de la página, mientras que el resto de los archivos CSS se cargan en segundo plano.

ShortPixel Critical CSS

Nota: Esta opción ya no está disponible debido a que el plugin ha sido cerrado.

Uno de los plugins más sencillos para esto es ShortPixel Critical CSS. Necesita una clave API de la web de ShortPixel, pero una vez introducida en el campo correspondiente, los ajustes por defecto serán adecuados para cualquier usuario.

Así es como se ve el CSS crítico se ve en el código fuente al usar ShortPixel Critical CSS.

Plugins de caché/optimización

Casi todos mis plugins favoritos de caché y optimización ofrecen la opción de generar el CSS crítico: Autoptimize y su integración con criticalcss.com, WP Rocket, LiteSpeed Cache y FlyingPress. Ten en cuenta que WP Rocket y LiteSpeed Cache llaman a esta opción «Cargar CSS de forma asíncrona» (o Load CSS asynchronously en inglés).

Implementación manual

Si no quieres instalar un plugin, aunque te facilitaría mucho la vida, siempre puedes generar el CSS crítico manualmente con herramientas online. Hay muchas opciones, como esta y esta. Solo necesitas introducir la URL que quieras optimizar, y obtendrás un código CSS que deberás insertar manualmente en la página correspondiente. Por ejemplo, para la página de inicio, tendrías que añadir el siguiente código en el archivo functions.php:

function add_custom_critical_css() {
    if ( is_front_page() ) {
        echo '<style id="customcriticalcss">aqui_va_el_css_critico</style>';
    }
}
add_action( 'wp_head', 'add_custom_critical_css' );

Tendrás que hacer esto para cada tipo de página (página, entrada, categoría, etiqueta…), añadiendo su correspondiente fragmento de código en el archivo functions.php.

Además, también necesitarás forzar la carga asíncrona de todos los archivos CSS; de lo contrario, el efecto del CSS crítico se anularía. El objetivo es cargar primero el CSS crítico y luego los archivos CSS sin que bloqueen el renderizado de la página.

Por eso decimos que la generación manual de CSS crítico no vale la pena. Con tantas herramientas automatizadas, casi siempre es mejor confiar en ellas. Ahorrarás tiempo y esfuerzo.

Temas y CSS crítico

Algunos temas ofrecen la opción de activar el CSS crítico en su configuración. Por ejemplo, Divi incluye esta funcionalidad:

Recomiendo activarla siempre que no tengas otro plugin gestionando el CSS crítico, para evitar conflictos.

Precauciones al usar CSS Crítico

La implementación de esta técnica es efectiva si se hace bien, pero puede ser perjudicial si no se aplica correctamente. Las herramientas de generación automática de CSS crítico son, por desgracia, de todo menos perfectas. Analizan tu web en segundo plano e insertan el CSS correspondiente en el código fuente. Sin embargo, a menudo no reconocen muchos estilos, lo que puede provocar problemas de FOUC o CLS cuando los archivos CSS reales se cargan en segundo plano y el navegador recalcula el estilo de la página. No solucionar estos problemas es una muy mala idea, ya que afectará negativamente a la experiencia de usuario y las Core Web Vitals (especialmente el CLS).

Por lo tanto, tendrás que familiarizarte con la inspección, comprensión y manipulación del código CSS, y saber usar los campos de «Excluir clases/archivos CSS» o similares para indicarle al plugin que siempre incluya un estilo específico en el CSS crítico.

Eliminar CSS no utilizado

Los archivos CSS suelen contener estilos que no se usan en una página determinada. Si tus archivos CSS son grandes porque incluyen estilos innecesarios, el proceso de carga y sobre todo, del renderizado de la página, puede tardar más de lo debido. Eliminar el CSS no utilizado reduce la carga del navegador, lo que se traduce en un renderizado más rápido y un menor tiempo de carga total.

El proceso técnico detrás de la eliminación del CSS sin usar es bastante similar al del CSS crítico, pero con algunas diferencias:

  • Al generar CSS crítico, los estilos necesarios para renderizar la parte visible de la página se insertan en línea (inline) en el código fuente para que el navegador los cargue de inmediato. Luego, los archivos CSS restantes se cargan de forma asíncrona.
  • Al eliminar el CSS no utilizado, se inserta en línea el CSS necesario para toda la página (no solo la parte visible) y el resto del código CSS se elimina (de ahí el nombre) y ya no se carga.

Plugins de caché/optimización

Todos mis plugins favoritos de caché/optimización, con la excepción de Autoptimize, incluyen una función para eliminar el CSS no utilizado: WP Rocket, LiteSpeed Cache, FlyingPress y Perfmatters. Esta es la configuración en LiteSpeed Cache, por ejemplo:

Y así es como Perfmatters inserta el CSS utilizado en el código fuente:

Implementación manual

Si prefieres un enfoque más práctico, puedes eliminar el CSS sin usar manualmente. Herramientas como PurgeCSS o UnCSS pueden analizar tus archivos HTML y eliminar cualquier regla CSS que no se use en tus páginas. Sin embargo, este método requiere un conocimiento más profundo de CSS y de la estructura de tu sitio.

Aquí tienes un ejemplo básico de cómo usar PurgeCSS con un tema de WordPress:

  1. Ejecuta PurgeCSS en los archivos de tu tema. Deberás proporcionar los archivos HTML y CSS para que los analice.
  2. PurgeCSS generará un nuevo archivo CSS con solo los estilos necesarios.
  3. Sustituye tu archivo CSS existente por el generado por PurgeCSS.

Ten en cuenta que la eliminación manual puede ser un proceso lento y arriesgado si eliminas accidentalmente estilos necesarios para el contenido dinámico. Por eso, siempre recomiendo optar por una solución más automática con uno de mis plugins «de confianza».

Precauciones al eliminar CSS no utilizado

  • Al igual que con el CSS crítico, aunque eliminar el CSS no utilizado es positivo, es importante hacerlo con cuidado. Las herramientas automáticas a veces eliminan estilos utilizados por JavaScript o elementos dinámicos, como menús que aparecen al pasar el cursor o mensajes de error de formularios. lo que puede provocar fallos en el diseño o en la funcionalidad. Para evitar esto, siempre haz pruebas en la web después de aplicar cualquier estrategia de eliminación de CSS. Y también, usa las opciones de «Excluir clases/archivos CSS» que ofrecen algunas herramientas para evitar la eliminación de estilos esenciales.
  • Los plugins recomendados no permiten activar el CSS crítico y la eliminación de CSS no utilizado al mismo tiempo. Si tienes la opción, no deberías activarlas juntas para evitar conflictos.
  • Los mismos problemas de CLS y FOUC pueden ocurrir aquí al igual que con el CSS crítico. Al modificar los estilos de la web, es muy probable que te encuentres con desplazamientos de elementos y estilos que desaparecen, por lo que es fundamental tener un buen conocimiento de CSS.

Minimizar los archivos CSS

Consulta la guía de cómo minimizar JavaScript.

12) Optimización de fuentes

Las fuentes pueden parecer recursos pequeños e inofensivos, pero cada archivo de fuente suele ocupar entre 10 KB y 50 KB, o incluso más. Cuando se cargan varias fuentes, pesos y estilos, el tamaño total puede afectar significativamente el tiempo de carga de tu sitio e introducir problemas de FOUT (Flash of Unstyled Text). Esto ocurre cuando primero se cargan fuentes del sistema mientras se espera a que las fuentes externas se descarguen, lo que provoca desplazamientos en el diseño y afecta al Cumulative Layout Shift (CLS).

La mayoría de los sitios web hoy en día usan Google Fonts, por lo que muchas técnicas de optimización están orientadas a optimizarlas. Sin embargo, Font Awesome también es especialmente problemático. Muchas webs cargan archivos grandes con cientos de iconos, pero terminan usando solo uno o dos. Esta ineficiencia puede inflar innecesariamente el peso de la web.

La solución ideal: fuentes del sistema

En un mundo ideal, las fuentes del sistema serían la mejor opción, ya que vienen preinstaladas en cada dispositivo del usuario, cargando al instante sin necesidad de solicitudes adicionales. Esta misma web usa fuentes del sistema, y esa es una de las razones por las que es tan rápida. 😊 Sin embargo, las tendencias de diseño y las expectativas de los usuarios a menudo necesitan fuentes personalizadas para lograr una mejor estética y alineación con la marca.

Para usar fuentes del sistema, simplemente no elijas ninguna fuente adicional. No selecciones ninguna fuente de Google ni ninguna otra en los ajustes de tu tema o plugins. El navegador del usuario se encargará del resto, utilizando las fuentes por defecto del sistema operativo.

Alojar fuentes localmente

La siguiente mejor opción es alojar las fuentes en tu propio servidor. En lugar de cargarlas desde los servidores de Google en cada visita (suponiendo que uses Google Fonts), puedes descargar los archivos de fuente y servirlos directamente desde tu hosting. Esto reduce las solicitudes externas, disminuye la latencia y te da más control sobre cómo se cargan las fuentes.

La forma automática

Muchos temas modernos, como Blocksy, ya incluyen una opción para alojar fuentes en local, lo que facilita este proceso. Sin embargo, mi recomendación es utilizar plugins como Perfmatters y OMGF, que ofrecen opciones avanzadas de personalización. Por ejemplo, Perfmatters te permite limitar los subconjuntos de caracteres descargados localmente. ¿Verdad que no necesitas cargar caracteres en japonés, chino o hebreo si tu sitio está en inglés?

Otra opción para alojar fuentes localmente es Cloudflare APO, un complemento de $5/mes que cachea todo tu sitio WordPress en la red de Cloudflare (en cada punto de presencia). Como extra, también aloja Google Fonts en sus servidores, asegurando que siempre se carguen desde Cloudflare (siempre que la página esté en caché, claro), lo que acelera enormemente la carga.

La forma manual

También puedes hacer este proceso manualmente. Elementor (que no deberías usar) permite subir tus propios archivos de fuente, al igual que otros temas y maquetadores. Recuerda subir las fuentes en formato WOFF2, ya que produce los archivos más pequeños y es el más compatible con navegadores y sistemas operativos.

Si optas por la ruta manual, sube solo los pesos y estilos de fuente que realmente necesites (ver la siguiente sección) y los subconjuntos requeridos. ¿Cómo hacer el subsetting de fuentes? Procesa los archivos WOFF2 con Font Subsetter de Everything Fonts.

Selecciona tamaños y estilos específicos

Evita cargar tamaños y estilos innecesarios. Los temas que permiten seleccionar Google Fonts suelen ofrecer opciones para elegir pesos o tamaños específicos (ej. 300, 400, 500) y estilos (itálica, negrita). Cada peso o estilo adicional suele requerir la descarga de archivos más grandes o múltiples archivos, por lo que es mejor limitarse a los que realmente necesitas.

El problema es que algunos temas o plugins pueden cargar automáticamente más pesos y estilos de los necesarios. Si tu tema no tiene ajustes para evitar esto, el plugin OMGF puede ayudarte. En su página de ajustes, encontrarás una tabla que te permite deseleccionar los tamaños y estilos innecesarios.

Por supuesto, ten cuidado al hacer cambios, ya que algunos tamaños pueden seguir en uso. Para averiguar qué fuentes, pesos y estilos utiliza tu sitio, te recomiendo la extensión de Chrome Fonts Ninja.

Iconos

En WordPress, a menudo te encontrarás con Font Awesome cuando necesites iconos. Aunque tienen una gran biblioteca de iconos muy chulos, puede ser tanto una bendición como una maldición. Para páginas con uno o dos iconos, muchos plugins y temas aún cargan toda la biblioteca de fuentes, a veces superando los 100 KB e incluyendo miles de iconos sin usar. Todo para solo unos pocos iconos.

Aquí tienes algunas soluciones para evitar cargar grandes bibliotecas de iconos como Font Awesome:

  • Usa archivos SVG: Sitios como SVG Repo tienen miles de iconos SVG gratuitos. Para cargar archivos SVG en tu web, necesitarás el plugin WP SVG Images.
  • Usa The Icon Block: Un maravillos plugin para el editor de bloques de Gutenberg, creado por Nick Diego, conocido por sus plugins de alta calidad.
  • Usa Dashicons: Dashicons son las fuentes nativas de iconos de WordPress. Sin embargo, toma esto como último recurso, ya que aún requiere cargar un archivo CSS relativamente grande (~40 KB).

Precargar fuentes

Ver la siguiente sección 🙂

13) Precarga de recursos

La precarga (preload en inglés) es una técnica de optimización del rendimiento web que permite indicar a los navegadores que carguen ciertos recursos de manera anticipada durante el proceso de carga de la página. Esto es especialmente útil para los recursos críticos necesarios para renderizar el contenido visible en la parte superior de la página.

¿Qué aspecto tiene una precarga en el código fuente? Es una simple etiqueta <link> en el <head> de una página con el atributo rel="preload". Por ejemplo, la página de inicio de Accelera incluye esto:

<link rel="preload" href="https://accelerawp.com/wp-content/uploads/2024/06/decorative_darkblue.svg" as="image">

Una regla de precarga siempre necesita dos atributos adicionales, como se muestra arriba:

  • Un href: Este es el enlace al recurso.
  • Y un as: Este puede tener varios valores. Ten en cuenta que para font y fetch, también debes incluir el atributo crossorigin.
    • fetch: Recurso al que se accede mediante una solicitud fetch o XHR.
    • font: Archivo de fuente.
    • image: Archivo de imagen.
    • script: Archivo JavaScript.
    • style: Hoja de estilo CSS.
    • track: Archivo WebVTT.

Cuando un navegador encuentra una etiqueta <link rel="preload">, inicia una descarga de alta prioridad para el recurso, de modo que, cuando realmente se necesite, ya haya sido descargado o casi. Piensa en rel=preload como una forma de controlar cuándo el navegador descubre un recurso, como imágenes de fondo u otros recursos que requieren que se carguen primero los scripts, los cuales no son inmediatamente visibles para el navegador. Ten en cuenta que las imágenes, por defecto, comienzan con baja prioridad, por lo que también puede que quieras incluir el atributo fetchpriority="high" en la precarga (y esa es también la razón por la que las imágenes, por defecto, afectan al LCP).

Aunque la precarga puede mejorar significativamente el rendimiento, abusar de él puede tener efectos negativos. Añadir demasiadas directivas de precarga puede:

  • Sobrecargar la cola de carga del navegador.
  • Retrasar la carga de otros recursos críticos.
  • Aumentar el tiempo de carga de la página en lugar de reducirlo.

Evalúa siempre qué recursos son realmente críticos y limita la precarga a solamente esos. Te recomiendo precargar el elemento LCP (si es una imagen) y cualquier fuente que cause problemas de CLS.

Precarga fuentes para corregir problemas de CLS

Un alto valor de Cumulative Layout Shift (CLS) suele ocurrir cuando las fuentes de terceros de la web se cargan después de renderizarse el contenido. La precarga de fuentes garantiza que estén disponibles cuando la página comience a renderizarse, evitando los desplazamientos causados por el intercambio de fuentes del sistema con las de terceros.

<link rel="preload" href="/fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Si quieres ver un mal caso de CLS alto causado por fuentes, dale un vistazo a la web de NitroPack. Puedes ver cómo, en cuanto se cargan las fuentes web, el contenido salta hacia abajo, aumentando el CLS:

Precarga imágenes para mejorar el LCP

Las imágenes críticas, especialmente las que están por encima del pliegue, pueden precargarse para mejorar el LCP. Por ejemplo:

<link rel="preload" href="/images/hero-banner.jpg" as="image">

Esto garantiza que la imagen principal se cargue temprano, evitando interrupciones visuales. Aquí tienes una imagen esquemática creada por GTmetrix que muestra claramente cómo la precarga de una imagen puede ayudar al LCP.

Arriba – sin precarga
Abajo – con precarga

Cómo precargar recursos con Perfmatters

Perfmatters facilita la precarga mediante una interfaz fácil de usar:

  1. Inicia sesión en tu panel de WordPress y ve a Ajustes > Perfmatters > Preloading.
  2. Añade la URL del recurso que deseas precargar. Escoge el tipo de recurso (por ejemplo, fuente, imagen, script). También puedes, de forma opcional, elegir el tipo de dispositivo y el ID de la página.
  3. Además, puedes ajustar el ajuste de «Preload Critical Images», que precarga automáticamente las primeras X imágenes que especifiques. Ten en cuenta que esta configuración solo se aplica a las imágenes en etiquetas <img>, por lo que las imágenes de fondo deben seguir precargándose manualmente
  4. Guarda los cambios y Perfmatters insertará las etiquetas <link rel="preload"> apropiadas en el <head> de tu sitio.

También te recomiendo que revises los filtros para personalizar la función de precarga. Es probable que los necesites si vas a querer precarga la imagen correcta en cada una de las páginas de tu web: Filters to further customize Perfmatters plugin options

14) Optimización general de WordPress

Otras mejoras que puedes hacer que no tendrán un gran impacto, pero que juntas suman, son:

Controla la API de Heartbeat

La API de Heartbeat de WordPress es una función integrada que permite la comunicación en tiempo real entre el navegador y el servidor. Es usada por características como el guardado automático de entradas, mostrar cuándo otra persona está editando una entrada y la gestión de las expiraciones de sesión. Funciona enviando solicitudes AJAX (admin-ajax.php) a intervalos frecuentes, cada 15 a 120 segundos, dependiendo del contexto (por ejemplo, editor, panel de administración o front-end).

Como puedes imaginar, esto puede poner al servidor contra las cuerdas (en casos extremos, claro), especialmente en hosting compartido o sitios web con alto tráfico, por las siguientes razones:

  • Mayor uso de CPU en el servidor.
  • Mayor consumo de recursos.
  • Solicitudes AJAX excesivas cuando hay muchos usuarios conectados.

Existen dos formas principales de controlar la API de Heartbeat: utilizando un plugin o añadiendo código personalizado a tu archivo functions.php.

Usando un plugin

Varios plugins facilitan la modificación o desactivación de la API de Heartbeat. Perfmatters es mi favorito, pero muchos plugins de caché (como WP Rocket) también incluyen ajustes para controlar la API de Heartbeat. Si prefieres un plugin dedicado para esto, echa un vistazo a Heartbeat Control.

En Perfmatters, puedes encontrar los ajustes de la API de Heartbeat en Ajustes → Perfmatters → General. Puedes:

  • Mantener el comportamiento por defecto (la frecuencia de la API ded Heartbeat es de 10 segundos).
  • Desactivar completamente la API Heartbeat (para un uso mínimo de recursos).
  • Permitir la API solo cuando se estén editando entradas o páginas, que es lo que la mayoría de los usuarios necesita y lo que recomiendo y uso aquí en Asistente WordPress.

Con cualquier opción (excepto cuando se desactiva completamente), también puedes ajustar la frecuencia de la API de Heartbeat. En esta web uso el valor de 60 segundos.

Controlar la API de Heartbeat con código

Si prefieres una solución basada en código, puedes añadir este fragmento a tu archivo functions.php o a un plugin personalizado:

function disable_heartbeat_completely() {
    wp_deregister_script('heartbeat');
}
add_action('init', 'disable_heartbeat_completely', 1);

Esto desactivará completamente la API de Heartbeat. Si prefieres reducir su frecuencia en lugar de desactivarla (recomendado), usa el siguiente fragmento, donde podrás editar la frecuencia tú mismo:

function modify_heartbeat_frequency($settings) {
    $settings['minimalInterval'] = 60; // Ajustado a 60 segundos (por defecto es 10)
    return $settings;
}
add_filter('heartbeat_settings', 'modify_heartbeat_frequency');

Limpia la cabecera de las páginas

Como probablemente sepas, cada documento HTML tiene dos partes: la cabecera (head) y el cuerpo (body). El body contiene el contenido real de la página, como texto e imágenes, mientras que el head contiene información general (metadatos) sobre el documento, incluyendo su título y enlaces a scripts y estilos.

Sin embargo, el head también contiene muchos elementos innecesarios: líneas adicionales de código que el navegador debe descargar y analizar. Así es como puedes limpiarlo.

Eliminar el filtro Capital P Dangit

Apuesto lo que quieras a que no sabías que WordPress tiene una función que corrige automáticamente cada instancia de «Wordpress» a «WordPress», con «p» mayúscula. Si no necesitas que WordPress haga esto por ti y también te gustaría no desperdiciar algo de capacidad de procesamiento del servidor (aunque se agradece la intención, esto aún requiere la ejecución de código PHP), tengo una solución para ti. Así es como puedes eliminar el filtro Capital P Dangit.

Desactivar los self-pingbacks

Los pingbacks en WordPress son un tipo de notificación que informa a otros sitios web cuando has enlazado a su contenido. Si otro sitio WordPress enlaza a tu entrada, tu web puede recibir un pingback, que aparece en la sección de comentarios (si es aprobado). Para que los pingbacks funcionen, deben cumplirse algunas condiciones:

  1. La opción «Permitir avisos de enlaces de otros blogs (pingbacks y trackbacks) en las nuevas entradas» debe estar activada; esto solo es relevante si quieres avisar a otros sitios web. Esta opción se encuentra en Ajustes > Comentarios.
  2. La opción «Intentar avisar a cualquier blog enlazado desde la entrada» debe estar activada; esto solo es relevante si quieres recibir avisos de otros sitios web. Esta opción se encuentra en Ajustes > Comentarios.
  3. Necesitas tener configurado un servicio de actualización en Ajustes > Escritura. Por defecto, WordPress incluye http://rpc.pingomatic.com/.

Los pingbacks funcionan automáticamente entre sitios WordPress que los tengan activados. Sin embargo, los pingbacks a menudo se desactivan porque pueden ser utilizados para spam. Por eso recomiendo desactivar todas las opciones de pingback mencionadas anteriormente por completo.

Pero supongamos que sí quieres tener los pingbacks activados. Entonces tenemos que hablar sobre los auto-pingbacks (self-pingbacks en inglés), que ocurren cuando enlazas a una de tus propias entradas desde otra entrada en el mismo sitio WordPress. Generalmente son inútiles porque:

  • Desordenan la sección de comentarios: Aparecen como comentarios en tu entrada, haciendo que la sección de comentarios se vea desordenada.
  • No tienen ningún beneficio real para el SEO: Los enlaces internos ayudan al SEO, pero los self-pingbacks no añaden ningún valor extra.
  • Crean avisos molestos: Cada vez que enlazas internamente, recibes un aviso innecesaria en WordPress.
  • Consumen recursos del servidor: Aunque no es algo que se note mucho, siguen necesitando procesarse, y en casos extremos, pueden causar pequeños problemas de rendimiento.

¿Cómo puedes desactivar los self-pingbacks? Simplemente añade este fragmento de código a tu archivo functions.php:

function no_self_ping( &$links ) {
    $home = get_option( 'home' );
    foreach ( $links as $l => $link )
        if ( 0 === strpos( $link, $home ) )
            unset($links[$l]);
}
add_action( 'pre_ping', 'no_self_ping' );

Si prefieres la opción de un plugin, puedes instalar No Self Ping o Perfmatters si ya lo estás utilizando.

Haz «preconnect» a sitios externos

La preconexión le dice al navegador que establezca una conexión temprana con dominios externos, lo que incluye la búsqueda de DNS, el protocolo de enlace TCP y la negociación TLS opcional. Al hacer esto para recursos externos clave como fuentes, pasarelas de pago o CDNs, puedes mejorar la velocidad de carga de tu web. Sin embargo, hacer «preconnect» a todo no es una buena idea; el uso excesivo puede, de hecho, ralentizar el rendimiento.

¿Quieres saber la mejor manera de implementar preconnect de manera eficiente? Aquí tienes la guía detallada: Cómo usar preconnect.

Aplica DNS-Prefetch

El DNS prefetching ayuda a acelerar la carga de las páginas al resolver los nombres de dominio en segundo plano antes de que se necesiten los recursos externos. Es como preconnect, pero solo para las búsquedas de DNS. Esto también reduce la latencia al obtener recursos de dominios de terceros como scripts de redes sociales, herramientas de análitica web o CDNs, y a diferencia de preconnect, es imposible utilizarlo demasiado. Aunque es una optimización simple, aplicarlo estratégicamente ayuda a mejorar el rendimiento.

¿Quieres aprender cómo implementar DNS prefetch correctamente? Consulta esta pequeña pero completa guía: Cómo usar DNS Prefetch.

Desactivar el WP-Cron

WP-Cron es el programador de tareas incorporado de WordPress, responsable de ejecutar tareas programadas como la publicación de entradas programadas, la búsqueda de actualizaciones y la gestión de tareas de los plugins. Sin embargo, depende del tráfico del sitio para activarse, lo que puede causar problemas de rendimiento, especialmente en webs con alto tráfico, o en aquellos con pocas visitas, lo que puede provocar tareas perdidas o retrasadas.

Aprende más sobre cómo puedes desactivar WP-Cron y reemplazarlo con un cron de servidor real aquí.

15) Actualiza tu versión de PHP

Si usas PHP, y lo haces si tu web es WordPress, asegúrate de usar la última versión. Definitivamente notará un aumento en la velocidad de carga, especialmente si actualizas desde una versión bastante antigua. Kinsta ha realizado algunas pruebas comparativas y los resultados son claros. La última versión de PHP es la clara ganadora.

Sin embargo, actualizar la versión de PHP en lugar de aumentar el rendimiento de WordPress podría causar problemas en tu web, ya que es una parte sensible. Asegúrate de probar exhaustivamente todas las partes de la web después de actualizar la versión de PHP y ten una manera fácil de revertir la versión a mano. Para ayudarte con esto, puedes crear una web de pruebas donde probar plugins y/o temas sin temor a romper nada. Probablemente no tendrá la última versión de PHP, pero al menos será casi la última. Te dejo aquí una web donde poder crear sitios de prueba rápido y gratuitamente: Quick WordPress Testing & Staging Sites – TasteWP

16) Optimiza tu base de datos

La optimización de la base de datos también es importante. Es posible que no lo notes si es un sitio pequeño, pero si ha estado activo durante un tiempo y/o es un sitio grande, probablemente verás y notarás la diferencia cuando limpies la base de datos.

Cada entorno y configuración es diferente, por lo que no existe un botón mágico que lo haga por ti. Sin embargo, puedo darte algunos consejos:

  • Elimina los metadatos huérfanos y duplicados de la base de datos. WordPress tiene una variedad de entradas que contienen información adicional. Por ejemplo, tus usuarios tienen una dirección de correo electrónico, un sitio web, una biografía; tus entradas tienen un contenido, un título, un extracto; los comentarios tienen un autor, un campo de correo electrónico, etc. Esta información a veces puede estar duplicada o huérfana (no pertenecer a nada). En tales casos, estos datos simplemente no tienen valor y ocupan espacio innecesario en la base de datos. Para limpiar todos estos datos, puedes usar un plugin como WP-Sweep.
  • Optimiza las tablas de la base de datos. La palabra «optimizar» tiene un significado diferente aquí: esta sección se llama «Optimiza tu base de datos» en el sentido de limpiarla, pero las tablas de la base de datos en realidad se pueden optimizar de manera muy similar a como se desfragmenta un ordenador. Para esto, nuevamente, puedes usar un plugin como WP-Sweep. O, si te atreves, puedes hacerlo manualmente a través de una herramienta de administración de base de datos como phpMyAdmin. Echa un vistazo a este artículo para leer información más detallada sobre cómo hacerlo.
  • El script MySQL Tuner es un script escrito en Perl que te ayuda a configurar tu base de datos MySQL y te da recomendaciones para un mejor rendimiento y estabilidad. Ten en cuenta que debes tener muy buenos conocimientos técnicos y acceso como root a tu servidor para usarlo.
  • Limpia los datos cargados automáticamente («autoloads») de la tabla wp_options. La tabla wp_options en tu base de datos de WordPress almacena diversos datos de tu web, como las URLs del sitio, ajustes de plugins y ajustes de temas. Algunos de estos datos están en modo auto-carga (autoload en inglés), lo que significa que se cargan en cada página de tu sitio. ¿El problema? WordPress a menudo no elimina datos de temas y plugins eliminados, especialmente porque muchos desarrolladores configuran el campo de autoload a yes por defecto y no ofrecen una manera fácil de eliminarlos. Entonces, ¿cómo puedes eliminar los datos fantasma que se cargan automáticamente? Tienes dos opciones:

¿Quieres optimizar aún más tu base de datos?

He escrito un artículo muy completo sobre lo que puedes hacer para que tu base de datos funcione más rápido. Aquí lo tienes: Cómo limpiar la base de datos de WordPress

15) Optimiza los recursos externos

Casi todos los sitios web necesitan conectarse a otros sitios externos para completar la carga de la página: Google Fonts, Google Analytics, ventanas emergentes de chat, servicios de comentarios, videos y más. Lo creas o no, estos también se pueden optimizar, aunque hay limitaciones, claro, ya que son servicios de terceros.

He escrito un artículo que habla sobre estos servicios y lo que puedes hacer para optimizar tus recursos externos. Se actualiza constantemente, así que échale un vistazo aquí: Cómo optimizar tus recursos externos en WordPress.

Si ves un enlace de afiliado, te garantizo que es de un producto o servicio que realmente vale la pena. A diferencia de otras webs, aquí no se promociona nada solo porque paga más.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Entradas relacionadas