En los últimos años, Google ha hecho mucho hincapié en el tema de mejorar la velocidad de nuestras web, ya que esto afecta a la navegación y el comportamiento del usuario.

Esto también supone una ventaja de cara a Google, ya que le permite rastrear más cantidad de información si las web son más rápidas.

Aunque ya se lleva hablando de que todo esto impacta en el SEO, Google nos está dando señales más claras de que todo esto va a cambiar, introduciendo nuevas opciones en torno a esto en Search Console y con la herramienta de Google Light House.

Finalmente y una vez se completó todo esto, Google anunció que en este año 2021 lanzaría un update en torno a la velocidad y la experiencia de usuario, además de iniciar la iniciativa Web Vitals, que en resumen es una guía para mejorar la velocidad de tu web y mejorar la experiencia de usuario.

Vamos a ver todo esto en detalle porque es muy importante tenerlo en cuenta si queremos mejorar el posicionamiento de nuestras webs.

¿Qué son las Core Web Vitals?

Las Core Web Vitals es el subconjunto que resumen las Web Vitals. Cada una de ellas representa un punto de la experiencia del usuario distinta (carga, interacción y estabilidad visual), estas son:

  • Largest Contentful Paint (LCP): mide el tiempo de carga. Se recomienda que sea inferior el tiempo a 2,5 segundos.  Carga 
  • First Input Delay (FID): mide el tiempo que tarda la página en estar interactiva. Debe ser el tiempo de 100 milisegundos o inferior.  Interacción 
  • Cumulative Layout Shift (CLS): mide cuando la web tiene una estabilidad visual. Debe ser inferior a 0,1 segundo.  Estabilidad visual 

Cada uno de estos puntos son el resultado de distintas mejoras aplicadas o no aplicadas en nuestras páginas.

métricas web principales

Fuente: https://web.dev/vitals/#core-web-vitals

Analicemos todo esto más en detalle.

Largest Contentful Paint (LCP)

El Largest Contentful Paint (LCP) mide el tiempo que tarda en renderizar el elemento más grande de la web, ya sea imagen o texto.

Veamos el siguiente ejemplo:


lcp

https://web.dev/lcp/

El primer LCP vemos que detecta que es el título principal, pero al terminar la carga de la página descubrimos que hay un elemento aún más grande que es la imagen.

Aquí lo correcto sería priorizar la carga de la imagen.

Veamos otro ejemplo que sí se hace correctamente:

lcp google

https://web.dev/lcp/

En este caso, Google carga la página, primero carga el elemento más grande de la página y luego carga el resto de elementos.

Los elementos que pueden ser objetivo de esta métrica son:

  • Elementos de imagen.
  • Elementos de vídeo.
  • Elementos de imagen que contienen SVG.
  • Background de imágenes cargadas mediante CSS.
  • Bloques de elementos que contienen texto.

Algunos elementos que pueden afectar negativamente al LCP:

  • Servidor lento en tiempos de respuesta.
  • Bloqueo de renderizado de JavaScript y CSS.
  • Tiempos de carga de recursos.
  • Renderizado del lado del cliente.

Algunas mejoras que puedes aplicar para mejorar el LCP:

  • Carga instantánea de PRPL (Preload, Render, Pre-cache, Lazy load)
  • Optimizar la ruta de renderizado crítico
  • Optimizar el CSS
  • Optimizar imágenes
  • Optimizar las fuentes
  • Optimizar el JavaScript

First Input Delay (FID)

El First Input Delay (FID) mide el tiempo desde que el usuario hace clic en un elemento hasta que el navegador puede responder a esa interacción.

Si quieres mejorar el FID debes:

  • Reducir el impacto de las cookies de terceros
  • Reducir el tiempo de ejecución de JavaScript
  • Minimizar el hilo del trabajo principal
  • Mantener un número de peticiones bajo y ficheros de poco peso.

Cumulative Layout Shift (CLS)

El Cumulative Layout Shift (CLS) mide la suma total del tiempo de cambio de las capas durante la carga de la página.

Por explicarlo mejor, ya que suena raro el concepto, es cuando se carga un elemento de la página en el lugar que no debe y durante la carga, este cambia de lugar al sitio correcto.

Para que tengáis un ejemplo más claro os dejo la siguiente imagen. Cuando el elemento del móvil de la izquierda se coloca en el lugar correcto, como representa el móvil de la derecha, ahí estamos ante un caso de CLS:

 

layout shift

https://web.dev/cls/

Este punto tiene mucho que ver con la experiencia del usuario, ya que Google puede llegar a considerarlo negativo, sobre todo si se tarda mucho en producir ese cambio.

Esto puede deberse a una mala estructuración de la página, por algunos scripts que afecten a la carga o porque no tenemos optimizado el CSS y hay reglas que se imponen sobre otras durante la carga.

Las causas más comunes de esto son:

  • Imágenes, anuncios, embebidos e iframes sin dimensiones
  • Inyección de contenido dinámico
  • Fuentes web que producen FOIT/FOUT
  • Tener que esperar una respuesta de red después de actualizar el DOM

Las mejoras que puedes aplicar para reducir el CLS son:

  • Definir tamaños de imágenes, anuncios, embebidos e iframes
  • Aplicar los embebidos, iframes y anuncios en la parte no visible de la página que se carga
  • Utilizar preload, font-display:optional o font-display:swap en la carga de fuentes

¿Cómo afectan las Web Core Vitals al SEO de tu web?

Actualmente se rumorea si afectan al SEO o no. Hay varios experimentos que dicen que sí y algunos expresan lo contrario, pero yo a modo personal os digo que existen otros factores que no se analizan en estos experimentos.

La optimización de la velocidad (en mi experiencia), es un cambio técnico que suele ser relativamente fácil de hacer en muchos casos y se hace bastante rápido. Además de que los resultados llegan medianamente rápidos, pero también existen otros factores en el SEO como:

  • Cantidad de páginas rastreadas
  • Errores a nivel técnico dentro de la web como errores de enlazados entre otros.
  • Configuración de robots.txt
  • El grado de los competidores
  • Etc.

Si el resto de puntos no están bien no vas a notar ningún cambio por mucho que mejores la velocidad, no obstante, si tienes todo correcto y estás cerca o a la par, te puede dar un empujón pasadas unas semanas del cambio.

¿Cuándo será un factor de ranking?

Actualmente ya se tiene en cuenta, lo que sucede es que no son tan notables los cambios en diversas ocasiones como acabo de comentar. Pero sí que es cierto que en breve veremos un cambio muy grande y se tendrán en cuenta otros factores más concretos que hasta la fecha no se tenían en cuenta.

Esto sucederá en mayo con el nuevo Page Experience Update.

experiencia de página

👉 Recomiendo desde ya actualizar las webs y empezar a centrarse en este apartado, ya que luego nos entrarán las prisas a todos cuando se empiecen a ver las primeras caídas y es posible que revertir esto no sea algo inmediato.

Es muy posible que el update también tome en consideración un poco más la navegación del crawler, por lo que recomiendo prestar especial atención a los apartados de velocidad y navegación del crawler de Search Console.

Las Core Web Vitals en detalle. Te contamos todo sobre el nuevo factor de ranking para Google. Clic para tuitear

¿Cómo medir las Core Web Vitals de tu web?

Actualmente tenemos varias herramientas para analizar las Core Web Vitals, cada una de ellas aporta algo distinto, por lo que la clave es apoyarnos en todas las que podamos para poder estudiar mejor lo que sucede y aplicar mejoras.

Herramientas para analizar las Core Web Vitals

Personalmente recomiendo usar las principales herramientas de Google como:

¿Qué valores son ideales para las Core Web Vitals?

Principalmente es que en el análisis te salga todo verde, y la mejor valoración global es entre 90 y 100 puntos.

Entre 50 y 90 nos marcará en amarillo e indicará que hay margen de mejora.

Todo lo que sea inferior a 50 se necesita trabajar.

Pero para ser más precisos, en torno a las métricas, quizá pueda ayudarte la calculadora de rendimiento que ofrece Google.

calculadora rendimiento

Google comentó que para beneficiarse en el próximo update será necesario cumplir con las tres métricas de Google Core Web Vitals, no vale con tener una muy bien y las otras mal.

¿Cómo mejorar los valores?

Si usas algún CMS, existen módulos y plugins que te ayudan con todo esto, pero si tu web es a medida, necesitarás un desarrollador que te ayude.

Plugins para WordPress de WPO

La mayoría de vosotros seguramente uséis WordPress, así que os diré los 3 plugins que uso yo personalmente con proyectos y clientes:

  • WP Rocket: es de pago, pero para lo que cuesta y ofrece, se nota bastante respecto a otros plugins. Es superfácil de configurar y ofrece varias funciones.
  • Plugin Load Filter: este es poco conocido, pero permite seleccionar qué plugins quieres cargar en cada página, además de que permite realizar configuraciones especiales para páginas individuales y/o tipos de página.
  • Imagify: no he probado muchos plugins de compresión de imágenes, pero este plugin funciona bastante bien y es muy fácil.

Otros plugins que también he usado o suelo usar dependiendo del proyecto:

  • W3TC: es uno de los plugins más conocidos de WPO y más usados de WordPress. Diría que es el más completo, pero a su vez, también es el más complejo de configurar.
  • Autoptimize: un plugin sencillo y rápido para configurar caché y algunas mejoras rápidas en cuanto a optimización de imágenes, compresión, minificación, etc.
  • Autoptimize Critical CSS: un complemento de Autoptimize para mejorar la carga del CSS crítico.
  • Cloudflare: no he probado el nuevo servicio para WordPress, pero en su día probé la versión mensual de 20 € y no está mal. Tampoco soy muy experto en CDN, ya que no tengo mucha experiencia con otros, aunque me gustaría probar otro tipo de servicios.
  • Lite Speed Cache: es otro plugin de caché con varias funciones interesantes.
  • Flying Pages, images, scripts, analytics & press: son varios plugins de WordPress fáciles de configurar que ofrecen funciones para mejorar la velocidad y rendimiento de la web, como precargar la página antes de hacer clic, retrasar la carga de js, etc.

La única pega de todos estos plugins es que a pesar de que ayudan bastante a mejorar la puntuación, esto no quita que muy posiblemente necesites aplicar algunas mejoras en cuanto a código o servidor, lo que puede hacer que se complique la tarea para usuarios con conocimientos más básicos. No obstante, recomendamos aprender con alguno de ellos, ya que esto te ayudará a mejorar las métricas de Web Core Vitals WordPress.

Lista de plugins para mejorar las Core Web Vitals Clic para tuitear

Temas para WordPress de WPO

Se dice mucho sobre los temas más recomendados en torno a ello.

Por lo general los que son más sencillos y con pocos elementos van a funcionar bastante rápido, aunque todos normalmente son optimizables.

Quizá el más interesante os diría que es el GeneratePress, pero no puedo aportar mucha más información en torno a esto, por lo que he escuchado y gracias a una encuesta realizada por Raúl González, en el que ganó por goleada:

En Bloggeando dedican un episodio a cómo elegir un theme de WordPress. Escúchalo aquí.

Constructores para WordPress de WPO

Aquí os puedo aportar algo más de información, ya que formé parte de un experimento en torno a esto.

El experimento consistía en replicar una página con distintos constructores. Las reglas eran las siguientes:

  • Solo se podía usar el tema por defecto de WordPress (a excepción de dos que se probaron con su tema principal) y no se permitían modificaciones de código sobre este.
  • No estaba permitido usar plugins para optimizar el rendimiento, pero sí estaban permitidos los plugins extra para replicar la página, como extensiones de los constructores.
  • Todas las webs se hicieron bajo un mismo hosting que proporcionó gratuitamente uno de los participantes y miembro del grupo.
  • Solo se podían usar las imágenes que nos daban. Estas no se podían optimizar ni usar plugins de optimización.
  • El plazo para realizar la réplica era de una semana.

Los constructores que se analizaron fueron:

  • Divi
  • Divi + tema
  • WP Bakery
  • WP Bakery + tema
  • CornerStone
  • Elementor
  • Gutenberg
  • Avada

Os adjunto algunas capturas bastante visuales de los resultados analizados, ya que ellos sé que desde el grupo están preparando un artículo explicando todo esto mucho mejor. (Cuando lo publiquen dejaremos el enlace)

Resultados del experimento de WPO con los constructores de WordPress

Esta tabla hace referencia a los ganadores en similitud de diseño con la página replicada en los diferentes dispositivos, siendo 5 la máxima calificación a la que se podía aspirar.

similitud del constructor

En la siguiente gráfica se miden aspectos relacionados con la velocidad, accesibilidad, mejores prácticas y el SEO, siendo 100 la máxima calificación.

performance del constructor

Otro de los aspectos analizados fueron los tiempos de carga con el peso de la página, realizando una comparativa de cómo influían.

tiempo carga de página vs peso del constructor

Por último os muestro las peticiones realizadas al servidor en función del constructor:

peticiones del constructor

Se tomaron muchos más datos con varias herramientas. Estos resultados pueden variar un poco dependiendo del conocimiento de las herramientas y estaría bien contrastarlos con otros experimentos para ver qué resultados ofrecen, pero es un muy buen punto de partida para decidirnos por un constructor visual de WordPress.

Interesante experimento sobre el rendimiento web con distintos constructores de WordPress. Por @queesseo Clic para tuitear

Penalización por tener valores malos en las Core Web Vitals Google

Actualmente no hay penalizaciones reales en torno a esto, sí que es posible que pierdas ventaja frente a competidores, pero no es algo que te vayan a penalizar a día de hoy.

En mayo es posible que esto cambie y lleguen caídas muy grandes por ello, ya que aparecerán sitios que van más rápidos que otros y es posible que necesite hacer algunos ajustes en el algoritmo porque veremos cosas raras, como páginas rápidas con malas métricas o páginas lentas con buenas métricas.

Habrá que esperar un poco para ver resultados en torno a esto y analizar qué prioriza antes Google realmente.

También hablamos de las Core Web Vitals en nuestro podcast

Si te has quedado con ganas de más, Chus Naharro y Rubén Alonso nos lo explican todo en nuestro podcast Bloggeando:

Ir a Podcast Core Web Vitals: qué son, cómo afectarán al SEO y cómo mejorarlas

Conclusiones

Mejorar la velocidad de la web es una tarea técnica y fácil para la gente que tiene conocimientos avanzados de programación y servidores, pero para una persona de a pie puede ser algo más compleja.

Existen varios plugins que nos pueden ayudar a mejorarlo de forma rápida, pero aun así necesitaremos realizar ajustes manuales y posiblemente sacrificar algunos elementos visualmente atractivos para ganar velocidad.

Lo que está claro es que Google tiene en cuenta la experiencia de página y más allá de las Core Web Vitals de Google, es algo en lo que hay que trabajar

¿Necesitas ayuda o tienes dudas? Pregunta en los comentarios.

👇👇👇👇

  • JM

    Artículo mas que completo, y sobre todo, muy didáctico para gente como yo que aún necesita mejorar y mejorar en el tema del SEO.

  • Vanessa Cast

    ¡Muchas gracias Eric! he leído muchos artículos sobre los Core Web Vitals y este me ha parecido de los más completos, la explicación gráfica mostrando las pantallas del navegador y móvil es genial. Sean o no sean un ranking factor oficial, lo cierto es que es importante optimizar la carga de nuestra web para mejorar la experiencia del usuario, que al final es lo más importante.

    • Alfonso Blanco

      Totalmente de acuerdo! El contenido del artículo es accesible para todo el mundo y lo hace todo mucho más fácil.

    • Eric Jorge Seguí Parejo

      En Mayo seguramente se note más. Normalmente el factor velocidad es algo que influye y se nota, así que es conveniente mejorarlo en la medida de lo posible.
      Es una tarea compleja, sobre todo si tienes muchos elementos y páginas distintas en tu web.

  • Alfonso Blanco

    ¡Muchas gracias por este artículo! Llevo tiempo estudiando posicionamiento SEO y últimamente estaba escuchando mucho hablar sobre las Core Web Vitals. El artículo es muy interesante y sobre todo accesible para los que estamso empezando en este inmenso campo.

    • Eric Jorge Seguí Parejo

      Muchas gracias Alfonso por tu comentario =)

      Por suerte a día de hoy, toda la gente que usa cms como WordPress, tienen muchos recursos que les facilitan esta tarea, así que no te será complejo.

      Si lo quieres tener todo perfecto, es posible que tengas que liarte en temas de código y posiblemente de diseño, pero considero que vale la pena y más de cara al nuevo update.

  • alejandroverjel

    Cad vez es más dificil poder optimizar tu web con todos estos speed test ya que cada uno mide diferente segun tu ubicación lo que es cierto es que tener un cdn ayuda mucho en esta difícil tarea de caerle bien a google.

*