{"id":1173,"date":"2024-07-22T22:30:00","date_gmt":"2024-07-23T01:30:00","guid":{"rendered":"https:\/\/kangaroo.host\/blog\/elementor-como-reduzir-tamanho-do-dom\/"},"modified":"2025-07-14T16:29:40","modified_gmt":"2025-07-14T19:29:40","slug":"elementor-como-reduzir-tamanho-do-dom","status":"publish","type":"post","link":"https:\/\/kangaroo.host\/blog\/elementor-como-reduzir-tamanho-do-dom\/","title":{"rendered":"Elementor – Como reduzir tamanho do DOM"},"content":{"rendered":"\n

Ol\u00e1, Kangaroozito! Conseguir reduzir o tamanho do DOM \u00e9 um problema recorrente que muitos enfrentam quando tentam otimizar a performance de seus sites, sobretudo para SEO. Para reduzir essa dificuldade, o plugin Elementor criou meios que ajudam a tornar esse processo mais f\u00e1cil.<\/p>\n\n\n\n

Com mais facilidades, o processo de otimiza\u00e7\u00e3o se torna muito mais acess\u00edvel, o que n\u00e3o somente permite que mais usu\u00e1rios se interessem pelo assunto, como tamb\u00e9m facilita a rotina daqueles que diariamente trabalham com essas otimiza\u00e7\u00f5es de alta performance visando o SEO.<\/p>\n\n\n\n

Por isso, no nosso artigo de hoje, mostraremos como voc\u00ea poder\u00e1 hoje mesmo come\u00e7ar a tornar o seu site ainda mais r\u00e1pido e melhor avaliado ao reduzir o tamanho do DOM com o Elementor.<\/p>\n\n\n\n

Sum\u00e1rio<\/h3>\n\n\n\n
    \n
  1. O problema<\/li>\n\n\n\n
  2. Como corrigir<\/li>\n\n\n\n
  3. Conclus\u00e3o<\/li>\n<\/ol>\n\n\n\n

    O problema do DOM<\/h2>\n\n\n\n
    \"O
    Imagem gerada por IA<\/figcaption><\/figure>\n\n\n\n

    Ao ter uma p\u00e1gina com excesso de elementos DOM, \u00e9 bastante comum que isso gere um tempo de carregamento mais lento na p\u00e1gina, j\u00e1 que ela ter\u00e1 mais itens, o que a deixar\u00e1 mais complexa e pesada, dificultando a renderiza\u00e7\u00e3o por parte do navegador dos visitantes. \u00c9 v\u00e1lido, ainda, dizer que isso independe do Elementor, j\u00e1 que todo site ter\u00e1 DOM.<\/p>\n\n\n\n

    Isso pode acontecer n\u00e3o somente pelo excesso de elementos, como tamb\u00e9m por aninhamentos complexos e inje\u00e7\u00e3o de conte\u00fados din\u00e2micos. P\u00e1ginas que possuem muitos elementos HTML sempre tender\u00e3o a ter tempos de carregamento maiores, al\u00e9m de poss\u00edveis impactos em anima\u00e7\u00f5es e outras formas de intera\u00e7\u00e3o do usu\u00e1rio.<\/p>\n\n\n\n

    Esses itens que descrevemos s\u00e3o particularmente importantes porque essa quest\u00e3o \u00e9 entendida como cr\u00edtica tamb\u00e9m por motores de avalia\u00e7\u00e3o de performance de sites, como \u00e9 o caso do Google PageSpeed<\/a>, que tem a diminui\u00e7\u00e3o do tamanho do DOM como uma das pautas para melhoria da pontua\u00e7\u00e3o.<\/p>\n\n\n\n

    Como n\u00e3o \u00e9 segredo a ningu\u00e9m, a pontua\u00e7\u00e3o dos motores de teste de otimiza\u00e7\u00e3o n\u00e3o necessariamente representam a velocidade real do site, mas ainda assim s\u00e3o usados pelos motores de busca como um dos v\u00e1rios crit\u00e9rios que comp\u00f5em o SEO, onde sites que possuem melhores avalia\u00e7\u00f5es nesses testes podem ter melhores coloca\u00e7\u00f5es nas pesquisas.<\/p>\n\n\n\n

    Diminuir o DOM com Elementor<\/h2>\n\n\n\n

    A diminui\u00e7\u00e3o dos elementos totais vem de um conjunto de fatores, por isso n\u00e3o existe um \u00fanico ajuste simples que se possa fazer para uma solu\u00e7\u00e3o imediata, mas sim todo um conjunto de t\u00e9cnicas e boas pr\u00e1ticas que ajudar\u00e3o seu site a ter um resultado final muito melhor, que s\u00e3o as seguintes:<\/p>\n\n\n\n

    1- Utilize cont\u00eaineres, evite se\u00e7\u00f5es\/colunas<\/h3>\n\n\n\n

    Ao utilizar se\u00e7\u00f5es e colunas, o c\u00f3digo HTML final acaba apresentando o dobro de elementos <div> c\u00f3digo, com rela\u00e7\u00e3o a um c\u00f3digo de mesmo design usando o sistema de cont\u00eaineres, como podemos ver nos seguintes exemplos:<\/p>\n\n\n\n

    Utilizando se\u00e7\u00f5es:<\/p>\n\n\n\n

    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    <div<\/span> <\/span>class<\/span>=<\/span>"<\/span>elementor-section<\/span>"<\/span>><\/span><\/span>\n\t<\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>elementor-container<\/span>"<\/span> <\/span>><\/span><\/span>\n<\/span>\n\t\t<\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>elementor-column<\/span>"<\/span>><\/span><\/span>\n\t\t\t<\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>elementor-widget-wrap<\/span>"<\/span>><\/span><\/span>\n<\/span>\n\t\t\t\t<\/span><!-- widget --><\/span><\/span>\n\t\t\t\t<\/span><!-- widget --><\/span><\/span>\n\t\t\t\t<\/span><!-- widget --><\/span><\/span>\n<\/span>\n\t\t\t<\/span><\/div><\/span><\/span>\n\t\t<\/span><\/div><\/span><\/span>\n<\/span>\n\t<\/span><\/div><\/span><\/span>\n<\/div><\/span><\/span><\/code><\/pre>HTML<\/span><\/div>\n\n\n\n
    Utilizando cont\u00eaineres:<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    <div<\/span> <\/span>class<\/span>=<\/span>"<\/span>e-con<\/span>"<\/span>><\/span><\/span>\n\t<\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>e-con-inner<\/span>"<\/span>><\/span><\/span>\n<\/span>\n\t\t<\/span><!-- widget --><\/span><\/span>\n\t\t<\/span><!-- widget --><\/span><\/span>\n\t\t<\/span><!-- widget --><\/span><\/span>\n<\/span>\n\t<\/span><\/div><\/span><\/span>\n<\/div><\/span><\/span><\/code><\/pre>HTML<\/span><\/div>\n\n\n\n
    Como pudemos ver nos c\u00f3digos de exemplo acima, o resultado final ao usar um container \u00e9 um HTML muito mais enxuto, com apenas 2 elementos <div> em vez dos 4 da vers\u00e3o anterior. Isso \u00e9 fant\u00e1stico, pois \u00e9 um resultado que diretamente significa um impacto consider\u00e1vel na redu\u00e7\u00e3o do DOM, o que gera um HTML menor, menos completo e, portanto, mais simples e r\u00e1pido de se renderizar para o visitante.<\/p>\n\n\n\n
    \u00c9 importante mencionar ainda que essa redu\u00e7\u00e3o de quatro para dois <div> ocorre em cada se\u00e7\u00e3o de seu site, o que mostra que \u00e9 uma redu\u00e7\u00e3o exponencial ao substituir completamente as se\u00e7\u00f5es por cont\u00eaineres, gerando um impacto significativo.<\/p>\n\n\n\n
    2- Aninhe elementos dentro de cont\u00eaineres<\/h3>\n\n\n\n
    Como mostramos no item acima, o uso dos cont\u00eaineres ajuda a reduzir consideravelmente a quantidade final de elementos HTML em uma p\u00e1gina, e isso pode gerar uma redu\u00e7\u00e3o ainda maior ao utilizar suas se\u00e7\u00f5es internas dentro dos cont\u00eaineres.<\/p>\n\n\n\n
    Nesses casos, a redu\u00e7\u00e3o total pode ser n\u00e3o somente de oito para quatro <div>, como em alguns casos esse n\u00famero pode chegar a apenas dois, gerando uma economia de c\u00f3digo muito maior.<\/p>\n\n\n\n
    3- Priorize cont\u00eaineres de largura total<\/h3>\n\n\n\n
    Enquanto um cont\u00eainer em caixa precisaria de mais elementos HTML por ter uma largura m\u00e1xima, utilizar um cont\u00eainer de largura total esticado aos lados reduziria esse n\u00famero de elementos pela metade, o que resultaria em uma redu\u00e7\u00e3o significativa de elementos, como podemos ver nos exemplos abaixo:<\/p>\n\n\n\n
    Elementos em caixa:<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    <div<\/span> <\/span>class<\/span>=<\/span>"<\/span>e-con<\/span>"<\/span>><\/span><\/span>\n\t<\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>e-con-inner<\/span>"<\/span>><\/span><\/span>\n<\/span>\n\t\t<\/span><!-- widget --><\/span><\/span>\n\t\t<\/span><!-- widget --><\/span><\/span>\n\t\t<\/span><!-- widget --><\/span><\/span>\n<\/span>\n\t<\/span><\/div><\/span><\/span>\n<\/div><\/span><\/span><\/code><\/pre>HTML<\/span><\/div>\n\n\n\n
    Elementos em largura total:<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    <div<\/span> <\/span>class<\/span>=<\/span>"<\/span>e-con<\/span>"<\/span>><\/span><\/span>\n<\/span>\n    <\/span><!-- widget --><\/span><\/span>\n\t\t<\/span><!-- widget --><\/span><\/span>\n\t\t<\/span><!-- widget --><\/span><\/span>\n<\/span>\n<\/div><\/span><\/span><\/code><\/pre>HTML<\/span><\/div>\n\n\n\n
    Ao adotar essa estrat\u00e9gia, voc\u00ea poder\u00e1 diminuir ainda mais o DOM gerado por sua p\u00e1gina. Uma outra dica muito interessante \u00e9 para quando se tem um cont\u00eainer de largura de caixa, em que voc\u00ea poder\u00e1 aninhar outros cont\u00eaineres dentro dele, mas com largura total.<\/p>\n\n\n\n
    Isso permitir\u00e1 que voc\u00ea tenha a mesma apar\u00eancia, mas usando menos c\u00f3digo.<\/p>\n\n\n\n
    Conclus\u00e3o<\/h2>\n\n\n\n
    Como pudemos ver, reduzir o DOM do Elementor n\u00e3o precisa ser algo dif\u00edcil, mas que requer um certo esfor\u00e7o, j\u00e1 que \u00e9 um trabalho que precisa ser feito com paci\u00eancia para atingir os resultados desejados, j\u00e1 que boa parte dessa otimiza\u00e7\u00e3o passa pela ado\u00e7\u00e3o dos sistemas de cont\u00eaineres, como falamos ao longo do artigo.<\/p>\n\n\n\n
    Por isso, replique seu site <\/a>e comece a fazer testes para conferir a diferen\u00e7a e entender o quanto esses ajustes podem impactar positivamente o seu projeto e o desempenho dele para performance e SEO e veja seu site decolar ainda mais!<\/p>\n","protected":false},"excerpt":{"rendered":"
    Ol\u00e1, Kangaroozito! Conseguir reduzir o tamanho do DOM \u00e9 um problema recorrente que muitos enfrentam quando tentam otimizar a performance de seus sites, sobretudo para SEO. Para reduzir essa dificuldade, o plugin Elementor criou meios que ajudam a tornar esse processo mais f\u00e1cil. Com mais facilidades, o processo de otimiza\u00e7\u00e3o se torna muito mais acess\u00edvel, […]<\/p>\n","protected":false},"author":1,"featured_media":1176,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82],"tags":[321,322,16,232,299,52,46,18,323,60,32,20],"class_list":["post-1173","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-otimizacao","tag-diminuir","tag-dom","tag-elementor","tag-elementos","tag-html","tag-otimizacao","tag-performance","tag-plugin","tag-reduzir","tag-seo","tag-site","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/1173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/comments?post=1173"}],"version-history":[{"count":1,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/1173\/revisions"}],"predecessor-version":[{"id":2587,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/1173\/revisions\/2587"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media\/1176"}],"wp:attachment":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media?parent=1173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/categories?post=1173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/tags?post=1173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}