🚀 Como acelerar um site Elementor: 3 dicas para o PageSpeed Insights em 2026
O Elementor constrói páginas a partir de widgets, estilos e scripts, e cada pedido a um recurso externo acrescenta milissegundos ao tempo de carregamento. Google Fonts, Font Awesome, Eicons: três pedidos de fontes que o plugin cria por defeito, mesmo que não esteja a usá-los conscientemente.
O resultado: pontuações mais baixas no PageSpeed Insights, um waterfall sobrecarregado no GTMetrix e visitantes que abandonam a página antes de esta ser totalmente renderizada. No entanto, o próprio Elementor fornece ferramentas para desativar cada um destes pedidos; só precisa de saber que alavancas acionar.
Abaixo estão três otimizações direcionadas que, em conjunto, podem reduzir até um segundo do tempo de carregamento, sem plugins de cache ou CDN. Cada uma inclui código pronto a usar para o functions.php.
💡 Visão geral rápida:
- Desative o Google Fonts do Elementor usando uma configuração integrada ou um hook no seu tema e aloje as fontes localmente
- Substitua o Font Awesome do Elementor por uma versão Critical local, para que o navegador carregue apenas os ícones realmente utilizados
- Troque os Eicons (ícones próprios do Elementor) pelo Font Awesome via CSS: um ficheiro em vez de dois pacotes de fontes
1. Desativar o Google Fonts do Elementor
Por defeito, o Elementor carrega o Google Fonts para cada tipo de letra usado no seu design, mesmo que já aloje essas fontes localmente. No waterfall de pedidos, isto aparece como uma chamada HTTP separada para fonts.googleapis.com que bloqueia a renderização do texto até estar totalmente carregada.
A abordagem mais simples é a configuração integrada do Elementor. Vá a Elementor → Settings → Performance e ative Disable Google Fonts. Após isto, o plugin deixará de gerar pedidos para a CDN do Google e pode ligar as fontes localmente através de um tema filho ou de um plugin como o OMGF (Optimize My Google Fonts).
Se a configuração não estiver disponível por algum motivo ou precisar de controlo programático, adicione este código ao functions.php do seu tema filho:
1 add_action( 'wp_enqueue_scripts', function() { 2 wp_dequeue_style( 'google-fonts-1' ); 3 wp_dequeue_style( 'google-fonts-2' ); 4 }, 99 );
O hook com prioridade 99 é executado depois de o Elementor colocar os seus estilos em fila e remove-os antes de serem emitidos no <head>. Após a desativação, ligue as fontes localmente: descarregue os pesos necessários em WOFF2, coloque-os na pasta do seu tema e adicione as regras @font-face nos seus estilos.
2. Substituir o Font Awesome do Elementor por uma versão local
O Elementor carrega o pacote completo do Font Awesome (centenas de ícones) quando um site típico utiliza, na realidade, apenas 5 a 7 deles. Os bytes restantes simplesmente consomem o seu orçamento de carregamento.
A solução é uma Critical Font local. Plugins de cache (Swift Performance, LiteSpeed Cache) e ferramentas especializadas (OMGF) podem analisar a página, recolher uma lista dos ícones realmente utilizados e construir um webfont.css reduzido contendo apenas os glifos necessários. O ficheiro vai para /wp-content/fonts/ no seu servidor: zero pedidos externos.
Para impedir que o Elementor carregue a sua versão e, em vez disso, utilizar a sua versão local, adicione isto ao functions.php:
1 add_action( 'wp_enqueue_scripts', 'replace_elementor_fa', 3 ); 2 add_action( 'elementor/frontend/after_enqueue_styles', function() { 3 wp_dequeue_style( 'font-awesome' ); 4 } ); 5 6 function replace_elementor_fa() { 7 wp_enqueue_style( 8 'font-awesome-local', 9 get_stylesheet_directory_uri() . '/fonts/fontawesome/webfont.css', 10 array(), 11 '1.0.0' 12 ); 13 }
A primeira linha coloca a sua versão local em fila com prioridade alta. A segunda remove a versão do Elementor com o identificador font-awesome logo após o plugin a registar. A função replace_elementor_fa especifica o caminho do ficheiro; substitua-o pelo gerado pelo seu plugin de cache.
Após a configuração, verifique o waterfall no GTMetrix: o pedido ao font-awesome.min.css do Elementor deve desaparecer e o webfont.css local deve carregar a partir do seu domínio.
3. Substituir os ícones do Elementor (Eicons) pelo Font Awesome
O Elementor utiliza a sua própria fonte Eicons para ícones em widgets: setas do slider, ícone do menu hambúrguer, botão de fechar. O pacote completo é carregado sempre que qualquer ícone é utilizado, adicionando outro pedido e atraso na renderização.
Uma vez que já tem o Font Awesome local (passo 2), faz sentido migrar os Eicons para ele: um ficheiro de fonte em vez de dois. Esta técnica substitui as classes CSS .eicon e .eicon-menu-bar por glifos do Font Awesome.
Primeiro, remova os Eicons da fila. Este código vai no functions.php:
1 add_action( 'elementor/frontend/after_enqueue_styles', 'js_dequeue_eicons' ); 2 3 function js_dequeue_eicons() { 4 if ( is_admin() || current_user_can( 'manage_options' ) ) { 5 return; 6 } 7 wp_dequeue_style( 'elementor-icons' ); 8 }
A função ignora a área de administração para que o editor do Elementor continue a funcionar sem problemas e remove apenas o identificador elementor-icons no frontend.
Agora adicione a substituição CSS, através de Appearance → Customize → Additional CSS ou na folha de estilos do seu tema filho:
1 .eicon, 2 .eicon-menu-bar { 3 display: inline-block; 4 font: normal normal normal 14px/1 FontAwesome; 5 font-size: inherit; 6 text-rendering: auto; 7 -webkit-font-smoothing: antialiased; 8 -moz-osx-font-smoothing: grayscale; 9 } 10 11 .elementor-menu-toggle i:before { 12 content: "\f0c9"; 13 font-family: FontAwesome; 14 } 15 16 .elementor-menu-toggle.elementor-active i:before { 17 content: "\f00d"; 18 font-family: FontAwesome; 19 }
O primeiro bloco reatribui as classes base dos Eicons ao tipo de letra FontAwesome. O segundo e terceiro definem glifos específicos: \f0c9 para o ícone de hambúrguer (fa-bars) e \f00d para o botão de fechar (fa-times). Outros ícones são substituídos da mesma forma: abra as devtools, encontre a classe do widget e adicione content com o código do glifo da folha de consulta do Font Awesome.
Após a implementação, verifique a consola do navegador à procura de erros de carregamento de fontes e execute a página no PageSpeed Insights. O pedido a eicons.woff2 deve desaparecer do relatório.
⁉️🤔 Perguntas frequentes
Este método funciona nas versões atuais do Elementor?
Sim, as três dicas são relevantes para a linha atual do Elementor. Os hooks
elementor/frontend/after_enqueue_stylesewp_enqueue_scriptsfazem parte da API pública do plugin e mantêm compatibilidade com versões anteriores. A documentação oficial do Elementor sobre desativar o Google Fonts descreve o interruptor integrado em Elementor → Settings → Performance. Para a dica nº 1, utilize-o primeiro e mantenha o código como alternativa para temas não padronizados.
O que devo fazer se os ícones desaparecerem no editor após substituir os Eicons?
O código de desativação dos Eicons ignora a área de administração. As verificações
is_admin()ecurrent_user_can( 'manage_options' )garantem que a fonte permanece no lugar no editor do Elementor. Se os ícones ainda desaparecerem, certifique-se de que adicionou o código aofunctions.phpdo seu tema ativo, e não através de um plugin de snippets que também possa ser executado nas páginas de administração.
Preciso de instalar um plugin de cache para estas otimizações?
Para as dicas nº 1 e nº 3, não é necessário um plugin de cache; o código no
functions.phpé suficiente. Para a dica nº 2 (Critical Font), precisa de uma ferramenta que construa um Font Awesome reduzido: Swift Performance, LiteSpeed Cache, OMGF Pro ou montagem manual usando o utilitáriofonttools. Sem este passo, simplesmente muda o carregamento completo do Font Awesome da CDN do Elementor para o seu servidor, quase sem poupança.
Quanto ganho real na pontuação do PageSpeed estas três dicas proporcionam?
Cada caso é diferente, mas aqui fica uma orientação: desativar o Google Fonts reduz 200-400 ms do tempo de carregamento, o Font Awesome local poupa outros 150-300 ms e substituir os Eicons remove um pedido HTTP e poupa 50-150 ms. No total, até um segundo do tempo de carregamento total, o que, em alojamento típico de 10-20 $/mês, aumenta a pontuação do PageSpeed Insights para dispositivos móveis em 5-15 pontos.
Posso eliminar completamente o Font Awesome e os Eicons?
Pode, se estiver preparado para reconstruir todos os ícones no Elementor como SVG. Isto significa substituir manualmente os ícones nos widgets por ficheiros SVG carregados ou usar um plugin como o Iconic. O esforço é elevado (dezenas de widgets num site), mas o resultado é o frontend mais leve possível. Para a maioria dos projetos, uma Critical Font local (passo 2) é um compromisso adequado.
O que estas alterações alcançam num site real?
As três técnicas descritas não exigem plugins premium, uma CDN ou uma mudança de alojamento. Isto é puramente trabalhar com pedidos de fontes, a despesa de velocidade mais subestimada em sites Elementor.
Se ainda não fez a otimização básica de WordPress, comece com o guia completo de velocidade de sites, que cobre cache, compressão de CSS/JS e otimização de imagens. Quando chegar às fontes, volte a estes três passos e implemente-os um a um, verificando o PageSpeed Insights após cada um.
Teste numa cópia do seu site, faça backup antes de editar o functions.php e extraia a velocidade máxima do Elementor.
Uma equipa profissional de escritores e editores especializados na criação de conteúdo de qualidade.