Skip to main content

Desde que Google anunció que la velocidad es un factor de clasificación importante en el posicionamiento SEO, la creación de páginas web rápidas y la necesidad de mejorar el rendimiento en Wordpress ha ganado aún más relevancia.  La puntuación que obtenemos a través de PageSpeed Insights no solo afecta la velocidad de carga, sino también a la experiencia general del usuario en tu web.

Qué vamos a ver…

Este artículo no pretende ser un step-by-step pero si analizar y corregir desde una variedad de formas el rendimiento de nuestra web. Está enfocado especialmente en algunas prácticas comunes para mejorar su performance, un conjunto de prácticas denominadas WPO (Web Performance Optimization). También conoceremos cuales son las métricas que afectan directamente al rendimiento web.

Google PageSpeed Insights

Todo empieza en Google pero, ¿qué es Google PageSpeed Insights?… En el mercado existen distintas plataformas y herramientas que miden el rendimiento web, y Google PageSpeed es la que está evolucionando el gigante hace años. La plataforma nos da las herramientas necesarias para medir el rendimiento de una página web desde el punto de vista de la velocidad y la usabilidad en dispositivos móviles y de escritorio.

El conjunto de métricas de rendimiento web esenciales que se centran en la experiencia del usuario Google lo ha englobado en el concepto Core Web Vitals. Estos parámetros muy a tener en cuenta son:

  1. Largest Contentful Paint (LCP) o renderizado del mayor elemento con contenido. Mide el tiempo que tarda en cargarse el elemento de contenido más grande en el área de visualización del usuario. Un LCP ideal es inferior a 2.5 segundos.
  2. First Input Delay (FID):  Mide la interactividad de la página al evaluar el tiempo que transcurre entre la primera interacción del usuario (como hacer clic en un botón) y la respuesta de la página. Un FID ideal es inferior a 100 milisegundos.
  3. Cumulative Layout Shift (CLS) o cambios de diseño acumulados. Mide la estabilidad visual de la página al evaluar la cantidad de desplazamiento inesperado de los elementos de la página durante la carga. Un CLS ideal es inferior a 0.1.
  4. Time to First Byte. (TTFB) o tiempo hasta el primer byte. Es una métrica que mide el tiempo que transcurre entre la solicitud de un recurso y el momento en que comienza a llegar el primer byte de una respuesta.
  5. First Content Paint (FCP) o primer procesamiento de imagen con contenido. Mide el tiempo que transcurre desde que el usuario navegó a la página por primera vez hasta que se renderiza en la pantalla cualquier parte del contenido de la página. En esta métrica, “contenido” hace referencia al texto, las imágenes (incluidas las imágenes de fondo), los elementos <svg> o <canvas> que no son blancos.

Las cartas ahora están sobre la mesa. Para conocer en que valores se mueve nuestra web lo único que tenemos que hacer es ir a Google PageSpeed, introducir nuestra URL y analizar. Obtendremos un análisis similar al que ves abajo y a lo largo de este post te enseñaremos mecanismos para mejorar tu rendimiento web enfocado en Wordpress. ¿Preparado? Pues empecemos…

Mejorar rendimiento Web

Fuente imagen: Captura análisis Google PageSpeed Insights

Usa un servidor o hosting con buen rendimiento

Empecemos por el principio. Aunque pueda parecer una obviedad, disponer de un hosting competitivo para albergar nuestra web influye en el rendimiento. La eficacia de tu servidor con respecto al TTFB por ejemplo, puede influir en varios factores, entre los que se incluyen la capacidad del servidor para procesar solicitudes y entregar respuestas rápidas o la velocidad de la conexión a Internet del servidor.

Otro factor importante es la localización geográfica del servidor web. La distancia física entre el servidor y el usuario que realiza la solicitud puede afectar el TTFB, aunque el uso de un servidor de contenido distribuido (CDN) puede ayudar a reducir este impacto. Por último, es imprescindible que nuestro alojamiento tenga buenos sistemas de caché.

Empieza por un theme eficiente

Ahora que tenemos el mejor hosting y hemos instalado en él nuestro Wordpress, debemos elegir qué plantilla usaremos o si vamos a programar nuestra solución.

Analizar que tipo de plantilla vamos a usar no es solo importante desde el punto de vista del diseño, sino también del rendimiento que esperamos y de su repercusión en la experiencia de usuario. En los últimos tiempos se ha puesto de moda (buscando ser valorado en el posicionamiento) plantillas ligeras tipo Generate Press, Astra, etc. Todo tiene sus pros y sus contras. Si bien con un theme Wordpress de este tipo es indudable que tu rendimiento aumentará, también lo es que vas a necesitar un esfuerzo extra y más conocimientos técnicos para abordar un diseño más complejo o exigente.

En el lado contrario podemos encontrar multitud de plantillas que vienen con muchísimas opciones visuales y posibilidades, demos, plugins adicionales y demás. Al final, este tipo de estructura que nos permite más con menos, cuenta con un mayor número de archivos javascript y CSS, lo que posiblemente alargue el hilo de ejecución principal y aumente los bloqueos. Por descontado y como en todo hay plantillas cuya calidad del código está mucho más optimizada. Con todo esto en mente, nuestra recomendación es que busques tu equilibrio y decidas, pero como opinión personal no debemos descartar una plantilla más compleja pues hay acciones adicionales a ejecutar que también mejorarán el desempeño del site.

Fuente imagen: Siteground, uno de los mejores Hostings del mercado

Deshabilita funciones de WP

Entramos en la configuración… Wordpress viene por defecto con ciertas funcionalidades que tal vez no necesites. Del mismo modo, instalar plugins de forma indiscriminada no suele ser buena idea y luego te explicaremos porqué.

Si usas un módulo tipo Perfmatters no te será muy complicado deshabilitar ciertas funciones poco importantes como Dashicons, emojis, versión de WP, Feeds, etc. En esta misma sección de la configuración del plugin que verás en la imagen inferior, podrás deshabilitar la fragmentación de Carrito si usas Woocommerce o adaptar la frecuencia de Heartbeat y guardado del CMS. Es decir, reducimos carga y peticiones.

Ni que decir tiene que deshabilitar el XML-RPC es casi un must, lo cual puedes llevarlo a cabo a través del archivo .htaccess. XML-RPC es un protocolo que permite realizar operaciones remotas contra tu Wordpress, pero también ha supuesto un punto débil en la seguridad del sistema.

Quitar XMLRPC en .htaccess

# XMLRPC Disable Service
<Files xmlrpc.php>
order deny,allow
deny from all
</Files>

Precarga fuentes y dominios externos

Precargar fuentes y dominios significa cargar recursos necesarios antes de que sean solicitados. Esto puede mejorar el rendimiento del sitio al reducir el tiempo de carga de la página, ya que los recursos estarán disponibles en la caché del navegador cuando se necesiten.

También en este caso puedes usar Perfmatters por ejemplo yendo a su configuración general > Fonts > Local Google Fonts si estás usando fuentes de Google. En el caso de SG Optimizer, debes ir la sección Portada > General, en donde podrás optimizar fuentes, realizar su precarga y hacer un prefetch de los dominios que desees.

Es importante no olvidar usar la función font-display en tu CSS para que en el caso de que aún las fuentes no estén disponibles el usuario pueda ver la información.

Añadir swap a fonts

@font-face {
font-display: swap;
}

Perfmatters

Fuente imagen: Captura configuración general Perfmatters

Minimifica CSS, js y usa imágenes WebP

Este es fácil. La minificación de archivos en programación es un proceso que implica reducir el tamaño de un archivo fuente al eliminar espacios en blanco, comentarios, y otros caracteres que no son esenciales para la ejecución del código. Esta práctica se aplica comúnmente en un Wordpress a archivos como JavaScript y CSS.

Para aplicar este proceso símplemente tendrás que marcar un “check” en un plugin de cacheo tipo WP Rocket o SG Siteground. En este caso, el optimizador de Siteground va un paso más allá y propone combinar todos los archivos en uno y realizar su precarga. Verás que ahora a tus archivos CSS se a añadido .min antes de la extesión .css.

Es importante nuevamente comprobar que el cambio “no ha roto” nada en nuestra web. Para ello borra todas las cachés y navega para ver posibles cambios en el frontend.

Los archivos WebP u otros de nueva generación utilizan algoritmos de compresión más avanzados que permiten mantener una alta calidad visual con tamaños de archivo más pequeños. La única pega que puedes encontrar aquí es que no todos  los navegadores lo soportan, por lo que tendrás que establecer un mecanismo para servir la imagen original en este caso.

Minificacion CSS

Fuente imagen: Captura de minificación de portada con SG Optimizer

Desactiva scripts selectivamente

Sin duda este es uno de nuestros puntos favoritos. Mucha gente no lo tiene en cuenta pero cuando instala un plugin en Wordpress no es consciente de que muchos de sus scripts u hojas de estilo se cargan en páginas innecesarias. Por poner un ejemplo, puedes instalar un plugin para agendar reuniones que solo se lanza desde tu página de contacto, pero lo que está ocurriendo es que en todas las páginas restantes de tu web se están solicitando sus archivos. Parece que tiene sentido decirle al servidor que los archivos necesarios para agendar una reunión solo se lance donde se necesita.

Nuevamente con Perfmatters puedes desactivar selectivamente aquello que quieras donde quieras. Hay que ser cuidadosos en este punto y nosotros recomendamos trabajar en un entorno de test e ir avanzando. Deshabilitar algunos scripts es muy obvio pero otros podemos pensar que no se necesitan y no sea el caso. Con Script Manager de Perfmatters puedes deshabilitar en una función en toda tu web, y marcar luego individualmente una excepción donde quiras que se ejecute. Es muy fácil.

Mejorar rendimiento Wordpress

Fuente imagen: Captura Perfmatters Script Manager

Para proporcionar una buena experiencia de usuario, intenta que el valor de LCP sea inferior a 2,5 segundos.

Pospón la carga de imágenes y Javascript

En este caso la estrategia es posponer la carga de todo aquello que no es necesario de forma anticipada, como scripts e imágenes (lazy loading). En el contexto de WordPress, la funcionalidad “lazy loading” para imágenes se incorporó en la versión 5.5 y sin duda es un recursos que nos hará ganar rendimiento.

Cualquiera de los plugins referenciados a lo largo de este post como SG Optimizer o Permatters te servirán para activar la funcionalidad. En ocasiones los themes incorporan dentro del propio constructor el número de imágenes que queremos excluir del lazy loading. Por su lado, SG Optimizer también nos permite selectivamente priorizar aquellas que por algún interés si queramos cargar anticipadamente.

jQuery en el footer

jQuery es una biblioteca de JavaScript rápida, pequeña y versátil. Se utiliza comúnmente en desarrollo web para simplificar las tareas de manipulación del DOM (Document Object Model) y para facilitar la creación de efectos y animaciones en páginas web. En el contexto de WordPress, jQuery se ha utilizado históricamente como parte integral de la biblioteca principal de JavaScript incluida en la plataforma.

Aplazar la carga de jQuery al pie de página (footer) en WordPress es una práctica común para mejorar el rendimiento del sitio web, optimizando el tiempo de carga y evitando bloqueos del renderizado.

Para aplazar la biblioteca al pie de tu web podrías usar el siguiente snippet en tu archivo functions.php:

Aplazar jQuery al footer

function move_jquery_to_footer() {
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, includes_url(‘/js/jquery/jquery.js’), false, NULL, true);
wp_enqueue_script(‘jquery’);
}
}
add_action(‘wp_enqueue_scripts’, ‘move_jquery_to_footer’);

Hasta ahora hemos visto que para mejorar el rendimiento Wordpress de forma óptima vamos a tener que usar distintas herramientas o tendremos varios frentes: plugins all-in-one de rendimiento como WP Rocket, SG Siteground o Perfmatters, código vía CSS o php, modificación de archivos como el .htaccess, configuraciones del servidor y Wordpress y ahora te damos una más: algunos themes vienen con secciones de rendimiento que también nos van a ayudar.

Es importante recalcar que es prioritario usar el mínimo número de plugins posible, y si tenemos que usar más de uno no activar la misma funcionalidad en ambos; es decir, si los dos plugins tienen un sistema de precarga de fuentes, no lo habilites en los dos.

Mejorar rendimiento Wordpress

Aplazamiento jQuery en theme

Es muy importante promediar el valor de CLS por debajo de de 0,1.

Añade cache Expire Headers

Los “Expires headers” son parte de las directivas de control de caché HTTP que se utilizan para especificar la fecha y hora en la que un recurso específico (como una imagen, un archivo CSS o JavaScript) debería considerarse como caducado o vencido. Estas cabeceras son enviadas por el servidor web junto con el recurso y son interpretadas por el navegador del usuario para determinar si debe cargar el recurso desde la caché local o solicitar una versión actualizada al servidor.

Cuando se establece una fecha de expiración para un recurso mediante las “Expires headers”, se está indicando al navegador que puede almacenar en caché ese recurso hasta la fecha y hora especificadas. Después de esa fecha, el navegador volverá a solicitar el recurso al servidor para obtener la versión más reciente.

La implementación de esta configuración beneficiará en la reducción de solicitudes al servidor, reducción del consumo en ancho de banda y mejora de la experiencia de usuario. Cuando hablamos de “Expires headers” o cabeceras de expiración en relación con las Core Web Vitals, estamos principalmente tocando la métrica de LCP. La optimización del tiempo de carga, que está directamente relacionado con el LCP, puede beneficiarse de manera indirecta mediante el uso adecuado de las cabeceras de expiración.

A continuación te mostramos un ejemplo, pero puedes añadir la tipología de archivo que necesites siempre y cuando no suponga un problema alargar su expiración. Si quieres comprobar si esto está funcionando, una de las opciones es usar este caché checker grauito.

Añadir Expire Headers en .htaccess

## Expires Headers Caching
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/svg “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
</IfModule>

Seguimos… Un “cookie-free domain” se refiere a un dominio en el que no se utilizan cookies al enviar o recibir información entre el navegador web y el servidor. Generalmente en Wordpress esto se usa para servir recursos estáticos, como imágenes, hojas de estilo (CSS) o scripts (JavaScript), sin enviar cookies con cada solicitud.

La razón detrás de esto es que los recursos estáticos generalmente no necesitan información de sesión o datos específicos del usuario almacenados en cookies. Al configurar un subdominio como “cookie-free”, se busca reducir la cantidad de datos que se envían entre el navegador del usuario y el servidor, mejorando así el rendimiento del sitio.

En esencia este procedimiento consiste en crear un subdominio para el contenido estático (por ejemplo static.midominio.com) y apuntarlo a la instalación real de wordpress (midominio.com).  A continuación se harán un par de cambios en el archivo wp-config.ini de WP y unos reemplazos en la BBDD. En este enlace puedes ver un manual con el procedimiento más detallado.

Añadir Expire Headers

Imagen de Pingdom Tools: cookie free domain & expire headers

Usa un CDN competitivo (Content Delivery Network)

Un CDN es básicamente una red en donde el contenido está distribuido y replicado en distintas áreas geográficas (del inglés “Content Delivery Network”). Integrar un CDN con WordPress es una excelente manera de mejorar la velocidad y rendimiento de tu sitio web al distribuir el contenido estático a través de servidores distribuidos geográficamente. Esta solución es muy recomendable para webs cuyo tráfico está muy distribuido geográficamente y básicamente lo que hace es servir el contenido al usuario con el servidor que esté más próximo a él. Si quieres investigar sobre ello en el mercado tienes algunos como Cloudflare, Akamai, Amazon CloudFront, KeyCDN o StackPath.

Mantenimiento de la Base de Datos de WP

Otro de los puntos a abordar es el mantenimiento de la base de datos de Wordpress, aunque es mucho mejor realizar acciones preventivas. El plugin Advance Database Cleaner es fácil de usar y seguro: con él no solo podrás borrar información huérfana o innecesaria, sino también ver datos y estadísticas y configurar un mantenimiento programado. Como siempre, nuestro plugin estrella SG Optimizer también dispone de esta funcionalidad.

Cuando eliminamos un módulo en Wordpress habitualmente gran parte de la información se queda en las tablas de la BBDD con el fin de recuperar la configuración en el caso de reinstalarlo. Si estás seguro de que no vas a usar un plugin nuevamente o no te causará un gran problema reconfigurarlo, recuerda que la mayoría de los plugins tienen un setting (check) para eliminar toda la información si elegimos su desinstalación. Es una buena práctica.

Algunas herramientas más…

Hasta ahora hemos hablado de distintas tools que nos ayudarán a analizar o mejorar nuestro rendimiento pero por el camino nos hemos dejado alguna utilidad más:a más:

  • Lighthouse: es una extensión de Chrome desarrollada por Google que integra directamente la posibilidad de ejecutar el análisis de rendimiento de un site.
  • Query Monitor: es el panel de herramientas para desarrolladores de WordPress. Permite la depuración de consultas de bases de datos, errores de PHP, enlaces y acciones, bloques del editor de bloques, scripts y hojas de estilo en cola, llamadas API HTTP y más.
  • Search Console. ampliamente extendida, no solo te ayuda a conocer tu tráfico orgánico sino que desde hace tiempo es la zona en donde también se monitoriza las Core Web Vitals de tus páginas indexadas. Muy útil para ir viendo la evolución.

Bonus: en marzo llega el INP

Si después de 20 minutos de lectura no te has aburrido, has llegado a una información valiosa. Desde el próximo marzo Google tendrá en cuenta una nueva métrica para la que debemos estar preparadas: INP.

El INP o interacción con el próximo procesamiento de imagen es una métrica de web esencial que reemplazará el retraso de primera entrada (FID) en marzo de 2024. El INP evaluará la capacidad de respuesta con los datos de la API de Event Timing. Es decir, cuando una interacción hace que una página no responda, se considerará una mala experiencia del usuario. El INP será el encargado de observar la latencia de todas las interacciones que un usuario realiza con la página.

El objetivo de INP es garantizar que el tiempo desde que un usuario inicia una interacción hasta que se pinta el siguiente fotograma sea lo más breve posible para todas o la mayoría de las interacciones que realiza el usuario.

 

Como siempre, si tienes alguna pregunta o quieres contarnos tu proyecto, estamos encantados de responderte en nuestra página de contacto.

vivra loves list...

Siteground hosting, desde 2,99€ /mes
Crea sin límite con Envato Elements
Descubre Depositphotos

Posiciónate con Semrush

Síguenos en RRSS
Presupuestos, felicitaciones, quejas, dudas existenciales ·  hola@vivraestudio.com | +34 633681063  · 
Presupuestos, felicitaciones, quejas, dudas existenciales ·  hola@vivraestudio.com | +34 633681063  · 
Presupuestos, felicitaciones, quejas, dudas existenciales ·  hola@vivraestudio.com | +34 633681063  ·