Seu site está lento e com pouco tráfego? Continue lendo este post e acelere seu site WordPress com Elementor!
Antes de mais nada, o que é Elementor? O Elementor nada mais é que um plug-in para o WordPress que permite construção de páginas de um jeito intuitivo e eficaz. – Se você ainda não tem o seu, clique aqui e garanta!
Posteriormente, outro item importante para você saber é o Core Web Vitals, um padrão usado pelo Google para medir a experiência geral da página na web. Se você estiver usando o Elementor, há muito para otimizar seu site para alto desempenho.
Iremos apresentar abaixo como transformar seu site do Elementor mal configurado em um site com alta pontuação no Google em apenas 4 etapas, sendo elas o Reduzir, Otimizar, Simplificar e Eliminar.
Quais são os principais elementos vitais da web do Google?
O Core Web Vitals se concentra nas métricas que mais importam quando se trata de otimização. É uma iniciativa do Google que fornece orientação para fornecer uma experiência de qualidade ao usuário na web.
É aplicado a todas as páginas da web e deve ser medido por todos os proprietários de sites.
Embora os sinais vitais evoluam e mudam, atualmente, os sinais vitais centrais podem ajudar os sites WordPress, permitindo que eles se concentrem em três coisas:
- Carregando (LCP – Largest Contentful Paint) : mede o desempenho de carregamento. Uma boa experiência do usuário significa que o LCP deve ocorrer dentro de 2,5 segundos quando a página inicial começa a carregar.
- Interatividade (FID – First Input Delay) : mede a interatividade. Uma boa experiência do usuário significa que as páginas devem ter um FID de menos de 100 milissegundos.
- Estabilidade Visual (CLS – Cumulative Layout Shift) : Mede a estabilidade visual. As páginas devem ter e manter um CLS inferior a 0,1.
Para ter uma boa ideia da posição do seu site, o Google oferece um relatório Core Web Vitals que você pode executar. Ele mostra o desempenho de suas páginas com base em dados de uso do mundo real.
E além disso, para uma outra perspectiva, você pode dar uma boa olhada no que são os vitais essenciais da Web do Google neste vídeo de visão geral rápida:
Como você pode ver, é fácil entender quando você sabe o que são.
Agora que sabemos em que consiste o Core Web Vitals do Google, vamos implementá-los! Em primeiro lugar, vamos configurar um site Elementor e depois disso partiremos daí.
Obtendo a configuração do Elementor
Um bom exemplo a ser usado para isso será um site com um bom conteúdo (por exemplo, imagens e texto), portanto, usaremos a página Produto Elementor – Aplicativo.
Servidor: SiteGround
Tema: Hello Elementor
Página inicial do tema Elementor: Produto – Página do aplicativo
Plug-in: Elementor
PHP: 7.4
O site foi criado do zero. Nenhum dos designs na página Elementor foi ajustado ou alterado.
Vamos começar a partir deste:
Para este:
Como resultado, tudo isso foi usando o método R.O.S.E.
Se você tiver um site com Elementor instalado – acompanhe e otimize seu site com Core Web Vitals.
Nesse sentido, é sempre melhor começar definindo as próprias configurações de otimização do tema. Isso irá variar, no entanto, do tema que você está usando.
Reduzindo arquivos de ativos para tornar seu site WordPress muito mais leve
Posteriormente à isso, vamos começar reduzindo os arquivos de ativos para ajudar a tornar nosso site WordPress mais leve. Afinal, quanto mais arquivos de ativos seu site WordPress tiver, mais tempo demorará para carregar.
Para conseguir isso, vamos cobrir duas coisas:
Combine Arquivos JavaScript
É preciso compactar e organizar seus arquivos JavaScript para melhorar sua pontuação.
Carregamento lento de suas imagens
Contudo, o carregamento lento de suas imagens impede que imagens fora da tela sejam carregadas até que um visitante as role. Portanto, isso ajuda suas páginas a carregarem mais rápido, usando menos largura de banda e adiando imagens fora da tela.
Além disso, existem várias etapas adicionais que você também pode realizar, como não usar uma biblioteca de fontes, pré-carregar arquivos de fontes e remover emoji WP.
Otimizando Seu Tempo de Resposta Inicial do Servidor
A resposta do servidor é quando você insere um URL em um navegador. Feito isso, o navegador envia uma solicitação ao servidor que hospeda o site. O servidor gera uma resposta que é enviada de volta ao navegador. Em seguida, você terá um visual do site.
Contudo, alguns fatores que podem levar a uma resposta lenta incluem configuração do servidor, execução de código, número de conexões simultâneas e localização do servidor.
É vital ter um tempo de resposta rápido e, quando se trata de otimizar o tempo de resposta inicial do servidor, há muito que você pode fazer. Eles incluem:
Use boa hospedagem com suporte HTTP / 2
Antes de mais nada, HTTP / 2 é uma versão do HTTP (HyperText Transfer Protocol), que é otimizado para fazer seu site carregar uma tonelada mais rápido, sem qualquer impulso extra necessário para o fim das coisas.
O HTTP / 2 tem como objetivo diminuir a latência para melhorar a velocidade de carregamento da página em navegadores da web. Além disso, inclui melhorias, como binário vs. textual, totalmente multiplexado, compactação de cabeçalho e muito mais.
Se você deseja otimizar o tempo de resposta do servidor, desde já você precisa de um bom host e por isso indicamos SiteGround.
Remova os plug-ins que você não precisa
Esta é uma tarefa fácil de fazer e pode ajudar a otimizar seu site WordPress. Tudo o que você precisa fazer é remover todos os plug-ins não utilizados que não sejam necessários.
Plug-ins desnecessários podem paralisar seu site e causar problemas de desempenho. Se você não os estiver usando – livre-se deles. Além disso, você sempre pode reinstalá-los mais tarde, se necessário.
Use um bom plug-in de cache
O armazenamento em cache melhora o desempenho, bem como fazendo com que as páginas carreguem rapidamente.
Simplificando Seu Conteúdo
Refere-se ao conteúdo da tela que é visível sem rolar ou clicar.
Veremos como simplificar as coisas:
Compactando suas imagens
É fundamental compactar suas imagens para tempos de carregamento mais rápidos.
Limitando suas imagens “acima da dobra”
Você deve ficar com apenas duas imagens em sua seção “acima da dobra” em um mundo perfeito. Isso consiste no logotipo do seu site e em outra imagem. Do mesmo modo, se você tiver uma imagem de plano de fundo, ela também será incluída na contagem.
Ou seja, adicionar imagens adicionais aumentará o tempo de carregamento. Ter apenas duas imagens aumentará sua pontuação LCP. Em outras palavras, tente mantê-lo ao mínimo.
Não coloque conteúdo orientado por JavaScript na seção “Acima da dobra”
Em suma, é melhor manter a seção “Acima da Dobra” livre de desordem. Isso inclui qualquer coisa que tenha conteúdo baseado em JavaScript, como controles deslizantes, carrosséis, animações, etc.
A razão para isso é que pode causar mudanças inesperadas de layout e um tempo de carregamento de elementos LCP mais prolongado. O que nos leva a…
Eliminando mudanças inesperadas de layout
Anteriormente, onde mencionamos não colocar conteúdo orientado por JavaScript acima da dobra, também mencionamos mudanças inesperadas de layout. Isso pode acontecer, por exemplo, com controles deslizantes.
Mudanças inesperadas de layout são mudanças na colocação de recursos em uma página da web. São um problema porque podem criar saltos e saltos com animações, tornando o conteúdo mais difícil de ler.
Pode ser necessário fazer alguns testes para determinar o elemento certo que causa uma mudança de layout. No entanto, se você continuar procurando, certamente encontrará o culpado e consertará o problema.
Mudanças de layout causadas por imagens e iframes
Se as imagens estiverem causando mudanças de layout, você pode cuidar do problema adicionando uma altura e largura fixas. Ao fazer isso, o tamanho permanecerá o mesmo e eliminará qualquer deslocamento.
Mudança de layout causada por conteúdo orientado a JavaScript
Um problema de mudança de layout que você pode corrigir no próprio Elementor é causado por conteúdo orientado a JavaScript. Isso inclui coisas como controles deslizantes, carrosséis e grades de alvenaria.
Você pode corrigir isso se estiver usando o widget de controle deslizante ou o widget de carrossel, adicionando uma altura fixa a todas as janelas de visualização diferentes no painel do Elementor.
Se estiver usando um plug-in, você geralmente pode ter uma opção de altura adaptável. Certifique-se de desativar isso, ou um carrossel pula e estala conforme a altura da imagem muda.
Para plug-ins de grade de alvenaria, certifique-se de ter uma altura fixa para o recipiente da grade. Ao fazer isso, sua grade não irá mais oscilar conforme o usuário rola a página para baixo.
Mudança de layout causada pelo Google Fonts
Você pode remover as fontes do Google e usar fontes do sistema .
Existem alguns problemas com o pré-carregamento de fontes do Google e muito mais no Elementor, mas isso não resolverá o problema totalmente. Você ainda verá alguma mudança de layout.
Passando no Teste
Por fim, depois de configurar tudo o que passamos, as pontuações falam por si! No Google PageSpeed Insights, nosso site marcou 98 (como visto no início deste artigo).
Uma coisa a observar é que nem todas as técnicas funcionam com todos os sites, e você pode ou não ter que incluir todas as etapas em seu processo de otimização. No entanto, vale a pena testar todos os métodos mencionados e ver sua aparência em seu site.
O objetivo principal é eliminar o máximo de ativos possível, levando a uma melhor pontuação do Google PageSpeed Insights.
Vale ressaltar que isso foi testado com um site Elementor, no entanto, esse método também pode ser usado para outros temas e construtores de sites.
E por último, outro cuidado fundamental que devemos ter são com os hackers, portanto, leia também nosso artigo, Proteger seu site WordPress: dicas comprovadas e verdadeiras para proteger o WordPress.
