„O Elementor é lento“ é uma das afirmações mais persistentes no mundo WordPress. Não está totalmente errada e, ainda assim, é enganadora. Um page builder gera mais markup do que código escrito à mão — isso custa algo. Mas o que na prática torna realmente lentas as páginas em Elementor são quase sempre outras coisas, e essas resolvem-se.
Os três valores em causa
Há alguns anos que a Google mede três indicadores que, em conjunto, formam os Core Web Vitals.
LCP (Largest Contentful Paint) — quando o maior elemento visível está carregado. Normalmente a imagem de destaque ou o título grande. Objetivo: abaixo de 2,5 segundos.
INP (Interaction to Next Paint) — com que rapidez a página reage a uma entrada. Substituiu o anterior valor FID. Objetivo: abaixo de 200 milissegundos.
CLS (Cumulative Layout Shift) — quanto o conteúdo salta durante o carregamento. Toda a gente conhece isto: quer tocar-se numa ligação e, no último momento, mete-se uma imagem pelo meio. Objetivo: abaixo de 0,1.
Importante para enquadrar: a Google avalia com base em dados de campo de visitantes reais, não pelo resultado de teste de um único acesso. Um bom valor na ferramenta de teste com maus dados de campo significa que os seus visitantes vivem uma página diferente da sua.
LCP: quase sempre a imagem de destaque
Em nove de cada dez projetos Elementor que vejo, a imagem grande lá em cima é a razão de um LCP mau.
O tamanho. Uma fotografia saída diretamente da câmara tem facilmente 4000 píxeis de largura e vários megabytes. É mostrada a 1600 píxeis. Redimensione antes de carregar para o tamanho realmente necessário.
O formato. WebP em vez de JPEG poupa tipicamente um terço com a mesma qualidade. Há plugins que fazem isso automaticamente.
Nada de lazy loading para a imagem de destaque. Soa contraditório, mas é decisivo: o carregamento diferido destina-se a imagens que só ficam visíveis ao deslizar. Se o aplicar à imagem mais em cima, está a atrasar precisamente o elemento que determina o LCP. No Elementor desliga isso no widget de imagem.
Imagens de fundo com critério. Uma imagem como fundo de contentor é carregada mais tarde do que um verdadeiro widget de imagem. Para o elemento mais em cima da página, o widget de imagem é a melhor escolha.
CLS: reservar espaço
Os saltos de layout surgem quando um elemento reclama posteriormente espaço que antes não estava previsto. Três causas cobrem quase tudo.
Imagens sem medidas fixas. O navegador só sabe ao carregar que altura a imagem vai ter e empurra tudo o que está por baixo. Dê às imagens largura e altura ou uma proporção fixa.
Fontes que carregam depois. O texto aparece primeiro numa fonte de substituição e salta na troca. Fontes alojadas por conta própria com uma estratégia de carregamento adequada resolvem isso — e, em matéria de proteção de dados, são de qualquer forma a melhor escolha, ver Elementor em conformidade com o RGPD.
Faixas que aparecem em cima. Um banner de cookies ou uma barra de aviso que empurra o conteúdo para baixo é um golpe garantido no CLS. Coloque-o por cima do conteúdo em vez de à frente dele.
INP: menos é mais
O valor de reação sofre com JavaScript a mais. Nas páginas em Elementor os suspeitos do costume são: sliders e carrosséis, contadores animados, efeitos de movimento ao deslizar, vídeos incorporados e scripts externos como janelas de chat ou rastreio.
A medida mais eficaz é também a mais impopular: use menos disso. Um slider com cinco imagens, de que quase ninguém vê para além da primeira, custa tempo de carregamento sem contrapartida.
Para os vídeos incorporados vale: não incorporar diretamente, mas mostrar primeiro uma miniatura e carregar o vídeo ao clique. O Elementor oferece para isso uma opção no widget de vídeo.
O que o próprio Elementor traz
Em Elementor → Definições → Funcionalidades encontra vários interruptores que ajudam de forma percetível:
O carregamento otimizado do CSS carrega apenas os estilos necessários na página, em vez de um grande ficheiro conjunto. O carregamento melhorado dos recursos e a opção de deixar de fora as bibliotecas de ícones não usadas vão no mesmo sentido.
Ligue estas opções uma a uma e verifique a página a seguir. Em casos raros falta um estilo que vinha de um plugin de terceiros.
Como arrumar para além disso está em remover o peso morto do Elementor.
O que o Pro muda nisto: nada
Para que não se crie aqui uma expectativa errada — a versão Pro não torna o seu site mais rápido. Traz funcionalidades, não velocidade. Quem, graças ao Pro, usa mais widgets tende a ficar mais lento.
Elementor Pro: faz sentido pelo Theme Builder, pelos formulários e pelos popups — não pelo tempo de carregamento. Isso faz parte de um enquadramento honesto. Ver o Elementor Pro
A ordem pela qual procedo
Primeiro as imagens, depois a cache, depois as fontes, depois os scripts. Por esta ordem, porque está ordenada por rendimento decrescente. Na maioria das páginas, só os dois primeiros passos levam o valor do vermelho para o verde.
Meça antes e depois, senão está a otimizar às cegas. E meça no telemóvel — é aí que os valores são piores e é aí que a avaliação se decide.
Outras alavancas reuni-as em otimizar o desempenho do Elementor. Se preferir percorrer isto uma vez no seu próprio site, faço-o consigo na minha formação de Elementor.
Etiquetas