¿Tu WordPress va lento? Entonces estás desperdiciando mucho potencial. No solo tus visitantes se sentirán molestos/as por la lentitud de la carga, sino que también perderás visibilidad en Google. Te mostraré paso a paso cómo puedes hacer que WordPress sea más rápido.

Si vendes algo a través de WordPress, por ejemplo con WooCommerce, entonces hay suficientes estudios que confirman que los sitios web lentos hacen menos ventas en general. Los/as usuarios/as de móviles, en particular, abandonarán un sitio web si tarda más de tres segundos en cargarse. Los sitios web más rápidos son vitales para tu negocio.

Medir la velocidad

Si quieres hacer que un sitio web sea más rápido, primero tienes que medir lo rápido/lento que es antes de la optimización. El tiempo de carga puro es importante, pero no necesariamente decisivo. Algunos sitios web simplemente tienen grandes "activos" (por ejemplo, imágenes y vídeos) que los/as visitantes quieren ver o descargar. Más rápido siempre es mejor, pero también depende de las expectativas de estos/as. Por ejemplo, apple.com tiene un rendimiento notoriamente pobre:

Eso no es precisamente lo ideal. Sin embargo, esta circunstancia está bien fundamentada. Apple valora mucho mostrar sus propios productos con la máxima calidad posible y, por ello, utiliza imágenes enormemente grandes sin optimizarlas, como muestra este tutorial para WordPress. Los/as visitantes de Apple lo soportan y se conforman con esperar un poco más a que se cargue el sitio.

En general, el rendimiento de las páginas de Apple parece bastante rápido. Especialmente la visualización de los primeros elementos suele veloz como un rayo. Estos se miden bajo el factor "First Contentful Paint" (FCP). El FCP determina en la percepción lo rápido que se "siente" la carga de un sitio. Por lo tanto, desempeña un papel especialmente importante en la optimización. No deben superarse los valores de 2 a 3 segundos. Menos de 2 segundos o más rápido es mejor.

La "Pintura de mayor contenido " (LCP) refleja el tiempo de carga de los elementos restantes del contenido principal. Si puedes mantenerte por debajo de los 3 segundos aquí, ya eres bastante bueno. Sin embargo, las imágenes de productos de gran tamaño y otros activos similares también pueden elevar este valor de forma significativa, lo que está perfectamente bien en función del objetivo.

El "First Input Delay" (FID) mide el tiempo que pasa hasta que tus visitantes pueden realmente interactuar con la página. Por ejemplo, marcar un pasaje de texto, hacer clic en un enlace o botón, etc. Puede ser, por ejemplo, que un sitio tenga una casilla de búsqueda. Quizá este sitio tarde un total de 10 segundos en cargarse por completo. ¿Con qué rapidez puede alguien hacer clic en un cuadro de búsqueda y escribir en el campo? Hay que tener en cuenta que el/la "usuario/a" no siempre es un ser humano. A menudo son los bots los que interactúan con las páginas. Por ejemplo, el bot de Google que mide el rendimiento del sitio incluye estos valores en el cálculo de las clasificaciones.

Hay que evitar el "Cumulative Layout Shift" (CLS) en todo momento. Si un diseño se "desplaza" durante la carga, esto puede ser enormemente irritante para tus visitantes. El resultado puede ser pulsar el botón equivocado. En la mayoría de los casos, estos desplazamientos están causados por la falta de especificaciones de anchura y longitud (anchura/altura) de las imágenes. El CLS debería ser siempre 0.

Por lo tanto, estos cuatro valores son decisivos a la hora de evaluar la velocidad de un sitio WordPress. Están centrados en el/la usuario/a, es decir, no son valores de rendimiento en bruto, como el tiempo hasta el primer byte, que desempeña un papel importante en la evaluación del rendimiento del servidor o de la conexión al servidor. Esto quiere decir también que estos valores están menos determinados por el almacenamiento en caché y la selección para el alojamiento de WordPress, incluso si esto, por supuesto, también juega un papel importante en el rendimiento WordPress. Más bien, están determinados por la hábil estructura del sitio y el uso correcto de HTML, CSS y JavaScript.

La optimización del rendimiento se ha complicado bastante en los últimos años. Especialmente desde que Google anunció que estos criterios de rendimiento centrados en el/la usuario/a se incluirán en el cálculo de la clasificación. Las mejores herramientas para medir tu rendimiento WordPress:

• PageSpeed Insights de Google
• GTmetrix
• Lighthouse está integrado directamente en las herramientas para desarrolladores de Google Chrome.
• TREO Site Speed

Personalmente me gusta TREO porque es rápido y claro. PageSpeed Insights y GTmetrix son extremadamente detallados.

Con este conocimiento previo y las herramientas, estarás bien equipado/a para medir tu propio rendimiento. Si lo haces tú mismo/a, te sugiero el siguiente enfoque:

• Primero mide el estado inicial. ¿Qué velocidad tiene tu web antes de la optimización?
• Activa o aplica una optimización.
• Entonces podrás volver a medir el rendimiento. ¿Se ha demostrado que ha marcado la diferencia? Si no es así, elimina la optimización y prueba otra cosa. Si la respuesta es afirmativa, mantén la optimización. Prueba si todo sigue funcionando como antes y añade otra optimización.

Muchos/as intentan alcanzar una puntuación de 100 en PageSpeed Insights. No hay nada malo en ello por ahora, excepto que no es necesario para obtener la puntuación completa. Otras herramientas miden de forma diferente y lo que es un 100 en PageSpeed Insights puede no ser tan bueno en GTmetrix. Además, pasar de un 30 a un 90 es claramente más importante que pasar de un 90 a un 100.

Mejorar el rendimiento WordPress

Hosting WordPress más rápido

El proveedor de hosting más rápido en cada situación y en todo momento no existe. Hay demasiados factores que afectan al plazo de entrega y a la tramitación de las solicitudes. Los siguientes factores no facilitan esta evaluación:

• hora del día
• utilización de servidores
• geolocalización
• velocidad de la conexión de usuario

Sin embargo, cada proveedor de hosting ofrece diferentes paquetes que pueden tener un impacto significativo en el rendimiento de un sitio web WordPress. Los paquetes básicos suelen ser más baratos y, naturalmente, no son tan rápidos. Por lo tanto, una de las primeras optimizaciones sensatas es actualizar el paquete.

En Raidboxes, por ejemplo, hay ofertas de inicio "Starter" en el hosting WordPress gestionado que se encargan del trabajo administrativo con WordPress y ya incluyen optimizaciones como el almacenamiento en caché del lado del servidor. Pero también hay paquetes de alto rendimiento en el hosting de alto tráfico, por ejemplo para proyectos con un número de accesos muy elevado. También hay tarifas especiales para WooCommerce que aloja tus tiendas online. Ni que decir tiene que los paquetes más grandes proporcionan un impulso adicional al rendimiento.

Una cosa está clara: si pagas más, sueles obtener más rendimiento. Por supuesto, esto se aplica a todos los proveedores de hosting. Casi todos los ajustes de rendimiento se incrementan con las actualizaciones de tarifas. Pero, ¿qué se puede conseguir sin pasar directamente a una tarifa más alta?

Utilizar el caché WordPress

Aparte de los blogs más sencillos, casi todos los sitios WordPress utilizan una variedad de plugins adicionales. Por regla general, los plugins retrasan el tiempo de carga en una fracción de segundo cada vez que se accede a una página. Especialmente si el plugin inserta elementos en el código HTML, que luego tienen que ser cargados adicionalmente o bien realizar más consultas a la base de datos.

¿Y si WordPress solo tuviera que realizar estas "tareas" adicionales una vez por sitio y simplemente recuperara el resultado de estas operaciones "adicionales" de la caché en el siguiente acceso? Esto aceleraría significativamente el siguiente proceso de carga, porque el servidor solo tendría que entregar un archivo terminado. En el mejor de los casos, no se realizan más cálculos, lo que acorta drásticamente el tiempo de carga. Por ejemplo, un sitio, que tiene un tiempo de carga sin caché de 5 segundos, puede cargarse en milisegundos. Las mejoras en la velocidad entre 20 y 100 veces más rápidas no son inusuales cuando se activa el almacenamiento en caché.

Las soluciones de caché son esenciales para acelerar sitios web WordPress. Lo ideal sería una solución basada en un servidor, de la que hablaremos más adelante. De lo contrario, utiliza uno de los plugins de caché, muy populares en la comunidad:

• WP Fastest Cache (gratuito + de pago)
• LiteSpeed Cache (gratuito, pero solo funciona con el servidor web LiteSpeed)
• WP-Optimize (gratuito + de pago)
• WP Super Cache (gratuito, del fabricante de WordPress)
• Colibrí (gratuito + de pago)
• WP Rocket (de pago, aquí mi tutorial en YouTube)
• Habilitador de caché (gratuito)
• Caché de Borlabs (de pago)
• Hyper Cache (gratuito)
• Comet Cache (gratuito + de pago)

Los plugins de pago suelen tener más funciones. Sin embargo, los plugins gratuitos ayudan, en la mayoría de los casos, a sacar el 90% de todas las ganancias de tiempo posibles.

No obstante, los plugins de caché son como una venda. Ocultan problemas que sería mejor solucionar desde el principio. No eliminan necesariamente el HTML superfluo, no comprimen los archivos de imagen que son demasiado grandes, no cambian necesariamente el orden de inclusión de los archivos JS y CSS, etc. Por lo tanto, incluso las páginas con caché pueden seguir siendo lentas.

Si trabajas "limpiamente" desde el principio, no necesitas realmente un plugin de caché. Al menos en teoría, porque el almacenamiento en caché, en general, alivia naturalmente al servidor y, por lo tanto, es siempre recomendable. Me preocupa más el argumento de una buena planificación y un código limpio y bien pensado.

Además, Raidboxes se basa en un almacenamiento en caché del lado del servidor de muy alto rendimiento, es decir, no se requiere un plugin adicional o una solución de pago.

Flex container en lugar de columnas y filas en el page builder

Los constructores de páginas o page builder se han vuelto indispensables para muchas agencias y entre los/as desarrolladores/as, ya que facilitan en gran medida el diseño de páginas y artículos.

Desde hace más de 10 años, el procedimiento estándar en todos los constructores de páginas populares es crear el diseño con columnas y filas. Esto suele dar lugar a una ensalada DIV anidada:

Esto suele ocurrir en cada sitio, lo que suele inflar el código innecesariamente y también puede tener efectos negativos en el FCP. Por lo general, esto puede evitarse mediante una planificación inteligente a la hora de crear el diseño. Los fabricantes de page builder tienen ahora en cuenta los estándares CSS Flexbox y Grid a la hora de crear diseños. Esto es una buena noticia, porque reduce la cantidad de código.

En la versión actual del page builder Elementor, por ejemplo, se puede activar Flexbox Container en los ajustes. Esto no solo le da más flexibilidad en el diseño, sino que también reduce el código HTML y hace que los tiempos de carga sean más rápidos.

Un clic en Direction -> Row alinea los contenedores en una fila. Una simple estructura de tres contenedores no mejorará inmediatamente el rendimiento de forma espectacular, pero si todas las secciones, filas y columnas se implementan con esta nueva técnica, la ganancia puede ser significativa. Especialmente en muchas páginas y también al optimizar FCP y LCP.

La función está todavía en fase alfa en Elementor. Otros constructores llevan tiempo utilizando este nuevo enfoque y todos estos page builder lo ofrecerán en el futuro. Por lo tanto, merece la pena adoptar la nueva forma de trabajar en el flujo de trabajo lo antes posible.

Es menos importante utilizar CSS-Flexbox y/o CSS-Grid, sino más bien evitar el anidamiento. En teoría, incluso un diseño basado en tablas de los años 2000 puede optimizarse mediante la "desanidación".

El theme WordPress adecuado

Hay miles de themes WordPress. Estoy seguro de que todos ellos ya están óptimamente recortados para el rendimiento, ¿verdad? No es así. La mayoría de los themes se concentran en ser bonitos. Esto tiene sentido desde el punto de vista de las ventas. Los themes se eligen principalmente por su atractivo. Muy pocos themes WordPress se preocupan realmente por hacer del código ligero una prioridad, o en lo que respecta a los page builder: crear código ligero.

Estos themes y builder son actualmente recomendables desde mi punto de vista:

• Astra
• GeneratePress
• Blocksy
• Kadence

Se trata de verdaderos meta themes, por lo que permiten casi todas las opciones de diseño imaginables, tienen una enorme selección de diseños de fantasía y están optimizados para el rendimiento desde el principio. La mayoría de estos themes WordPress se pueden combinar con otros page builder como Elementor. Algunos tienen su propio page builder.

Optimizar las imágenes y otros elementos

La gran mayoría de los sitios web utilizan imágenes. Las imágenes más grandes suelen tener mejor aspecto, pero también aumentan el tiempo de carga. Más pequeño es mejor, pero a pesar de ello, hay muchos consejos a tener en cuenta:

• Se recomiendan dimensiones máximas inferiores a dos mil píxeles. Las imágenes más grandes se abren mejor en una nueva ventana.
• El formato adecuado es crucial. JPEG para imágenes fotográficas con muchos colores y matices, PNG y GIF pueden ser mucho más pequeños para imágenes con menos colores. Lo mejor es probarlo.
• Los gráficos vectoriales, como los logotipos y las ilustraciones, quedan muy bien como SVG, son infinitamente escalables y también pequeños. Los SVG también son archivos de texto puro con instrucciones a partir de las cuales se crea un gráfico. Como archivos de texto, se benefician de la compresión GZIP, de la que hablaremos más adelante.
• El formato WebP de Google puede reducir los archivos JPG entre un 25 y un 34 por ciento más.
• El WebP existe desde 2010, pero el nuevo formato AVIF reduce el WebP en otro 30% y a menudo logra un 50% de ahorro en comparación con el JPEG. AVIF todavía no es totalmente compatible con todos los navegadores, pero esto va creciendo de mes a mes.

Hay plugins que convierten las imágenes a todos los formatos ya al subir y luego simplemente incrustan el archivo más pequeño. Aquí están los plugins WordPress más populares:

• Smush
• Optimus
• EWWW Image Optimizer
• ShortPixel Image Optimizer
• TinyPNG
• Imsanity
• Imagify
• reSmush.it
• Kraken.io Image Optimizer
• WP Compress
• Autoptimizar
• WP Offload Media
• Optimole
• Hammy
• Robin image optimizer
• WP Compress
• Imsanity

WP Compress tiene una interfaz muy clara y realiza las tareas de compresión en segundo plano. La extensión no es precisamente barata, pero es muy conveniente. Si prefieres empezar con un plugin gratuito, deberías echar un vistazo a Imsanity.

La mayoría de los optimizadores tienen un modelo premium que limita por el tamaño de la imagen o el número de imágenes. La excepción es Robin. ¿Deberías pagar por un plugin de este tipo? Depende del control que necesites. También es posible optimizar las imágenes tú mismo/a con herramientas de escritorio, o en la línea de comandos (optimizt, compress-images) o en línea antes de subirlas (TinyPNG, Shortpixel).

La mayoría de los plugins también crean imágenes en diferentes tamaños más pequeños. Dependiendo de la resolución del navegador del o de la usuario/a, se integra directamente un archivo significativamente más pequeño, lo que de nuevo conlleva una importante ganancia de rendimiento.

La carga lenta significa que una imagen solo se carga cuando tus visitantes se desplazan hasta el punto en que aparece en el sitio. La mayoría de los optimizadores de imágenes lo admiten. También hay plugins gratuitos para esto, por ejemplo Lazy Load de WP Rocket y Lazy Loader. Los vídeos también pueden o deben cargarse solo cuando son "alcanzados", véase Lazy Load for Videos.

Fuentes en caché

Además de las imágenes, cualquier otro activo puede ser almacenado en caché localmente (en el servidor). Esto no solo mejora el cumplimiento de las leyes internacionales de protección de datos, sino que también suele mejorar el rendimiento. Especialmente si las fuentes están en la caché. Entonces, el navegador los descarga una vez y los muestra directamente la próxima vez sin tener que cargarlos primero. Esto funciona bien con el plugin WordPress OMGF Host Google Fonts Locally, por ejemplo.

Carga selectiva de assets por sitio

Un método particularmente eficaz para ganar más velocidad es cargar selectivamente los archivos CSS y JS según el sitio o la publicación. Hay varias posibilidades que conducen esta meta.

Un ejemplo: el sitio WordPress utiliza un gestor de formularios como WPForms. Este plugin carga sus funciones de formulario inmediatamente en cada sitio. Sin embargo, esta funcionalidad solo es necesaria en la página de contacto. Freesoul Deactivate Plugins es un plugin que soporta esto:

Permite activar o desactivar todos los plugins por sitio mediante una matriz. También es posible utilizar plugins de rendimiento como perfmatters para este fin, que también evita la entrega de archivos CSS y JS. Sin embargo, Freesoul suprime la carga de todo el plugin, con lo que también se reduce el trabajo que hay que hacer en segundo plano en el servidor.

Ajustes con perfmatters

¿Merece la pena comprar un plugin como perfmatters? Por otra parte, todas las optimizaciones pueden realizarse manualmente o con otros plugins. Sin embargo, eso supondría una cantidad de trabajo increíblemente alta, especialmente si hay que hacerlo para varios sitios web WordPress.

Solo en las opciones normales, un plugin como perfmatters tiene más de dos docenas de optimizaciones. ¿Son todos útiles? Eso depende de lo familiarizados que estén los/as usuarios/as WordPress con las funciones. Por ejemplo, se puede desactivar el canal RSS, lo que ahorra algunos bytes, pero también significa que los/as visitantes del sitio web ya no pueden simplemente suscribirse a los artículos a través del canal RSS. Por lo tanto, debes pensar cuidadosamente en esto.

Es sorprendente la cantidad de juegos que WordPress tiene activados por defecto (emojis, dashicons, etc.); se pueden desactivar con seguridad por el momento. Debes tener más cuidado con los ajustes relacionados con la base de datos. En teoría, desactivar las revisiones podría hacer perder mucho tiempo de trabajo. Si se utiliza una caché de todos modos, las optimizaciones de la base de datos no suelen ser muy importantes.

Por el contrario, utilizar Google Maps en un sitio suele ser un desastre para el rendimiento. En realidad, estos mapas solo deberían cargarse si son urgentemente necesarios. Muchos temas incluyen un mapa en la página de inicio, por ejemplo, pero no es absolutamente necesario. En las tiendas online WooCommerce , el acceso a wc-ajax=get_refreshed_fragments puede provocar graves retrasos. Se pueden desactivar con la función "disable card fragments".

En cualquier caso, vale la pena echar un vistazo a la documentación de perfmatters y WP Rocket. Si realmente quieres sumergirte, encontrarás muchos puntos de partida allí. Por supuesto, también puedes comprar uno de estos plugins y ahorrarte mucho tiempo. Sin embargo, tendrás menos idea acerca de lo que ocurre en el fondo.

Minificación

La minificación elimina los caracteres innecesarios, especialmente los espacios y los tabuladores de los archivos HTML, CSS y JS. Se trata más de una buena práctica que de un gran aumento del rendimiento. Con Autoptimize, la minificación se puede activar o desactivar muy fácilmente.

Compresión Gzip y Brotli

En comparación con la minificación, la compresión suele reducir más del 50% del tamaño de los archivos de texto. Definitivamente vale la pena activar esto, por ejemplo el algoritmo de compresión Brotli. En la mayoría de los casos, esta compresión ya está activada por el proveedor de hosting web. Si no, existen herramientas adicionales que almacenan los archivos comprimidos en el sistema de archivos. Sobre todo, porque la compresión de archivos de texto suele ser mucho más eficaz.

Brotli es un formato de compresión desarrollado por Google que es aún más eficiente que Gzip. Por supuesto, Brotli también cuenta con el apoyo de Raidboxes.

Optimizaciones significativas para JavaScript y CSS

Especialmente cuando se trata de optimizar para FCP y LCP, hoy en día hay maneras de lograr ganancias drásticas de rendimiento a través de varios plugins e incluso directamente en los themes. En mis pruebas, estas suelen ser las mejores técnicas para llevar el sitio al rango de 90-100. Se trata del retraso en la recarga de los archivos CSS y JS.

En el plugin gratuito Autoptimize hay un ajuste "Agregar archivos JS". Está activado por defecto. Para disfrutar de una aceleración real, son necesarios los siguientes ajustes:

La "defer-option" garantiza que el JavaScript solo se cargue más tarde en el proceso de renderización. El HTML y los activos se cargan primero, luego el JS. En la práctica, esto significa que los elementos interactivos en particular no están disponibles inmediatamente en los primeros segundos, pero el propio sitio se muestra tan rápido como un rayo.

Dado que JavaScript puede recargar programáticamente casi todo lo que quiera, esta técnica debe ser tratada con precaución. Aquí pueden fallar muchas cosas. Esta es también la razón por la que la opción no está activada por defecto. La ganancia de rendimiento puede ser gigantesca, pero después de activarla, hay que comprobar cada sitio para ver si sigue funcionando correctamente.

Lo mismo se aplica después de cada actualización y cuando se utilizan nuevos plugins que pueden aportar sus propios archivos JavaScript. Por lo tanto, la activación de esta opción solo es aconsejable si se puede invertir algo de tiempo después y con regularidad para comprobarlo.

La situación es similar para los archivos CSS. Aquí debe activarse "eliminate render-blocking CSS". Con las instrucciones CSS, existe el problema adicional de que ciertas páginas o incluso áreas del sitio web puedan adquirir un aspecto ligeramente diferente. Una parte del sitio parece igual (colores, fuentes, posición del encabezado), pero otra parte parece diferente (imagen en el encabezado, información adicional en el pie de página, etc.).

Autoptimize se refiere aquí a un servicio externo y de pago que intenta resolver este problema. "Critical CSS" es el CSS que debe cargarse al principio. El resto se puede cargar más tarde.

Plugins como WP Rocket y perfmatters también tienen esta función. Su funcionamiento depende de los plugins que desees utilizar en tu propio sitio web WordPress. Así que solo funciona con una prueba, pero si funciona, el impulso es realmente grande.

Conseguir esta función de forma gratuita es actualmente casi imposible, porque es un problema difícil, ya que cada sitio web es diferente. Incluso cada subpágina de un sitio web es diferente y cambia constantemente mediante actualizaciones. La única manera de obtener un rendimiento del 100% es desarrollar un profundo conocimiento de lo que realmente ocurre cuando se carga cada sitio. Solo si estás dispuesto/a a tomar este camino que requiere mucho tiempo, podrás conseguir realmente un 100 para cada sitio.

Conclusión: Hacer que WordPress sea más rápido

Hay muchas palancas para optimizar el rendimiento WordPress. Un hosting WordPress rápido es importante y la base de todo, pero un hosting rápido no garantiza la máxima velocidad. Para ello, es necesario:

• Hacer que los assets del sitio web sean lo más pequeños posible, es decir, comprímelos.
• Seleccionar el formato adecuado (como WebP o SVG). Carga solo las imágenes que sean tan grandes como sea necesario para el propósito respectivo (ordenador de sobremesa vs. tableta vs. móvil).
• Activar el almacenamiento en caché o utilizar el almacenamiento en caché basado en el servidor: una vez que un recurso está "montado", puede cargarse desde las cachés hasta que algo cambie. Los recursos externos, como Google Fonts, también deben cargarse desde el propio servidor.
• Optimiza la secuencia de carga. Diferir el CSS y el JS mediante un plugin o servicio, o cargar primero lo realmente necesario y luego el resto (palabra clave: CSS crítico).
• Deshacerse de los lastres innecesarios: ¿realmente necesitamos emojis para cada proceso de carga?

El consejo más importante que puedo darte por experiencia práctica: el almacenamiento en caché y el aplazamiento suelen proporcionar el 90% del rendimiento. Aquí es donde deberías centrar los esfuerzos de optimización. Te deseo mucho éxito y alta velocidad para tus proyectos con WordPress y WooCommerce.