Guía PageSpeed Insights y Core Web Vitals: qué es y cómo aprobarlo

Guía PageSpeed Insights

Te doy la bienvenida a la definitiva guía PageSpeed Insights y Core Web Vitals: qué son y cómo aprobarlos. En esta lección del Curso de Optimización WordPress aprenderemos en detalle cómo mejorar las notas de PageSpeed Insights y optimizar los Core Web Vitals en WordPress para obtener un 100/100.

Recuerda: Google da preferencia por las webs que tienen una puntuación alta en PageSpeed y cargan rápidamente.

Acompáñame en esta guía paso a paso para mejorar las notas y conseguir un 100 en PageSpeed Insights. Durante el camino, descubriremos valiosas tareas y estrategias para mejorar tus resultados. ¡Comencemos!

¿Qué es PageSpeed Insights?

PageSpeed Insights es una herramienta gratuita de Google que te ayuda a medir y mejorar la velocidad de carga de tu sitio web. La herramienta analiza tu sitio web en busca de posibles mejoras en el rendimiento y te proporciona recomendaciones para mejorar tu puntuación PageSpeed.

Al realizar un análisis en PageSpeed Insights obtendrás un informe detallado que evalúa diferentes aspectos de tu sitio web, incluyendo los Core Web Vitals y los Web Vitals. Estas métricas te ayudan a comprender cómo se está comportando tu web en términos de velocidad de carga, capacidad de respuesta y estabilidad visual.

PageSpeed Insights clasifica los sitios web en una escala de 0 a 100, donde 100 es la puntuación más alta. Una puntuación de 80 o más se considera “buena” y una puntuación de 90 o más se considera “excelente”. Sin embargo, es importante tener en cuenta que la puntuación de PageSpeed Insights no es el único factor que Google tiene en cuenta a la hora de clasificar las web en los resultados de búsqueda. Otros factores, como la relevancia del contenido y la calidad de la experiencia de usuario, también son importantes.

En PageSpeed Insights una nota de 80 se considera “buena” y una nota de 90 se considera “excelente”.

En esta guía PageSpeed Insights te enseñaré cómo interpretar los resultados de esta herramienta y qué medidas tomar para mejorar las notas en PageSpeed, para que tus resultados se parezcan lo más posible a los resultados de mi web:

Estas son las notas de PageSpeed de mi web en versión móvil después de haber optimizado WordPress al 100% con todos los consejos y trucos que explico con detalle en el Curso de Optimización WordPress.

Conseguir un 100 en PageSpeed Insights es posible.

¿Cómo se usa PageSpeed Insights?

Para usar PageSpeed Insights, simplemente introduce la URL de tu sitio web en la herramienta y haz clic en “Analizar”. PageSpeed Insights analizará tu sitio web y te proporcionará una puntuación en una escala de 0 a 100. Una puntuación más alta indica que tu sitio web es más rápido.

Una vez que se complete el análisis, PageSpeed Insights generará un informe con las notas y puntuaciones correspondientes a diferentes aspectos del rendimiento de tu web. Debemos prestar especial atención a las métricas relacionadas con las Core Web Vitals, como el Largest Contentful Paint (LCP), el First Input Delay (FID) y el Cumulative Layout Shift (CLS).

No te preocupes que en seguida te explicaré qué son y cómo mejorarlas.

El informe de PageSpeed Insights también te proporcionará una lista de oportunidades de mejora y diagnósticos. Estas sugerencias te ayudarán a identificar qué debes optimizar en concreto en tu página web.

Ahora vamos a aprender qué son y cómo mejorar las Core Web Vitals de PageSpeed Insights.

Métricas de PageSpeed Insights: Core Web Vitals y Web Vitals

Antes de adentrarnos en los detalles, es importante comprender la diferencia entre ambos. Las Core Web Vitals se centran en tres aspectos clave:

• Largest Contentful Paint (LCP)
  Renderizado del mayor elemento con contenido
• First Input Delay (FID)
  Demora de la primera entrada
• Cumulative Layout Shift (CLS)
  Cambios de diseño acumulados

Estas métricas nos ayudan a evaluar la velocidad de carga, la capacidad de respuesta y la estabilidad visual de nuestro sitio web.

Por otro lado, los Web Vitals engloban métricas adicionales como:

• First Contentful Paint (FCP)
  Primer renderizado con contenido
• Time to First Byte (TTFB)
  Tiempo hasta el primer byte
• Total Blocking Time (TBT)
  Tiempo total de bloqueo
• Time to Interactive (TTI)
  Tiempo de interacción

Estas métricas nos proporcionan una visión más completa del rendimiento de nuestro sitio y nos ayudan a identificar áreas de mejora.

Core Web Vitals PageSpeed Insights

Largest Contentful Paint (LCP): Renderizado del mayor elemento con contenido

El Largest Contentful Paint (LCP), también conocido como despliegue del contenido más extenso o renderizado del mayor elemento con contenido, es una métrica esencial que evalúa el tiempo que tarda en cargar y renderizar el mayor elemento con contenido visible en la ventana de visualización desde el inicio de la carga de la página (ATF).

En el ejemplo que te muestro abajo verás que en mi ATF el renderizado del mayor elemento con contenido (LCP) es el bloque de texto que te indico con la flecha.

Los tipos de contenido considerados en el LCP son:

• Bloques de texto <p> y/o encabezados <h1>, <h2>, etc.
• Bloques de imágenes <img>, <picture> o <svg>
• Bloques de vídeo como <video>
• Un elemento o sección con una imagen de fondo cargada con la función url()

Mejorar el LCP es una oportunidad clave para mejorar las notas en PageSpeed Insights y brindar a tus visitantes una experiencia inmejorable.

Si deseas acelerar el rendimiento de tu sitio y ofrecer una experiencia de usuario excepcional, sigue leyendo porque voy a explicarte cómo mejorar el LCP.

¿Qué es una buena puntuación LCP?

Una buena puntuación LCP es aquella por debajo de los 2,5 segundos, esta es una métrica de las más importantes en las Core Web Vitals y si sigues los pasos de esta guía PageSpeed Insights aprenderás cómo mejorarla.

Tiempo LCP (segundos)	Color / Resultado
0 – 2,5	Verde – Rápido
2,5 – 4	Naranja – Mejorable
Más de 4	Rojo – Lenta

Cómo mejorar Renderizado del mayor elemento con contenido (LCP)

Antes de empezar a mejorar el renderizado del mayor elemento con contenido (LCP) debemos entender qué le afecta principalmente:

1. Tiempos de respuesta del servidor lentos
   Esto se debe a tener la web alojada en un hosting lento y no optimizado, ya sabes que yo uso y recomiendo Siteground
2. JavaScript y CSS que bloquean la renderización
   Sucede si no has optimizado tus archivos CSS y JavaScript correctamente como te enseño en la guía definitiva de WP Rocket
3. Tiempos de carga altos de recursos
   Además de los archivos CSS Y JavaScript también debemos optimizar las imágenes y fuentes de la web

Ahora que sabemos qué factores influyen negativamente en el LCP aquí tienes algunas recomendaciones prácticas para mejorarlo:

1. Usa un buen hosting
   No me cansaré de repetirlo: el hosting es el principal factor del rendimiento de una web. Elige un hosting bueno y optimizado para WordPress, como Siteground.
2. Usa un tema ligero y optimizado
   Después del hosting el tema instalado en WordPress es el segundo factor más importante del rendimiento de una web. Usa un tema ligero, gratuito y basado en Gutenberg como Astra.
3. Optimiza las imágenes
   Redimensiona, comprime tus imágenes y utiliza formatos de imagen modernos, como el WebP. Además es muy importante considerar el de la carga diferida (lazy loading) para cargar imágenes solo cuando sean visibles.
4. Optimiza las fuentes:
   Reduce el número de fuentes que usa tu, alójalas localmente y aplícales la etiqueta swap para priorizar su carga.
5. Prioriza el contenido visible
   Asegúrate de que el mayor elemento con contenido relevante para los usuarios sea cargado y renderizado rápidamente.
   Si el bloque es un texto recuerda aplicar la swap a las fuentes de tu web, tal y como te enseño en la lección de optimizar fuentes.
   Si el bloque es una imagen recuerda excluirla de la carga difereida (lazy loading), tal y como te enseño en su lección correspondiente.
6. Mejora el rendimiento del servidor
   Optimiza la respuesta del servidor para reducir el tiempo de carga usando una política de caché y la compresión y optimización de archivos CSS y JavaScript con WP Rocket. También ayudará muchísimo el uso de un CDN.

Recuerda, un LCP rápido contribuye a una experiencia de usuario fluida y atractiva. Sigue estos consejos y estarás en el camino correcto para mejorar el rendimiento de tu sitio y obtener mejores notas en PageSpeed Insights. ¡Tu página web será más rápida y tus visitantes te lo agradecerán!

Mantén el ATF lo más minimalista y sencillo posible, cuantos menos bloques y elementos aparezcan en el ATF mejor será el LCP: despliegue del contenido más extenso de tu WordPress.

¡No pierdas tiempo y comienza a mejorar tu Largest Contentful Paint (LCP) hoy mismo!

First Input Delay (FID): Demora de la primera entrada

Google está adoptando una nueva métrica para medir la capacidad de respuesta de los sitios, Interaction to Next Paint (INP), que sustituirá a FID como Core Web Vital en marzo del 2024.

El First Input Delay (FID), también conocido como demora de la primera entrada, es una métrica crucial que afecta directamente la interacción del usuario con tu sitio web. Se refiere al tiempo que transcurre desde que un usuario realiza una acción, como hacer clic en un botón o enlace, hasta que el navegador responde a esa interacción.

En resumen, es el tiempo que debe esperar el usuario para que tu sitio web responda después de hacer clic en algo.

¿Qué es una buena puntuación FID?

Es importante para proporcionar una buena experiencia de usuario conseguir tener un First Input Delay (FID) de 100 milisegundos o menos, pero no te preocupes que en esta guía de PageSpeed Insights te explico cómo conseguirlo.

Tiempo FID (segundos)	Color / Resultado
0 – 1,8	Verde – Rápido
1,8 – 3	Naranja – Mejorable
Más de 3	Rojo – Lenta

Cómo mejorar First Input Delay (FID)

Ahora que ya sabemos que es y lo importante que es para la experiencia de usuario vamos a aprender cómo mejorar el FID y asegurarnos de que los usuarios no tengan que esperar para interactuar con tu contenido:

1. Usa un buen hosting
   No me cansaré de repetirlo: el hosting es el principal factor del rendimiento de una web. Elige un hosting bueno y optimizado para WordPress, como Siteground.
2. Usa un tema ligero y optimizado
   Después del hosting el tema instalado en WordPress es el segundo factor más importante del rendimiento de una web. Usa un tema ligero, gratuito y basado en Gutenberg como Astra.
3. Usa un maquetador optimizado
   Evita a toda costa el uso de maquetadores como WP Bakery, Elementor, Divi, Thrive Architect o Visual Composer. Son maquetadores muy pesados que usan una cantidad desorbitada de JavaScript.
   Usa Spectra, un maquetador ligero y gratuito basado en Gutenberg.
4. Reduce el impacto del código de terceros
   Todos los scripts que no están alojados en tu servidor perjudican gravemente el rendimiento de tu web y empeorarán tu FID, además los scripts de terceros no los podremos optimizar.
   Puedes aprender a a identificar scripts de terceros en la lección sobre cómo analizar WordPress con GTMetrix.
5. Retrasa la ejecución de JavaScript
   Al activar esta opción en tu web retrasas la carga de JavaScript hasta que el usuario interactue con tu web (hacer scroll, hacer clic, etc.), esto mejora considerablemente el FID.
   Aprende como retrasar la ejecucción de JavaScript de forma sencilla en la guía definitiva de WP Rocket
6. Reduce el uso de JavaScript de tu web
   El excesivo uso de JavaScript puede deberse a muchos factores como no hacer uso de una tema o maquetador optimizado y ligero, uso de excesivo de pop-up o demasiadas funcionalidades añadidas a la web mediante plugins.
7. Usa un CDN
   Un CDN distribuye tu contenido en servidores ubicados en diferentes regiones, lo que reduce la latencia y mejora la carga de tu sitio.
   En la guía de Bunn.net el mejor CDN para WordPress te explico cómo configurarlo y porqué es el mejor y más económico.

Si necesitas ayuda para migrar tu web a Astra & Spectra puedes ponerte en contacto conmigo. ¡Ofrezco un servicio de migración de diseño 100% a Astra & Spectra, con el cual aprobarás el examen de Google PageSpeed seguro! Muchos de mis clientes lo han contratado y han quedado encantados con el resultado.

Recuerda que optimizar el FID es un paso importante en tu camino hacia la optimización web y conseguir 100 en PageSpeed Insights. ¡Ponte manos a la obra y mejora la respuesta de tu web para que tus usuarios tengan una buena experiencia! Si quieres más consejos y detalles sobre cómo mejorar notas en PageSpeed no dudes en seguir leyendo esta guía PageSpeed Insights.

Interaction to Next Paint (INP)

Google está adoptando una nueva métrica para medir la capacidad de respuesta de los sitios, Interaction to Next Paint (INP), que sustituirá a FID como Core Web Vital en marzo del 2024.

Cuando hablamos de INP, nos referimos al tiempo que transcurre desde que un usuario interactúa con tu página web hasta que se muestra la próxima parte visible de la página. En otras palabras, es el lapso que el usuario debe esperar después de hacer clic en algún enlace o botón antes de que aparezca el nuevo contenido en la pantalla.

Si tu INP es lento los usuarios pueden sentirse frustrados y abandonar tu sitio en busca de otra web que responda y muestre el contenido más rápido. Y así es como aumenta la tasa de rebote.

¿Qué es una buena puntuación INP?

Una buena puntuación INP es aquella por debajo de los 200 milisegundos y debemos esforzarnos en mejorarlo para reducir la tasa de rebote siguiendo los consejos de esta guía Core Web Vitals.

Tiempo INP (milisegundos)	Color / Resultado
0 – 200	Verde – Rápido
200 – 500	Naranja – Mejorable
Más de 500	Rojo – Lenta

Cómo mejorar Interaction to Next Paint (INP)

Para no repetirme demasiado debes seguir los mismos consejos anteriores para mejorar el FID:

1. Hosting recomendable
2. Tema optimizado
3. Maquetador optimizado
4. Retrasar la ejecución de JavaScript
5. Minimizar el uso de JavaScript en tu web
6. Usa un CDN
7. Minimizar el tamaño del DOM
   Algo solo conseguiremos cambiando el tema y maquetador instalado en WordPress por uno recomendando

Cumulative Layout Shift (CLS): Cambios de diseño acumulados

Ahora nos enfocaremos en el Cumulative Layout Shift (CLS) o, como lo llamamos en términos más amigables: Cambios de diseño acumulados.

¿Qué significa esto? Imagina que estás navegando por una página web y, justo cuando te dispones a hacer clic en un enlace, ¡zas! ¡El contenido se mueve y terminas tocando otra cosa por accidente! ¡No existe nada más frustrante! El CLS mide precisamente esos cambios de diseño inesperados que afectan la experiencia del usuario.

Recuerda que un CLS bajo contribuye no solo mejorar las notas en PageSpeed Insights, sino también a mejorar la experiencia y satisfacción de los usuarios que navegan por nuestra web, potenciando así el porcentaje de conversión. Así que sigue leyendo para aprender cómo mejorar el CLS en WordPress.

¿Qué es una buena puntuación CLS?

Es importante para proporcionar una buena experiencia de usuario conseguir tener un Cumulative Layout Shift (CLS) por debajo de 0,1, pero no te preocupes que en esta guía de PageSpeed Insights te explico cómo conseguirlo.

Puntuación CLS	Color / Resultado
0 – 0,1	Verde – Rápido
0,1 – 0,25	Naranja – Mejorable
Más de 0,25	Rojo – Lenta

Cómo mejorar Cambios de diseño acumulados (CLS)

Para mejorar los Cambios de diseño acumulados (CLS) debes seguir los siguientes consejos:

1. Siempre incluye los atributos width y height en las imágenes y vídeos.
   De esta forma conseguimos que el navegador pueda asignar el espacio que ocupará el bloque de imagen incluso antes de que la cargue.
2. Evita el uso de animaciones
   Las animaciones, que tanto se pusieron de moda y aún siguen presentes en muchas webs, no aportan tantos aspectos positivos como se cree en realidad. Evita la inmediatez de contenido, distrae e incluso, en algunos casos, puede hasta marear al usuario. Se minimalista y prioriza la carga de contenido por encima de todo.
3. ¡Cuidado con los popups!
   Una de las acciones que más perjudica al CLS y a la navegación en la web son los popups insistentes y exigentes. No agobies al usuario, ¡si tan solo lleva menos de 1 segundo en tu web no va a querer suscribirse a tu newsletter! Lo único que vas a conseguir es que se enfade y se vaya por donde ha venido por no dejarle navegar ni interactuar libremente con tu página web, además de perjudicar severamente a los cambios de diseño acumulados (CLS). Puedes seguir los siguientes consejos:
   • Haz que el popup se muestre cuando el usuario haya visitado, por ejemplo, el 30% del contenido de la página.
   • Haz que el popup cargue a partir de los 3 segundos, si tu web carga en menos de 2 segundo, por supuesto.
4. Optimiza las fuentes
   Si no optimizamos correctamente las tipografías y les aplicamos la característica swap en propiedad font-display la descarga y renderización de estas puede provocar cambios en el diseño acumulado. Visita la guía sobre cómo optimizar fuentes para aprender a aplicar correctamente la característica swap.

Recuerda, ¡un CLS bajo es la clave para una navegación sin estrés y una página que brilla en las métricas de PageSpeed Insights! No hagas en tu página lo que detestas que te ocurra en otros sitios web cuando los visites.

Recuerda que la optimización web es un proceso continuo. A medida que implementes las estrategias y realices mejoras en tu web, te acercarás cada vez más a un rendimiento óptimo y a conseguir un 100 en PageSpeed. ¡Sigue leyendo para obtener más información sobre cómo aprobar el análisis de PageSpeed Insights y optimizar tu web al máximo!

Web Vitals

First Contentful Paint (FCP): Primer renderizado con contenido

En esta sección aprenderemos qué es y cómo mejorar First Contentful Paint (FCP), o Primer renderizado con contenido, para aumentar la velocidad de carga y las notas de PageSpeed.

El First Contentful Paint (FCP) es como la primera pincelada en un lienzo digital. Representa el momento en que tu página web muestra su primer elemento visual en la pantalla del visitante, es una métrica importante centrada en el usuario y mide la velocidad de carga percibida por el usuario.

Un FCP rápido hace que el usuario perciba que la web carga más rápido, ya que ve que algo está ocurriendo y no se impacienta.

En esta imagen podemos ver el ejemplo de una web con un FCP mejorable. Como podemos ver en las capturas de la web de la parte inferior, el primer renderizado con contenido que se carga (el logo) está muy descompensado con la carga del resto de la web, que correspondería al LCP.

El FCP y el LCP no son la misma métrica, pero debemos hacer todo lo que esté en nuestra mano para que carguen prácticamente a la vez y en el menor tiempo posible.

Este es un buen ejemplo de FCP:

Los tipos de contenido considerados en el FCP son:

• Bloques de texto <p> y/o encabezados <h1>, <h2>, etc.
• Bloques de imágenes <img>, <picture> o <svg>
• Bloques de vídeo como <video>

¿Qué es una buena puntuación FCP?

Una buena puntuación FCP es aquella por debajo de los 1,8 segundos y ya sabes que si quieres aprender a mejorarla sigue leyendo esta guía para conseguir un 100 en PageSpeed.

Tiempo FCP (segunos)	Color / Resultado
0 – 1,8	Verde – Rápido
1,8 – 3	Naranja – Mejorable
Más de 3	Rojo – Lenta

Cómo mejorar First Contentful Paint (FCP)

Mejorar el FCP es algo sencillo si has seguido paso a paso mi curso de optimización WordPress y has tomado nota de todos los consejos sobre diseño y experiencia de usuario de las que hemos ido hablando.

A continuación te indico las tareas y mejoras que debemos llevar a cabo para mejorar el First Contentful Paint (FCP):

• Eliminar los recursos que bloquean el renderizado
  Para ello debemos optimizar los scripts de la web siguiente la guía definitiva de WP Rocket.
• Minificar y eliminar CSS no utilizado
  Siguiendo la guía definitiva de WP Rocket podremos minificar y eliminar todo CSS que la web no use de forma súper sencilla.
• Reducir los tiempos de respuesta del servidor (TTFB)
  Para reducir el tiempo de respuesta del servidor primero necesitamos un hosting profesional y de calidad, como Siteground, y el uso de un CDN económico y profesional como Bunny.net
• Evitar las redirecciones a otras páginas
  Las redirecciones pueden hacer caer por completo nuestra web y añadir muchísimos segundos extra de carga innecesaria. Revisa si hay redirecciones aplicadas. Muchos de los problemas los suele causar una mala configuración del certificado SSL, aprende cómo configurar y aplicar correctamente el certificado SSL.
• Evitar cargas útiles de red enormes
  Evita a toda costa el uso de scripts y servicios de terceros, usa un política de caché y aplaza la carga de JavaScript con WP Rocket.
• Publicar activos estáticos con una política de caché eficiente
  Activa una política de caché para mejorar considerablemente la velocidad de carga de tu WordPress. Aprende cómo hacerlo con la guía de WP Rocket
• Evitar un tamaño de DOM excesivo
  Como hemos comentado anteriormente en esta misma guía de PageSpeed Insights, para mejorar el tamaño de DOM debemos usar un tema y maquetador ligero y optimizado, como Astra y Spectra.
• Asegurarse de que el texto permanezca visible durante la carga de la fuente web
  Esto se consigue aprendiendo a optimizar correctamente las fuentes

Ahora que ya sabes cómo mejorar el First Contentful Paint (FCP) toca ponerte manos a la obra y seguir paso por paso el curso de optimización WordPress, con el cuál mejorarás la velocidad de carga y notas en PageSpeed.

Time to First Byte (TTFB): Tiempo hasta el primer byte

En esta parte de la guía PageSpeed Insights y Core Web Vitals aprenderemos que es y cómo mejorar el Time to First Byte (TTFB), o como lo conocemos en nuestro idioma: Tiempo hasta el primer byte.

El Time to First Byte (TTFB) se refiere al tiempo que transcurre desde que un usuario solicita una página web hasta que el navegador recibe el primer byte de datos del servidor. En otras palabras, es el primer indicador de cuán rápido responde tu sitio al ser requerido por un visitante curioso.

Podemos medir el TTFB de forma sencilla con herramientas como GTMetrix, recuerda que tienes una lección completa de cómo medir tu web y aprender a diagnosticar sus problemas de rendimiento.

Como puedes ver en la captura de pantalla podemos ver rápidamente el TTFB de nuestra web en la parte de Speed Visualization del informe de GTMetrix. Este ejemplo es la muestra de un buen TTFB, ya que es menor a 800ms.

Google indica que menos de 800ms es un buen TTFB, pero debo discrepar como profesional del sector de la optimización. Casi 1 segundo de espera de respuesta de servidor no es aceptable. Debería ser siempre menor a 300ms.

¿Qué es una buena puntuación TTFB?

Esta tabla indica los valores que ha establecido Google como oficiales, pero recuerda que es recomendable tener el mínimo posible de TTFB para una carga excelente de la web. Conseguir 100ms o menos es completamente posible si sigues mi curso de optimización.

Tiempo TTFB (milisegunos)	Color / Resultado
0 – 800	Verde – Rápido
800 – 1800	Naranja – Mejorable
Más de 1800	Rojo – Lenta

Cómo Mejorar el Time to First Byte (TTFB)

Ah, ¡la pregunta del millón! ¿Cómo podemos mejorar el TTFB y asegurarnos de que nuestros visitantes y el servidor no se queden esperando? Pues bien, aquí te presento algunas estrategias sencillas y efectivas:

• Hosting, hosting, hosting
  No me cansaré de repetirlo, si no tienes contratado un hosting profesional, de calidad y especializado en WordPress y optimización olvídate de buenas notas en PageSpeed y de una buena velocidad de carga. El hosting es la base donde se cimenta toda tu web y no debe ser otro que Siteground.
• Usa un CDN
  Ya hemos hablado más arriba sobre qué es y para qué sirve un CDN. Recuerda que tienes la guía de Bunny.net el mejor CDN para WordPress donde te explico cómo configurarlo y porqué es el mejor y más económico.
• Tema y maquetador ligero
  En serio, deja de usar temas multipropuesta a 60$ la licencia. No son buenos, no son ligeros y a la larga te van a dar más dolores de cabeza que los beneficios que te prometen. Usa temas gratuitos, ligeros y optimizados como Astra y migra el diseño de tu web al maquetador Spectra. El TTFB, los clientes y tu web te lo van a agradecer.
• Usa la caché
  Con una política de caché activa tus contenidos se servirán mucho más rápido, acortando la comunicación entre web y servidor.
• Cuidado con las redirecciones
  Suele ser uno de los motivos por los que el TTFB se dispara. Vigila si la URL tiene redirecciones y si el certificado SSL está correctamente configurado.

Si necesitas ayuda para migrar tu web a Astra & Spectra puedes ponerte en contacto conmigo. ¡Ofrezco un servicio de migración de diseño 100% a Astra & Spectra, con el cual aprobarás el examen de Google PageSpeed seguro! Muchos de mis clientes lo han contratado y han quedado encantados con el resultado.

Como en cada métrica de las Web Vitals no existe la fórmula exacta para mejorar el TTFB, si no que es un conjunto de buenas decisiones y de haber usado siempre buenas herramientas. Analiza bien tu página, detecta los posibles problemas y dales solución uno a uno, verás como poco a poco tus notas van mejorando.

Total Blocking Time (TBT): Tiempo total de bloqueo

El Total Blocking Time (TBT), o Tiempo Total de Bloqueo, es una métrica esencial que mide el tiempo durante el cual una página web está bloqueada y no responde a la interacción del usuario. En otras palabras, cuando un visitante intenta interactuar con tu página y hay elementos que impiden que esa interacción sea inmediata, se genera un tiempo de bloqueo. Esto puede afectar significativamente la experiencia del usuario y, por tanto, a la percepción de tu web.

Google valora mucho la optimización de esta métrica, ya que está directamente relacionada con la rapidez con la que los usuarios pueden comenzar a interactuar con tu contenido.

Total Blocking Time (TBT) calcula el tiempo total desde el Primer Despliegue del Contenido (FCP) hasta el Tiempo para Interactuar (TTI).

Es como ese momento tenso cuando cargas una página y estás deseando hacer clic, pero parece que el sitio está tomándose su tiempo antes de querer mostrarte su contenido.

¿Qué es una buena puntuación Total Blocking Time (TBT)?

Una buena puntuación de TBT es aquella inferior a 300 milisegundos.

Cómo Mejorar el Total Blocking Time (TBT)

• Reducir el impacto en el código de terceros
  Ya lo hemos visto con otras métricas, evita el uso de scripts y servicio de terceros a no ser que su uso sea totalmente justificado, como en caso de Analytics u otros servicios.
• Reducir el tiempo de ejecución de JavaScript
  Como hemos aprendido a lo largo de esta guía debemos reducir el número de scripts JavaScript que usa la web. Podemos hacerlo de forma sencilla con WP Rocket y Perfmatters.
• Minimizar el trabajo del subproceso principal
  Va intrínsecamente ligado a optimizar tanto scripts CSS y JavaScript y reducir el DOM para aliviar así el trabajo del subproceso principal. ¿Ves por que insisto tanto en la importancia de usar un tema y maquetador ligero y optimizado?
• Mantener la cantidad de solicitudes bajas y los tamaños de transferencia reducidos
  Debemos esforzarnos al máximo para mantener lo más bajo posibles las peticiones a la base de datos. Tal y como te explico en la guía de GTMetrix y cómo analizar tu web, cada imagen, CSS, JavaScript, fuente bold, fuente normal y un largo etc. es una solicitud a la base de datos que va perjudicando a la carga de la web.

A estas alturas de la guía estarás ya muy cerca de conseguir un 100 en PageSpeed. Como has ido viendo muchas métricas depende de otras y se solucionan con casi las mismas estrategias y técnicas. Es por eso que insisto en el uso de un tema y maquetador ligeros y optimizados, de ellos depende casi toda la carga de scripts CSS y JavaScript, y ya has podido ver la increíble importancia que tienen en las métricas de Core Web Vitals.

Así que ya sabes, si quieres mejorar el Total Blocking Time (TBT) de tu web sigue estos pasos.

Time to Interactive (TTI): Tiempo de interacción

Estamos ya en la penúltima Web Vitals: Time to Interactive (TTI), o Tiempo de interacción, y casi en la recta final de mejorar las notas de PageSpeed Insignths. Levántate de la silla, prepárate un café y descansa, te lo has ganado.

El Time to Interactive (TTI) es una métrica que mide el tiempo que le toma a tu página web volverse completamente interactiva para tus visitantes. En otras palabras, es el tiempo que tarda la web en responder a la interacción del usuario

Un ejemplo sería el lapso entre hacer clic en un enlace y sentir la alegría de ver que la página reacciona de inmediato, si alguna vez has sentido esa frustración de hacer clic y esperar, ¡es que se debería mejorar el TTI!

¿Qué es una buena puntuación Time to Interactive (TTI)?

Una buena puntuación de Time to Interactive (TTI) es aquella inferior a 5 segundos.

Cómo Mejorar el Time to Interactive (TTI)

• Minificar JavaScript
  Ya sabemos que podemos hacerlo de forma sencilla con WP Rocket
• Preconectar a los orígenes requeridos
  Aquellos scripts de terceros que se carguen en nuestra web deberemos agregarles precoennect o dns-prefetch. Esto podemos hacerlo de forma muy sencilla con WP Rocket en la sección Precarga de peticiones DNS
• Precargar solicitudes clave
  Ya sabes que para precargar solicitudes debemos usar WP Rocket
• Reducir el impacto en el código de terceros
  Ya lo hemos hablado a lo largo de la guía: reduce y evita el uso de scripts y servicios a terceros
• Minimizar la profundidad de la solicitud crítica
  Minifica y reduce el número de scripts tanto CSS como JavaScript con WP Rocket
• Reducir el tiempo de ejecución de JavaScript
  Minifica y elimina todos los scripts JavaScript que la web no usa con WP Rocket
• Minimizar el trabajo del subproceso principal
  Reduce el uso DOM y el uso de JavaScript y CSS usando un tema y maquetador ligero y optimizado
• Mantener la cantidad de solicitudes bajas y los tamaños de transferencia reducidos
  Mantén al mínimo las solicitudes a la base de datos, analiza la web con GTMetrix y optimiza al máximo todas las peticiones siguiendo el curso de optimización

Si necesitas ayuda para migrar tu web a Astra & Spectra puedes ponerte en contacto conmigo. ¡Ofrezco un servicio de migración de diseño 100% a Astra & Spectra, con el cual aprobarás el examen de Google PageSpeed seguro! Muchos de mis clientes lo han contratado y han quedado encantados con el resultado.

Ahora sabes todo sobre el Time to Interactive (TTI) y cómo mejorarlo para que tu sitio web sea más interactivo e inmediato. Si quieres que tus usuarios se queden sorprendidos con lo rápido que carga la web al hacer clic a un enlace asegúrate de optimizar el TTI. ¡Es el camino hacia una experiencia web más rápida y buena!

Speed Index: Índice de velocidad

El Speed Index, o Índice de Velocidad, es una de las métrica de PageSpeed que define cuán rápido tu sitio web muestra el contenido principal al cargar. En otras palabras, se trata de la percepción que tiene el usuario de la velocidad de tu página. No se trata solo de que tu sitio cargue en segundos, sino de que lo haga de una manera visualmente suave y progresiva para quien lo visita.

¿Qué es una buena puntuación Speed Index?

Una buena puntuación Speed Index es aquella por debajo de los 3,4 segundos.

Tiempo Speed Index (segundos)	Color / Resultado
0 – 3,4	Verde – Rápido
3,4 – 5,8	Naranja – Mejorable
Más de 5,8	Rojo – Lenta

Cómo mejorar Speed Index

Ahora que entendemos su importancia vamos a aprender como mejorar el Speed Index. Aquí tienes algunas estrategias:

• Minimice el trabajo del hilo principal
  La forma en que está maquetada la web es la causante de este aviso. Recuerda usar un tema y maquetador ligero como Astra & Spectra
• Reducir el tiempo de ejecución de JavaScript
  Como hemos aprendido a lo largo de esta guía debemos reducir el número de scripts JavaScript que usa la web. Podemos hacerlo de forma sencilla con WP Rocket y Perfmatters.
• Asegúrese de que el texto permanezca visible durante la carga de la fuente web
  Reduce el número de fuentes que usa tu, alójalas localmente y aplícales la etiqueta swap para priorizar su carga con la guía de optimizar fuentes

Si sigues y aplicas estos consejos mejorarás considerablemente la percepción que tienen los usuarios de la velocidad de carga de tu web y por lo tanto también mejorarás la nota de Speed Index.

Conclusiones

En esta guía Core Web Vitals hemos explorado cómo mejorar las notas de PageSpeed y descifrar los secretos de las Core Web Vitals. ¡Felicitaciones por dar este paso importante para ofrecer una experiencia excepcional a tus visitantes y mejorar tu velocidad de carga web!

Has aprendido qué son y como mejorar las métricas como el Speed Index, el Largest Contentful Paint y el Cumulative Layout Shift y cómo afectan a la velocidad y la usabilidad de tu sitio, aplicando estrategias para optimizar las imágenes, simplificar el código y priorizar el contenido esencial.

Si quieres conseguir un 100 en PageSpeed con WordPress es tan sencillo como seguir estos pasos:

1. Contrata un buen hosting
2. Usa un tema ligero
3. Usa un maquetador ligero
4. Usa una política de caché
5. Optimiza los scripts
6. Optimiza las fuentes
7. Optimiza las imágenes
8. Usa un CDN

Sencillo, verdad? Si quieres aprenderlo todo sobre optimización WordPress pásate por el curso de Optimización WordPress y únete a la comunidad de Anaislab para conseguir un 100 en PageSpeed y una velocidad de carga envidiable 💪

Esta guía sobre cómo mejorar notas de PageSpeed y las Core Web Vitals es solo el comienzo de tu aventura en la creación de una experiencia en línea inolvidable. Así que, ¡adelante! Implementa lo que has aprendido y observa cómo tu sitio se convierte en un ejemplo de velocidad y usabilidad. Tu compromiso con la optimización no solo te destacará en los resultados de búsqueda, sino que también garantizará que tus visitantes disfruten de una experiencia excepcional en tu web. ¡A por ello!