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.