WPO para WordPress: Guía completa para mejorar la velocidad de carga

¿Necesitas mejorar el WPO de tu web pero no tienes ni idea? Perfecto, porque con esta guía vas a aprender a mejorar la velocidad de carga de tu WordPress, y si no tienes falsas creencias del pasado, mejor.

En este artículo vamos a aprender a optimizar los archivos JavaScript, CSS, caché y otros recursos críticos, como las imágenes y las propias fuentes.

Hoja de ruta para mejorar el rendimiento web

Esta guía es extensa porque viene a resumir todos los aspectos que yo analizo para medir y mejorar la velocidad de carga de mis webs. Por ello, y para hacerla lo mas digestible posible, quiero comentarte cómo la vamos a estructurar (así, si ya hay algo que conoces te lo puedes saltar).

1. Vamos a empezar comprendiendo el WPO y por qué debemos mejorarlo.
2. Vamos a ver también qué plugins usar para optimizar el rendimiento (gratis y de pago).
3. Después, analizaremos el sistema de caché.
4. Tras ello, vamos a analizar los archivos que dan vida a una web y su impacto en los tiempos de carga:
   • Archivos HTML.
   • Archivos CSS.
   • Archivos JavaScript.
   • Imágenes.
   • Fuentes.
5. También vamos a ver la importancia de tener un servidor rápido y cómo podemos implementar un CDN para reducir los tiempos de carga si nuestra web es visitada a nivel global.
6. Y finalmente, vamos a ver las herramientas para medir la velocidad web.

Aprovecho a comentarte que para cada mejora de WPO también tengo un artículo específico donde entro en mayor detalle y con capturas claras, para que puedas seguirlo sin conocimientos previos. Te lo comento porque en esta guía te doy las bases y los medios para optimizar tu web, pero si quieres profundizar en algún aspecto, te dejo el artículo correspondiente para que puedas seguirlo.

Qué es el WPO

El WPO (Web Performance Optimization) es el conjunto de técnicas y estrategias orientadas a mejorar el rendimiento de un sitio web, especialmente en términos de velocidad de carga y eficiencia de recursos.

Un buen WPO no solo hace que tu sitio cargue más rápido, sino que también ayuda a que tus usuarios tengan una mejor experiencia (el famoso UX). Eso se traduce en más visitas, más tiempo en tu sitio y, si tienes un e-commerce, más ventas.

De cara a esta optimización en la velocidad de carga, entran en juego varias técnicas como la optimización de imágenes, la minificación de archivos CSS y JavaScript, el uso de un CDN, y mucho más (lo cual vamos a aprender a implementar sin tocar una sola línea de código).

Por qué es tan importante el WPO

¿Que por qué es tan importante el WPO? Bueno, pues porque a nadie le gusta esperar, ni a ti ni a mi. Básicamente, los usuarios se frustran si tu página tarda más de 3 segundos en cargar y, no solo eso, pues Google penaliza a los sitios lentos. Así que, si no quieres perder visitas (y posiciones en Google), mejorar tu WPO es esencial.

No obstante, más allá de lo obvio, mejorar el WPO ofrece diversas ventajas, tanto en términos de rendimiento técnico como de experiencia del usuario y SEO:

Plugins de WPO

Podría darte un listado casi infinito de plugins para mejorar el WPO, como hace el bueno de Kinsta (ironia extrema aquí) pero casi que mejor te indico cuales son los que uso y por qué (si no lo comprendes, no te preocupes):

Importantísimo aclarar aquí que Perfmatters y WP Rocket son plugins diferentes y compatibles. Me explico, Perfmatters es un plugin de optimización web mientras que WP Rocket es un plugin de caché que incorpora acciones para optimizar la velocidad web.

Como podemos mejorar la velocidad web

Para empezar a optimizar el rendimiento web, antes tenemos que comprender los elementos que la componen, por lo que vamos a ver rápidamente los 3 aspectos clave que definen una web:

En honor a la verdad, también deberíamos hablar del lenguaje PHP (Hypertext Preprocessor), que se utiliza para generar contenido dinámico en páginas web (interactuando con bases de datos y sesiones). No obstante, este código no va ser optimizado por lo que lo dejamos de lado.

Así mismo, probablemente habrás oído hablar de una cosa abstracta llamada caché, el cual es un sistema de almacenamiento temporal que guarda datos o archivos para que puedan ser accesibles rápidamente sin tener que volver a cargarlos desde su origen.

Pues vistos por encima estos aspectos, vamos ya a profundizar en cada una de ellos.

Optimización de la Caché

La caché web es un mecanismo de almacenamiento temporal que guarda copias de archivos estático o datos web, como imágenes, HTML, JavaScript o CSS, para que los usuarios puedan acceder a ellos más rápidamente en visitas posteriores.

Me explico, la caché almacena copias de páginas web o datos generados dinámicamente en el servidor para que puedan ser servidos rápidamente en futuras solicitudes, sin necesidad de volver a procesarlos desde cero. De esta forma, la próxima vez que un usuario visite esa misma página, se entrega la copia en caché en lugar de regenerar todo el contenido.

Aunque de manera genérica hablemos de caché, realmente existen varios tipos de caché (caché del servidor, del navegador, de objetos, de usuarios, etc). No obstante, salvo que tengas un E-Commerce, no te aconsejo complicarte la vida en este aspecto y comprender solo la caché a nivel de servidor y del navegador:

Quizá creas que la caché es algo intangible y que está flotando en el aire pero realmente puedes localizarla con un FTP o el administrador de archivos accediendo a la ruta donde se guarda (por ejemplo, en public_html > tu_web > wp-content > cache > wp-rocket en el caso de WP Rocket):

De hecho, si borras la caché en WordPress y vas a esta carpeta, verás que aparece vacía.

Optimización de HTML

El HTML (HyperText Markup Language) es el lenguaje estándar utilizado para estructurar y organizar el contenido de una página web. Define la estructura de los elementos en la página mediante etiquetas, como títulos, párrafos, imágenes, enlaces y más.

La optimización del HTML es bastante sencilla y básicamente pasa por minificar el código, es decir, eliminar todos los espacios, saltos de línea, comentarios o caracteres innecesarios, con la idea de conseguir un archivo más compacto y que pese menos.

Esta acción la implementaban ciertos plugins pero actualmente no la ofrecen porque las propias plantillas de WordPress ya suelen entregar un HTML optimizado.

Un ejemplo de ello es el tema de ASAP, el cual te permite minificarlo a golpe de clic desde la sección de ASAP Theme > Opciones > Rendimiento > Optimizar HTML.

Si te fijas en la imagen de arriba, verás otra opción de configuración llamada "Remover enlaces RRSS feed". Esto lo que hace basicamente es eliminar automáticamente los enlaces del RSS feed de la web. De esta forma, reducimos el número de enlaces salientes, mejoramos el rendimiento, evitamos que el bot de Google pierda tiempo con ella y evitamos que competidores puedan espiar y/o hacer automatizaciones a partir de nuestro contenido.

Aunque esta opción la puedes implementar con ASAP, también lo puedes hacer con Yoast o Rankmath, del cual te dejo un tutorial muy interesante aquí.

Optimización de CSS

El CSS (Cascading Style Sheets) es un lenguaje utilizado para describir la presentación visual de una página web. Se encarga de definir cómo se ven los elementos HTML, es decir, los colores, fuentes, márgenes, alineaciones y otros aspectos visuales.

A su vez, podemos clasificar el CSS como crítico y no crítico. El primero es aquel que se carga en el above the Fold (parte superior de la web que vemos nada más cargar) y, por lo tanto, debemos asegurarnos de que se cargue lo más rápido posible (y correctamente, por supuesto).

Acciones para optimizar el CSS:

De las acciones comentadas, actualmente no te aconsejo combinar los archivos CSS ya que puedes crear un archivo demasiado grande y que, además, cargue código que no vayamos a usar. Esta técnica se aplicaba antes de que llegara la tecnología HTTP/2, para evitar hacer demasiadas peticiones pero ahora podemos descargar simultáneamente varios archivos con una única conexión.

Así mismo, y de cara a la minificación, te aconsejo revisar que tu tema o plugin no haya minificado ya este código. Para ello, puedes ir al inspeccionador de Chrome, acceder a la sección de Red o Network y comprobar si los archivos CSS tienen la extensión .min, en cuyo caso ya habrán sido optimizados.

Para implementar la optimización de CSS con Perfmatters debes ir a Assets > CSS y activar la opción de Remove Unused CSS. Además puedes, excluir diferentes clases e identificadores de fragmento para asegurarte de que el CSS crítico se carga correctamente.

Si en lugar de Perfmatters, usas WP Rocket, aquí te explico cómo optimizar el CSS con este plugin.

Optimización de JavaScript

JavaScript es un lenguaje de programación que permite agregar interactividad a las páginas web. El JS se encarga de las funciones dinámicas, como animaciones, validación de formularios, actualizaciones de contenido sin recargar la página y otras interacciones del usuario.

Las acciones que podemos implementar para optimizar el Java Script son las siguientes:

Aplicar un Delay a ciertos JavaScripts es una acción con grandes beneficios de cara a la optimización WPO. No obstante, debemos configurarlo bien ya que de lo contrario, no se cargarán los archivos y la web no funcionará correctamente. Por ello, yo solo lo aplico en ciertos JS (como el de GA4, GTM, Google Maps o el script de AdSense para WordPress) que no son críticos y, por supuesto, no están en el above the fold.

En este punto me gustaría recordarte que si tienes webs dentro de la Unión Europea, ya deberías no ejecutar estos scripts hasta que el usuario acepte las cookies por lo que ya no es necesario implementarlo de nuevo.

Al igual que con el CSS, tampoco te aconsejo combinar el JavaScript en un único archivo ya que actualmente no es necesario y por otro lado, puedes generar un archivo demasiado grande.

Para implementar la optimización de JS con Perfmatters debes ir a Assets > JavaScript y seleccionar la opción de Defer JavaScript. Además, justo debajo tienes otra opción para que puedas excluir ciertos archivos JS que sean críticos o se carguen en el above the fold.

Para activar el Delay debes ir a Delay JavaScript, seleccionado la opción Only Delay Specified Scripts y tras ello, incluyendo los scripts a retrasar.

Si en lugar de Perfmatters, usas WP Rocket, aquí te explico cómo optimizar el JS con este plugin.

Optimización de imágenes

La optimización de las imágenes es clave ya que estos recursos web suelen ocupar bastante espacio (más aún que el propio JS).

De cara a la optimización de imágenes en WordPress, debemos implementar las siguientes acciones:

Ahora, ¿Cómo podemos encontrar las imágenes más grandes de nuestra web? Muy fácil ya que para detectar las imágenes pesadas, podemos hacer una auditoría con Screaming Frog y visualizarlas en Imágenes. Tras ello, solo tenemos que aplicar el filtro de Más de 100 KB y ahí las encontraremos.

Optimización de las fuentes

Otro recurso a mejorar y que muchas veces pasamos por alto son las fuentes. De hecho, si analizas mi web vas a ver que dichas fuentes son lo más pesado, por encima incluso que las imágenes y eso que son cargadas desde mi propio servidor (Self-hosted).

Para optimizar nuestras fuentes, lo cierto es que podemos implementar varias acciones, como las que te explico a continuación:

La importancia del servidor

Tan importante son los archivos que componen nuestra web como el servidor en el que se alojan. Y lo cierto es que no descubro nada nuevo si te digo que un servidor rápido es fundamental para asegurar que una web cargue de manera eficiente y sin demoras.

Si estas empezando en este mundillo, lo más probable es que tengas un servidor compartido, es decir, un servidor en el cual tu web se aloja y comparte recursos con otras webs. Esto puede estar bien si tu web es pequeña y buscas una opción económica, no obstante no es lo ideal desde el punto de vista de la optimización.

No obstante, aquí te digo que esta es una de varias opciones posibles:

Yo actualmente uso varios servidores virtuales privados (VPS), es decir, servidores que no llegan a ser dedicados enteros para mi, pero si consigo maquinas virtuales propias donde no comparto nada con nadie. Los cuales, por cierto son más potentes (y seguros).

Además, no es que sea especialmente caro, ya que pago menos de 16€ al mes

También tengo un plan de hosting con WebEmpresa, que junto con Raiola, me parecen las mejores opciones para alojar una web si estás empezando de cero y no te quieres complicar la vida.

Así mismo, de cara al WPO, te recomiendo analizar los siguientes puntos para optimizar tu servidor al máximo:

• Localiza tu hosting: usa herramientas como check-host.net/ip-info para saber donde se encuentra físicamente tu hosting (introduciendo la IP) e intenta que esté lo más cercano de los usuarios que visitan tu web.
• Revisa el espacio en disco: asegúrate de tener al menos un 25% de espacio libre para mantener un rendimiento óptimo.
  
• Optimiza el DNS: cuanto más rápido sea el servidor DNS, menos tiempo tardará en resolver la IP, lo que acelera la carga de la web. Los DNS de Cloudflare son una excelente opción ya que son Anycast, que reducen bastante la reducir la latencia. Además, el cambio de DNS es casi instantáneo.
• Habilita la compresión de texto: la compresión puede reducir el tamaño de los archivos hasta en un 80%. Actívala desde el CPanel usando GZIP o Brotli (Brotli es un 30% más eficiente que GZIP). Si usas WebEmpresa ya la activan por defecto.
• Implementa HTTP/2: este protocolo permite que las peticiones de la web se carguen en paralelo, mejorando la velocidad de carga. Gracias a esta tecnología te evitas compactar tanto el CSS como el JavaScript en un único archivo (y los problemas que esto nos trae).
• Activa la caché del servidor: esto ayuda a mejorar la velocidad de la web, almacenando datos y archivos estáticos temporalmente para acceder rápidamente a ellos.
  
• Usa la última versión de PHP: asegúrate de utilizar la versión más reciente compatible con WordPress y tus plugins, lo cual puedes verificar desde el panel de tu hosting.
  
• Actualiza MySQL: utiliza la última versión de MySQL compatible con WordPress para mejorar la rapidez de las consultas. La versión más reciente de MySQL es 5.6, y en MariaDB es 10.1.
• Configura el límite de memoria PHP: establece un mínimo de 256 MB, aunque puedes aumentarlo si tu web lo necesita.
• Ajusta el tiempo de ejecución: el tiempo de ejecución (max_execution_time) mínimo recomendado es de 300 segundos para que WordPress pueda ejecutar scripts sin problemas.
• Revisa el tamaño máximo de archivos subidos: la configuración de max_upload_size debe ser de al menos 64 MB para permitir la carga de archivos grandes. Aunque quizá la tengas que aumentar para poder cargar archivos grandes, como una copia de seguridad.
• Configura el tamaño de las peticiones POST: la variable max_post_size debe ser de al menos 64 MB para asegurar que las peticiones POST funcionen correctamente.
• Actualiza la librería cURL: esta librería permite conectar WordPress con servicios externos. La versión mínima recomendada es la 7.34. Si es muy antigua, pide a tu proveedor de hosting que la actualice.

Todas estas variables podemos cambiarlas desde los parámetros de configuración de PHP que encontramos en nuestro WePanel (o CPanel):

CDN (Content Delivery Network)

De cara al web performance optimization, también podemos implementar un CDN (Content Delivery Network), que es una red de servidores repartidos por todo el mundo que se encargan de entregar el contenido de tu sitio web de forma rápida, sin importar desde dónde accedan tus usuarios.

Te explico, imagina que tienes una página web alojada en un servidor en España, pero recibes tráfico desde México o Japón. Si usas un CDN, éste entregará los archivos estáticos de tu web desde el servidor más cercano (uno en México o Japón) a esa persona, lo que acelera el tiempo de carga y mejora la experiencia del usuario.

Actualmente, existen varios CDNs que podemos usar pero yo uso Cloudflare ya que además de ser gratuito, ofrece protección contra ataques DDoS y otras amenazas. Además nos permite implementar reglas para filtrar y excluir cierto tráfico, como el de los bots cansinos que nos dejan miles de comentarios SPAM.

La configuración de Cloudflare es realmente sencilla, ya que solo tenemos que crear los DNS para que apunten al servidor en el cual tenemos la web. Y tras ello, debemos apuntar a nuestro registrador de dominios hacia la cuenta que hayamos creado con Cloudflare.

¿Te ha sonado a chino? no te preocupes porque ya en su momento escribí este tutorial donde te cuento como instalar Cloudflare, paso a paso.

Herramientas para medir la velocidad web

Perfecto, pues llegados a este punto ya hemos implementado varias técnicas de optimización WPO en nuestra web. Ahora toca medir si efectivamente hemos logrado una carga rápida y eficiente, asegurándonos de que no queden elementos pesados que ralenticen los tiempos.

Para este análisis, existen varias herramientas que nos ayudan a identificar los factores que están afectando el rendimiento. Entre las más útiles y accesibles se encuentran GTmetrix, WebPageTest y, por supuesto, Google PageSpeed Insights, que además nos da una evaluación directa desde el propio Google sobre qué podemos mejorar en nuestra web.

Veamos brevemente cómo cada una de estas herramientas puede ayudarnos y cuáles son sus ventajas principales para el WPO.

PageSpeed

PageSpeed Insights es una herramienta gratuita desarrollada por Google que analiza el rendimiento de nuestros sitios web y ofrece recomendaciones para mejorar su velocidad y optimización tanto en dispositivos móviles como en ordenadores.

Core Web Vitals

Al ingresar una URL, PageSpeed evalúa diversos aspectos como el tiempo de carga, el tamaño de los recursos, y el uso de tecnologías modernas (como compresión de archivos o optimización de imágenes). También proporciona dos puntajes: uno para el rendimiento móvil y otro para el escritorio, basándose en 5 métricas.

Las 5 métricas que indican lo rápida o lenta que es nuestra web son:

Importante comentar aquí, que las métricas que mide Google PageSpeed (llamadas Core Web Vitals o CWV) se toman en base a las mediciones realizadas por los dispositivos móviles de los usuarios que visitan la web.

Por ello, aunque puedas ver en esta herramienta el resultado de una URL, te aconsejo revisarlas directamente en Google Search Console, dentro de la sección Experiencia de la página.

Errores clásicos de PageSpeed

Algunos de los errores más comunes que suelen aparecer en Google PageSpeed Insights son:

GTMetrix

GTmetrix es una herramienta de análisis del rendimiento web que nos permite medir y optimizar la velocidad de carga de una página. Proporciona un informe detallado sobre los factores que influyen en el tiempo de carga, basándose en dos motores de análisis: Google Lighthouse y Web Vitals.

Entre los principales indicadores que mide, como ves arriba, están el Largest Contentful Paint (LCP), Total Blocking Time (TBT), y Cumulative Layout Shift (CLS).

Lo que más me gusta de esta herramienta es la distribución que nos muestra en peso y peticiones de los recursos que componen nuestra web.

Así mismo, veo muy práctica la cascada que nos dibuja según se van realizando las peticiones del navegador, junto con su tiempo y peso.

Por contra, es una pena que evalúe el rendimiento web en base a la carga en desktop en lugar de móvil, cuando hace ya bastante tiempo (en octubre del 2023) Google anunció que definitivamente priorizaba la versión móvil (Mobile-first indexing).

WebPageTest

WebPageTest es una herramienta de análisis del rendimiento web que descubrí con el libre de SEO Avanzado de Fernando Maciá y que permite realizar pruebas detalladas de la velocidad y el comportamiento de carga de un sitio web.

Lo bueno que tiene WebPageTest es que realiza una batería de pruebas y nos ofrece un alto nivel de personalización, permitiendo elegir desde qué ubicación geográfica y dispositivo realizar las pruebas, así como el tipo de conexión de red (3G, 4G, cable, etc.).

Como punto positivo frente a GTMetrix, ésta herramienta si realiza las pruebas en base a un smartphone y nos ofrece una cascada similar para analizar la petición de recursos.

Inspeccionador del navegador

Una gran olvidada herramienta de web performance pero muy potente es el propio inspeccionador de Chrome, Firefox o del browser que uses. Para acceder a él, básicamente tienes que cargar la web y con el botón secundario habilitar la opción de inspeccionar.

Tras ello, haz clic en Network y pasaras a una pantalla con varias pestañas donde puedes ver cómo se van cargando cada uno de los recursos que componen tu web.

De hecho, en la nueva actualización de Chrome, podemos ver también el resultado de las Core Web Vital en vivo y en directo:

Web optimizada

¡Enhorabuena! si has llegado hasta aquí no me queda más que felicitarte porque, por mucho cariño que le haya puesto al artículo, ha sido una buena chapa la que te he pegado.

Por hacer un resumen de todo lo visto, vamos repasar todas las implementaciones que hemos visto para mejorar el WPO de una web:

Ahora ya sí que sí me despido, no sin dejarte antes con un par de artículos relacionados con la temática por si se te ha despertado la curiosidad sobre este apasionante mundo XD.