Continue lendo para aprender como as fun\u00e7\u00f5es e recursos de otimiza\u00e7\u00e3o de desempenho do site do Elementor podem melhorar o seu site WordPress.<\/p>\n
Elementor: O que \u00e9?<\/h2>\n
Elementor<\/a> \u00e9 uma plataforma de constru\u00e7\u00e3o de sites WordPress que permite criar sites impressionantes rapidamente por meio de um editor de arrastar e soltar f\u00e1cil de usar. A plataforma \u00e9 de c\u00f3digo aberto e oferece vers\u00f5es gratuitas e premium.<\/p>\n O construtor de p\u00e1ginas front-end da Elementor ajuda voc\u00ea a aplicar designs de site de alto n\u00edvel para construir sites din\u00e2micos com facilidade.\u00a0<\/p>\n Com sua solu\u00e7\u00e3o tudo-em-um, voc\u00ea ter\u00e1 controle total sobre o design do seu site WordPress em uma plataforma.\u00a0<\/p>\n Os recursos e funcionalidades da plataforma ajudam voc\u00ea a personalizar seu site da maneira que quiser. Por exemplo, voc\u00ea pode usar v\u00e1rias fontes, aplicar imagens de fundo aprimoradas, usar efeitos de movimento (entre outros) para garantir que seu site se adapte \u00e0 sua marca, incluindo suas iniciativas de vendas e marketing.\u00a0<\/p>\n Se voc\u00ea nunca usou o Elementor antes, verifique este tutorial sobre como usar o Elementor<\/a> agora.<\/p>\n O Elementor oferece mais do que recursos robustos de constru\u00e7\u00e3o de sites. Ele tamb\u00e9m oferece funcionalidades e v\u00e1rios m\u00e9todos que voc\u00ea pode aplicar para melhorar o desempenho do seu site WordPress.\u00a0<\/p>\n Os lan\u00e7amentos mais recentes do Elementor (vers\u00f5es 3.1, 3.2 e 3.3.) Incluem novas t\u00e9cnicas de carregamento de arquivos JavaScript (JS), Font e Cascading Style Sheets (CSS).\u00a0<\/p>\n As t\u00e9cnicas s\u00e3o projetadas para melhorar a velocidade de carregamento de sua p\u00e1gina<\/a> e ajudar seu site a funcionar mais r\u00e1pido. Isso inclui a redu\u00e7\u00e3o de c\u00f3digos duplicados, remo\u00e7\u00e3o de CSS n\u00e3o utilizado e aplica\u00e7\u00e3o de carregamento de ativos din\u00e2micos (entre outros).<\/p>\n Fonte da imagem: elementor.com<\/a><\/p>\n Por exemplo, antes do Elementor 3.1, todas as funcionalidades do widget eram carregadas, quer os widgets fossem usados \u200b\u200bem sua p\u00e1gina da web ou n\u00e3o.\u00a0<\/p>\n As vers\u00f5es mais recentes do Elementor agora carregam arquivos JS respons\u00e1veis \u200b\u200bapenas por cada funcionalidade de widget e divide o JS de front-end da plataforma em pequenos peda\u00e7os. Isso d\u00e1 a cada widget seu arquivo JS contendo sua pr\u00f3pria l\u00f3gica, tornando o arquivo JS de front-end geral menor.\u00a0<\/p>\n No passado, carregar v\u00e1rios arquivos como esse tornava os sites mais lentos, mas agora que a maioria dos sites \u00e9 carregada com HTTP 2.0, esse n\u00e3o \u00e9 mais o caso.<\/p>\n O processo de carregamento otimizado melhora significativamente a velocidade da p\u00e1gina, pois o Elementor verifica os widgets usados \u200b\u200bna p\u00e1gina e carrega apenas os arquivos JS de cada p\u00e1gina carregada.\u00a0<\/p>\n O Elementor aplica o carregamento condicional de ativos para melhorar a maneira como os widgets consomem bibliotecas externas, como a biblioteca Swiper.js.\u00a0<\/p>\n As vers\u00f5es anteriores do Elementor carregaram esse arquivo JS em todas as p\u00e1ginas, mesmo quando n\u00e3o necess\u00e1rio. Vers\u00f5es recentes detectam quais componentes usam a biblioteca swiper e s\u00f3 a carregam se pelo menos um elemento de p\u00e1gina utilizar a biblioteca.\u00a0\u00a0\u00a0<\/p>\n O Elementor tamb\u00e9m implementa esse carregamento condicional de ativos para outras bibliotecas de arquivos JS, como a biblioteca Dialog, a biblioteca de links de compartilhamento e as bibliotecas Lightbox e Screenful. Tudo isso leva a uma redu\u00e7\u00e3o significativa do tamanho da p\u00e1gina e a velocidades de carregamento mais r\u00e1pidas.\u00a0\u00a0<\/p>\n O Elementor aproveita o suporte do navegador nativo para uma implementa\u00e7\u00e3o mais eficiente e ainda reduz o tempo de execu\u00e7\u00e3o de JS (em alguns casos).\u00a0<\/p>\n Por exemplo, o Elementor substituiu a biblioteca Waypoints pela API Intersection Observer nativa (quando aplic\u00e1vel) para reduzir ainda mais o n\u00famero de bibliotecas que carrega.<\/p>\n A API Intersection Observer oferece uma maneira de observar de forma ass\u00edncrona as mudan\u00e7as na interse\u00e7\u00e3o de um elemento de destino com a janela de visualiza\u00e7\u00e3o de um documento de n\u00edvel superior (a parte do documento que voc\u00ea est\u00e1 visualizando que est\u00e1 atualmente vis\u00edvel em sua janela ou tela) ou um elemento ancestral.\u00a0\u00a0<\/p>\n Digamos que sua p\u00e1gina da web use rolagem infinita. Isso significa que a p\u00e1gina utiliza sua biblioteca fornecida pelo fornecedor para gerenciar an\u00fancios posicionados periodicamente na p\u00e1gina, incluindo gr\u00e1ficos animados e outros elementos.\u00a0<\/p>\n Cada um deles inclui suas pr\u00f3prias rotinas de detec\u00e7\u00e3o de interse\u00e7\u00e3o e \u00e9 executado no encadeamento principal.\u00a0\u00a0\u00a0<\/p>\n Conforme os visitantes rolam a p\u00e1gina, essas rotinas de detec\u00e7\u00e3o de interse\u00e7\u00e3o s\u00e3o acionadas constantemente em todo o c\u00f3digo de manuseio de rolagem. Infelizmente, isso resulta em desempenho lento do site que acaba frustrando os usu\u00e1rios do site.\u00a0<\/p>\n No entanto, a API Intersection Observer permite que o c\u00f3digo registre uma fun\u00e7\u00e3o de retorno de chamada que \u00e9 executada quando um elemento sai ou entra na janela de visualiza\u00e7\u00e3o (ou outro elemento).\u00a0<\/p>\n Com isso, seu site n\u00e3o precisar\u00e1 fazer nada no t\u00f3pico principal<\/a> para detectar esse tipo de interse\u00e7\u00e3o de elementos. Isso libera o navegador para otimizar o gerenciamento de cruzamentos de acordo, melhorando o desempenho do site.<\/p>\n Uma das maneiras pelas quais o Elementor melhora a velocidade e o desempenho do seu site \u00e9 garantindo uma sa\u00edda de c\u00f3digo mais enxuta e melhor. Ele removeu os elementos de inv\u00f3lucro do Document Object Model (DOM) para reduzir o volume de HTML na p\u00e1gina.\u00a0<\/p>\n As vers\u00f5es anteriores do construtor de sites Elementor inclu\u00edam muitos elementos de inv\u00f3lucro na sa\u00edda da linguagem de marca\u00e7\u00e3o de hipertexto (HTML) que aumentavam os tamanhos das p\u00e1ginas da web e diminu\u00edam o desempenho do site.\u00a0\u00a0<\/p>\n A Elementor corrigiu isso na vers\u00e3o 3.0, n\u00e3o incluindo mais o A marca\u00e7\u00e3o padr\u00e3o era assim no Elementor v2.9:<\/p>\n Fonte da imagem: developers.elementor.com<\/a><\/p>\n No Elementor 3+, essa mesma marca\u00e7\u00e3o foi reduzida ao seguinte c\u00f3digo:<\/p>\n Fonte da imagem: developers.elementor.com<\/a><\/p>\n No entanto, lembre-se de que a remo\u00e7\u00e3o de alguns wrappers HTML do c\u00f3digo do Elementor pode afetar potencialmente a funcionalidade e a apar\u00eancia do seu site existente se voc\u00ea tiver escrito seletores CSS usando esses elementos. Isso pode acontecer quando voc\u00ea atualiza a vers\u00e3o 2.x do Elementor para 3.x.\u00a0<\/p>\n Certifique-se de testar o Elementor 3 em um site de teste ou c\u00f3pia local de seu site antes de atualizar seu site de produ\u00e7\u00e3o.<\/p>\n Essencialmente, o Elementor removeu elementos de inv\u00f3lucro volumosos e desnecess\u00e1rios do DOM para fornecer uma sa\u00edda de c\u00f3digo simplificada. Isso leva a menos complexidade, melhor legibilidade e maior desempenho e velocidade do site.\u00a0<\/p>\n Algum conte\u00fado din\u00e2mico tem seu pr\u00f3prio CSS, como imagens (usadas como valores de imagem de fundo), cores e campos personalizados.\u00a0<\/p>\n Com as vers\u00f5es anteriores do Elementor, o m\u00f3dulo Dynamic Tags da plataforma varria toda a p\u00e1gina da web para encontrar elementos com conte\u00fado din\u00e2mico sempre que a p\u00e1gina carregava.\u00a0\u00a0<\/p>\n O conte\u00fado din\u00e2mico detectado solicitaria ao m\u00f3dulo para buscar os valores din\u00e2micos do elemento, escrever o CSS relevante em uma tag e injet\u00e1-lo no DOM. No entanto, todo esse processo \u00e9 caro e exige muito tempo de carregamento.\u00a0<\/p>\n O Elementor 3.0 oferece um processo de renderiza\u00e7\u00e3o mais otimizado para CSS din\u00e2mico.\u00a0<\/p>\n Na primeira vez que uma p\u00e1gina \u00e9 carregada e seu CSS est\u00e1tico \u00e9 renderizado, o Elementor cria um cache contendo uma lista de seus elementos com valores CSS din\u00e2micos. Dessa forma, quando os usu\u00e1rios visitam a p\u00e1gina, a plataforma busca uma lista de elementos din\u00e2micos do cache para renderiz\u00e1-los instantaneamente.\u00a0\u00a0<\/p>\n O processo elimina a necessidade de iterar todos os elementos da p\u00e1gina cada vez que a p\u00e1gina \u00e9 carregada, economizando muito tempo de execu\u00e7\u00e3o e aumentando a velocidade de carregamento e, por sua vez, o desempenho do site.\u00a0<\/p>\n Garantir o desempenho estelar do site \u00e9 fundamental para ajudar a aumentar seus rankings do Google, melhorar a experi\u00eancia do usu\u00e1rio e, por sua vez, aumentar suas convers\u00f5es e receita.\u00a0<\/p>\n Embora conseguir isso nem sempre seja um passeio no parque, Elementor fornece as funcionalidades, recursos e m\u00e9todos para ajudar a impulsionar o desempenho do seu site WordPress.\u00a0<\/p>\n Quanto mais otimizado for o desempenho do seu site, menores ser\u00e3o as chances de perder tr\u00e1fego de qualidade, visitantes com alta convers\u00e3o e, por fim, receita.\u00a0\u00a0<\/p>\n Se voc\u00ea ainda n\u00e3o experimentou o Elementor, pode baix\u00e1-lo gratuitamente<\/a> em seu site. E se voc\u00ea quiser aprender como funciona primeiro, certifique-se de verificar este tutorial em v\u00eddeo<\/a>.<\/p>\n Obrigado por ler!<\/p>\n![\"Veja](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-168592-616ee684d7067.png\")
<\/a><\/p>\n4 maneiras pelas quais o Elementor pode aumentar o desempenho do site<\/h2>\n
1 Carregamento de ativo aprimorado<\/h3>\n
![\"Veja](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-168592-616ee6876fb0a.png\")
<\/a><\/p>\n2 Suporte a navegador nativo\u00a0<\/h3>\n
3 DOM otimizado<\/h3>\n
.elementor-inner<\/code>inv\u00f3lucro HTML, por exemplo.\u00a0<\/p>\n![\"Veja](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-168592-616ee689dc98e.png\")
<\/a><\/p>\n![\"Veja](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-168592-616ee68b66ce5.png\")
<\/a><\/p>\n4 Desempenho de renderiza\u00e7\u00e3o CSS aprimorado<\/h3>\n
Comece a aproveitar o Elementor para otimizar o desempenho do seu site WP<\/h2>\n