{"id":111969,"date":"2024-05-20T12:41:18","date_gmt":"2024-05-20T09:41:18","guid":{"rendered":"https:\/\/elementor.com\/blog\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/"},"modified":"2024-05-28T11:26:16","modified_gmt":"2024-05-28T08:26:16","slug":"dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/","title":{"rendered":"Dica de Desempenho do Elementor &#8211; Reduza o Tamanho do seu DOM para Tornar seu Site Mais R\u00e1pido"},"content":{"rendered":"\n<p>Na esfera digital, cada fra\u00e7\u00e3o de segundo conta.\nPortanto, o desempenho de um site \u00e9 crucial para a satisfa\u00e7\u00e3o e o engajamento do usu\u00e1rio.\nMelhorar o desempenho pode aumentar a probabilidade de alcan\u00e7ar os objetivos do seu site.  <\/p>\n\n<p>Um site com uma sa\u00edda de DOM grande aumenta o tamanho do HTML, o que pode prejudicar o desempenho do site.\nNo entanto, existem t\u00e9cnicas para diminuir o tamanho do DOM do seu site.\nEste post ir\u00e1 explorar como melhorar sites Elementor empregando v\u00e1rias estrat\u00e9gias para minimizar o tamanho do HTML.  <\/p>\n\n<h2 class=\"wp-block-heading\">Entendendo o Problema do \u201cTamanho Extensivo do DOM\u201d<\/h2>\n\n<p>O <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\" target=\"_blank\" rel=\"noreferrer noopener\">DOM<\/a> (Document Object Model) representa a estrutura de uma p\u00e1gina web.\nUm tamanho extensivo do DOM geralmente indica uma estrutura de DOM complexa, muitas vezes causada pelo uso excessivo de elementos HTML, n\u00f3s aninhados ou inje\u00e7\u00f5es de conte\u00fado din\u00e2mico.\nP\u00e1ginas com um grande n\u00famero de elementos HTML tendem a carregar lentamente e podem impactar anima\u00e7\u00f5es e outras intera\u00e7\u00f5es do usu\u00e1rio.  <\/p>\n\n<h3 class=\"wp-block-heading\">Impacto do Tamanho do DOM no Desempenho da P\u00e1gina<\/h3>\n\n<p>Um tamanho grande do DOM pode aumentar o tempo de renderiza\u00e7\u00e3o, causando renderiza\u00e7\u00e3o atrasada da p\u00e1gina e tempos de carregamento mais lentos.\nIsso ocorre porque os navegadores precisam analisar e renderizar cada n\u00f3.\nAl\u00e9m disso, cada n\u00f3 do DOM requer mem\u00f3ria do navegador, potencialmente levando ao esgotamento de recursos do sistema e aumento do consumo de mem\u00f3ria.\nIsso pode resultar em degrada\u00e7\u00e3o do desempenho, especialmente em dispositivos de baixo custo.   <\/p>\n\n<p>Al\u00e9m disso, um tamanho excessivo do DOM pode causar intera\u00e7\u00f5es de usu\u00e1rio lentas e diminui\u00e7\u00e3o da responsividade durante o uso do site.\nUm grande n\u00famero de elementos do DOM geralmente inclui muitos ouvintes de eventos, adicionando sobrecarga e retardando as intera\u00e7\u00f5es do usu\u00e1rio.\nN\u00e3o mencionaremos todas as raz\u00f5es, mas a regra geral \u00e9 que quanto maior o tamanho do HTML, mais lenta ser\u00e1 a p\u00e1gina.  <\/p>\n\n<h3 class=\"wp-block-heading\">Como Medir o Tamanho do DOM com Ferramentas Externas?<\/h3>\n\n<p>Para medir o impacto do tamanho do DOM no desempenho do site, voc\u00ea pode usar as seguintes ferramentas:<\/p>\n\n<p><strong>Google Chrome DevTools<\/strong> &#8211; V\u00e1 para o painel &#8220;Elements&#8221; para verificar os elementos do DOM e sua profundidade de aninhamento.\nUse a aba &#8220;Performance&#8221; para avaliar o desempenho de renderiza\u00e7\u00e3o e identificar poss\u00edveis gargalos causados pela manipula\u00e7\u00e3o do DOM. <\/p>\n\n<p><strong>Lighthouse<\/strong> &#8211; As auditorias do Lighthouse oferecem insights sobre m\u00e9tricas de tamanho do DOM, como &#8220;DOM Size&#8221;, &#8220;DOM Depth&#8221; e &#8220;Maximum DOM Depth&#8221;, apontando \u00e1reas para melhoria.<\/p>\n\n<p><strong>WebPageTest<\/strong> &#8211; Avalie m\u00e9tricas de tamanho do DOM em gr\u00e1ficos de Waterfall e resultados de desempenho para entender a rela\u00e7\u00e3o entre a complexidade do DOM e os tempos de carregamento da p\u00e1gina.<\/p>\n\n<h3 class=\"wp-block-heading\">O que \u00e9 Considerado um Tamanho Grande de DOM?<\/h3>\n\n<p><a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\" target=\"_blank\" rel=\"noreferrer noopener\">Lighthouse<\/a> sinaliza p\u00e1ginas com \u00e1rvores DOM da seguinte forma:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Avisa quando o elemento <code>&lt;body&gt;<\/code> tem mais de <a href=\"https:\/\/github.com\/GoogleChrome\/lighthouse\/blob\/main\/core\/audits\/dobetterweb\/dom-size.js#L71\" target=\"_blank\" rel=\"noreferrer noopener\">818 n\u00f3s<\/a>.<\/li>\n\n\n\n<li>Erros quando o elemento <code>&lt;body&gt;<\/code> tem mais de <a href=\"https:\/\/github.com\/GoogleChrome\/lighthouse\/blob\/main\/core\/audits\/dobetterweb\/dom-size.js#L72\" target=\"_blank\" rel=\"noreferrer noopener\">1.400 n\u00f3s<\/a>.<\/li>\n<\/ul>\n\n<p>No entanto, essas m\u00e9tricas podem mudar no futuro.\nAl\u00e9m disso, diferentes ferramentas podem definir diferentes limites para alertar sobre o tamanho extensivo do DOM. <\/p>\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"953\" height=\"116\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/image-64.png\" alt=\"\" class=\"wp-image-95164\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=953\/blog\/wp-content\/uploads\/2024\/05\/image-64.png 953w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2024\/05\/image-64-300x37.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2024\/05\/image-64-768x93.png 768w\" sizes=\"(max-width: 953px) 100vw, 953px\" \/><\/figure>\n\n<h2 class=\"wp-block-heading\">Reduzindo o Tamanho do DOM no Elementor<\/h2>\n\n<p>O Elementor \u00e9 um construtor de sites visual de arrastar e soltar que simplifica o processo de adicionar elementos \u00e0 p\u00e1gina.\nUsar o Elementor geralmente n\u00e3o impacta negativamente o desempenho do seu site.\nNo entanto, existem passos que voc\u00ea pode tomar para otimizar ainda mais as p\u00e1ginas que voc\u00ea constr\u00f3i.\nIsso inclui reduzir o n\u00famero de elementos HTML que podem minimizar o DOM, sem afetar o design.   <\/p>\n\n<p>Para otimizar efetivamente, \u00e9 \u00fatil entender a estrutura dos elementos de layout do Elementor.\nVamos nos concentrar nos elementos de layout porque uma p\u00e1gina t\u00edpica cont\u00e9m dezenas desses elementos, ent\u00e3o otimiz\u00e1-los gera um impacto maior. <\/p>\n\n<p>Existem tr\u00eas t\u00e9cnicas recomendadas para otimizar seus elementos de layout:<\/p>\n\n<ol class=\"wp-block-list\">\n<li>Migrar de se\u00e7\u00f5es\/colunas para cont\u00eaineres.<\/li>\n\n\n\n<li>Achatamento de cont\u00eaineres com cont\u00eaineres aninhados \u00fanicos.<\/li>\n\n\n\n<li>Implementar cont\u00eaineres de largura total em vez de cont\u00eaineres de largura fixa, sempre que poss\u00edvel.<\/li>\n<\/ol>\n\n<p>Vamos aprender mais sobre como reduzir o tamanho do DOM no Elementor.<\/p>\n\n<h3 class=\"wp-block-heading\">Tipos de Elementos do Elementor<\/h3>\n\n<p>O Elementor tem dois tipos de Elementos:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Widgets<\/strong> &#8211; todos os elementos regulares que voc\u00ea usa para construir seu site, como cabe\u00e7alho, imagem, \u00edcone, bot\u00e3o, divisor, etc.<\/li>\n\n\n\n<li><strong>Elementos de Layout<\/strong> &#8211; elementos estruturais como Se\u00e7\u00e3o\/Colunas e Cont\u00eaineres.\nEsses elementos envolvem os widgets e os agrupam. <\/li>\n<\/ul>\n\n<p>Vamos nos concentrar nos elementos de layout em termos de como reduzir o tamanho do DOM.<\/p>\n\n<h3 class=\"wp-block-heading\">Estrutura HTML dos Elementos de Layout<\/h3>\n\n<p>No Elementor, cada elemento estrutural consiste em duas tags <code>&lt;div&gt;<\/code>: uma externa <code>&lt;div&gt;<\/code> e uma interna <code>&lt;div&gt;<\/code>.\nIsso \u00e9 importante notar, pois vamos ver como podemos reduzir a quantidade de elementos HTML nos seus elementos de layout estrutural. <\/p>\n\n<p><strong>Estrutura HTML de Se\u00e7\u00e3o\/Coluna:<\/strong><\/p>\n\n<p>Ao usar se\u00e7\u00f5es e colunas, o HTML final consiste em dois n\u00edveis de layout, cada um dos quais tem dois elementos <code>&lt;div&gt;<\/code>, dois para se\u00e7\u00f5es e dois para colunas.\nNo total, envolvemos widgets com quatro elementos <code>&lt;div&gt;<\/code>: <\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"elementor-section\">\n\t&lt;div class=\"elementor-container\" >\n\n\t\t&lt;div class=\"elementor-column\">\n\t\t\t&lt;div class=\"elementor-widget-wrap\">\n\n\t\t\t\t&lt;!-- widget \u2013>\n\t\t\t\t&lt;!-- widget \u2013>\n\t\t\t\t&lt;!-- widget \u2013>\n\n\t\t\t&lt;\/div>\n\t\t&lt;\/div>\n\n\t&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n<p><strong>Estrutura HTML de Cont\u00eainer:<\/strong><\/p>\n\n<p>O Elementor introduziu Cont\u00eaineres como uma forma de construir p\u00e1ginas com uma estrutura e DOM mais enxutos.<\/p>\n\n<p>Ao mudar para cont\u00eaineres, o HTML resultante consiste em apenas dois elementos <code>&lt;div&gt;<\/code>, n\u00e3o quatro, o que significa que voc\u00ea obt\u00e9m o mesmo design com metade dos elementos <code>&lt;div&gt;<\/code>.<\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"e-con\">\n\t&lt;div class=\"e-con-inner\">\n\n\t\t&lt;!-- widget \u2013>\n\t\t&lt;!-- widget \u2013>\n\t\t&lt;!-- widget \u2013>\n\n\t&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n<h3 class=\"wp-block-heading\">Achatamento da Estrutura HTML Usando Cont\u00eaineres<\/h3>\n\n<p>No passado, se\u00e7\u00f5es ou colunas eram usadas para estruturar sites.\nHoje em dia, sites modernos usam CSS flex e CSS grid para alcan\u00e7ar a mesma estrutura visual com menos c\u00f3digo.\nPor essa raz\u00e3o, o Elementor introduziu <a href=\"https:\/\/elementor.com\/help\/container-element\/\" target=\"_blank\" rel=\"noreferrer noopener\">Containers<\/a>.\nAo converter seus elementos estruturais para containers, voc\u00ea pode simplificar a estrutura HTML e eliminar o excesso desnecess\u00e1rio.   <\/p>\n\n<p>Enquanto as se\u00e7\u00f5es s\u00e3o empilhadas uma sobre a outra, as colunas s\u00e3o posicionadas lado a lado.\nPor outro lado, os containers podem empilhar elementos internos em uma linha ou em uma coluna.\nPodemos usar essas diferen\u00e7as para otimizar algumas estruturas.  <\/p>\n\n<p>Se uma se\u00e7\u00e3o tiver v\u00e1rias colunas, as estruturas convertidas ter\u00e3o um container de dire\u00e7\u00e3o de coluna com v\u00e1rios containers de dire\u00e7\u00e3o de linha.\nNo entanto, se uma se\u00e7\u00e3o contiver uma \u00fanica coluna, voc\u00ea pode otimizar essa estrutura ao converter para containers.\nVoc\u00ea pode eliminar um n\u00edvel de container sem afetar o design.\nObtendo uma redu\u00e7\u00e3o de 50% no tamanho do DOM, de quatro elementos <code>&lt;div&gt;<\/code> para apenas dois.\nAgora multiplique isso pelo n\u00famero de elementos de layout que cada p\u00e1gina possui, para calcular o impacto no seu site.    <\/p>\n\n<p>Vale notar que voc\u00ea pode realmente diminuir o tamanho do DOM em elementos de se\u00e7\u00e3o\/coluna que aninham se\u00e7\u00f5es internas.\nNesses casos, o elemento emprega oito n\u00edveis de elementos <code>&lt;div&gt;<\/code> antes de exibir o widget.\nConverter para containers pode reduzir isso de oito n\u00edveis de elementos <code>&lt;div&gt;<\/code> para quatro n\u00edveis, e em alguns casos para apenas dois n\u00edveis de elementos <code>&lt;div&gt;<\/code>.  <\/p>\n\n<p>Se voc\u00ea ainda est\u00e1 usando uma estrutura de layout de se\u00e7\u00e3o\/coluna, \u00e9 hora de migrar para containers.\nOs benef\u00edcios superam o trabalho que voc\u00ea investir\u00e1 no processo de migra\u00e7\u00e3o.\nPara simplificar a migra\u00e7\u00e3o, o Elementor at\u00e9 fornece um conveniente bot\u00e3o &#8220;Converter&#8221; para esse prop\u00f3sito.  <\/p>\n\n<h3 class=\"wp-block-heading\">Boxed vs. Full Width<\/h3>\n\n<p>Um m\u00e9todo adicional de otimizar o tamanho do DOM \u00e9 distinguindo entre containers boxed e containers full-width.<\/p>\n\n<p>Um container boxed tem uma largura m\u00e1xima, necessitando do uso de um elemento interno <code>&lt;div&gt;<\/code> no Elementor.\nPor outro lado, um container full-width esticado para ambos os lados requer apenas um elemento <code>&lt;div&gt;<\/code>. <\/p>\n\n<p><strong>Estrutura Boxed:<\/strong><\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"e-con\">\n\t&lt;div class=\"e-con-inner\">\n\n\t\t&lt;!-- widget \u2013>\n\t\t&lt;!-- widget \u2013>\n\t\t&lt;!-- widget \u2013>\n\n\t&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n<p><strong>Estrutura Full Width:<\/strong><\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"e-con\">\n\n\t&lt;!-- widget \u2013>\n\t&lt;!-- widget \u2013>\n\t&lt;!-- widget \u2013>\n\n&lt;\/div><\/code><\/pre>\n\n<h3 class=\"wp-block-heading\">Otimizar Estrutura de Containers Aninhados<\/h3>\n\n<p>Agora que entendemos as diferentes estruturas HTML de containers boxed e full-width, podemos come\u00e7ar a otimizar a sa\u00edda do DOM do nosso site, especialmente containers que aninham outros containers dentro.<\/p>\n\n<p>A pr\u00f3xima dica de otimiza\u00e7\u00e3o \u00e9 a seguinte: Se voc\u00ea tiver um container pai que usa largura boxed, voc\u00ea pode fazer com que todos os containers aninhados sejam full-width.\nDessa forma, voc\u00ea obt\u00e9m o mesmo design, mas com menos HTML. <\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"e-con e-con-parent\">\n\t&lt;div class=\"e-con-inner\">\n\n\t\t&lt;div class=\"e-con e-con-child\">\n\t\t\t\u2026\n\t\t&lt;\/div>\n\n\t\t&lt;div class=\"e-con e-con-child\">\n\t\t\t\u2026\n\t\t&lt;\/div>\n\n\t&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n<p>A estrutura HTML acima tem um container pai boxed.\nSe os dois containers filhos tamb\u00e9m forem boxed, cada um consistir\u00e1 em dois n\u00edveis de elementos <code>&lt;div&gt;<\/code>.\nMas se eles forem full-width, apenas um <code>&lt;div&gt;<\/code> ser\u00e1 usado.  <\/p>\n\n<p>Mais uma vez, essa otimiza\u00e7\u00e3o \u00e9 v\u00e1lida apenas se o container pai for boxed.<\/p>\n\n<h2 class=\"wp-block-heading\">Conclus\u00f5es<\/h2>\n\n<p>Como voc\u00ea viu, existem tr\u00eas estrat\u00e9gias f\u00e1ceis para otimizar o tamanho do DOM dos seus elementos de layout: substituir elementos de layout de se\u00e7\u00e3o\/coluna por containers; containers com um \u00fanico container aninhado podem ser achatados; e se voc\u00ea estiver usando containers aninhados e o container pai for boxed, defina todos os containers internos para full-width.\nEssas estrat\u00e9gias podem ajudar a eliminar numerosos elementos <code>&lt;div&gt;<\/code> desnecess\u00e1rios do HTML do seu site e melhorar o desempenho geral da sua p\u00e1gina web. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Na esfera digital, cada fra\u00e7\u00e3o de segundo conta.<br \/>\nPortanto, o desempenho de um site \u00e9 crucial para a satisfa\u00e7\u00e3o e o engajamento do usu\u00e1rio.<br \/>\nMelhorar o desempenho pode aumentar a probabilidade de alcan\u00e7ar os objetivos do seu site.  <\/p>\n","protected":false},"author":29408,"featured_media":111971,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[288,352],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-111969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-pt","category-tips-tricks-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Dica de Desempenho do Elementor - Reduza o Tamanho do seu DOM para Tornar seu Site Mais R\u00e1pido<\/title>\n<meta name=\"description\" content=\"Na esfera digital, cada fra\u00e7\u00e3o de segundo conta. Portanto, o desempenho de um site \u00e9 crucial para a satisfa\u00e7\u00e3o e o engajamento do usu\u00e1rio. Melhorar o desempenho pode aumentar a probabilidade de alcan\u00e7ar os objetivos do seu site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dica de Desempenho do Elementor - Reduza o Tamanho do seu DOM para Tornar seu Site Mais R\u00e1pido\" \/>\n<meta property=\"og:description\" content=\"Na esfera digital, cada fra\u00e7\u00e3o de segundo conta. Portanto, o desempenho de um site \u00e9 crucial para a satisfa\u00e7\u00e3o e o engajamento do usu\u00e1rio. Melhorar o desempenho pode aumentar a probabilidade de alcan\u00e7ar os objetivos do seu site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/rami.yushuvaev\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-20T09:41:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-28T08:26:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rami Yushuvaev\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rami Yushuvaev\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/\"},\"author\":{\"name\":\"Rami Yushuvaev\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/6e0c7b6c1ce9bf02634a461c0c950eb7\"},\"headline\":\"Dica de Desempenho do Elementor &#8211; Reduza o Tamanho do seu DOM para Tornar seu Site Mais R\u00e1pido\",\"datePublished\":\"2024-05-20T09:41:18+00:00\",\"dateModified\":\"2024-05-28T08:26:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/\"},\"wordCount\":1532,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png\",\"articleSection\":[\"Desenvolvimento\",\"Dicas e truques\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/\",\"name\":\"Dica de Desempenho do Elementor - Reduza o Tamanho do seu DOM para Tornar seu Site Mais R\u00e1pido\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png\",\"datePublished\":\"2024-05-20T09:41:18+00:00\",\"dateModified\":\"2024-05-28T08:26:16+00:00\",\"description\":\"Na esfera digital, cada fra\u00e7\u00e3o de segundo conta. Portanto, o desempenho de um site \u00e9 crucial para a satisfa\u00e7\u00e3o e o engajamento do usu\u00e1rio. Melhorar o desempenho pode aumentar a probabilidade de alcan\u00e7ar os objetivos do seu site.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/category\/development-pt\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dica de Desempenho do Elementor &#8211; Reduza o Tamanho do seu DOM para Tornar seu Site Mais R\u00e1pido\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/6e0c7b6c1ce9bf02634a461c0c950eb7\",\"name\":\"Rami Yushuvaev\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e50d6551fac13059acbe6a5abef1f0b579da2c29076f5ce808f6e381830cbd38?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e50d6551fac13059acbe6a5abef1f0b579da2c29076f5ce808f6e381830cbd38?s=96&d=mm&r=g\",\"caption\":\"Rami Yushuvaev\"},\"description\":\"Head of Elementor Developers Experience. Fullstack developer. Contribute to open source projects. Creator of ChartsCSS.org, GenerateWP.com, DisplayWP.com and many other projects.\",\"sameAs\":[\"https:\/\/elementor.com\",\"https:\/\/www.facebook.com\/rami.yushuvaev\"],\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/author\/ramiy\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dica de Desempenho do Elementor - Reduza o Tamanho do seu DOM para Tornar seu Site Mais R\u00e1pido","description":"Na esfera digital, cada fra\u00e7\u00e3o de segundo conta. Portanto, o desempenho de um site \u00e9 crucial para a satisfa\u00e7\u00e3o e o engajamento do usu\u00e1rio. Melhorar o desempenho pode aumentar a probabilidade de alcan\u00e7ar os objetivos do seu site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/","og_locale":"pt_BR","og_type":"article","og_title":"Dica de Desempenho do Elementor - Reduza o Tamanho do seu DOM para Tornar seu Site Mais R\u00e1pido","og_description":"Na esfera digital, cada fra\u00e7\u00e3o de segundo conta. Portanto, o desempenho de um site \u00e9 crucial para a satisfa\u00e7\u00e3o e o engajamento do usu\u00e1rio. Melhorar o desempenho pode aumentar a probabilidade de alcan\u00e7ar os objetivos do seu site.","og_url":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_author":"https:\/\/www.facebook.com\/rami.yushuvaev","article_published_time":"2024-05-20T09:41:18+00:00","article_modified_time":"2024-05-28T08:26:16+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png","type":"image\/png"}],"author":"Rami Yushuvaev","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Escrito por":"Rami Yushuvaev","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/"},"author":{"name":"Rami Yushuvaev","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/6e0c7b6c1ce9bf02634a461c0c950eb7"},"headline":"Dica de Desempenho do Elementor &#8211; Reduza o Tamanho do seu DOM para Tornar seu Site Mais R\u00e1pido","datePublished":"2024-05-20T09:41:18+00:00","dateModified":"2024-05-28T08:26:16+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/"},"wordCount":1532,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png","articleSection":["Desenvolvimento","Dicas e truques"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/","url":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/","name":"Dica de Desempenho do Elementor - Reduza o Tamanho do seu DOM para Tornar seu Site Mais R\u00e1pido","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png","datePublished":"2024-05-20T09:41:18+00:00","dateModified":"2024-05-28T08:26:16+00:00","description":"Na esfera digital, cada fra\u00e7\u00e3o de segundo conta. Portanto, o desempenho de um site \u00e9 crucial para a satisfa\u00e7\u00e3o e o engajamento do usu\u00e1rio. Melhorar o desempenho pode aumentar a probabilidade de alcan\u00e7ar os objetivos do seu site.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/05\/cover-3.1.0.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/pt-br\/dica-de-desempenho-do-elementor-reduza-o-tamanho-do-seu-dom-para-tornar-seu-site-mais-rapido\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento","item":"https:\/\/elementor.com\/blog\/pt-br\/category\/development-pt\/"},{"@type":"ListItem","position":3,"name":"Dica de Desempenho do Elementor &#8211; Reduza o Tamanho do seu DOM para Tornar seu Site Mais R\u00e1pido"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/pt-br\/#website","url":"https:\/\/elementor.com\/blog\/pt-br\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/6e0c7b6c1ce9bf02634a461c0c950eb7","name":"Rami Yushuvaev","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e50d6551fac13059acbe6a5abef1f0b579da2c29076f5ce808f6e381830cbd38?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e50d6551fac13059acbe6a5abef1f0b579da2c29076f5ce808f6e381830cbd38?s=96&d=mm&r=g","caption":"Rami Yushuvaev"},"description":"Head of Elementor Developers Experience. Fullstack developer. Contribute to open source projects. Creator of ChartsCSS.org, GenerateWP.com, DisplayWP.com and many other projects.","sameAs":["https:\/\/elementor.com","https:\/\/www.facebook.com\/rami.yushuvaev"],"url":"https:\/\/elementor.com\/blog\/pt-br\/author\/ramiy\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/111969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/29408"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=111969"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/111969\/revisions"}],"predecessor-version":[{"id":111972,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/111969\/revisions\/111972"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/111971"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=111969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=111969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=111969"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_persona?post=111969"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_intent?post=111969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}