--- title: "Como corrigir CLS alto e layout shift no WordPress" url: https://full.services/wp-fixer/corrigir-cls-alto-wordpress/ date: 2026-06-13 author: "Clayton Margiotti" --- # Como corrigir CLS alto e layout shift no WordPress ## O que é o CLS alto no WordPress? O CLS alto no WordPress é uma falha de Core Web Vitals que mede a estabilidade visual da página. O Cumulative Layout Shift soma todos os deslocamentos inesperados de conteúdo enquanto a página carrega: quando uma imagem aparece e empurra o texto para baixo, ou um banner injetado desloca o botão que o usuário ia clicar. A meta do Google é CLS abaixo de 0,1; entre 0,1 e 0,25 é "precisa melhorar" e acima de 0,25 é "ruim". A correção é reservar antecipadamente o espaço de cada elemento que carrega depois. ## Como identificar - O conteúdo da página "pula" para baixo enquanto carrega, como se algo empurrasse o texto. - O PageSpeed Insights marca o CLS acima de 0,1 no relatório de Core Web Vitals. - O Search Console acusa URLs com "CLS maior que 0,1" no relatório de Core Web Vitals. - O visitante clica num botão e o layout desloca no último instante, fazendo-o errar o clique. ## Como prevenir - Sempre declare width e height (ou aspect-ratio) em imagens, vídeos e iframes ao publicar - Mantenha font-display: swap e preload da fonte principal no tema desde o início - Reserve um contêiner de altura fixa para qualquer anúncio, embed ou widget injetado por JavaScript ## Erros relacionados - [Como corrigir LCP alto no WordPress (Core Web Vitals)](https://full.services/wp-fixer/corrigir-lcp-alto-wordpress/) - [Como corrigir imagens sem lazy loading no WordPress](https://full.services/wp-fixer/corrigir-lazy-loading-imagens-wordpress/) - [Como corrigir Eliminate render-blocking resources](https://full.services/wp-fixer/corrigir-render-blocking-resources-wordpress/) --- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://full.services/#org", "name": "FULL Services", "url": "https://full.services/", "sameAs": [ "https://www.instagram.com/fullservicesbr", "https://www.facebook.com/fullservices.br", "https://www.linkedin.com/company/fullservicesbr/" ], "knowsAbout": [ "WordPress", "WordPress Hosting", "Web Development", "Performance Optimization", "WordPress Security", "SEO para WordPress" ], "award": [ "Gold Medal - The WP Weekly Awards 2023", "Gold Medal - The WP Weekly Awards 2024" ], "logo": { "@type": "ImageObject", "url": "https://full.services/wp-content/uploads/full-services-logo.png", "width": 200, "height": 60 }, "hasCredential": { "@type": "EducationalOccupationalCredential", "credentialCategory": "certification", "name": "CVE Numbering Authority (CNA)", "description": "Autoridade de numeração de vulnerabilidades (CVE) para o ecossistema WordPress, autorizada a atribuir IDs CVE. Válida desde 2022-05-03, com abrangência global.", "url": "https://www.cve.org/PartnerInformation/ListofPartners/partner/FULL", "recognizedBy": { "@type": "Organization", "name": "CISA — Cybersecurity and Infrastructure Security Agency", "url": "https://www.cisa.gov/", "sameAs": "https://www.cisa.gov/" } } }, { "@type": "TechArticle", "@id": "https://full.services/wp-fixer/corrigir-cls-alto-wordpress/#article", "headline": "Como corrigir CLS alto e layout shift no WordPress", "url": "https://full.services/wp-fixer/corrigir-cls-alto-wordpress/", "inLanguage": "pt-BR", "datePublished": "2026-06-13T23:16:58-03:00", "dateModified": "2026-06-13T23:16:58-03:00", "author": { "@id": "https://full.services/#org" }, "publisher": { "@id": "https://full.services/#org" }, "isAccessibleForFree": false, "about": [ { "@type": "Thing", "@id": "https://www.wikidata.org/wiki/Q13166", "name": "WordPress", "sameAs": "https://www.wikidata.org/wiki/Q13166", "url": "https://wordpress.org/" }, { "@type": "Thing", "name": "Performance & Velocidade" } ], "mentions": { "@type": "Thing", "@id": "https://www.wikidata.org/wiki/Q13166", "name": "WordPress", "sameAs": "https://www.wikidata.org/wiki/Q13166", "url": "https://wordpress.org/" }, "mainEntityOfPage": { "@type": "WebPage", "@id": "https://full.services/wp-fixer/corrigir-cls-alto-wordpress/" }, "wordCount": 479, "description": "CLS alto no WordPress é quando o Cumulative Layout Shift, a medida de quanto os elementos da página \"pulam\" durante o carregamento, fica acima de 0,1. Costuma vir de imagens e iframes sem dimensões reservadas, fontes que trocam de tamanho e anúncios ou banners injetados sem espaço fixo.", "articleSection": "Performance & Velocidade", "keywords": "cls acima de 0.1, cumulative layout shift wordpress, layout shift wordpress, pagina pula ao carregar wordpress, reduzir cls wordpress", "proficiencyLevel": "Intermediate", "citation": { "@type": "CreativeWork", "url": "https://developer.mozilla.org/en-US/docs/Glossary/Cumulative_Layout_Shift", "name": "MDN Web Docs — Cumulative Layout Shift" }, "mainEntity": { "@type": "SoftwareSourceCode", "name": "Como corrigir CLS alto e layout shift no WordPress", "programmingLanguage": "CSS", "codeRepository": "https://full.services/wp-fixer/corrigir-cls-alto-wordpress/", "isAccessibleForFree": false } }, { "@type": "FAQPage", "@id": "https://full.services/wp-fixer/corrigir-cls-alto-wordpress/#faq", "isPartOf": { "@id": "https://full.services/wp-fixer/corrigir-cls-alto-wordpress/#article" }, "isAccessibleForFree": true, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-cls-alto-wordpress/#faq-q1", "name": "Qual é o valor ideal de CLS no WordPress?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "A meta do Google é CLS abaixo de 0,1 com dados de campo. Entre 0,1 e 0,25 o status é \"precisa melhorar\" e acima de 0,25 é considerado ruim, prejudicando a experiência e o ranqueamento.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-cls-alto-wordpress/#faq-q2", "name": "Por que minha página \"pula\" enquanto carrega?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Porque algum elemento carrega sem ter o espaço reservado e empurra o resto: uma imagem sem width/height, uma fonte que troca de tamanho ou um anúncio injetado depois. Reservar o espaço de cada um elimina o salto.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-cls-alto-wordpress/#faq-q3", "name": "Definir width e height nas imagens resolve o CLS?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Resolve boa parte. Com as dimensões declaradas, o navegador reserva o espaço da imagem antes de ela carregar, então o texto ao redor não é empurrado. Faltam ainda fontes, anúncios e embeds, que precisam do mesmo cuidado.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-cls-alto-wordpress/#faq-q4", "name": "Como as fontes web causam layout shift?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Quando a fonte final carrega depois da fonte de fallback e tem altura diferente, o texto muda de tamanho e desloca o conteúdo. Use font-display: swap, preload da fonte e uma fonte de fallback com métricas próximas para minimizar o efeito.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-cls-alto-wordpress/#faq-q5", "name": "Anúncios e banners aumentam o CLS?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Sim, são uma das maiores causas. Slots de anúncio injetados por JavaScript \"nascem\" do tamanho zero e empurram o conteúdo ao carregar. Reserve um contêiner com min-height fixo para o slot antes de ele ser preenchido.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-cls-alto-wordpress/#faq-q6", "name": "Corrigi o CLS mas o Search Console ainda aponta o problema. Por quê?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "O Search Console usa dados de campo (CrUX), uma média de 28 dias de usuários reais. As correções aparecem na hora no teste de laboratório do PageSpeed, mas o relatório de campo só atualiza após algumas semanas de coleta.", "author": { "@id": "https://full.services/#org" } } } ] } ] } ```