Imagens hero do Elementor mais rápidas em 2 minutos!

Imagens hero do Elementor mais rápidas

Elementor, um popular editor de páginas WordPress, simplifica o design de páginas. Infelizmente, frequentemente retarda sites. Às vezes devido a erros do usuário e às vezes devido às escolhas de design do Elementor. Um exemplo que vejo quase diariamente é como o Elementor lida com imagens hero. Por padrão, o Elementor usa imagens de fundo para estas, o que retarda o carregamento da página todas as vezes.

O atrativo das imagens de fundo do Elementor

O Elementor adiciona imagens hero como uma imagem de fundo por padrão. Ao editar a página com o Elementor, basta clicar no primeiro contêiner, navegar até o estilo e adicionar sua imagem. É fácil, conveniente e à prova de idiotas. Se isso é bom o suficiente para você, pare de ler aqui, mas se você se importa com seus visitantes, continue lendo e aprenda como criar imagens hero do Elementor da maneira certa.

O problema com as imagens de fundo do Elementor

Agora, o que há de errado com as imagens de fundo, você pode perguntar? As imagens de fundo são conhecidas por este comportamento: elas abrangem todo o fundo de um elemento. Ela faz o que precisa fazer. Mas a um custo de desempenho:

• Descoberta tardia: De uma perspectiva técnica, as imagens de fundo estão longe de serem ideais. As imagens de fundo do Elementor não são descobertas imediatamente no html. Essas imagens de fundo estão vinculadas em folhas de estilo. Como as folhas de estilo precisam ser baixadas e analisadas separadamente, isso significa que elas são descobertas muito mais tarde durante o processo de renderização.
• Não otimizadas para velocidade:  As imagens de fundo não são otimizadas para velocidade porque estão faltando propriedades mais recentes como lazy loading nativo, fetchpriority e async decoding.
• Não responsivas: Por último, mas não menos importante, as imagens de fundo do Elementor não são responsivas e sempre carregarão uma imagem de tamanho completo de desktop, mesmo para pequenos dispositivos móveis.

Não vou entrar em muito mais detalhes (se você estiver interessado, leia sobre [url=/pagespeed/background-images-are-evil]por que imagens de fundo são malignas[/url]), mas basta dizer que uma página com essa configuração provavelmente falhará nos Core Web Vitals.

A correção de 2 minutos para imagens de fundo lentas

Imagens de fundo lentas não precisam ser um problema. Com um simples ajuste de CSS, elas podem ser transformadas em imagens rápidas e responsivas.  O segredo? Usar object-fit: cover para dimensionar a imagem e combiná-la com position: relative no contêiner e position: absolute na imagem. 

Fato divertido: Cronometrei-me hoje enquanto convertia imagens de fundo do Elementor em imagens responsivas extremamente rápidas. Levou menos de 2 minutos! 

Se isso parece complicado, não se preocupe! Vou guiá-lo passo a passo. E há até um vídeo de instruções esperando por você no final!

Passo 1: adicione os estilos necessários

Para corrigir imagens de fundo lentas, comece aplicando alguns estilos CSS essenciais. Esses estilos farão a imagem se comportar como uma imagem de capa de fundo adequada e garantirão  que ela não entre em conflito com as divs auxiliares do Elementor.

/* O contêiner pai relativo */
  .relative{
      position: relative;
  }
  
  /* Garanta que as divs auxiliares do Elementor não sejam relativas */
  .relative .elementor-container, 
  .relative .elementor-column, 
  .relative .elementor-widget-wrap {
      position: initial;
  }
  
  /* A nova e melhorada imagem hero */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

O que isso faz:

• .relative: Torna o contêiner pai relativo para posicionar elementos filhos dentro dele.
• .relative .elementor-*: Redefine as divs auxiliares do Elementor para evitar conflitos de layout.
• .heroimg: Garante que a imagem seja dimensionada para cobrir o contêiner enquanto fica atrás dele.

Como adicionar os estilos:

• Navegue até o Painel do seu WordPress.
• Vá para Aparência > Personalizar.
• Clique em CSS Adicional.
• Cole o código CSS acima e salve suas alterações.

Isso define a base para converter essas imagens de fundo lentas em imagens hero responsivas e otimizadas. Em seguida, aplique as classes .relative e .heroimg à sua seção hero para ver a mágica em ação! 

Passo 2: Prepare o contêiner

Agora que os estilos estão no lugar, é hora de preparar o contêiner para a nova imagem hero. Isso envolve remover a imagem de fundo existente e aplicar a classe .relative ao contêiner.

Passos:

• Edite o contêiner:
• Vá para o seu editor Elementor e selecione o contêiner onde a imagem hero está atualmente aplicada.
• Remova a imagem de fundo:
• Navegue até a aba Estilo.
• Localize a seção Fundo onde a imagem está aplicada.
• Clique no ícone da lixeira para remover a imagem de fundo.
• Aplique a classe .relative:
• Mude para a aba Avançado.
• Em Classes CSS, digite relative.

Passo 3: Adicione uma nova imagem e aplique as novas classes

Com o contêiner pronto, é hora de adicionar a imagem hero responsiva e otimizada usando o Elementor. Veja como:

O que esperar: Durante o passo final, a imagem hero pode parecer desalinhada ou estranha antes de aplicar as classes! Isso é normal! A classe .heroimg transformará a imagem em uma imagem hero responsiva de largura total que se comporta como uma capa de fundo. Uma vez concluída, sua imagem hero otimizada ficará atrás do contêiner, oferecendo o mesmo impacto visual com desempenho significativamente melhorado.

Passos:

• Adicione um elemento de imagem:
• No editor Elementor, clique no ícone de mais no canto superior esquerdo para adicionar um novo elemento.
• Arraste e solte o widget Imagem no contêiner superior (aquele com a classe .relative).
• Carregue e selecione sua imagem:
• Nas configurações de imagem no painel esquerdo, clique no espaço reservado da imagem.
• Carregue a imagem de tela cheia que você deseja usar ou selecione uma existente da sua galeria de mídia do WordPress.
• Aplique a classe .heroimg:
• Com a imagem ainda selecionada, navegue até a aba Avançado no menu Elementor.
• No campo Classes CSS, digite heroimg.

Pronto, aproveite uma página mais rápida!

Você conseguiu! Neste ponto, sua imagem hero está totalmente otimizada e pronta para oferecer uma experiência de página mais rápida. 

Depois de publicar a página, inspecione o elemento e você notará algo ótimo: a imagem de fundo lenta foi substituída por uma imagem de primeiro plano responsiva e rápida. Esta imagem agora é provavelmente carregada com um fetchpriority alto, garantindo que ela carregue mais rápido, melhorando tanto os Core Web Vitals quanto a experiência do usuário.

Parabéns por criar uma página mais rápida e eficiente. Seus visitantes notarão a diferença!

Antes: 2,6 seg

Depois: 0,6 seg

Bônus: pré-carregue a imagem hero

Assista ao passo a passo completo no YouTube.