{"id":290,"date":"2020-10-16T05:25:27","date_gmt":"2020-10-16T05:25:27","guid":{"rendered":"https:\/\/softwareinformatico.com\/blog\/?p=290"},"modified":"2020-12-11T07:11:30","modified_gmt":"2020-12-11T07:11:30","slug":"que-es-el-cls-y-por-que-afecta-al-posicionamiento-web","status":"publish","type":"post","link":"https:\/\/softwareinformatico.com\/blog\/que-es-el-cls-y-por-que-afecta-al-posicionamiento-web\/","title":{"rendered":"Qu\u00e9 es el CLS y por qu\u00e9 afecta al posicionamiento web."},"content":{"rendered":"\n<p><strong>El CSL<\/strong> (Cumulative Layout Shift) es una de la <strong>tres nuevas m\u00e9tricas que ha introducido Google<\/strong> junto a (FCP y LCP) para optimizar la calidad de la experiencia del usuario.<br><br>Para que veamos la importancia del CLS solo hay que ver que <strong>ha sido incluido dentro de Pagespeed de Google<\/strong> que es la herramienta que valora la <a href=\"https:\/\/softwareinformatico.com\/optimizacion-web\/\">optimizaci\u00f3n web<\/a> teniendo este apartado gran influencia en el <a href=\"https:\/\/softwareinformatico.com\/posicionamiento-en-google\/\">posicionamiento en google<\/a> de una p\u00e1gina web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CLS. \u00bfCu\u00e1ndo ocurre?.<\/h2>\n\n\n\n<p>\u00bfNo os ha pasado al entrar en una web que al ir a pinchar un bot\u00f3n, un enlace o al leer un texto, de repente se modifica la p\u00e1gina y seleccionamos otro elemento?. Pues <strong>la m\u00e9trica que mide esos cambios de distribuci\u00f3n es el CLS<\/strong>.<\/p>\n\n\n\n<p>El elemento que produce el comportamiento no deseado normalmente puede ser un v\u00eddeo, una imagen o un texto m\u00e1s peque\u00f1o que luego se hace m\u00e1s grande<\/p>\n\n\n\n<p>Muchas veces <strong>el CLS se produce por carga ineficiente de estilos css, por  mala programaci\u00f3n de javascript, maquetaci\u00f3n o mala estructura de la web<\/strong>. Pero en muchos casos <strong>tambi\u00e9n se produce por pr\u00e1cticas enga\u00f1osas que intentan generar clicks en publicidad<\/strong> o en elementos en los que el usuario no quiero pinchar, por eso Google ha empezado a penalizar a los que incumplen estas m\u00e9tricas y esto afecta a SEO.<\/p>\n\n\n\n<p>Las puntuaci\u00f3n que establece Google se divide en 3 puntos:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"256\" src=\"https:\/\/softwareinformatico.com\/blog\/wp-content\/uploads\/2020\/10\/CLS-puntuacion-1024x256.jpg\" alt=\"CLS puntuaci\u00f3n\" class=\"wp-image-293\" srcset=\"https:\/\/softwareinformatico.com\/blog\/wp-content\/uploads\/2020\/10\/CLS-puntuacion-1024x256.jpg 1024w, https:\/\/softwareinformatico.com\/blog\/wp-content\/uploads\/2020\/10\/CLS-puntuacion-300x75.jpg 300w, https:\/\/softwareinformatico.com\/blog\/wp-content\/uploads\/2020\/10\/CLS-puntuacion-768x192.jpg 768w, https:\/\/softwareinformatico.com\/blog\/wp-content\/uploads\/2020\/10\/CLS-puntuacion.jpg 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Rojo. Pobre, tienes un problema importante de CLS.<\/li><li>Amarillo. Necesita mejorar.<\/li><li>Verde. Correcta.<\/li><\/ul>\n\n\n\n<div class=\"div_consulta_bordes\"><p class=\"text_ini\">Si necesitas ayuda, o tienes dudas sobre <a href=\"https:\/\/softwareinformatico.com\/\" title=\"aplicaciones inform\u00e1ticas\">aplicaciones inform\u00e1ticas<\/a> preg\u00fantanos, podemos ayudarte.<\/p><div class=\"creatutienda\"><a href=\"https:\/\/softwareinformatico.com\/consulta-informatica\/\" title=\"consulta informatica\">CONSULTA INFORMATICA<\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo solucionar los problemas de CLS.<\/h2>\n\n\n\n<p>Antes de nada tenemos que detectar qu\u00e9 elementos son los que producen los cambios de tama\u00f1o o dise\u00f1o para poder arreglarlos. Normalmente las posibles soluciones son:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Definir los estilos al inicio<\/strong> en vez de que se ejecuten al final y cambien el dise\u00f1o del componente.<\/li><li>Establecer las<strong> propiedades height y width por defecto<\/strong> para el componente.<\/li><li>Revisar que <strong>no hay colisiones entre clases css<\/strong> con par\u00e1metros !important.<\/li><li><strong>Evitar que Javascript modifique styles<\/strong> o clases de Css de forma posterior.<\/li><li>Si se usan sistemas como WordPress, Joomla, Prestashop etc. <strong>revisar que ning\u00fan plugin mete c\u00f3digo extra<\/strong> que modifica los estilos.<\/li><\/ul>\n\n\n\n<p>Las mejoras asociadas a webs vitals, se incluyan dentro de la <a href=\"https:\/\/softwareinformatico.com\/optimizacion-web\/\">optimizaci\u00f3n web<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resumen<\/h2>\n\n\n\n<p>Las <strong>nuevas m\u00e9tricas de Web Vitals introducidas por Google (entre las que se encuentra el CLS) son bastante importantes si nuestra meta es conseguir un buen posicionamiento web<\/strong>. Adem\u00e1s Google est\u00e1 apostando bastante fuerte por seguir incluyendo nuevas mejoras para afinar esas m\u00e9tricas seguramente veamos nuevos cambios dentro de poco tiempo. Tambi\u00e9n a\u00f1adimos la <a href=\"https:\/\/web.dev\/cls\/\">informaci\u00f3n oficial<\/a> de Google sobre el CLS. <\/p>\n\n\n\n<p>CLS no es la \u00fanica m\u00e9trica que usa Google, si quieres conocer otras m\u00e9tricas muy importantes, te recomendamos leer <a href=\"https:\/\/softwareinformatico.com\/blog\/que-es-el-lcp-y-por-que-afecta-al-posicionamiento-web\/\">qu\u00e9 es el LCP y por qu\u00e9 afecta al posicionamiento web<\/a><\/p>\n\n\n\n<p>Si necesitas m\u00e1s informaci\u00f3n al respecto siempre puedes consultarnos porque somos expertos en la materia y nos dedicamos a mejorar al extremo estas m\u00e9tricas.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>El CSL (Cumulative Layout Shift) es una de la tres nuevas m\u00e9tricas que ha introducido Google junto a (FCP y LCP) para optimizar la calidad <a class=\"mh-excerpt-more\" href=\"https:\/\/softwareinformatico.com\/blog\/que-es-el-cls-y-por-que-afecta-al-posicionamiento-web\/\" title=\"Qu\u00e9 es el CLS y por qu\u00e9 afecta al posicionamiento web.\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":296,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[32,23,26,33,25,24],"class_list":["post-290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion-web","tag-google","tag-optimizacion-web","tag-pagespeed-google","tag-seo","tag-webs-vitals","tag-wpo"],"_links":{"self":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts\/290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/comments?post=290"}],"version-history":[{"count":0,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts\/290\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/media\/296"}],"wp:attachment":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/media?parent=290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/categories?post=290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/tags?post=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}