Hoy aprenderás toda la información necesaria para abordar la actualización de Google denominada respecto a los Core Web Vitals, los parámetros que usa Google para calificar las experiencias de usuarios en las webs.
Sí, ya sé: Nosotros también estamos hartos de las constantes actualizaciones de las arañas de Google y de que nos manden nuestras mejores keywords al fondo de las SERP; o que una imagen de Pinterest posicione por encima del artículo que tanto hemos currado.
Aunque Google sea un monopolio (bueno o malo, como quieras calificarle), recomiendo adaptarte a él, ya que allí llegarás a una gran cantidad de clientes.
Esta actualización, como muchas anteriores, busca mejorar la experiencia de usuario por medio de factores que la califiquen.
En esta oportunidad, específicamente son tres factores los que Google pretende tener en cuenta:
- LCP (Larguest Contentful Pain) que mide cuánto tiempo tarda en cargar y estar listo para interactuar el contenido más grande de tu web.
- FID (First Input Delay) este parámetro mide cuánto tiempo tarda el usuario en interactuar con su página web desde que ingresa.
- CLS (Cumulative Layout Shift) es la tercera métrica en esta actualización y mide la estabilidad del contenido en la ventana gráfica de los usuarios cuando cargan tu sitio web.
Cómo has visto y hemos mencionado, estas métricas buscan que los sitios web que Google indexa ofrezcan una mejor experiencia de usuario.
Algunos señalan que esta actualización no afecta de forma ‘dramática’ el posicionamiento, pues solo forma parte de otros 200 factores o métricas con las que Google califica la experiencia de usuario de un sitio web.
En mi caso, conociendo las sorpresas de Google, es mejor no confiarse tanto de ello y, al contrario, tener en cuenta estas métricas en nuestra web para evitar sorpresas.
Ahora vamos a desgranar esta actualización de Google para que aprendas paso a paso a cómo adaptarte a ella.
Solo haré un señalamiento más respecto a estas actualizaciones: Siguen las mismas dinámicas de otras. Lo hicieron con los certificados SSL en 2015, la compatibilidad móvil en 2015 y, por último, la velocidad móvil en 2018.
Ahora sí ¡Vamos a por estas actualizaciones!
Recomiendo:
Hoy aprenderás...
- 1 LCP: Largest Contentful Pain ¿Cuánto tarda en cargar el elemento más grande?
- 2 FID: First Input Delay ¿Cuánto tarda en interactuar el usuario?
- 3 CLS: Cumulative Layout Shift ¿Que tan estable es tu web?
- 4 Otros factores pertenecientes a la experiencia de usuario
- 5 Herramientas que te ayudarán a auditar parámetros Core Web Vitals
- 6 La actualización de los Core Web Vitals afecta mi web ¿Qué hago?
LCP: Largest Contentful Pain ¿Cuánto tarda en cargar el elemento más grande?
El parámetro LCP mide cuánto tarda en cargar el elemento más grande de la página que cargan los usuarios cuando acceden a tu sitio web.
Este elemento ‘más grande’ por lo general suele ser una imagen, un formulario o incluso un bloque de texto.
Un buen ejemplo para medir este tipo de contenidos es la típica carga de un artículo web la cual consta -por lo general- del renderizado de una imagen y posteriormente un bloque de texto.
Con este parámetro dentro de la actualización de Core Web Vitals, Google nos comunica la importancia que tiene la carga de elementos principales en la experiencia del usuario.
Aunque personalmente también lo interpreto como un llamado a la prioridad en cuanto a la carga de elementos, es decir; interpreto que Google pretende que los webmasters usen grandes elementos solo cuando realmente sean prioritarios.
Se especula que los tipos de elementos que tiene en cuenta el Largest Contentful Paint son:
- <img>
- Elementos dentro de otros elementos.
- <video>
- Elementos que cuentan una imagen de fondo cargada via la url(.)
- Los elementos Block.level que albergan nodos de texto.
¿Pero cuál es la apreciación de Google respecto al tiempo? ¿Qué es lento y rápido para Google?
Respecto a esto, también se ha especulado bastante y por lo general las opiniones de algunos usuarios, en cuanto a la interpretación de la velocidad de carga de Google, son las siguientes:
Rápido = 2,5 s o menos.
Regular hasta 4 s
Lento = más de 4 segundos.
Como siempre, hemos aconsejado que el tiempo de carga en un sitio web sea menor a tres segundos, más allá de ese tiempo los usuarios empiezan a abandonar las páginas.
¿Cómo acelerar la carga de los elementos más grandes de nuestras páginas?
1._ En primer lugar, elimina todos aquellos scripts innecesarios en tu sitio web. Ten en cuenta que cada script representa el retraso de algunos milisegundos en la carga.
2._ Siempre comprueba esta puntuación utilizando una herramienta como Google PageSpeed Insights, ya te explicaremos cómo se usa y más detalles sobre esta herramienta al final de este artículo.
3._ Recuerda que un excelente alojamiento web significa de igual forma una excelente carga web, así que por ello trata de buscar un alojamiento profesional que provea a tu sitio web de un buen tiempo de carga. Te recomendamos: Alojamiento Web Profesional.
4._ Configura la llamada carga diferida dentro de tu sitio web. Mediante esta carga solo se priorizarán los elementos que tiene enfrente el usuario (este tipo de carga es la que ves cuando accedes a algunos sitios web y las imágenes no cargan sino hasta que las tienes enfrente).
5._ Optimiza todo lo que puedas los elementos multimedia de su sitio web: tanto imágenes como vídeos, elementos dinámicos y demás sin afectar su calidad claro está.
6._ Practique el minimalismo en su sitio web sin descartar lo útil y sólo considerando eliminar los elementos que son innecesarios o que poco usan sus usuarios.
FID: First Input Delay ¿Cuánto tarda en interactuar el usuario?
Mediante este parámetro Google desea medir cuánto tarda el usuario en interactuar con tu sitio web. En realidad, lo que desea el gran buscador es saber en cuánto tiempo tu sitio web está operativo para su uso.
Si tu página web sólo es un blog con artículos escritos, pues Google medirá cuánto debe esperar el usuario para empezar a leer tu texto. En cambio, si tu sitio web es una plataforma a la cual se debe acceder con un usuario y contraseña, Google medirá cuánto debe esperar a que el formulario de inicio de sesión esté disponible.
Se supone que acciones como hacer zoom y arrastrar o desplazarse dentro del sitio web no se considera como el inicio de interacción de un usuario, sino la acción específica que busca realizar allí en tu web.
Algunos sitios webs tienen bastante en cuenta esto y los demás parámetros qué Google incluye en su Core Web Vitals, un ejemplo de ello lo es Reddit, el cual prioriza la carga de su formulario de inicio de sesión, ante todo, de modo que es lo primero que cargan y está disponible cuando accedemos allí.
¿Cuánto es un FID rápido o lento?
Se especula mucho que los 100 milisegundos es un valor fantástico para Google. Sin embargo, vale destacar que esto también depende del objetivo de tu sitio web y de sus funciones.
Lo que deseó decir es que, por ejemplo, obviamente dentro de la competencia por una Keyword de una herramienta online ‘pesada’, las páginas web que cuenten con dicha herramienta en los resultados van a tener un FID lento. Así que todo depende a lo que apunten tus búsquedas y la velocidad promedio que dominen tus competidores.
Como consejo diremos que trate de tener siempre en claro y priorizado la carga de los elementos que ayudan a cumplir el objetivo principal que tiene el usuario al acceder en tu sitio web.
Por otro lado, es bueno usar herramientas que almacenen páginas caché y que contribuyan a que la segunda vez en que el usuario acceda a tu web, éste ofrezca una carga ultra rápida.
Otro consejo es minimizar o aplazar aquellas funcionalidades que involucren la ejecución de javascript, siempre que estas no sean el objetivo principal del porqué el usuario accedió a tu web.
Si el sitio web tarda un poco en cargarse debido a que la función de tu página es compleja o sofisticada, entonces recuerda usar el poder de las microinteracciones para conseguir que el usuario espere hasta que se cargue completamente la página en vez de abandonarla.
Otro consejo importante es dar prioridad a ese código que es esencial para la interactividad de tu sitio web lo que es igual a que se cargue primero.
Por último, te recomendamos usar un Web Worker: con este recurso los archivos de Javascript pesados pueden ejecutarse en un hilo separado. Es algo un poco complejo de explicar, pero un buen programador lo hará por ti con facilidad.
CLS: Cumulative Layout Shift ¿Que tan estable es tu web?
El CLS mide el tiempo en que un sitio web tarda en estabilizarse visualmente mientras se carga. Es decir, la duración de la transformación que experimenta tu sitio web en cuanto al orden de los elementos cuando alguien accede a él.
Por ejemplo, suele pasar que cuando accedemos a un diario online de noticias y el texto carga primero que la portada, este se ve desplazado bastante abajo en cuanto la portada carga, interrumpiendo nuestra lectura.
Lo que interpretó aquí es que Google desea sitios webs visualmente estables, los cuales con su carga no interrumpan lo que los usuarios estén realizando una vez accedan.
Lo que generalmente suele suceder es que los elementos empujan a otros, ya sea hacia abajo, hacia la izquierda, derecha o arriba, etc. en cuanto se cargan.
También suele pasar que los anuncios desplazan contenidos y, como siempre, son los textos los que ‘más palo’ reciben allí.
Google ha entendido lo impaciente que son los usuarios cada día y por ello desean sitios webs con elementos bastante estables durante la carga.
¿Cómo conseguir un sitio web visualmente estable?
Lo primero que recomiendo es revisar bien la carga móvil ya que en ella los elementos son mucho más inestables que en la carga de escritorio. Así que revise las versiones móviles de su sitio web y asegúrese de que son bastante estables mientras se cargan.
También ten en cuenta el tamaño de los elementos más grandes como anuncios e imágenes y minimícelos hasta un tamaño adecuado.
Revise aquellos recursos que cargan de forma asincrónica y se mueven bastante durante el proceso de carga y considere estrategias para evitar dichos movimientos.
Por último, elimine el CSS no utilizado.
Otros factores pertenecientes a la experiencia de usuario
Existen otros factores pertenecientes a la experiencia de usuario, más allá de los Core Web Vitals, que debes tener en cuenta:
- La compatibilidad con dispositivos móviles es bastante importante y más en esta época en que se usan diferentes tamaños de pantalla.
- La navegación segura es otro de los factores que debes tener en cuenta y que Google desde hace mucho tiempo lo tiene como un factor.
- A pesar de que puede sonar repetitivo, debemos mencionar que las versiones AMP son espectaculares para conseguir una correcta carga web.
- Recuerda que al final de todas estas interacciones lo que importa es que el usuario se quede en tu web y lleve a cabo los objetivos que tiene.
Herramientas que te ayudarán a auditar parámetros Core Web Vitals
Existen varias herramientas que puedes usar para ponerte en contexto respecto a la experiencia de usuario en tu web. Mencionaremos las que creemos más útiles en dicho aspecto (Si deseas acceder a ellas solo debes dar clic en el título):
Lighthouse
Esta es una herramienta de código abierto perteneciente a Google. Funciona a modo de extensión de navegador. Mediante ella podrás auditar el rendimiento, la accesibilidad y la optimización de motores de búsqueda de tu sitio web. Lo más interesante de Lighthouse es que mediante ella podrás realizar, entre muchas otras funciones, varios tests para saber si cumplen con los requisitos para ser una PWA.
Web.dev
Se supone que el objetivo de Web.dev realmente es enseñarte a programar de forma eficiente para la web moderna, eso dicen entre líneas; sin embargo, esta herramienta se centra en ayudarte a mejorar el posicionamiento web SEO, y en ese aspecto es útil para los programadores y desarrolladores web. El principal fuerte de esta herramienta es que te ayuda, mediante un análisis profundo de tu dominio a subrayar todos los puntos fuertes y debilidades en cuanto al posicionamiento web SEO.
PageSpeed Insights
Google PageSpped Insights es una herramienta confiable cuando se trata de medir la velocidad de una página web. Más allá de medir velocidades, esta herramienta te aportará un listado detallado de todos los fallos que detecta para así ayudarnos a mejorar en cuanto a ellos. Entre los análisis que realiza justamente nos encontramos con los parámetros Core Web Vitals mencionados, los cuales analiza desde el ámbito de la versión web móvil, así como la versión web. Sin duda, es una gran herramienta que te ayudará a mejorar tu sitio en cuanto a estos parámetros mencionados.
Google Search Console
¿Demasiado obvio? Quizás, sin embargo, no podíamos dejar de mencionar esta excelente herramienta que nos proporciona Google para comprobar la indexación de los sitios web en el buscador y así optimizar su velocidad, además de obtener un útil informe sobre el rendimiento de nuestras páginas. Esta es una herramienta que nos ayudará a obtener información para mejorar la usabilidad de nuestra web, por ejemplo, la usabilidad móvil, y con ello la experiencia de usuario.
Para usarla simplemente se debe instalar mediante un archivo de verificación en la carpeta raíz de tu web.
GTmetrix
GTmetrix es una herramienta que te ayudará a medir los tiempos de carga online junto con los Core Web Vitals. Mediante esta herramienta podrás medir los tiempos de carga de tu sitio web. Más allá de medir la velocidad de carga online, mediante esta herramienta conocerás los promedios mundiales en cuanto a carga y el peso estimado de dicha carga. Para usarlo solo debes acceder a su web, insertar la URL de tus sitios y esperar que dicha herramienta realice un análisis.
La actualización de los Core Web Vitals afecta mi web ¿Qué hago?
Si experimenta caídas de posiciones en las SERP debido a la actualización de Core Web Vitals, recomiendo:
- Primero, contrata una auditoría SEO que haga un buen diagnóstico de lo que ocurre y que afecta el posicionamiento de tu web.
- En caso de requerir algunos cambios importantes recomiendo contratar a un experto SEO o programador web.
- Si tu diseño web va en contra de estos parámetros o muchos otros que afectan la experiencia de usuario, entonces recomiendo cambiar dicho diseño por uno más profesional y que mejore la navegación de los usuarios. Recomiendo: Diseño Web Profesional.
- Por último, recomiendo prepararse para nuevos parámetros en cuanto a la experiencia de usuario; ya que Google con su inteligencia artificial cada día interpreta mejor lo que experimentan sus usuarios y la forma en que navegan.
- Cómo ya hemos dicho, contar con el soporte de un SEO profesional es quizás la mejor decisión que puedes tomar en cuanto a la optimización de tu web de cara a cualquier actualización de Google.
En Pymesworld hemos optimizado sitios web de cara al SEO desde el 2010 y a través de nuestros planes de marketing digital hemos posicionado cientos de proyectos en la web. Contáctanos, cuéntanos tus proyectos en mente para ayudarte a impulsarlos:
Lo siento, debes estar conectado para publicar un comentario.