Consejos de optimización WPO en WordPress

En el mundo del SEO, el tiempo de carga cada vez adquiere mayor importancia. La velocidad de una web afecta directamente a su posicionamiento en los motores de búsqueda y a la experiencia de usuario. Una experiencia de navegación lenta puede penalizarte enormemente. De ahí que hayamos preparado este artículo para ayudarte a conocer y aplicar correctamente las técnicas de optimización WPO en tu sitio WordPress.

1. ¿Qué es el WPO?

Las siglas WPO (Web Performance Optimization) aluden a la optimización del tiempo de carga de un sitio web. Hacen referencia a la velocidad en la que una web descarga y muestra el contenido a sus usuarios. Consiste en una serie de técnicas, herramientas y conocimientos que sirven para mejorar el rendimiento de una web. Una vez aplicadas, se traducen en una experiencia de usuario mejorada y un mejor posicionamiento en motores de búsqueda.

2. ¿Por qué es importante el WPO en una web?

El perfil de usuario de internet ha ido evolucionando y transformándose. De una navegación clásica, basada en ordenadores de sobremesa potentes y con conexiones rápidas y estables; se ha pasado a una navegación en dispositivos móviles, cuyas prestaciones y uso de red son limitadas. Y, al mismo tiempo, también han cambiado las expectativas del usuario, que prioriza una navegación fluida, ligera y que responda a su interacción con el dispositivo.

Múltiples estudios de Google demuestran que los tiempos de carga son el mayor factor de abandono de una web: el 32% de los clientes de un ecommerce abandona la tienda después de tres segundos de espera. Del mismo modo, existen estudios que señalan que los ratios de conversión (porcentaje de usuarios de un sitio que realizan aquello a lo que la web les invita -compras, registros, visitas, suscripciones-) pueden duplicarse en una página con unos tiempos de carga optimizados respecto a su contrapartida lenta.

Este fenómeno es especialmente palpable en el ámbito del comercio electrónico.  Por ejemplo, Amazon detectó que cada 100 milisegundos de latencia disminuyen en un 1% las ventas.

Estos datos justifican sobradamente la necesidad de disponer de una web que ofrezca una experiencia de usuario rápida, fluida y sin retrasos innecesarios. Sobre todo si pretendemos que el visitante realice una acción determinada.

3. Aspectos generales del WPO

A la hora de hablar de WPO desde una perspectiva técnica, debemos de tener presente que existen múltiples factores a analizar en el rendimiento de una web determinada. Afortunadamente, Google pone a nuestra disposición varias métricas que pueden ayudarnos a comprender cuáles son los puntos débiles de una web. Y lo que es más importante, cómo mejorarlos. Éstas son las principales:

• FCP (First contentful paint): alude al tiempo transcurrido desde que la página empieza a cargar hasta que aparece en pantalla cualquier elemento del contenido. Este tiempo ha de ser de 1,8 segundos o inferior para que Google lo considere una métrica “correcta”.
• TTI (Time to interactive): es el tiempo transcurrido hasta que la página es completamente interactiva, es decir, capaz de responder a la interacción del usuario en un rango no superior a los 50 milisegundos. En este caso, el tiempo debe ser inferior a los 3,8 segundos para que Google lo considere adecuado.
• LCP (Largest Contentful Paint): refleja el tiempo requerido para cargar el elemento más extenso dentro de la visualización principal en la ventana, en relación al momento en que la página empezó a cargarse. Según Google, debe ser de menos de 2,5 segundos.
• CLS (Cumulative Layout Shift): este parámetro mide los cambios inesperados en el diseño de la página mientras ésta carga. El objetivo esta vez será mantenerlo en una puntuación menor a 0,1.
• TTFB (Time To First Byte): finalmente, encontramos el tiempo transcurrido desde que el navegador pide una página hasta que recibe el primer byte de información del servidor. Este indicador carece de un estándar adecuado, pero, como es obvio, cuanto más tarde, más tiempo sumará al FCP.

Para optimizar el rendimiento de una web debemos comprender estas métricas y analizarlas en cada sección de contenido relevante de nuestro sitio (home page, páginas de producto, categorías, sección blog, posts individuales, etc.). En función de los resultados obtenidos, deberemos intentar mejorar esas puntuaciones. Usar como referencia los consejos que ofrece Google para optimizar cada métrica nos ayudará a saber qué priorizar.

¿Cómo hacer este análisis? Las herramientas específicas para desarrolladores de Google, como Lighthouse o Page Speed te permitirán hacerlo de forma rápida y sencilla. Aunque también puedes recurrir a herramientas externas como GT Metrix.

4. Consejos para optimizar el WPO de tu web en WordPress

Una vez hayas analizado tu sitio web, es muy probable que detectes oportunidades para mejorar el rendimiento en los distintos apartados. A continuación analizaremos los problemas más comunes y te daremos una serie de consejos técnicos específicos para optimizar el tiempo de carga de tu web basada en WordPress.

4.1. Servir todas las imágenes en formato webp

Los formatos de compresión de imágenes de alta calidad tradicionales (.jpg, .jpeg y .png), no son los más recomendables, a pesar de que sean los más extendidos. Su elevado peso ralentiza notablemente el proceso de carga y, en situaciones en las que se acumulan varias imágenes (como en las galerías o sliders), su impacto puede ser bastante negativo.

En cambio, el formato webp resulta mucho más eficiente.  La ligereza de su compresión (recomendamos el 80%) nos ayuda a optimizar enormemente este aspecto. Existen múltiples formas de generar imágenes webp en tu WordPress. Las más populares son plugins como WebP Express o WebP Converter for Media. Ambas ofrecen soluciones integrales a este problema, aunque deberemos asegurarnos de su compatibilidad con el tema que estemos utilizando en nuestra web.

Un método alternativo con el que garantizar su correcto funcionamiento es la herramienta cwebp. Forma parte de la librería libwep desarrollada por Google y se ejecuta a través de línea de comandos. Si utilizas la estructura de archivos por defecto de WordPress, nuestra recomendación, por sencillez y escalabilidad, es llevar los webp generados a un directorio paralelo al original de WordPress bajo la ruta /webp/.

La imagen original quedaría bajo la estructura wp-content/uploads/año/mes/imagen.extensión, y su versión webp bajo wp-content/uploads/webp/año/mes/imagen.webp.

Estas imágenes optimizadas luego pueden ser servidas a través de .htaccess con el siguiente fragmento incrustado:

<IfModule mod_rewrite.c>
 #headers
 <Files *.webp>
  Header set Vary "Accept-Encoding"
  AddType "image/webp" .webp
  AddEncoding webp .webp

</Files>
  RewriteCond %{HTTP:Accept} image/webp
  RewriteCond %{DOCUMENT_ROOT}/wp-content/uploads/webp/$1/$2/$3.webp -f
  RewriteRule wp-content/uploads/(\d+)/(\d+)/([^\/]+)\.(jpg|jpeg|png)$ wp-content/uploads/webp/$1/$2/$3.webp [T=image/webp]
  RewriteCond %{DOCUMENT_ROOT}/wp-content/uploads/webp/$1.webp -f
  RewriteRule wp-content/uploads/([^\/]+)\.(jpg|jpeg|png)$ wp-content/uploads/webp/$1.webp [T=image/webp]

</IfModule>

De este modo nos aseguramos un proceso limpio y con una integración absoluta con cualquier tema que usemos o vayamos a utilizar en el futuro en nuestro WordPress.

4.2. ¿Son los sliders realmente necesarios?

Los sliders, usados tradicionalmente en el diseño web y especialmente populares en el ámbito ecommerce, vienen servidos junto una serie de assets (recursos JavaScript y CSS) que añaden peso al proceso de carga.

Además, existen muchos estudios que demuestran que su implementación apenas incide en el ratio de conversión. Nuestra recomendación, desde el punto de vista del WPO, es limitarlos a lo estrictamente necesario y hacer uso de soluciones a medida (o bien optar por los más ligeros).

Para ampliar información sobre este punto no dejes de visitar este artículo de IT Next o  este otro de CXL, en los que se analizan en profundidad los problemas derivados del uso de sliders.

4.3. Usar un tema ligero sin bloat innecesario

A la hora de seleccionar un tema para nuestro WordPress, debemos de tener en cuenta la cantidad de assets que introduce para su funcionamiento.

Cada fichero javascript y css adicional es un pequeño impuesto sobre el tiempo de carga, que se traduce inevitablemente en una mayor lentitud. Los constructores visuales más populares, como Avada o Divi, añaden una gran cantidad de estos archivos para garantizar su funcionalidad, ralentizando de este modo el proceso de carga web.

En este sentido, siempre es una opción segura apostar por temas a medida, de aspecto minimalista y mobile-first. En Soluciones Web de Grupo Trevenque hemos desarrollado nuestro propio Started Theme, que se adapta completamente al tipo de producto que desarrollamos: sitios con diseños totalmente personalizados y con la máxima optimización de rendimiento. En líneas generales, el uso de un tema de partida limpio nos proporciona un control total sobre los recursos que se utilizan en el sitio, evitando la carga innecesaria de código. Otras características destacables de este tema son:

• Control y optimización de imágenes con código nativo de php
• Minificación de código
• Arquitectura css basada en la especificidad (ITCSS)
• Control de la carga de recursos por tipo página

4.3.1. Mantener la carga de assets lo más baja y limpia posible

En WordPress, los temas no son los únicos que introducen assets en el ciclo de carga: también lo hacen los distintos plugins que vamos instalando.

A menudo estos assets se encolan en fragmentos de la web que son innecesarios, añadiendo peso en momentos en los que ni si quiera se va a usar la funcionalidad. Nuestra recomendación pasa por analizar los scripts y estilos registrados en cada grupo de páginas de la web. Si no se están utilizando, podemos hacer uso de las funciones de WordPress para desregistrarlos condicionalmente, y mantenerlos exclusivamente en los fragmentos de la web en los que son realmente necesarios.

Para conocer qué assets se están usando en cada página puedes hacer uso del siguiente hook en el functions de tu tema:

add_action('wp_print_scripts', function ()
{
  global $wp_scripts;
  global $wp_styles;

 //Recorrer la queue de scripts 
  foreach ($wp_scripts->queue as $handle) :
    $lista_scripts .= $handle . ' | ';
  endforeach;

 // Recorrer la queue de styles
  foreach ($wp_styles->queue as $handle) :
    $lista_styles .= $handle . ' | ';
  endforeach;

  printf(
  'Scripts: %1$s  <br/><br/> Styles: %2$s',
   $lista_scripts,
   $lista_styles
  );
  die;
},999);

Esto generará una lista de scripts y styles que puedes eliminar condicionalmente si no están en uso para cada página con wp_deregister_script, wp_dequeue_script, wp_deregister_style y wp_dequeue_style. ¡Pero ten mucho cuidado si estás en un sitio en producción! Ese hook muestra por pantalla la información y deja la web inservible mientras está activo.

4.3.2. Posponer carga de recursos

Muchas veces nos encontramos con bloques de código que, si bien no son necesarios para el correcto funcionamiento de la web, prestan funcionalidades de las que queremos disponer, a costa de añadir un TTFB y un bloqueo de recursos muy elevado.

Funcionalidades como los live chats, los widgets o los sistemas de publicidad deben ser analizadas desde el punto de vista del usuario. Si consideramos que no se hace uso de ellas en los primeros segundos de visualización de la página, podemos posponer el inicio de su carga unos segundos, garantizando así que no bloquean el hilo principal. La consecuencia inmediata será una mejora en el rendimiento general del proceso. Normalmente, esta medida suele ser tan sencilla como sustituir la llamada al asset en la etiqueta <script> por el siguiente fragmento:

const tiempo_a_posponer = 5000;
setTimeout(() => {
  var element = document.createElement("script");
  element.src = "ruta/archive.js";
  document.body.appendChild(element);
},tiempo_a_posponer);

En algunas ocasiones, este timeout no nos valdrá. Las llamadas de carga de scripts provocan una cascada de archivos y ejecuciones que se esperan síncronas, haciendo uso internamente de document.write en su ciclo y rompiendo la funcionalidad del script. Para estos casos recomendamos hacer uso de la librería postscribe, diseñada específicamente para manejar este tipo de casos.

4.4. La importancia de usar un sistema de caché eficiente

La caché es la forma más rápida de mejorar el rendimiento de una web. Sirviendo archivos estáticos pre-generados reduciremos la carga de procesamiento en el servidor y generaremos archivos “mínimos”, más fáciles de interpretar por el navegador, lo que reduce enormemente el TTFB de nuestra web.

WordPress dispone de múltiples plugins de caché, cada uno con sus ventajas y desventajas. Nuestra recomendación para un servidor Apache tradicional es WP Rocket, por sus múltiples funcionalidades y lo depurado que está.

4.4.1. Aplicar un lazyload correcto

Igualmente importante es hacer lazyload a todas las imágenes que quedan fuera de la primera visualización. De esta tarea normalmente se encargan los plugins de caché de WordPress, o librerías JavaScript externas como Jail o Lozad. Pero en numerosas ocasiones éstos no distinguen el elemento con mayor LCP y aplican esta técnica a un elemento que se carga en la primera visualización.

De ahí que sea importante depurar y corregir estos comportamientos para asegurarnos que un lazyload incorrecto no suma tiempo al FCP por estar atrasando un recurso crítico. Para corregir este problema, normalmente basta con añadir un nombre de clase o un ID específico al elemento al que no queremos que se le haga lazyload, y pasárselo como excepción a la configuración del plugin que estemos usando.

4.5. Optimizaciones a nivel de servidor y su configuración    

Un punto importante, que a veces se pasa por alto: las optimizaciones del lado del servidor y su configuración. Aplicar una política eficiente de caché de assets, una compresión adecuada de los archivos o asegurarnos de que todo se sirve bajo protocolo HTTP/2 son, normalmente, los puntos que se deben de revisar (y corregirlos si no se están aplicando). Así nos garantizamos no dejar ningún fleco suelto que pueda afectar al rendimiento de nuestra web. Si detectas alguno de estos problemas, lo mejor es que contactes con el administrador de tu servidor.

También existen soluciones a nivel de servidor diseñadas específicamente con el rendimiento y la velocidad como protagonistas. Tanto Litespeed Web Server como su versión opensource ofrecen una arquitectura que permite una mayor velocidad de respuesta que un servidor Apache tradicional. Su plugin para WordPress, LiteSpeed Cache, permite un grado de configuración muy elevado. Sumado a su crawler, ofrece unos resultados muy positivos de cara al rendimiento de WordPress.

4.6. Optimizaciones CLS

Finalmente, es habitual encontrarnos con imágenes que, al no tener unas medidas de width y height específicas, contribuyen al movimiento de la página al cargarse el layout. Al cambiar de tamaño dinámicamente, penalizan el tiempo de carga.

Aunque la mayoría de plugins de caché se encargan de añadir los atributos necesarios a las imágenes para evitarlo, si en el análisis de tu web encuentras algún elemento con este problema, es probable que su origen esté en las plantillas de tu tema. Para solucionarlo necesitarás encontrar el elemento dentro del código y añadirle las dimensiones en píxeles adecuadas al tamaño de la imagen.