{"id":5254,"date":"2022-06-20T10:00:00","date_gmt":"2022-06-20T08:00:00","guid":{"rendered":"https:\/\/www.vadavo.com\/blog\/?p=5254"},"modified":"2024-08-26T15:30:25","modified_gmt":"2024-08-26T15:30:25","slug":"cls-google-que-es-como-afecta-seo","status":"publish","type":"post","link":"https:\/\/www.vadavo.com\/blog\/cls-google-que-es-como-afecta-seo\/","title":{"rendered":"CLS de Google: Qu\u00e9 es y c\u00f3mo afecta al SEO"},"content":{"rendered":"\n<p>Seguro que m\u00e1s de una vez te ha pasado que, mientras esperabas a que cargase una p\u00e1gina web, los <strong>elementos de esta se mov\u00edan de sitio<\/strong>, haciendo dif\u00edcil pulsar sobre enlaces o botones. Pero, \u00bfpor qu\u00e9 ocurre esto? Este cambio inesperado y repentino del contenido de una web es conocido como <strong>CLS<\/strong> o Cumulative Layout Shift, y <strong>afecta <\/strong><a href=\"https:\/\/www.vadavo.com\/blog\/search-intent-intencion-busqueda-seo\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.vadavo.com\/blog\/search-intent-intencion-busqueda-seo\/\" rel=\"noreferrer noopener\"><strong>negativamente al SEO<\/strong>.<\/a> Hoy te contamos c\u00f3mo eval\u00faa Google este factor, qu\u00e9 lo causa y c\u00f3mo puedes solucionar este problema para subir unas cuantas posiciones en el buscador. \u00a1Vamos all\u00e1!&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"> <strong><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/arrow-pointing-right-in-a-circle-1.png\" alt=\"\" style=\"width: 35px;\"><\/strong> Qu\u00e9 es el CLS<\/h2>\n\n\n\n<p>Google define la m\u00e9trica CLS como la suma de las puntuaciones de todos los cambios inesperados de dise\u00f1o que se han producido durante la vida \u00fatil de la p\u00e1gina.&nbsp;<\/p>\n\n\n\n<p>Como hemos dicho antes, este peque\u00f1o problema de dise\u00f1o web afecta es valorado negativamente por Google, ya que se ha convertido uno de los tres <strong><em>Core web vitals<\/em><\/strong><em> <\/em>&nbsp;o \u201c<a href=\"https:\/\/support.google.com\/webmasters\/answer\/9205520\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">m\u00e9tricas principales<\/a>\u201d que Google Search Console tiene en cuenta para el <a href=\"https:\/\/www.vadavo.com\/blog\/que-es-rank-math-y-funcion\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.vadavo.com\/blog\/que-es-rank-math-y-funcion\/\" rel=\"noreferrer noopener\">posicionamiento SEO de una p\u00e1gina web<\/a>. Estas m\u00e9tricas est\u00e1n formadas por el CLS, junto con el <strong>Largest Contenful Paint<\/strong> (LCP) y el <strong>First Input Display<\/strong> (FID), y analizan el tiempo de carga, la estabilidad del contenido y la interactividad de una web, es decir, tienen en cuenta la experiencia y entorno de usuario.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"> <strong><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\" style=\"width: 35px;\"><\/strong> Causas del CLS<\/h3>\n\n\n\n<p>Hay muchos elementos que pueden causar este problema, pero los m\u00e1s comunes suelen ser:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Im\u00e1genes y v\u00eddeos<\/strong> sin dimensiones especificadas.<\/li>\n\n\n\n<li><strong><a href=\"http:\/\/vadavo.com\/blog\/como-crear-pop-ups-en-wordpress\/\" data-type=\"URL\" data-id=\"vadavo.com\/blog\/como-crear-pop-ups-en-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Contenido inyectado din\u00e1micament<\/a>e<\/strong> como banners o ventanas de chat.<\/li>\n\n\n\n<li><strong>Anuncios o iframes <\/strong>incrustados sin dimensiones especificadas.<\/li>\n\n\n\n<li>Algunos tipos de <strong>fuentes web<\/strong> que causan FOIT (flashes de texto visibile) o FOUT (flashes de texto sin estilo)<\/li>\n\n\n\n<li><strong>Acciones que esperan una respuesta<\/strong> <strong>de red<\/strong> <strong>antes de actualizar el DOM <\/strong>(Modelo de Objetos de Documento)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"> <strong><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/arrow-pointing-right-in-a-circle-1.png\" alt=\"\" style=\"width: 35px;\"><\/strong> Puntuaci\u00f3n CLS<\/h2>\n\n\n\n<p>Google Search Console tiene un sistema propio de puntuaci\u00f3n para calificar esta m\u00e9trica, en el que, <strong>cuanto mayor sea esta puntuaci\u00f3n, peor ser\u00e1 la experiencia de usuario<\/strong>, tal como se indica en la imagen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/fn5pFiPAEWN8OPSwVosJnLI1dPNvFnxcZLA45mWEi8rkR-XJD-Y6P4DkljjIbRA_dbT1zBl195ea7PWvwlMfO8eaKN7Ubhu_ZwNCIPX9oEWkwAQCohnkgBDsdXCcbRPvgk7S9yH2izFgnICfsw\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Puntuaci\u00f3n CLS de Google<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"> <strong><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\" style=\"width: 35px;\"><\/strong> C\u00e1lculo del CLS<\/h3>\n\n\n\n<p>Pero, \u00bfde d\u00f3nde sale esta puntuaci\u00f3n? Pues bien, Google utiliza dos par\u00e1metros para el c\u00e1lculo de la m\u00e9trica. Estos son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fracci\u00f3n de Impacto<\/strong>: este par\u00e1metro se refiere al espacio ocupado por el elemento inestable en la ventana gr\u00e1fica de la web, por lo que se mide cu\u00e1nto ocupa este elemento antes y despu\u00e9s de la carga. Por ejemplo, si antes de la carga ocupa un 30% y despu\u00e9s un 10%, el Impact Fraction total ser\u00e1 de 40%.\u00a0<\/li>\n\n\n\n<li><strong>Fracci\u00f3n de Distancia<\/strong>: este par\u00e1metro hace referencia a la cantidad de espacio que el elemento inestable se ha movido. En este caso, ser\u00eda un 20%.\u00a0<\/li>\n<\/ul>\n\n\n\n<p>Para calcular el CLS total, <strong>se multiplican estos dos par\u00e1metros<\/strong>. El resultado en nuestro caso ser\u00eda 0.4 x 0.2 = 0.08, por lo que estar\u00eda dentro de los buenos resultados que espera Google.&nbsp;<\/p>\n\n\n\n<p>La puntuaci\u00f3n CLS de tu p\u00e1gina web se puede calcular mediante distintos enlaces, como <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Page Speed<\/a> o <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\/bigquery\/getting-started\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Chrome User Experience Report<\/a>.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"> <strong><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/arrow-pointing-right-in-a-circle-1.png\" alt=\"\" style=\"width: 35px;\"><\/strong> Soluciones para mejorar la puntuaci\u00f3n CLS<\/h2>\n\n\n\n<p>Para conseguir mejorar la puntuaci\u00f3n de esta m\u00e9trica, se ha de <strong>descubrir el elemento causante del desajuste<\/strong> e implementar soluciones espec\u00edficas para el elemento en cuesti\u00f3n. Algunas de ellas son:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"> <strong><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\" style=\"width: 35px;\"><\/strong> Especificar las dimensiones de las im\u00e1genes y v\u00eddeos<\/h3>\n\n\n\n<p>Debido a la popularizaci\u00f3n de los dise\u00f1os responsive, muchas veces olvidamos fijar las dimensiones de una imagen o v\u00eddeo, ya que con el m\u00e9todo CSS el ancho y el alto se asignan autom\u00e1ticamente cuando el navegador comienza a descargar la imagen. Por eso, para que el contenido multimedia no se mueva del sitio, podemos fijar la <strong>relaci\u00f3n al aspecto<\/strong> para que el navegador calcule el espacio necesario para mostrar la imagen y reducir as\u00ed el riesgo de movimientos no deseados.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"> <strong><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\" style=\"width: 35px;\"><\/strong> Fijar dimensiones de anuncios y iframes<\/h3>\n\n\n\n<p>En el caso de iframes y anuncios, la soluci\u00f3n es <strong>crear un estilo para el contenedor, <\/strong>es decir declarar la altura y anchura correcta para el elemento HTML &lt;&lt;div&gt;&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"> <strong><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\" style=\"width: 35px;\"><\/strong> Uso de valores font:display link rel=preload<\/h3>\n\n\n\n<p>Para solucionar los problemas de FOIT y FOUT, puedes <strong>fijar valores font:display <\/strong>como auto, swap, block, fallback y optional. Adem\u00e1s, para conseguir un mejor resultado, tambi\u00e9n puedes determinar la<strong> precarga de las fuentes usando&nbsp;<\/strong>                                                  <strong>&lt;link rel=preload&gt; .<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"> <strong><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\" style=\"width: 35px;\"> <\/strong>Evitar cambios en el contenido din\u00e1mico<\/h3>\n\n\n\n<p>Se debe <strong>evitar<\/strong> a toda costa <strong>insertar contenido nuevo por encima del existente<\/strong>, excepto cuando es en respuesta a una interacci\u00f3n del usuario. Como ocurre con anuncios e im\u00e1genes, es muy aconsejable fijar las dimensiones y <strong>reservar el espacio<\/strong> que ocupar\u00e1 el contenido din\u00e1mico.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"> <strong><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/arrow-pointing-right-in-a-circle-1.png\" alt=\"\" style=\"width: 35px;\"><\/strong> Conclusi\u00f3n<\/h2>\n\n\n\n<p>El <strong>CLS es una m\u00e9trica<\/strong> a la que Google da <strong>mucha importancia<\/strong> a la hora de<a href=\"https:\/\/www.vadavo.com\/blog\/como-promocionar-tu-blog-de-manera-efectiva\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.vadavo.com\/blog\/como-promocionar-tu-blog-de-manera-efectiva\/\" rel=\"noreferrer noopener\"> posicionar nuestra p\u00e1gina web<\/a>. Algo tan sencillo como fijar las dimensiones de una imagen o un anuncio pueden ayudarte a aumentar tu visibilidad y a mejorar la experiencia de usuario de tu web, por lo que es <strong>muy recomendable realizar comprobaciones rutinarias de los valores de este tipo de m\u00e9tricas<\/strong>.&nbsp;<\/p>\n\n\n\n<p>\u00bfTe gustar\u00eda saber m\u00e1s sobre las m\u00e9tricas principales de Google Search Console? \u00a1Cu\u00e9ntanos!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Seguro que m\u00e1s de una vez te ha pasado que, mientras esperabas a que cargase una p\u00e1gina web, los elementos de esta se mov\u00edan de sitio, haciendo dif\u00edcil pulsar sobre enlaces o botones. Pero, \u00bfpor qu\u00e9 ocurre esto? Este cambio inesperado y repentino del contenido de una web es conocido como CLS o Cumulative Layout [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6528,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[168,159,169,122],"class_list":["post-5254","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-cls","tag-google","tag-metricas-principales","tag-seo"],"_links":{"self":[{"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/posts\/5254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/comments?post=5254"}],"version-history":[{"count":2,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/posts\/5254\/revisions"}],"predecessor-version":[{"id":6529,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/posts\/5254\/revisions\/6529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/media\/6528"}],"wp:attachment":[{"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/media?parent=5254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/categories?post=5254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/tags?post=5254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}