{"id":3325,"date":"2020-06-15T14:33:35","date_gmt":"2020-06-15T13:33:35","guid":{"rendered":"https:\/\/www.lucushost.com\/blog\/?p=3325"},"modified":"2020-06-16T10:33:32","modified_gmt":"2020-06-16T09:33:32","slug":"core-web-vitals","status":"publish","type":"post","link":"https:\/\/www.lucushost.com\/blog\/core-web-vitals\/","title":{"rendered":"Core Web Vitals: 3 criterios esenciales para SEO"},"content":{"rendered":"<p>La experiencia de usuario va ganando terreno en el mundo del posicionamiento web. Tanto es as\u00ed que recientemente Google ha lanzado <strong>Core Web Vitals<\/strong>, una nueva iniciativa con la que pretende ayudar a todos los webmasters y desarrolladores a identificar nuevas oportunidades y mejorar la navegaci\u00f3n y UX de su p\u00e1gina web.<\/p>\n<p><!--more--><\/p>\n<p>Pero \u00bfquieres conocer un poquito mejor qu\u00e9 es eso de los Core Web Vitals y c\u00f3mo pueden afectar al SEO de tu p\u00e1gina? Pues no perdamos m\u00e1s el tiempo y vamos a ello \ud83d\ude42<\/p>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Tabla de contenidos:<\/p><ul class=\"toc_list\"><li><a href=\"#Que_son_los_Core_Web_Vitals\">\u00bfQu\u00e9 son los Core Web Vitals?<\/a><ul><li><a href=\"#De_los_Web_Vitals_a_los_Core_Web_Vitals\">De los Web Vitals a los Core Web Vitals<\/a><\/li><\/ul><\/li><li><a href=\"#Largest_Contentful_Paint_LCP\">Largest Contentful Paint (LCP)<\/a><ul><li><a href=\"#Como_mejorar_el_Largest_Contentful_Paint\">\u00bfC\u00f3mo mejorar el Largest Contentful Paint?<\/a><\/li><\/ul><\/li><li><a href=\"#First_Input_Delay_FID\">First Input Delay (FID)<\/a><ul><li><a href=\"#Como_mejorar_el_First_Input_Delay\">\u00bfC\u00f3mo mejorar el First Input Delay?<\/a><\/li><\/ul><\/li><li><a href=\"#Cumulative_Layout_Shift_CLS\">Cumulative Layout Shift (CLS)<\/a><ul><li><a href=\"#Como_mejorar_el_Cumulative_Layout_Shift\">\u00bfC\u00f3mo mejorar el Cumulative Layout Shift?<\/a><\/li><\/ul><\/li><li><a href=\"#Como_medir_los_Core_Web_Vitals_de_mi_web\">\u00bfC\u00f3mo medir los Core Web Vitals de mi web?<\/a><\/li><li><a href=\"#Como_afectan_los_Core_Web_Vitals_al_SEO\">C\u00f3mo afectan los Core Web Vitals al SEO<\/a><\/li><li><a href=\"#En_conclusion8230\">En conclusi\u00f3n&#8230;<\/a><\/li><\/ul><\/div>\n\n<h2><span id=\"Que_son_los_Core_Web_Vitals\">\u00bfQu\u00e9 son los Core Web Vitals?<\/span><\/h2>\n<p>Los <strong>Core Web Vitals,<\/strong> o elementos esenciales de la web, es una iniciativa impulsada por Google que tiene como objetivo<strong> mejorar la experiencia de usuario en la web<\/strong><\/p>\n<p>Estos Core Web Vitals pretenden establecer unos<strong> criterios de medici\u00f3n simples y unificados<\/strong> para determinar qu\u00e9 es y qu\u00e9 no es una buena experiencia de usuario web.<\/p>\n<p>No es la primera vez que Google lanza herramientas o criterios para mejorar la experiencia de usuario o navegabilidad de las p\u00e1ginas web. Realmente es algo en lo que lleva trabajando muchos a\u00f1os, de hecho, estoy segura de que has utilizado o, por lo menos, has o\u00eddo hablar de alguno de estos recursos:<\/p>\n<ul>\n<li>Google PageSpeed Insights<\/li>\n<li>Search Console<\/li>\n<li>AMP<\/li>\n<li>Mobile-friendly Test<\/li>\n<li>Chrome UX Report<\/li>\n<li>\u2026<\/li>\n<\/ul>\n<h3><span id=\"De_los_Web_Vitals_a_los_Core_Web_Vitals\">De los Web Vitals a los Core Web Vitals<\/span><\/h3>\n<p>Google es consciente de que hasta este momento las m\u00e9tricas que exist\u00edan estaban poco unificadas. S\u00ed eran vitales (y lo siguen siendo) pero no son \u00fatiles para<strong> diagnosticar problemas espec\u00edficos de una p\u00e1gina web<\/strong>, especialmente cuando el propietario o la persona encargada de la misma no tiene suficientes conocimientos t\u00e9cnicos.<\/p>\n<p>Te pongo un ejemplo para que lo veas claro. Las m\u00e9tricas <strong>Time to First Byte (TTFB)<\/strong> o<strong> First Contentful Paint (FCP)<\/strong> son vitales para detectar problemas de rendimiento o velocidad web, pero dif\u00edciles de interpretar para un usuario poco avanzado.<\/p>\n<p>Es por ello que Google decidi\u00f3 tomar estas m\u00e9tricas vitales de una web o Web Vitals como base y unificarlas en 3 \u00fanicos criterios: los Core Web Vitals.<\/p>\n<p>Aunque lo m\u00e1s probable es que estos Core Web Vitals evolucionen con el tiempo, actualmente se centran en estos tres indicadores espec\u00edficos:<\/p>\n<ul>\n<li><strong>LCP: Largest Contentful Paint o velocidad de carga<\/strong><\/li>\n<li><strong>FID: First Input Delay o interactividad de una p\u00e1gina web<\/strong><\/li>\n<li><strong>CLS: Cumulative Layout Shift o estabilidad visual<\/strong><\/li>\n<\/ul>\n<p>A continuaci\u00f3n te explico cada uno de ellos con m\u00e1s detalle y algunas directrices para poder mejorarlos.<\/p>\n<h2><span id=\"Largest_Contentful_Paint_LCP\">Largest Contentful Paint (LCP)<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3329\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/lcp-core-web-vitals.png\" alt=\"Largest Contentful Paint\" width=\"515\" height=\"308\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/lcp-core-web-vitals.png 515w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/lcp-core-web-vitals-300x179.png 300w\" sizes=\"(max-width: 515px) 100vw, 515px\" \/><\/p>\n<p><strong>Largest Contentful Paint (LCP)<\/strong> es una m\u00e9trica de los Core Web Vitals que mide la<strong> velocidad de carga percibida<\/strong> e informa en qu\u00e9 momento se ha cargado el contenido principal y, por tanto, materializado en la pantalla del navegador.<\/p>\n<p>Google considera que, para ofrecer una buena experiencia de usuario, las p\u00e1ginas web deben trabajar por ofrecer el contenido en<strong> menos de 2,5 segundos<\/strong>. Si una p\u00e1gina web tarda supera esta medida, deber\u00eda tomar medidas para reducir los tiempos de carga.<\/p>\n<h3><span id=\"Como_mejorar_el_Largest_Contentful_Paint\">\u00bfC\u00f3mo mejorar el Largest Contentful Paint?<\/span><\/h3>\n<p>Para mejorar los resultados de esta m\u00e9trica es importante centrarse en los<strong> tiempos de respuesta del servidor<\/strong> donde est\u00e1 alojado tu proyecto as\u00ed como la optimizaci\u00f3n del servicio.<\/p>\n<p>Algunos aspectos a tener en cuenta y que te ayudar\u00e1n a reducir dr\u00e1sticamente los tiempos de carga:<\/p>\n<ol>\n<li><strong>Utiliza un servidor LiteSpeed.<\/strong> Todos nuestros <strong><a href=\"https:\/\/www.lucushost.com\/hosting-ssd\">planes de hosting<\/a><\/strong> ya se dan de alta en un servidor LiteSpeed, es decir, un servidor que ofrece niveles de rendimiento muy superiores a los tradicionales Apache o Nginx.<\/li>\n<li><strong>Discos SSD NVMe.<\/strong> En comparaci\u00f3n con los discos SSD tradicionales, la tecnolog\u00eda NVMe ejecuta las tareas de entrada y salida mucho m\u00e1s r\u00e1pido, transfieren m\u00e1s datos y terminan antes. \u00bfEn qu\u00e9 se traduce esto? Mayor velocidad de procesos y m\u00e1s rendimiento.<\/li>\n<li><strong>Utiliza un buen sistema de cach\u00e9.<\/strong> Al utilizar LiteSpeed como servidor web, podr\u00e1s utilizar el plugin LiteSpeed Cache en tus instalaciones de WordPress, PrestaShop, Drupal\u2026 Es una de las mejores formas de pisar el acelerador en tu p\u00e1gina web.<\/li>\n<\/ol>\n<h2><span id=\"First_Input_Delay_FID\">First Input Delay (FID)<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3328\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/fid-core-web-vitals.png\" alt=\"First Input Delay (FID)\" width=\"511\" height=\"307\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/fid-core-web-vitals.png 511w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/fid-core-web-vitals-300x180.png 300w\" sizes=\"(max-width: 511px) 100vw, 511px\" \/><\/p>\n<p>El <strong>First Input Delay (FID)<\/strong> se encarga de medir la <strong>capacidad que tiene un usuario de interactuar con la p\u00e1gina web<\/strong>. En otras palabras podemos decir que el FID es el tiempo que pasa desde que un usuario realiza una acci\u00f3n, por ejemplo, hace clic en una <strong><a href=\"https:\/\/www.lucushost.com\/blog\/llamada-a-la-accion\/\">llamada a la acci\u00f3n<\/a><\/strong> hasta que el navegador responde a esta petici\u00f3n.<\/p>\n<p>Para considerarse \u201cbueno\u201d el valor del FID <strong>no debe superar los 0,1 segundos<\/strong>, es decir, menos de 100 milisegundos.<\/p>\n<h3><span id=\"Como_mejorar_el_First_Input_Delay\">\u00bfC\u00f3mo mejorar el First Input Delay?<\/span><\/h3>\n<p>\u00bfNo te ha pasado nunca que aterrizas en una web y, aunque hagas clic en un bot\u00f3n, parece que la p\u00e1gina web no funciona? Esto es muy habitual sobre todo cuando navegamos a trav\u00e9s de dispositivos m\u00f3viles y la consecuencia es clara: una mala experiencia de usuario.<\/p>\n<p>Uno de los principales<strong> factores que influyen en el FID es una ejecuci\u00f3n de JavaScript demasiado pesada<\/strong>. A veces el navegador no puede responder al usuario porque todav\u00eda est\u00e9 ejecutando JavaScript en el hilo principal. Algunas soluciones:<\/p>\n<ol>\n<li><strong>Reduce el tiempo de ejecuci\u00f3n de JavaScript.<\/strong> Minifica y reduce archivos JavaScript o retrasa el JavaScript que no utilices.<\/li>\n<li><strong>Divide las tareas m\u00e1s pesadas.<\/strong> Puedes intentar dividir el c\u00f3digo de larga duraci\u00f3n en tareas m\u00e1s peque\u00f1as y as\u00edncronas para reducir tiempos. No es necesario cargar y ejecutar m\u00e1s de lo que un usuario pueda necesitar en este momento.<\/li>\n<li><strong>Optimiza tu p\u00e1gina.<\/strong> La recopilaci\u00f3n de datos del lado del cliente y la ejecuci\u00f3n de scripts de terceros pueden estar afectando negativamente a la latencia de tu sitio.<\/li>\n<\/ol>\n<h2><span id=\"Cumulative_Layout_Shift_CLS\">Cumulative Layout Shift (CLS)<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3326\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/cls-core-web-vitals.png\" alt=\"Cumulative Layout Shift (CLS)\" width=\"512\" height=\"308\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/cls-core-web-vitals.png 512w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/cls-core-web-vitals-300x180.png 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/p>\n<p>El <strong>Cumulative Layout Shift (CLS)<\/strong> se encarga de mediar la<strong> estabilidad visual<\/strong> de una p\u00e1gina web.\u00a0 El CLS analiza la cantidad de contenido visible que se desplaz\u00f3 en la ventana gr\u00e1fica y la distancia a la que se desplazaron los elementos afectados.<\/p>\n<p>Cuanta <strong>menos estabilidad visual<\/strong>, mayor es la probabilidad de que tus usuarios <strong>no hayan tenido una buena experiencia de usuario<\/strong> en tu sitio.<\/p>\n<p>Pero, \u00bfqu\u00e9 es eso de la estabilidad visual? Te voy a poner un ejemplo para que lo veas claro. Seguramente alguna vez te ha pasado que, navegando por una p\u00e1gina web desde un m\u00f3vil, los elementos de la p\u00e1gina se mov\u00edan a medida que el contenido terminaba de cargar. Si estos elementos no cargan r\u00e1pido se produce una inestabilidad, haciendo que muchas veces hagamos clic en lugares err\u00f3neos y generando una muy mala experiencia de usuario.<\/p>\n<p>Para evitar esto, el valor de CLS <strong>no debe superar 0,1.<\/strong><\/p>\n<h3><span id=\"Como_mejorar_el_Cumulative_Layout_Shift\">\u00bfC\u00f3mo mejorar el Cumulative Layout Shift?<\/span><\/h3>\n<p>Hay algunas pautas que pueden ayudarte a mejorar la estabilidad visual de tu p\u00e1gina. Estas son algunas de las recomendaciones que propone Google:<\/p>\n<ul>\n<li><strong>Im\u00e1genes con dimensiones.<\/strong> A\u00f1adir dimensiones a las im\u00e1genes o v\u00eddeos con los atributos <em>width<\/em> y <em>height<\/em>, algo que hab\u00eda quedado en el olvido con el auge del dise\u00f1o responsive. Esto permite calcular una relaci\u00f3n o ratio de ancho y alto antes de que la imagen cargue sin provocar que los elementos bailen por la web.<\/li>\n<li><strong>Anuncios o banners.<\/strong> Son los principales causantes de la inestabilidad visual, ya que las redes de anuncios permiten tama\u00f1os de banners din\u00e1micos. De todas formas, es necesario calcular y reservar el espacio que podr\u00edan utilizar, aunque no siempre vaya a ajustarse con el tama\u00f1o real del anuncio.<\/li>\n<li><strong>Evita anuncios en la parte superior de la web.<\/strong> Generalmente cuando incluimos un banner din\u00e1mico al principio de la web corremos el riesgo de que todos los elementos que est\u00e9n debajo se muevan. Por eso lo m\u00e1s adecuado es incluir estos anuncios en mitad de la web y minimizar el riesgo de inestabilidad visual.<\/li>\n<\/ul>\n<h2><span id=\"Como_medir_los_Core_Web_Vitals_de_mi_web\">\u00bfC\u00f3mo medir los Core Web Vitals de mi web?<\/span><\/h2>\n<p>Despu\u00e9s de ver todo esto estoy casi segura que estar\u00e1s deseando introducir tu dominio en alguna herramienta y ver c\u00f3mo de saludable es tu web, \u00bfverdad?<\/p>\n<p>Pues bien, si utilizas Google Chrome como navegador web puedes instalar la <strong><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">extensi\u00f3n de Google Web Vitals<\/a><\/strong>. Es muy visual y f\u00e1cil de utilizar, en cuanto lo instales ver\u00e1s algo como lo que te muestro a continuaci\u00f3n:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3335 size-full\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/resultados-core-web-vitals-extension-e1592227559306.png\" alt=\"Resultados obtenidos con la extensi\u00f3n Core Web Vitals de Google Chrome\" width=\"481\" height=\"283\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/resultados-core-web-vitals-extension-e1592227559306.png 481w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/resultados-core-web-vitals-extension-e1592227559306-300x177.png 300w\" sizes=\"(max-width: 481px) 100vw, 481px\" \/><\/p>\n<p>Esta extensi\u00f3n de Google no es la \u00fanica herramienta que te permite tener acceso a estos datos. Tambi\u00e9n puedes obtenerlos el resultado de tus Core Web Vitals utilizando PageSpeed Insights, Chrome UX Report, Search Console, Chrome DevTools o Lighthouse.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3336\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/tabla-core-web-vitals.png\" alt=\"Herramientas disponibles para medir los Core Web Vitals de una p\u00e1gina web.\" width=\"594\" height=\"445\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/tabla-core-web-vitals.png 594w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/06\/tabla-core-web-vitals-300x225.png 300w\" sizes=\"(max-width: 594px) 100vw, 594px\" \/><\/p>\n<h2><span id=\"Como_afectan_los_Core_Web_Vitals_al_SEO\">C\u00f3mo afectan los Core Web Vitals al SEO<\/span><\/h2>\n<p>Una cosa est\u00e1 clara. Cuando un persona navega por una p\u00e1gina web quiere tener una buena experiencia de usuario y cuando tienes un negocio online es algo que debes tener muy en cuenta y en lo que debes trabajar si quieres que tus clientes vuelvan a tu sitio.<\/p>\n<p>Por otra parte, tambi\u00e9n sabemos que <strong>Google te premia si tus usuarios tienen una buena experiencia de usuario<\/strong>. Es decir, valora positivamente que tu web sea r\u00e1pida, mobile-friendly, que los usuarios pasen tiempo en ella\u2026 Es decir, la experiencia de usuario s\u00ed cuenta para SEO.<\/p>\n<p>Teniendo en cuenta que los <strong>Core Web Vitals<\/strong> tratan de medir la experiencia de usuario en una p\u00e1gina web, \u00bfcontar\u00e1n para SEO? La respuesta no puede ser otra&#8230; \u00a1Claro que s\u00ed!<\/p>\n<p>Tanto es as\u00ed que recientemente <strong><a href=\"https:\/\/webmasters.googleblog.com\/2020\/05\/evaluating-page-experience.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google ha anunciado<\/a><\/strong> que, efectivamente, estas medidas obtenidas de los Core Web Vitals tendr\u00e1n importancia dentro ranking de una p\u00e1gina, junto con los factores de posicionamiento que ya exist\u00edan, aunque estos cambios no ser\u00e1n inmediatos.<\/p>\n<p>Como consecuencia del Covid-19, son conscientes de que muchas peque\u00f1as y medianas empresas est\u00e1n centradas al 100% en reparar los efectos de esta terrible situaci\u00f3n, por lo que es probable que no sea hasta 2021 cuando veamos estos cambios.<\/p>\n<p>As\u00ed que, simplemente <strong>es cuesti\u00f3n de tiempo que estos cambios lleguen al algoritmo de Google<\/strong>. \u00bfLo mejor que puedes hacer? No dejarlo todo para el \u00faltimo momento.<\/p>\n<h2><span id=\"En_conclusion8230\">En conclusi\u00f3n&#8230;<\/span><\/h2>\n<p>Ya no hay marcha atr\u00e1s. Google cada d\u00eda le da m\u00e1s importancia a la experiencia de usuario web y as\u00ed lo ha demostrado tras el anuncio de los <strong>Core Web Vitals<\/strong>.<\/p>\n<p>Esta iniciativa pretende establecer unos indicadores de medici\u00f3n simples y unificados para determinar qu\u00e9 es y qu\u00e9 no es una buena experiencia de usuario web. Estos indicadores son:<\/p>\n<ul>\n<li><strong>Largest Contentful Paint o velocidad de carga (LCP)<\/strong><\/li>\n<li><strong>First Input Delay o interactividad de una p\u00e1gina web (FID)<\/strong><\/li>\n<li><strong>Cumulative Layout Shift o estabilidad visual (CLS)<\/strong><\/li>\n<\/ul>\n<p>Aunque no conocemos la fecha exacta, lo que s\u00ed es seguro es que estos tres criterios contar\u00e1n para determinar la posici\u00f3n de una web en el ranking de Google.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La experiencia de usuario va ganando terreno en el mundo del posicionamiento web. Tanto es as\u00ed que recientemente Google ha lanzado Core Web Vitals, una nueva iniciativa con la que pretende ayudar a todos los webmasters y desarrolladores a identificar nuevas oportunidades y mejorar la navegaci\u00f3n y UX de su p\u00e1gina web.<\/p>\n","protected":false},"author":3,"featured_media":3327,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,46],"tags":[71,49,48,47,61],"_links":{"self":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/3325"}],"collection":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/comments?post=3325"}],"version-history":[{"count":11,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/3325\/revisions"}],"predecessor-version":[{"id":3408,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/3325\/revisions\/3408"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/media\/3327"}],"wp:attachment":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/media?parent=3325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/categories?post=3325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/tags?post=3325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}