{"id":28002,"date":"2022-10-13T11:18:34","date_gmt":"2022-10-13T09:18:34","guid":{"rendered":"https:\/\/www.makingscience.com\/?p=28002"},"modified":"2022-10-13T11:18:34","modified_gmt":"2022-10-13T09:18:34","slug":"core-web-vitals-que-son-y-como-analizarlas","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/es\/blog\/core-web-vitals-que-son-y-como-analizarlas\/","title":{"rendered":"Core Web Vitals: Qu\u00e9 son y c\u00f3mo analizarlas"},"content":{"rendered":"

Son muchos los factores que influyen en el posicionamiento org\u00e1nico de una p\u00e1gina web, tales como los metadatos (titles<\/i>, metadescriptions<\/i>\u2026), encabezados, arquitectura de navegaci\u00f3n\u2026, pero la experiencia de usuario<\/b>, sin duda, tambi\u00e9n afecta en gran medida al SEO de cualquier web<\/b>. La experiencia de usuario o UX no solo puede influir en c\u00f3mo se posiciona una web, sino tambi\u00e9n a las conversiones o transacciones de la misma, ya que el usuario puede no entender correctamente el funcionamiento del site<\/i>.<\/span><\/p>\n

La velocidad de carga<\/b> es uno de esos factores que afectan a la experiencia de usuario en las webs y, por tanto, puede ayudar o perjudicar al posicionamiento SEO de una web. Cuanto m\u00e1s tarde una web en cargar, m\u00e1s posibilidades hay de que el usuario se canse de esperar y termine saliendo de esta para acudir a otra web de la competencia. Estas se\u00f1ales son factores que pueden terminar perjudicando a las posiciones de nuestra web en los motores de b\u00fasqueda.<\/span><\/p>\n

Por temas de posicionamiento y, al fin y al cabo, por la conversi\u00f3n de un site<\/i>, la velocidad de carga es, sin duda, un tema muy importante que debe valorarse a la hora de trabajar el SEO de una web.<\/span><\/p>\n

\u00bfQu\u00e9 son las core web vitals?<\/span><\/strong><\/h4>\n

Las core web vitals<\/i><\/b> son unas m\u00e9tricas que cre\u00f3 Google para ayudarnos a determinar puntos de mejora en la carga de nuestra web y saber qu\u00e9 aspectos son los que pueden estar afectando a esta. Estas m\u00e9tricas van aparejadas a determinados puntos que afectan directamente a la carga, interactividad y estabilidad<\/b> (en conjunto, a la experiencia de usuario) y, por tanto, a determinadas soluciones que nos permitir\u00e1n ofrecer una \u00f3ptima carga a los usuarios.<\/span><\/p>\n

Las core web vitals<\/i> son principalmente 3: LCP, FID y CLS<\/b>, que explicamos a continuaci\u00f3n. Podemos encontrar otras m\u00e9tricas como FCP (tiempo que pasa hasta que la primera parte del contenido se muestra en la pantalla) o TTFB (el tiempo que tarda en recibirse el primer byte de informaci\u00f3n), que tambi\u00e9n suelen aparecen en las herramientas de medici\u00f3n de nuestras core web vitals<\/i><\/span><\/p>\n

LCP o Largest Contentful Paint<\/b><\/span><\/p>\n

El LCP es la core web vital que hace referencia al tiempo que tarda en cargar y renderizarse aquel elemento <\/b>(que puede ser un bloque de texto, una imagen o cualquier otro recurso) m\u00e1s grande visible en el above the fold<\/i><\/b> (es decir, en la primera visualizaci\u00f3n de la URL sin necesidad de hacer scroll).<\/span><\/p>\n

Lo ideal es que este elemento no tarde m\u00e1s de 2,5 segundos en cargarse<\/b>. Google considera que un elemento que tarda entre 2,5 y 4 segundos necesita mejora. Y si tarda m\u00e1s de 4 segundos exigir\u00eda una revisi\u00f3n necesaria.<\/span><\/p>\n

FID o First Input Delay<\/b><\/span><\/p>\n

El FID es la core web vital <\/i>que mide el tiempo que pasa entre que un usuario interact\u00faa con la p\u00e1gina hasta que el navegador puede procesar la respuesta a esta acci\u00f3n<\/b>. Esa interacci\u00f3n puede hacer referencia a clicar en un elemento, como un bot\u00f3n o un enlace, hacer scroll o cualquier otra acci\u00f3n en la web.<\/span><\/p>\n

Para Google, un FID con una buena puntuaci\u00f3n deber\u00eda ser inferior a 100 milisegundos.<\/b> Si ese tiempo est\u00e1 entre 100 y 300 milisegundos, el FID necesitar\u00eda mejora. Si el tiempo es superior a 300 milisegundos, se encuentra en un valor bajo que ser\u00eda prioritario revisar.<\/span><\/p>\n

CLS o Cumulative Layout Shift<\/b><\/span><\/p>\n

El CLS sirve para medir los cambios de dise\u00f1o que se producen en la web mientras se est\u00e1 cargando la p\u00e1gina<\/b>. En muchas ocasiones, los usuarios van a pulsar en un bot\u00f3n o activar un elemento y, de repente, el dise\u00f1o cambia el orden o la disposici\u00f3n de estos, lo que puede afectar a la experiencia del usuario, al llegar a hacer que el usuario termine clickando en el elemento no deseado. Esta core web vital <\/i>se encarga de controlar estos grandes cambios. El CLS mide, por tanto, cada uno de esos cambios de dise\u00f1o inesperados.<\/span><\/p>\n

En este caso, para Google un CLS ideal estar\u00eda por debajo del 0,1<\/b>. Sin embargo, se considerar\u00eda un CLS bajo si esta m\u00e9trica superase el 0,25.<\/span><\/p>\n

Herramientas para analizar las core web vitals<\/b><\/span><\/p>\n

A d\u00eda de hoy, existen numerosas herramientas que nos permiten medir y comprender mejor estas tres m\u00e9tricas para nuestra p\u00e1gina web<\/b>. Analizamos cu\u00e1les son 4 de las m\u00e1s importantes a d\u00eda de hoy en internet:<\/span><\/p>\n

SEARCH CONSOLE<\/b><\/span><\/p>\n

La principal herramienta para conocer la salud de tu sitio en cuanto a velocidad de carga es el propio Search Console. A trav\u00e9s de sus numerosos informes de Experiencia, como el de \u2018M\u00e9tricas web principales\u2019, podremos conocer de toda nuestra web qu\u00e9 URLs son las que tienen problemas de LCP, CLS o FID.\u00a0<\/span><\/span><\/p>\n

Adem\u00e1s, nos establece la divisi\u00f3n por mobile<\/i> o desktop<\/i>, por lo que podremos saber si estos errores deber\u00edamos corregirlos para una de las versiones o para ambas.<\/span><\/p>\n

PAGESPEED INSIGHTS<\/b><\/span><\/p>\n

Se trata de la principal herramienta de Google para medir la velocidad de carga <\/b>de una URL. Mediante una puntuaci\u00f3n que va de 0 a 100, podremos conocer el estado de la velocidad de carga de cualquier p\u00e1gina de nuestra web. A mayor puntuaci\u00f3n, m\u00e1s \u00f3ptima ser\u00e1 la carga.<\/span><\/p>\n

Dentro de sus informes, podremos conocer los valores de las principales core web vitals<\/i> y si necesitan mejora o no. Pero lo m\u00e1s importante de sus informes y resultados que nos da esta herramienta es un apartado con oportunidades y diagn\u00f3sticos con algunos de los principales problemas que est\u00e1n afectando a estas m\u00e9tricas<\/b>, as\u00ed como los recursos que est\u00e1n perjudicando a la carga de la web. Ser\u00e1 necesario echarlos un vistazo y corregirlos para optimizar nuestra velocidad de carga.<\/span><\/p>\n

WEBPAGETEST<\/b><\/span><\/p>\n

Es una de las herramientas externas de an\u00e1lisis de velocidad de carga por excelencia<\/b>. Adem\u00e1s de conocer la carga de una web y sus diferentes recursos (que los muestra de una forma muy visual en forma de cascada), nos ofrece datos muy interesantes, como el tiempo que pasa hasta recibir el first byte<\/i>, el comienzo del renderizado o el Speed Index<\/i>.<\/span><\/p>\n

M\u00e1s all\u00e1 de esto, tambi\u00e9n nos ofrece informaci\u00f3n sobre las principales core web vitals<\/i>, mostr\u00e1ndonos los tiempos y los recursos que afectan a cada una de estas m\u00e9tricas.<\/span><\/p>\n

GTMETRIX<\/b><\/span><\/p>\n

GTMetrix es otra de las herramientas a tener en cuenta a la hora de analizar la velocidad de carga de una web.<\/span><\/p>\n

Adem\u00e1s de darnos puntuaciones generales sobre la carga de cualquier URLs, nos incluye, de forma similar a PageSpeed Insights, algunos de los principales problemas que est\u00e1n afectando a cada core web vital. <\/i>Adem\u00e1s, nos indica el impacto que tendr\u00eda solucionar cada una de estas propuestas<\/b> para establecer un plan de priorizaci\u00f3n de puntos a solucionar.<\/span><\/p>\n

Con todas estas herramientas, podemos pasar a la acci\u00f3n para optimizar al m\u00e1ximo la velocidad de carga de nuestra web<\/b> y, as\u00ed, conseguir que los usuarios tengan una excelente experiencia de usuario y que no termine convirti\u00e9ndose en un problema grave que termine afectando, incluso, a nuestro posicionamiento org\u00e1nico.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Son muchos los factores que influyen en el posicionamiento org\u00e1nico de una p\u00e1gina web, tales como los metadatos (titles, metadescriptions\u2026), encabezados, arquitectura de navegaci\u00f3n\u2026, pero la experiencia de usuario, sin duda, tambi\u00e9n afecta en gran medida al SEO de cualquier web. La experiencia de usuario o UX no solo puede influir en c\u00f3mo se posiciona […]<\/p>\n","protected":false},"author":40,"featured_media":28026,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2097],"tags":[390,130,279],"class_list":["post-28002","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categorizar","tag-core-web-vitals","tag-seo-2","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/28002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/comments?post=28002"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/28002\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media\/28026"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media?parent=28002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/categories?post=28002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/tags?post=28002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}