Cómo mejorar el WPO (rendimiento web) con Wasabi

En este artículo vamos a explicar cuáles son los factores que mayor impacto tienen en la velocidad de carga de un sitio web con WordPress y cómo se pueden ajustar. El tema da para mucho, por lo que intentaremos usar un lenguaje sencillo y directo, así como separar entre teoría y práctica por si quieres ir al grano.

Para optimizar la velocidad de carga de un sitio, se deben considerar tanto aspectos el backend (el código que se ejecuta en el servidor) como del frontend (el que se ejecuta en el navegador). Ambos componentes deben estar optimizados. Por hacer una analogía con el mundo del motor: por mucho que el chasis sea aerodinámico, necesitarás un motor con potencia mínima para ser competitivo.

Backend

Teoría

En este punto lo que intentaremos será optimizar el TTFB (Tiempo hasta el primer byte). Resumiendo, este es el tiempo que tarda el servidor a responder la petición HTTP del navegador. Incluye:

  • Resolución DNS.
  • Procesamiento del servidor.
  • Velocidad de red del servidor y del cliente.

La latencia por resolución DNS no suele ser el factor agravante, así que nos centraremos en el procesamiento del servidor.

El procesamiento del servidor incluye tareas como:

  • Compilado.
  • Ejecución del código de la aplicación (en este caso, el core de WordPress, plugins y plantilla).
  • Consultas a base de datos.
  • Consultas a API externas.
  • Operaciones de lectura y escritura.

Estas tareas pueden implicar un consumo de CPU, de disco y de memoria excesivos. Para mejorar estos aspectos, se debería:

  • Guardar en memoria los scripts precompilados con opcode cache para evitar analizar los scripts en cada petición.
  • Optimizar los algoritmos que se ejecutan en el core de WordPress, plugins, plantilla, etc.
  • Reducir el número de consultas a base de datos.
  • Reducir o cachear las consultas a API externas.
  • Mejorar el hardware de persistencia para reducir el tiempo de lectura y escritura. También se pueden usar diferentes tipos de hardware para cada tipología de datos almacenar. Ejemplo: consultas habituales las guardamos en Redis en memoria y el resto persistidas en disco SSD.

Práctica

La mayor parte de los problemas anteriores se pueden solucionar de forma muy simple:

Contrata un servicio de hosting que incluya:

  1. PHP versión 7.4 o superior.
  2. Extensión PHP OPcache habilitada y configurada.
  3. Servidor web con caché pública: LiteSpeed, OpenLiteSpeed, Apache + Varnish, Apache + Nginx como proxy inversor, etc.
  4. Compresión HTTP con Brotli. Puedes hacer un test aquí: https://tools.keycdn.com/brotli-test
  5. Protocolo HTTP/2 soportado. Puedes hacer un test aquí: https://tools.keycdn.com/http2-test
  6. Opcional: sistema de caché en memoria (memcached, Redis, etc.). Esto servirá si quieres establecer sistema de caché privada.

Consideramos que los 5 primeros puntos son imprescindibles (el 3 especialmente). La mayoría de proveedores de hosting los ofrecen, solo consulta con ellos antes de contratar el servicio. Algunos ejemplos de proveedores que lo ofrecen: Nicalia, Webempresa, Raiola Networks…

Si por lo que sea no te pueden ofrecer un servidor web con sistema de caché pública, te recomendamos buscar otro proveedor o, en su defecto, usar algún plugin de WordPress que lo emule (generalmente creando ficheros HTML estáticos a partir de PHP procesados anteriormente). No funcionará con la misma eficiencia que la caché a nivel de servidor, pero es mucho mas que nada. Algunos de estos plugins podrían ser:

  • WP Rocket
  • WP Fastest Cache
  • W3 Total Cache
  • WP Super Cache

Si eliges usar un plugin para la caché, deberás leer en su documentación cómo se configura.

Frontend

Teoría

Toda la teoría la podéis encontrar en este libro de lectura gratuita: Designing for Performance

En resumen, se trata de entender cómo el navegador renderiza el contenido y cómo el usuario percibe el rendimiento.

Puedes saber un poco más cómo Wasabi Theme ha considerado esto desde el inicio de su desarrollo aquí: https://wasabitheme.com/documentacion/art/que-ventajas-wpo-ofrece-sobre-otros-themes/

Práctica

Si puedes usar solo Wasabi Theme y un plugin para SEO como Yoast o Rank Math, ya lo tienes casi todo hecho. Hay muchos clientes que solo han necesitado esas dos cosas para crear webs tanto monetizables con AdSense como con sistemas de afiliados.

La adición de plugins adicionales (como Ultimate Shortcodes, AAWP, etc.) seguramente empeorará la velocidad de carga cargando recursos como fuentes, estilos, scripts. En este punto, Wasabi no puede hacer nada por ti. Simplemente intenta prescindir de ellos. Mejorará tu WPO uses la plantilla que uses.

En este punto, vamos a considerar que solo usas Wasabi Theme y no usas ningún plugin que añada CSS, fuentes, scripts, etc. También entenderemos que ya has realizado las optimizaciones recomendadas en el apartado de “Backend”.

Para mejorar la percepción de velocidad de carga (WPO frontend) solo necesitas entrar a las opciones de WPO de Wasabi Theme y configurar las opciones siguientes:

1. No uses ningún plugin que añada CSS, JS, fuentes o iconos. Intenta en la medida de lo posible usar Wasabi, Yoast (o similar) y poco más.

2. No uses fuentes de Google, usa las nativas del sistema. Esto se puede lograr marcando esta casilla:

Si quieres usar las fuentes de Google, te recomendamos seleccionar las casillas de “Carga asíncrona” y de “Habilitar font-display:swap”. De esta forma evitamos que la carga de fuentes bloqueen el renderizado, pero también generamos un cambio perceptible de fuente (de no estar cargada a cargarse de forma diferida), son milisegundos, pero se nota a la vista.

3. Habilita la carga diferida de imágenes.

4. Mueve los scripts al footer para que no bloqueen el renderizado.

5. Incrustar el CSS. Esto hará que todo el código CSS necesario se añada en el head. Wasabi Theme está optimizado para requerir solo el CSS que se necesita en cada página. Por este motivo es muy importante intentar prescindir de plugins que añadan CSS, ya que generalmente no están optimizados para este fin.

6. Minimizar el código HTML y eliminar parámetros de consulta de recursos estáticos. Estas dos opciones no tendrán un impacto notable, pero es posible que ayuden a mejorar los números en tests como el de GTMetrix.

7. Usar imágenes SVG para el logo y para los iconos de categoría. ¿Por qué? Porque Wasabi detectará que es un vector y lo añadirá “inline”, evitando la latencia que se pueda ocasionar durante la carga de la imagen. El formato SVG también suele implicar ficheros de menor tamaño que otros formatos.

Te recomendamos que busques los iconos SVG en https://www.flaticon.com/ (o similar) y los comprimas con https://jakearchibald.github.io/svgomg/ antes de subirlos.

Asegúrate de que el SVG tenga definidos los atributos width y height, a ser posible también el viewBox. En caso contrario es posible que no se llegue a mostrar y veas un espacio en blanco.

8. Configura el tiempo en el cual los recursos deben estas cacheados por el navegador. Esto reducirá el tiempo de renderizado en segundas y posteriores peticiones. Esta opción se suele poder configurar a nivel de servidor, te recomendamos consultarlo con tu proveedor.

9. Comprime las imágenes antes o después de subirlas. Puedes comprimir las imágenes antes de subirlas usando un servicio como https://kraken.io/ o después de haberlas subido, usando algún plugin como Smush o EWWW Image Optimizer.

Preguntas frecuentes

¿Puedo usar Wasabi y WP Rocket?

Sí, pero si configuras una opción en WP Rocket, desconfigura la equivalente en Wasabi Theme, y viceversa, ya que es trabajo redundante que puede perjudicar más que beneficiar. Cualquiera de las dos soluciones es válida.

¿Cómo puedo hacer que las fuentes dejen de bloquear el renderizado?

Entra en Apariencia -> Personalizar -> WPO -> Fuentes y marca la casilla de “Carga asíncrona de Google Fonts”

PageSpeed indica que jQuery no se está usando, ¿cómo lo quito?

jQuery es una dependencia del propio core de WordPress, esto significa que es el propio WordPress el que lo carga y el que lo requiere. En otras palabras: no se debe eliminar la carga de jQuery si queremos que WordPress funcione correctamente. WordPress sigue actualizando la versión de la librería que carga el core, aunque lo ideal sería que dejase de utilizar jQuery.



Otro tipo de contenido en el blog de Wasabi