Cómo mejorar Google Core Web Vitals en WordPress

Si tienes un sitio de WordPress, entiendes el valor de ofrecer una experiencia de usuario excelente. Esto influye en tu tasa de conversión, el número de suscriptores, las visualizaciones de anuncios, el posicionamiento en los motores de búsqueda y mucho más.

Una puntuación baja de Core Web Vitals indica una experiencia de usuario deficiente.

Pero ¿qué son exactamente las Core Web Vitals? ¿Por qué son tan importantes? ¿Y cómo puedes mejorar las Core Web Vitals de WordPress? Vamos a descubrirlo.

¿Qué son las Core Web Vitals?

Las Core Web Vitals son un conjunto de métricas utilizadas por Google para determinar el rendimiento de los sitios web.

A diferencia de otras mediciones de rendimiento, utilizan datos del mundo real para analizar cómo determinados aspectos del proceso de carga afectan a la experiencia de usuario de un sitio.

Actualmente hay tres métricas de Core Web Vitals:

1. Renderizado del mayor elemento con contenido (LCP), que está relacionado con el rendimiento de carga
2. Interacción con la siguiente renderización (INP), que mide la capacidad de respuesta a las interacciones del usuario
3. Cumulative Layout Shift (CLS), que está relacionado con la estabilidad visual

Las analizaremos con más detalle dentro de un momento. 

¿Por qué son importantes las Core Web Vitals para un sitio de WordPress?

Entonces, ¿por qué son importantes las Core Web Vitals?

Muestran cómo interactúan los visitantes con tu sitio web y proporcionan información muy valiosa sobre tu experiencia de usuario.

Cuanto más satisfechos estén tus visitantes, más probabilidades habrá de que se suscriban a tu boletín, compren tus productos o soliciten información sobre tus servicios.

Por otro lado, si tienen que esperar y esperar a que se cargue tu sitio web, podrían marcharse y visitar el de la competencia.

Google también utiliza Core Web Vitals como factor de posicionamiento. Tiene en cuenta tus puntuaciones al determinar la posición de tu sitio web en los motores de búsqueda para las palabras clave que te interesan. 

Al fin y al cabo, Google quiere ofrecer los resultados de mayor calidad a quienes realizan búsquedas, así que no sorprende que valore estas métricas de experiencia de usuario.

¿Qué métricas componen Core Web Vitals?

Las Core Web Vitals pueden parecer confusas si no se explica claramente cómo funcionan. Así que vamos a analizar cada una con más detalle.

Largest Contentful Paint (LCP)

La métrica LCP está relacionada con la velocidad de carga percibida de tu sitio web e indica cuánto tarda en cargarse por completo el elemento más grande de la página. En muchos casos, se trata de una imagen o un vídeo grande destacado en la parte superior de la página, aunque puede variar de un sitio a otro. En algunos casos, incluso podría ser simplemente un bloque de texto. También puede ser diferente en dispositivos de escritorio y móviles. 

Largest Contentful Paint solo se aplica a los elementos que se renderizan y son visibles para el visitante. Esto significa que los scripts que se cargan en segundo plano no afectarían a esta métrica. 

Lo ideal es que tu LCP sea lo más bajo posible. Google considera que una puntuación inferior a 2,5 segundos es «buena», que una puntuación de 4,0 segundos o menos «necesita mejorar» y que una puntuación superior a 4,0 segundos es «deficiente».

Más información sobre Largest Contentful Paint en WordPress.

Interacción con la siguiente renderización (INP)

INP mide el tiempo que transcurre entre la interacción de un usuario (como hacer clic o pulsar una tecla) y la respuesta de la página. Por ejemplo, si un cliente hace clic en un botón Comprar ahora y este responde al cabo de 400 milisegundos, ese es el INP de dicha interacción.

INP indica la capacidad de respuesta de tu sitio. Google clasifica esta métrica de la siguiente manera:

• Buena: menos de 200 milisegundos
• Necesita mejorar: entre 200 y 500 milisegundos
• Deficiente: más de 500 milisegundos

Un sitio web con un INP inferior a 200 ms parece responder al instante. Si el INP de tu sitio supera los 500 ms, puede parecer lento y el retraso en la respuesta será perceptible.

Google recomienda que al menos el 75 % de las interacciones de los usuarios se produzcan en un plazo de 200 milisegundos.

Cumulative Layout Shift (CLS)

CLS mide el grado en que los visitantes de un sitio experimentan cambios inesperados en la disposición de una página.

Imagina que un seguidor está leyendo una receta en tu blog de cocina. Está a punto de hacer clic en un enlace a un ingrediente cuando, de repente, toda la página cambia de posición y termina haciendo clic por error en un anuncio. Se le redirige a la página de destino del anunciante y, frustrado, decide no volver a tu blog.

Este es un ejemplo perfecto de por qué CLS es tan importante. Si tu página cambia de posición de repente, los visitantes pueden tener dificultades para leer tu contenido o hacer clic accidentalmente en otra cosa. Es una forma segura de perder seguidores, lectores y clientes. 

Google define el desplazamiento del diseño como «cada vez que un elemento visible dentro de la ventana gráfica cambia su posición inicial… entre dos fotogramas».

Una puntuación deficiente de CLS suele deberse a elementos que se cargan en momentos distintos: una imagen sin un tamaño definido, un anuncio sin dimensiones establecidas, fuentes personalizadas u otros elementos incrustados de terceros.

La puntuación de CLS se mide como la diferencia entre la posición de carga original y el lugar final en el que acaba un elemento. Una puntuación buena es cualquier valor inferior a 0,1. Las puntuaciones entre 0,1 y 0,25 necesitan mejorar, mientras que cualquier valor superior a 0,25 se considera deficiente.

Más información sobre Cumulative Layout Shift en WordPress.

Cómo medir Core Web Vitals en WordPress

Ahora que sabes qué son las Core Web Vitals de WordPress y por qué son importantes, vamos a descubrir cómo puedes probar tu sitio. Hay varias herramientas que puedes utilizar para hacerlo.

1. PageSpeed Insights

PageSpeed Insights es una herramienta de Google que proporciona mucha información sobre el rendimiento de tu sitio web, incluidas tus métricas de Core Web Vitals. Solo tienes que introducir tu URL y, en unos segundos, verás un informe de velocidad tanto para ordenadores como para dispositivos móviles.

En la parte superior verás tus Core Web Vitals, con las puntuaciones de LCP, INP y CLS. Se muestran de forma muy visual, por lo que sabrás enseguida si tu sitio está listo o necesita mejoras. También verás métricas de velocidad relacionadas que no forman parte de Core Web Vitals, como el tiempo hasta el primer byte (TTFB) y First Contentful Paint (FCP). Puedes hacer clic en Ampliar vista para ver más información sobre cada una.

Si sigues desplazándote, verás una lista de oportunidades de mejora que puedes filtrar según la métrica de Core Web Vitals. Haz clic en la flecha situada a la derecha de cada una para ver más detalles.

Por último, en la parte inferior hay una lista de auditorías superadas, que incluye todo lo que tu sitio está haciendo bien.

2. Google Search Console

Google Search Console es una herramienta de Google repleta de información sobre SEO. Aquí puedes hacer muchas cosas, desde enviar tu sitemap hasta consultar y corregir problemas de indexación. Como las Core Web Vitals afectan al SEO, también hay una sección entera dedicada a estas métricas.

Si aún no tienes una cuenta de Google Search Console, tendrás que registrar tu sitio web. Primero, busca el menú desplegable Seleccionar propiedad y haz clic en Añadir propiedad.

A continuación, aparecerán dos opciones:

1. Dominio. Esto incluye todas las URL, tanto HTTPS como HTTP, y todos los subdominios. Es la opción más completa, pero también la más complicada de configurar, ya que implica editar tus registros de DNS.
2. Prefijo de URL. Esto solo incluye las URL que se encuentran bajo el nombre de dominio que introduzcas. Así, si introduces example.com, incluiría example.com/contact-us, pero no blog.example.com. Esta opción también permite usar diversos métodos de verificación.

Para este tutorial, elegiremos el método del prefijo de URL. Introduce tu URL en el cuadro correspondiente y haz clic en Continuar.

Ahora verás varias opciones de verificación:

• Archivo HTML: Descarga un archivo HTML y súbelo a tu sitio mediante FTP o cPanel.
• Etiqueta HTML: Copia la etiqueta meta proporcionada y añádela a la sección <head> de la página de inicio de tu sitio.
• Google Analytics: Usa tu cuenta existente de Google Analytics para verificar tu sitio.
• Google Tag Manager: Usa tu cuenta existente de Google Tag Manager para verificar tu sitio.
• Proveedor de nombres de dominio: Edita tus registros de DNS para asociar tu sitio con Google.

Elige el método que te resulte más sencillo: Google proporciona instrucciones adicionales para cada uno. Una vez verificado tu sitio, puedes hacer clic en Core Web Vitals en el menú de la izquierda de Google Search Console.

Allí verás gráficos de las versiones para móviles y ordenadores de tu sitio, que te ofrecerán una visión general de su rendimiento.

Haz clic en Abrir informe para obtener más información. Aquí puedes consultar cómo se comporta cada una de tus URL en lo que respecta a Core Web Vitals.

Cuando hayas mejorado tu página, puedes volver a enviarla a Google y validar las correcciones.

3. Google Lighthouse

Google Lighthouse es una herramienta diseñada para que desarrolladores y propietarios de sitios mejoren la calidad de sus sitios web. Realiza pruebas de accesibilidad, rendimiento, SEO y mucho más.

Hay varias formas de ejecutar Google Lighthouse:

• Con las herramientas para desarrolladores de Chrome
• Con una extensión de Chrome
• Con un módulo de Node
• Con una interfaz de usuario (UI) web

En este tutorial, te mostraremos cómo usar las herramientas para desarrolladores de Chrome para consultar las Core Web Vitals de tu sitio en Google Lighthouse.

En el navegador Google Chrome, ve a tu sitio web. Haz clic con el botón derecho en cualquier parte de la página y selecciona Inspeccionar en las opciones que aparecen. Se abrirán varias herramientas que puedes explorar, pero tendrás que hacer clic en la pestaña Lighthouse.

Ahora selecciona el modo, el dispositivo y las categorías que quieras probar. Puedes seleccionar tantas categorías como quieras para obtener más información, pero para encontrar Core Web Vitals, asegúrate de marcar la casilla situada junto a Rendimiento. Haz clic en Analizar la carga de la página.

Cuando termine la auditoría, te mostrará tus Core Web Vitals, junto con otros datos y métricas sobre el rendimiento de tu sitio.

Asegúrate de mantener la ventana en primer plano mientras se cargan los resultados.

Cómo mejorar Core Web Vitals en WordPress

A estas alturas, deberías tener una buena idea del rendimiento de tu sitio web. A continuación, veamos cómo puedes mejorar las Core Web Vitals de tu sitio de WordPress.

1. Instala un plugin diseñado para Core Web Vitals

Una forma sencilla de mejorar el rendimiento es utilizar un plugin de Core Web Vitals para WordPress como Jetpack Boost.

Este plugin ha sido creado por Automattic, el equipo responsable de WordPress.com, así que puedes confiar en que funcionará perfectamente con tu sitio, temas y plugins.

¿Y lo mejor? ¡Es gratis!

Jetpack Boost te permite realizar tareas de optimización esenciales con solo activar unos cuantos botones. También ofrece puntuaciones de rendimiento al instante.

En el panel de administración de tu WordPress, ve a Plugins → Añadir nuevo plugin. Busca «Jetpack Boost» y haz clic en Instalar ahora → Activar. Se te pedirá que conectes tu cuenta de WordPress.com o que crees una gratis.

Después, ve a Jetpack → Boost. Aquí verás la puntuación de rendimiento de tu sitio.

A continuación, podrás activar cinco ajustes importantes:

• Optimizar la carga de CSS crítico
• Optimizar las imágenes para LCP
• Almacenar en caché las páginas del sitio
• Posponer el JavaScript no esencial
• Concatenar JS 
• Concatenar CSS
• CDN de imágenes 
• Guía de imágenes

Cuando hayas activado alguno o todos estos ajustes, haz clic en Actualizar para volver a calcular el rendimiento y ver las mejoras realizadas.

Veamos cada ajuste.

Optimizar la carga de CSS crítico

Antes de que un navegador pueda mostrar tu página a los visitantes, tiene que descargar y analizar todo el CSS de esa página. Si tus archivos CSS son grandes, esto puede llevar bastante tiempo y ralentizar tu sitio.

La generación de CSS crítico extrae el código estrictamente necesario para mostrar el contenido visible en la parte superior de la página. Da prioridad a este CSS para que el resto pueda cargarse en segundo plano.

Esto acelera enormemente el tiempo de carga y ayuda a mejorar tu puntuación de LCP.

Optimizar las imágenes para LCP

Este ajuste se centra específicamente en Largest Contentful Paint y optimiza las imágenes clave para que se carguen primero. Esto mejora tu puntuación y hace que tu página parezca más rápida en general.

Almacenar en caché las páginas del sitio

Cuando activas la caché, Jetpack almacena y ofrece contenido precargado a los visitantes que vuelven a tu sitio. Esto reduce los tiempos de carga, ya que tu servidor no tendrá que volver a generar el contenido desde cero.

Posponer el JavaScript no esencial

Esto hace que el código de JavaScript que no sea esencial de inmediato para el renderizado se ejecute después de que se cargue el resto de la página. Esto no solo ayuda a que el contenido visual de tu página se cargue más rápido, sino que también puede mejorar tus puntuaciones de INP y LCP.

Concatenar JS y concatenar CSS

La función de concatenar JS agrupa los scripts según su ubicación original y los minimiza para reducir el tiempo de carga del sitio y el número de solicitudes. Del mismo modo, la opción de concatenar CSS elimina el código innecesario de tu CSS —como espacios, sangrías y comentarios— para que se cargue más rápido.

CDN de imágenes

La CDN de imágenes de Jetpack cargará archivos de imagen de gran tamaño y los proporcionará a los visitantes desde servidores de WordPress ubicados por todo el mundo. Esto hará que las páginas se carguen más rápido, ya que tu servidor tendrá que trabajar menos.

Además, las imágenes cambiarán de tamaño y se servirán automáticamente a los visitantes según sus dispositivos y plataformas. Es una forma rápida y gratuita de mejorar el rendimiento de tu sitio de WordPress.

Guía de imágenes

La Guía de imágenes te ofrece una referencia visual del tamaño de los archivos de imagen mientras navegas por tu sitio. Identifica rápidamente las oportunidades de mejora y elige qué imágenes optimizar y cuáles dejar como están. Esto combina flexibilidad y automatización para quienes valoran tanto su tiempo como su autonomía creativa.

2. Elige un proveedor de hosting de alto rendimiento

El proveedor de hosting que elijas desempeña un papel importante en el rendimiento de tu sitio web.

Seleccionar un proveedor de alojamiento de confianza que ofrezca tiempos de respuesta rápidos del servidor, almacenamiento SSD y almacenamiento en caché a nivel de servidor puede marcar una gran diferencia en la velocidad de carga de tu sitio.

Algunos factores que debes tener en cuenta al elegir un proveedor de hosting son:

• Tiempos de respuesta rápidos del servidor. Busca un proveedor que garantice tiempos de respuesta bajos del servidor, idealmente inferiores a 200 ms.
• Almacenamiento SSD. Las unidades de estado sólido (SSD) ofrecen un acceso a los datos más rápido y una mayor fiabilidad que los discos duros tradicionales.
• Almacenamiento en caché a nivel de servidor. Los proveedores que ofrecen almacenamiento en caché a nivel de servidor pueden reducir la carga de tu servidor y aumentar la velocidad de tu sitio.

Además, elegir un proveedor de hosting con centros de datos cercanos a tu público objetivo puede reducir la latencia y mejorar la experiencia del usuario. Los servicios de hosting gestionado de WordPress pueden ofrecer un mejor rendimiento y optimización que las soluciones de hosting compartido, ya que están adaptados específicamente a sitios web de WordPress.

3. Utiliza un tema ligero y optimizado

Un tema bien optimizado contribuye a que el sitio web se cargue rápidamente. Para garantizar el mejor rendimiento, elige un tema minimalista orientado al rendimiento que evite funciones excesivas, código innecesariamente voluminoso o demasiadas solicitudes HTTP.

Aquí tienes algunos consejos prácticos para elegir el tema adecuado:

• Comprueba el sitio de demostración del tema. Analiza el rendimiento del sitio de demostración del tema con herramientas como Google PageSpeed Insights o GTMetrix. Esto puede darte una idea de cómo funcionará el tema en tu sitio.
• Busca funciones centradas en el rendimiento. Opta por temas que destaquen funciones relacionadas con el rendimiento, como código optimizado, un uso mínimo de JavaScript y compatibilidad con el diseño adaptable.
• Prueba el tema antes de decidirte. Instala el tema en un sitio de prueba y evalúa su rendimiento con los plugins y el contenido que quieras utilizar para asegurarte de que satisface tus necesidades.

Obtén más información sobre los temas de WordPress más rápidos para Core Web Vitals.

4. Optimiza las imágenes

Las imágenes representan una parte importante del tiempo de carga de tu sitio. Para optimizarlas, sigue estas prácticas recomendadas:

• Usa formatos de imagen adecuados. WebP, JPEG XR o AVIF ofrecen una mejor compresión y calidad que formatos más antiguos como JPEG y PNG. Convertir imágenes lleva mucho tiempo, pero mejora considerablemente el rendimiento. ¿Tienes poco tiempo? Jetpack Boost puede hacerlo por ti.
• Comprime y cambia el tamaño de las imágenes. Comprime tus imágenes para reducir su tamaño sin perder calidad. También deberías cambiar su tamaño a las dimensiones adecuadas para el diseño de tu sitio. Si tienes Jetpack Boost, esto se hace automáticamente por ti.
• Usa una CDN para servir imágenes. Una CDN como Jetpack CDN puede servir imágenes desde un servidor más cercano a tus usuarios, reduciendo la latencia y mejorando la velocidad de carga. Esta es otra herramienta incluida con Jetpack Boost — una de las muchas razones por las que es un plugin de rendimiento ideal para WordPress.

También es recomendable utilizar imágenes únicamente cuando aporten valor a tu contenido. De este modo, puedes reducir al mínimo el número de archivos innecesarios de tu sitio web.

5. Optimiza CSS y JavaScript

Los archivos CSS y JavaScript pueden influir considerablemente en la velocidad de carga de tu sitio. Para optimizarlos, sigue estas prácticas recomendadas:

• Minimiza y comprime los archivos CSS y JavaScript. Utiliza herramientas como Jetpack Boost para optimizar la carga de CSS y JavaScript, mejorando así la velocidad de carga.
• Combina e inserta en línea el CSS crítico y el JavaScript crítico. Combinar e insertar en línea el CSS crítico y el JavaScript crítico puede ayudar a reducir al mínimo el número de solicitudes HTTP y acelerar el tiempo de carga de tu sitio. Esta es una de las muchas funciones de Jetpack Boost.
• Utiliza atributos async o defer para los archivos de JavaScript no críticos. Añadir atributos async o defer a los archivos de JavaScript no críticos puede ayudar a reducir el bloqueo del renderizado. El atributo async permite descargar el script de forma asíncrona, mientras que el atributo defer retrasa la ejecución del script hasta que la página termina de analizarse. Puedes utilizar un plugin como Jetpack Boost para aplazar los archivos de JavaScript no esenciales.
• Elimina los recursos que bloquean el renderizado. Identifica los archivos CSS y JavaScript que bloquean el renderizado con una herramienta como Google PageSpeed Insights y elimínalos o sustitúyelos para reducir el tiempo que tarda en hacerse visible el contenido de tu sitio. Esto puede implicar eliminar plugins o scripts innecesarios, o buscar alternativas con un mejor rendimiento.

Como hemos visto, Jetpack Boost te permite activar estos ajustes con solo unos clics.

6. Implementa optimizaciones en el servidor

Las optimizaciones en el servidor pueden mejorar enormemente el rendimiento de tu sitio. Sigue estas prácticas recomendadas para optimizar la configuración del servidor:

• Activa la compresión GZIP o Brotli. Activar la compresión GZIP o Brotli en tu servidor puede reducir el tamaño de los archivos y acelerar las transferencias. Puedes activar la compresión mediante los archivos de configuración de tu servidor.
• Configura HTTP/2 o HTTP/3 para conexiones más rápidas. HTTP/2 y HTTP/3 ofrecen un rendimiento mejorado con respecto al protocolo HTTP/1.1 anterior, gracias, entre otras cosas, a la multiplexación, la compresión de cabeceras y el server push. Consulta con tu proveedor de hosting para asegurarte de que admite estos protocolos y actívalos si es posible.
• Configura el almacenamiento en caché a nivel de servidor y las cabeceras de control de caché. Configurar el almacenamiento en caché a nivel de servidor y las cabeceras de control de caché puede ayudar a mejorar el rendimiento al reducir la carga del servidor. Puedes hacerlo modificando los archivos de configuración de tu servidor o utilizando un plugin como WP Super Cache.
• Usa una configuración de proxy inverso (por ejemplo, NGINX o Varnish). Una configuración de proxy inverso puede ayudar a mejorar el rendimiento y la escalabilidad de tu sitio al almacenar contenido en caché y distribuir la carga entre varios servidores. Consulta con tu proveedor de hosting o el administrador del servidor para determinar cuál es la mejor solución de proxy inverso para tus necesidades.

Muchos proveedores de hosting de confianza ya tienen soluciones de almacenamiento en caché implementadas en sus servidores. 

7. Usa una red de distribución de contenidos (CDN)

Una CDN puede mejorar significativamente la velocidad de carga de tu sitio al servir recursos estáticos, como imágenes, CSS y archivos de JavaScript, desde una red global de servidores. Esto reduce la latencia al entregar estos recursos desde un servidor geográficamente más cercano a cada visitante.

Para implementar una CDN, sigue estos pasos:

• Selecciona un proveedor de CDN compatible con WordPress. Elige un proveedor de CDN que se integre fácilmente con WordPress. Si ya has optado por usar Jetpack Boost por sus otras funciones para mejorar el rendimiento, tendrás acceso inmediato a la solución de Jetpack: una potente CDN de imágenes.
• Configura tu CDN para servir recursos estáticos. Una vez que hayas seleccionado un proveedor de CDN, configúralo para servir los recursos estáticos de tu sitio, como imágenes, CSS y archivos de JavaScript. Normalmente, esto puede hacerse desde el panel del proveedor o mediante un plugin. Si usas Jetpack Boost, esto se hace automáticamente.
• Activa el almacenamiento en caché y las optimizaciones a nivel de CDN. Algunos proveedores de CDN ofrecen optimizaciones adicionales de rendimiento, como la optimización de imágenes, la minificación y la compresión. Asegúrate de activar estas funciones para aprovechar al máximo tu CDN.

Después de implementar una CDN, deberías ver una mejora significativa en las puntuaciones de Core Web Vitals de tu sitio.

8. Optimiza tu base de datos de WordPress

Optimizar la base de datos de WordPress ayuda a mejorar el rendimiento al eliminar datos innecesarios y reducir el tamaño de la base de datos. 

Estas son algunas prácticas recomendadas para optimizar tu base de datos:

• Limpia los datos innecesarios. Elimina de tu base de datos los datos que no necesites, como las revisiones, los comentarios de spam y los datos transitorios. Puedes hacerlo manualmente con una herramienta como phpMyAdmin o mediante un plugin.
• Automatiza el mantenimiento de la base de datos. Usa un plugin para automatizar las tareas de limpieza y optimización de la base de datos y asegurarte de que se mantenga ligera y eficiente.
• Haz copias de seguridad de tu base de datos con regularidad. Haz siempre una copia de seguridad de tu base de datos antes de realizar cualquier optimización para evitar la pérdida de datos. Puedes usar un plugin como Jetpack VaultPress Backup para hacer copias de seguridad de tu base de datos en tiempo real.

Es recomendable revisar tu base de datos y eliminar los datos innecesarios cada pocos meses, especialmente si publicas contenido nuevo con regularidad.

9. Usa un plugin de almacenamiento en caché centrado en el rendimiento

Los plugins de almacenamiento en caché pueden mejorar drásticamente el rendimiento de tu sitio al guardar versiones estáticas de tus páginas y mostrárselas a los visitantes en lugar de generarlas con cada solicitud.

Para implementar el almacenamiento en caché en tu sitio de WordPress, esto es lo que tienes que hacer:

• Instala un plugin de caché. Instala un plugin centrado en el rendimiento, como WP Super Cache, diseñado para funcionar a la perfección con WordPress y mejorar la velocidad de tu sitio.
• Configura el almacenamiento en caché de páginas, del navegador y de objetos. Puedes hacerlo desde la página de ajustes del plugin; encontrarás instrucciones detalladas en la documentación del plugin.
• Activa la minificación, la concatenación y el aplazamiento de CSS y JavaScript. Algunos plugins de almacenamiento en caché, como WP Super Cache, también ofrecen funciones de optimización adicionales, como la minificación, la concatenación y el aplazamiento de archivos de CSS y JavaScript. Activa estas funciones para mejorar aún más el rendimiento de tu sitio.

Ten en cuenta que Jetpack Boost también ofrece una función de almacenamiento en caché que puedes activar con un botón de alternancia.

10. Optimiza las fuentes web

Las fuentes web pueden influir considerablemente en el rendimiento y la experiencia de usuario de tu sitio. Para optimizarlas, tendrás que hacer lo siguiente:

• Limita el número de variantes de fuente. Cada variante de fuente aumenta el peso de tu sitio, así que utiliza únicamente los pesos y estilos de fuente necesarios.
• Usa la propiedad «font-display». Esta propiedad de CSS controla cómo se representan las fuentes mientras se cargan, lo que ayuda a evitar cambios de diseño y mejora la experiencia de usuario. Establece la propiedad «font-display» en «swap» o «fallback» para asegurarte de que el texto siga visible mientras se cargan las fuentes.
• Sirve las fuentes localmente o desde una CDN fiable. Alojar las fuentes localmente o utilizar una CDN fiable puede ayudar a mejorar el rendimiento al reducir el número de solicitudes externas y garantizar una entrega más rápida de las fuentes.

11. Optimiza los scripts y plugins de terceros

Los scripts y plugins de terceros pueden afectar negativamente al rendimiento de tu sitio. Esto es lo que tienes que hacer para optimizarlos:

• Revisa tus plugins. Revisa periódicamente los plugins instalados y elimina los que no sean necesarios o ralenticen tu sitio. Puedes hacerlo desactivando los plugins uno a uno y comprobando el rendimiento de tu sitio con una herramienta como GTMetrix o Google PageSpeed Insights.
• Aplaza o carga de forma asíncrona los scripts de terceros no esenciales. Usa los atributos defer o async para cargar scripts de terceros no esenciales —como widgets de redes sociales o scripts de analítica— después de que se haya cargado el contenido principal. Aplazar el JavaScript no esencial puede hacerse con solo unos clics mediante un plugin como Jetpack Boost.
• Sustituye los plugins lentos por alternativas ligeras. Si un plugin concreto está causando problemas de rendimiento, considera sustituirlo por una alternativa más ligera que ofrezca una funcionalidad similar.

Antes de añadir un plugin nuevo, siempre es buena idea leer las reseñas de otros usuarios. Si la herramienta ha provocado tiempos de carga más lentos, querrás evitar instalarla. 

12. Soluciona los problemas de CLS

Cumulative Layout Shift (CLS) mide la estabilidad visual de tu sitio; cuanto más bajas sean las puntuaciones, más estable será el diseño. Así puedes solucionar los problemas de CLS:

• Establece dimensiones explícitas para las imágenes, los vídeos y los iframes. Asigna atributos de anchura y altura a las imágenes, los vídeos y los iframes para reservar espacio en el diseño y evitar que el contenido se desplace mientras se cargan estos elementos.
• Evita insertar contenido encima del contenido existente. Insertar contenido dinámicamente encima del contenido existente puede provocar desplazamientos del diseño. En su lugar, utiliza técnicas como superposiciones o barras laterales para mostrar contenido adicional.
• Usa propiedades de contención de CSS y la propiedad «transform». Aplica propiedades de contención de CSS, como «contain», y utiliza la propiedad «transform» para aislar los desplazamientos del diseño y evitar que afecten a otros elementos de la página.

Cuando hayas completado estas tareas, vuelve a realizar una prueba en PageSpeed Insights para comprobar si ha mejorado tu puntuación de CLS.

13. Implementa la precarga de DNS y la conexión anticipada

La precarga de DNS y la conexión anticipada ayudan a establecer conexiones tempranas con dominios de terceros importantes, lo que reduce el tiempo necesario para obtener los recursos. Para implementar estas técnicas, sigue estos pasos:

• Usa etiquetas de enlace «dns-prefetch» y «preconnect». Añade etiquetas de enlace «dns-prefetch» y «preconnect» a la cabecera de tu sitio para establecer conexiones tempranas con recursos externos esenciales, como fuentes web, CDN y servicios de analítica.
• Da prioridad a las conexiones con recursos externos esenciales. Asegúrate de realizar la precarga y la conexión anticipada de los recursos externos más importantes para optimizar el rendimiento. Puedes usar una herramienta como Lighthouse para identificar los recursos esenciales y, después, hacerlo manualmente o mediante un plugin de WordPress.

Estas tareas requieren ciertos conocimientos técnicos, así que puede ser buena idea usar un plugin de WordPress o contratar a un desarrollador.

14. Optimiza el tiempo hasta el primer byte (TTFB)

TTFB mide el tiempo que tarda el navegador de un visitante en recibir el primer byte de datos de tu servidor. Para optimizar el TTFB, sigue estas prácticas recomendadas:

• Implementa la caché del servidor y la caché de opcode. Activa la caché del servidor y la caché de opcode (por ejemplo, mediante OPcache o APCu) para reducir el tiempo que tarda tu servidor en procesar y entregar el contenido.
• Usa PHP-FPM o HHVM para mejorar el procesamiento de PHP. PHP-FPM y HHVM son motores alternativos de procesamiento de PHP que pueden ofrecer un rendimiento superior al intérprete estándar de PHP. Consulta a tu proveedor de hosting para comprobar si admite estos motores y actívalos si es posible.
• Optimiza tu base de datos mediante una caché de objetos como Redis o Memcached. Implementar una caché de objetos como Redis o Memcached puede mejorar el rendimiento de la base de datos y reducir el TTFB. Consulta a tu proveedor de hosting o al administrador del servidor para determinar cuál es la mejor solución de caché de objetos para tus necesidades.

Como se ha mencionado antes, puedes comprobar el TTFB mediante una herramienta como Lighthouse y PageSpeed Insights.

15. Usa el análisis de las cadenas de solicitudes críticas

Analizar las cadenas de solicitudes críticas de tu sitio puede ayudarte a identificar oportunidades para optimizar el orden de carga de los recursos y minimizar los recursos que bloquean el renderizado. Para realizar un análisis de las cadenas de solicitudes críticas, sigue estos pasos:

• Analiza tu sitio con herramientas como Lighthouse o WebPageTest. Estas herramientas pueden ayudarte a identificar las cadenas de solicitudes críticas y destacar posibles problemas de rendimiento.
• Optimiza el orden de carga de los recursos esenciales. Según el análisis, reorganiza el orden de carga de los recursos esenciales para minimizar los recursos que bloquean el renderizado y mejorar el rendimiento. Esto puede implicar ajustar la ubicación de los archivos CSS y JavaScript, usar el atributo «preload» o implementar el server push de HTTP/2.

Una vez más, estas tareas requieren conocimientos técnicos, así que querrás utilizar un plugin o contar con un desarrollador.

16. Implementa el server push y la precarga

El server push y la precarga son técnicas que pueden ayudar a mejorar el rendimiento de tus recursos esenciales. Así puedes implementarlas:

• Usa el server push de HTTP/2. El server push de HTTP/2 permite enviar recursos esenciales al navegador antes de que los solicite, lo que mejora el rendimiento de carga de tu sitio. Para implementarlo, consulta a tu proveedor de hosting o al administrador del servidor, ya que los pasos varían según el servidor.
• Implementa etiquetas de enlace «preload». Añade etiquetas de enlace «preload» para recursos prioritarios, como fuentes web, archivos CSS esenciales e imágenes importantes. Puedes hacerlo manualmente añadiendo las etiquetas a la cabecera de tu sitio o mediante un plugin.

17. Mejora los tiempos de respuesta del servidor

Optimizar los tiempos de respuesta del servidor puede mejorar considerablemente el rendimiento de tu sitio y la experiencia del usuario. Esto es lo que debes hacer para optimizarlos:

• Supervisa los tiempos de respuesta del servidor con herramientas como New Relic o Datadog. Estas herramientas de supervisión pueden ayudarte a controlar los tiempos de respuesta del servidor e identificar posibles cuellos de botella o problemas de rendimiento.
• Identifica y soluciona los cuellos de botella. Investiga los cuellos de botella identificados por tus herramientas de supervisión y soluciónalos según corresponda. Esto puede implicar actualizar el hardware del servidor, optimizar la base de datos o ajustar la configuración del servidor.

18. Optimiza las tareas cron de WordPress

Las tareas cron de WordPress son tareas programadas que se ejecutan en segundo plano para realizar acciones como actualizar plugins, publicar entradas programadas y enviar notificaciones por correo electrónico.

Optimizar las tareas cron puede ayudar a mejorar el rendimiento de tu sitio. Así puedes empezar:

• Desactiva el sistema cron predeterminado de WordPress. El sistema cron predeterminado de WordPress depende de los visitantes para activar las tareas programadas, lo que puede resultar ineficiente y ralentizar tu sitio. Desactiva el sistema predeterminado añadiendo la siguiente línea al archivo wp-config.php de tu sitio: define(‘DISABLE_WP_CRON’, true);
• Utiliza en su lugar una tarea cron real en el servidor. Sustituye el sistema cron predeterminado de WordPress por una tarea cron real en el servidor, que se ejecute independientemente de los visitantes de tu sitio. Puedes configurarla desde el panel de control de tu proveedor de hosting o consultando al administrador de tu servidor.
• Programa las tareas que consumen muchos recursos durante los periodos de poco tráfico. Para minimizar el impacto de las tareas que consumen muchos recursos en el rendimiento de tu sitio, prográmalas para que se ejecuten durante los periodos de poco tráfico, como por la noche o los fines de semana.

19. Considera técnicas avanzadas de almacenamiento en caché

Las técnicas avanzadas de almacenamiento en caché pueden mejorar aún más el rendimiento de tu sitio al optimizar la forma en que se almacena y se entrega el contenido.

Para implementar técnicas avanzadas de almacenamiento en caché, sigue estas prácticas recomendadas:

• Implementa Edge Side Includes (ESI) para almacenar fragmentos en caché. ESI es una técnica que permite almacenar por separado en caché fragmentos individuales de una página web, lo que permite un almacenamiento en caché más eficiente y preciso. Para implementar ESI, consulta a tu proveedor de hosting o al administrador del servidor, ya que la configuración varía según la configuración de tu servidor.
• Utiliza cabeceras de almacenamiento en caché HTTP como «stale-while-revalidate» y «stale-if-error». Estas cabeceras pueden mejorar la eficiencia de la caché al permitir que el navegador muestre contenido obsoleto mientras obtiene contenido actualizado en segundo plano o en caso de error. Para utilizar estas cabeceras, actualiza la configuración de tu servidor o consulta a tu proveedor de hosting o al administrador del servidor para obtener ayuda.

Preguntas frecuentes sobre las Core Web Vitals de WordPress

¿Sigues buscando información sobre las Core Web Vitals en WordPress? Respondamos a algunas preguntas frecuentes.

¿Afectan las Core Web Vitals al SEO en WordPress?

Sí, las Core Web Vitals pueden afectar al SEO de tu sitio de WordPress. De hecho, Google convirtió las Core Web Vitals en un factor de posicionamiento, lo que significa que las puntuaciones se tienen en cuenta cuando el motor de búsqueda determina el orden en que los sitios web se posicionan para determinadas palabras clave.

Esto se debe a que las Core Web Vitals son un excelente indicador de la experiencia del usuario. Si un sitio tarda mucho en cargar contenido valioso o se mueve demasiado mientras alguien lo utiliza, la experiencia puede verse gravemente afectada.

Como Google quiere ofrecer los resultados de mayor calidad a quienes realizan búsquedas, el rendimiento y la experiencia de usuario de tu sitio son importantes para Google.

¿Afectan las Core Web Vitals a la experiencia de usuario en WordPress?

Aunque las Core Web Vitals no afectan exactamente a la experiencia de usuario, miden la calidad de dicha experiencia.

Imagina que visitas tu blog favorito o una tienda online y la imagen principal tarda mucho en cargarse. Quizá haces clic en un botón y durante varios segundos no parece ocurrir nada. O estás desplazándote por la página y, de repente, esta salta y pierdes por completo la referencia del lugar en el que estabas.

Si te ocurriera cualquiera de esas cosas, sería frustrante. Incluso podrías abandonar el sitio por completo e irte a otro lugar. Como mínimo, tu opinión sobre la marca se vería afectada.

Precisamente por eso las Core Web Vitals están vinculadas a la experiencia de usuario de tu sitio. Unos resultados deficientes de Core Web Vitals indican que resulta difícil interactuar con tu contenido y participar en él, algo que nunca querrás, independientemente del tipo de sitio que gestiones.

¿Cómo puedo optimizar fácilmente mis Core Web Vitals ahora mismo?

La forma más rápida y sencilla de optimizar tus Core Web Vitals en WordPress es utilizar un plugin como Jetpack Boost. Es el mejor plugin de velocidad para WordPress, diseñado específicamente para abordar Core Web Vitals.

Con solo activar algunos ajustes, puedes optimizar la carga de CSS, posponer JavaScript no esencial, activar la carga diferida de imágenes y mucho más. 

¡Y configurarlo no podría ser más sencillo! Solo tienes que instalar y activar el plugin, realizar una prueba de velocidad inicial y activar los interruptores de cada ajuste que quieras habilitar. ¡Eso es todo!

Independientemente de tu nivel de experiencia o del tipo de sitio que tengas, puedes utilizar Jetpack Boost para optimizar rápida y fácilmente tus Core Web Vitals.

¿Estás listo para dar el primer paso hacia una mejor experiencia de usuario y un mejor posicionamiento en los motores de búsqueda? Empieza a utilizar Jetpack Boost.