Cómo acelerar y cachear tu sitio WordPress – Guía definitiva

En esta guía, te mostraré cómo acelerar enormemente tu sitio WordPress configurando algunas herramientas.

Aprende cómo acelerar los tiempos de carga de tu sitio web en un factor de 5 o más. ¡Vamos a por una mejor experiencia de usuario y mejores rankings en los motores de búsqueda 💪

Disminuir la carga de la página y aumentar la velocidad del sitio mejorará enormemente la experiencia del usuario de tu sitio. Tus visitantes permanecerán más tiempo, y el número de usuarios que abandonan tu sitio después de abrir la primera página será menor que antes. Es posible que ya hayas oído hablar de esta métrica como la llamada tasa de rebote.

Aún mejor, la velocidad del sitio es un factor de ranking de Google, lo que significa que tu sitio puede obtener mejores posiciones en las búsquedas de Google después de un tiempo. Eso hará que más usuarios encuentren tu sitio y obtengas más tráfico.

Hay algunas razones por las que tu sitio WordPress puede ser lento.
Las razones más comunes son "Sin caché" y un tamaño de página demasiado grande.

Además de estas dos razones principales, varias otras variables pueden afectar la velocidad de tu sitio:

• Muchos plugins instalados
• Configuración de tu servidor
• Mal código en uno o más plugins.
• Mal código en el tema
• Conectividad de red lenta
• Respuesta lenta del servidor

Antes de comenzar, es esencial recordar que no todas las acciones recomendadas pueden mejorar el tiempo de carga de tu sitio. Una puede funcionar mejor que otra, y algunas afectan el tiempo de carga de tu sitio solo de forma insignificante.

Vídeo: Cómo acelerar WordPress

Si prefieres ver un vídeo en lugar de leer este artículo sobre cómo acelerar WordPress, puedes ver el artículo completo como vídeo:

Herramientas que usamos para acelerar WordPress

• ShortPixel Image CDN
• WP Super Cache
• Autoptimize
• wp-staging.com
• Pingdom
• Google PageSpeed Insights
• GiftofSpeed GZIP Test

Mide la velocidad de tu sitio

Comencemos con algunas pruebas de referencia para tener una visión general y comprender la velocidad de tu propio sitio.

Para medir y analizar la velocidad del sitio, puedes utilizar las herramientas gratuitas en línea de velocidad de página Pingdom y Google PageSpeedInsights.

Estos resultados son de un sitio web de muestra con WordPress 5.6, un puñado de plugins populares y la versión gratuita del tema "Astra" y un sitio WordPress muy alejado de la carga rápida:

Activar el caché

Comencemos con el primer paso, instalar un plugin de caché.

Un plugin de caché guarda la salida HTML visible de tu sitio en archivos temporales en tu sitio web. Ejecutar código desde un plugin o tema es muy costoso en tiempo porque el servidor tiene que hacer numerosos cálculos para realizar la ejecución.

Con el caché, estos cálculos solo deben hacerse una vez cuando un visitante abre tu sitio. El plugin de caché verifica primero si existe un caché para contenido específico.

Si el contenido ya está en caché, emite directamente la salida HTML precalculada en lugar de ejecutar de nuevo todo el código. Entonces el servidor tiene más recursos libres para cargar tu sitio más rápidamente. Solo instalar un plugin de caché y ajustarlo correctamente puede hacer que tu sitio sea diez veces más rápido o más.

WP STAGING – WordPress Backup, Restore & Migration

Recomiendo WP Super Cache. Este plugin lo desarrolla Automattic. Esa es la misma empresa responsable del desarrollo del núcleo de WordPress. El plugin es gratuito, potente y simple si entiendes cómo funciona.

Este plugin es, en muchas opciones, tan potente como los plugins premium, como el popular WP ROCKET del que quizás hayas oído hablar.

WP ROCKET tiene una interfaz más amigable y podría ser más fácil de usar para principiantes. No te preocupes; te tomaré de la mano y te mostraré todos los clics que necesitas hacer para obtener resultados similares a los que obtendrías con un plugin de caché premium.

¡Así que obtienes los mismos resultados de velocidad gratis!

Ve a la tienda de plugins y busca WP Super Cache.

Después de instalar y activar el plugin WP Super Cache, vamos a configurarlo.

Sería posible activar el caché a través de la sección "Easy" eligiendo "caching on", pero en este punto, vamos directamente al área "Advanced", ya que aquí podemos configurar los ajustes con más precisión.

1. Activa la casilla "Enable Caching".
2. Simple como método de entrega de caché.
3. Desactiva el caché para visitantes registrados.
4. No almacenes en caché páginas con parámetros GET. Garantiza que las páginas dinámicas, que son diferentes para cada usuario, como los carritos de compra, nunca se almacenen en caché.
5. Comprime las páginas para que se sirvan más rápido a los visitantes,
   y activa la compresión Gzip, que acelera significativamente tu sitio. Ten en cuenta que algunos servidores ya comprimen los datos por sí mismos, lo que lleva a errores al iniciar la opción. Para ver si tu servidor ya utiliza compresión gzip, puedes usar esta prueba de rendimiento de gzip.
6. Cache rebuild,
   muestra el contenido en caché al usuario incluso si el caché se está actualizando debido a contenido nuevo. Esto significa que tus visitantes nunca verán contenido sin caché, excepto en la primera generación del caché.
7. 304 Browser Caching,
   le indica al usuario que cargue el sitio desde el caché del navegador si ya hay contenido en el caché del navegador del usuario en lugar de conectarse al servidor. Eso puede reducir aún más la carga de CPU de tu servidor.

Luego desplázate hacia abajo hasta la pestaña "Advanced".

1. Activa el soporte para dispositivos móviles. Un simple clic es suficiente, pero wp-super-cache señala que, dependiendo del diseño, puede ser necesario instalar un plugin adicional. Como usamos un tema WordPress estándar, esto no es necesario. Si tu sitio funciona bien en dispositivos móviles después de activar esta opción, puedes usarla.
2. Cuando se publica o actualiza una entrada o página, borra todos los archivos de caché y asegúrate de que el caché se borre para que se pueda mostrar nuevo contenido.

Finalmente, el último paso en los ajustes del plugin de caché es la opción PRELOADING, que puedes encontrar en la pestaña "Preload":

La configuración preload hace que el plugin almacene en caché todas las entradas y páginas de tu sitio periódicamente. Puedes establecer el intervalo de tiempo entre cada actualización del caché. Este intervalo de tiempo es un ajuste muy crucial.

En un entorno de hosting compartido, debes configurarlo idealmente a una vez al día – cada 1440 minutos.

Si actualizas tu sitio dos veces al día, puedes seleccionar el intervalo de tiempo entre cada actualización del caché en 720 minutos. Con esta configuración, todo el caché se actualizará dos veces al día. Un tiempo de actualización tan bajo puede incurrir en una carga de servidor adicional.

Recomendaría no usar un valor menor en entornos de hosting compartido – ya que probablemente se contará como un uso excesivo de recursos del servidor.

Sin embargo, si estás en un VPS o un servidor dedicado, puedes establecer la frecuencia de actualización tan baja como 60 minutos.

Vale la pena saber que el número de entradas y páginas en tu sitio afecta los recursos requeridos para cada operación de actualización del caché preload. Un tiempo de actualización óptimo para un servidor dedicado en un sitio de alto tráfico sería de 2 horas.

He marcado las casillas relevantes y he establecido el intervalo de actualización del caché en 1440 mins. ¡Eres libre de elegir cualquier valor!

Optimizar archivos CSS, JavaScript e imágenes

Para los próximos ajustes, como combinar archivos JavaScript y CSS y optimizar imágenes y la salida HTML, usamos otro plugin llamado "Autoptimize", que podemos instalar desde el repositorio de plugins de WordPress.

Si debes agregar o no archivos CSS y JavaScript depende principalmente de cómo está configurado tu servidor.

Cada sitio carga archivos a través del protocolo HTTP 1.1 o el más nuevo HTTP 2.

Con HTTP 1.1, todos los archivos se descargarán uno tras otro. Por ejemplo, un archivo debe cargarse completamente para el visitante antes de que el servidor pueda comenzar a enviar el siguiente archivo.

Para reducir el número de archivos a descargar, Autoptimize puede combinar esos archivos. Así, en lugar de enviar diez archivos CSS, tu servidor solo necesita descargar un archivo, lo que resulta en un tiempo de carga total más rápido. Aunque el tamaño total del archivo CSS o JS combinado sea mayor, cada solicitud individual conlleva una sobrecarga adicional; como el tiempo extra que una solicitud necesita para establecer una conexión con el servidor. Por eso puede ser más rápido cargar un solo archivo grande en lugar de cargar múltiples archivos.

Así que si tu servidor ejecuta HTTP 1.1, se recomienda agregar todos los archivos CSS y JS de tu sitio.

Por el contrario, el protocolo HTTP2 puede descargar múltiples archivos simultáneamente. Si esa es la configuración de tu servidor, puede ser contraproducente activar la agregación de archivos. HTTP2 suele ser mucho más rápido porque puede descargar varios archivos pequeños simultáneamente en lugar de uno grande.

Por lo tanto, combinar archivos CSS y JS a menudo no beneficia e incluso puede ralentizar el sitio si utiliza HTTP2. Para estar seguros, puedes probar ambas opciones para determinar qué configuración te da los mejores resultados.

Para ver si tu sitio utiliza HTTP 2, utiliza el KeyCDN http2 service.

Optimizar JavaScript

Selecciona la pestaña "JS, CSS & HTML".

Activa Optimize JavaScript Code

Si tu servidor usa HTTP 1:

• Activa Aggregate JS files para combinar archivos JavaScript como recomiendan los servicios de medición de velocidad de página

Desactiva las opciones:

• Force JavaScript in <head
• Exclude scripts from Autoptimize
• Add try-catch-wrapping.

Activa estas opciones solo si agregas archivos javascript y experimentas problemas en el sitio. Entonces puedes excluir archivos javascript particulares del proceso de combinación.

Si tu servidor usa HTTP 2:

• Desactiva Aggregate JS Files

Optimizar archivos CSS

El siguiente paso es la optimización de los archivos CSS.

• Haz clic en Optimize CSS Code.

Si tu servidor usa HTTP 1.1, activa las opciones:

• Aggregate CSS-files
• Aggregate inline CSS.
  Esto mejorará aún más la puntuación de velocidad de la página. Es lo mismo que agregar archivos JavaScript y archivos JavaScript inline, pero solo para CSS. ¡Mantén esta opción desactivada si tu servidor usa HTTP2!

Si tu servidor usa HTTP1 o HTTP2:

• Activa Generate data: URIs for images – Esto puede resultar en menos solicitudes HTTP. Pero no después de configurar un CDN y servir imágenes a través de él. En caso de usar un CDN, tendrías que desactivarlo. Al usar un CDN, los archivos se almacenan en caché en varios centros de datos en todo el mundo.
• Desactiva Inline and Defer CSS
• Exclude CSS from Autoptimize:
  Usa esto solo si has agregado archivos CSS y experimentas problemas visuales en tu sitio. Entonces puedes excluir archivos CSS particulares del proceso de combinación.

Optimizar HTML

Activa la opción "Optimize HTML code".

Al optimizar archivos HTML, se eliminan los espacios y comentarios del código. Esto reducirá el tamaño del archivo. Y los archivos más pequeños generalmente cargan más rápido que los más grandes.

Antes de la optimización HTML:

Después de la optimización HTML

La última sección a editar son las opciones MISC en Autoptimize.

Activa las primeras cuatro opciones:

• Save aggregated script/CSS as static files.
• Minify excluded CSS and JS files.
• Enable 404 fallbacks.
• Also, optimize for logged-in editors/administrators.

Si has iniciado sesión y experimentas problemas con un constructor de páginas como Elementor u otro plugin de backend, desactiva la última opción.

Optimizar Google Fonts

Pasemos a la pestaña "Extra".

Las fuentes de Google pueden ralentizar el tiempo de carga ya que se extraen de recursos externos. Prefiero la opción "combine and link in head" ya que mejora los tiempos de carga sin ver la carga de la fuente. Si estás en la Unión Europea, esto también hace que tu sitio sea más conforme con el RGPD, ya que estos recursos externos ya no se cargan desde google.

Pero también debes probar la última opción de Google Font, "combine and load fonts asynchronously with webfont.js", y ver cuál arroja mejores resultados en la herramienta de velocidad de página.

Luego, activa "remove Emojis" porque el javascript responsable de los emojis está sobrecargado y no es beneficioso para un buen tiempo de carga.

Optimizar imágenes

Autoptimize también puede ayudar a que las imágenes carguen más rápido utilizando un servicio integrado de terceros llamado ShortPixel. Si quieres probar esto, ve a la sección Images.

Elige "Optimize Images"; las URLs en tu sitio se cambiarán para apuntar al CDN de ShortPixel.

Shortpixel reduce/adapta 100 imágenes al mes de forma gratuita, lo que podría ser suficiente si tienes un sitio pequeño o mediano.

Image Optimization Quality – Puedes encontrar el equilibrio adecuado entre compresión y calidad haciendo clic en "You can test compression levels here."

Serás dirigido a shortpixel.com, donde puedes ver visualmente las diferencias en cada nivel de compresión de ShortPixel subiendo una de tus imágenes.

¿Cuál es el mejor para ti?

• Lossy: la mayor compresión, la mayor pérdida de calidad.
• Glossy: compresión media, pérdida de calidad pequeña.
• Lossless: baja compresión, mínima pérdida de calidad.

¡Vuelve a Autoptimize e introduce tus ajustes!

• Load WebP or AVIF in supported browsers – activa esto para que Autoptimize sirva imágenes en formato WebP, lo que te permite comprimir imágenes aún más sin comprometer mucho la calidad.
• Lazy-Load images – debe activarse también, y resultará en menos solicitudes y es recomendado por Google para tiempos de carga más rápidos.

¿Qué pasa con Cloudflare?

Quizás te preguntes por qué no menciono un CDN o servicio DNS como Cloudflare, como recomiendan muchos otros tutoriales para una mayor optimización.

La respuesta sencilla es que cambiar el servicio DNS no es necesario para la mayoría de los sitios, ya que conlleva algunos inconvenientes potenciales.

Por ejemplo, cambiar a un servicio CDN basado en DNS como Cloudflare cede el control sobre tu sitio y su tráfico. A menudo me encuentro con sitios que se ejecutan bajo el servicio DNS de Cloudflare, donde se me pide que rellene un captcha antes de poder acceder al sitio. Tales captchas pueden llevar a una alta tasa de rebote del visitante y afectar negativamente los rankings de búsqueda. Un servicio DNS también podría redirigir parte de tu tráfico a otro lugar, y ni siquiera lo notarías de inmediato. Así que ten esto en mente cuando quieras dar a un servicio DNS de terceros el control sobre tu dominio.

Después de las optimizaciones que aplicamos, tu sitio ya es tan rápido que no limitará el ranking de Google, así que en este artículo no cubriremos el servicio Cloudflare.

Déjame saber si ves esto de manera diferente y tienes otra opinión sobre el uso de Cloudflare.

Artículos relacionados

• ¿Cómo optimizar la base de datos de WordPress para un rendimiento superior?
• Tutorial de phpMyAdmin para reparar y optimizar tablas de bases de datos
• Por qué WordPress es lento + cómo solucionarlo
• ¿Cómo borrar la caché y las cookies del navegador?