Como acelerar seu site WordPress em 20 minutos

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br


Todo mundo sabe que a velocidade da página é importante. É um fator confirmado de classificação do Google em computadores e dispositivos móveis, afeta a experiência do usuário e pode ter um efeito direto em seus resultados financeiros.

Mas sites WordPress lentos são um problema comum.

Esta é a pontuação móvel de uma página minha no PageSpeed ​​Insights.

Como acelerar seu site WordPress em 20 minutos 3

Antes da otimização.

Se executarmos o site inteiro por meio da Auditoria de Site do Ahrefs – que mostra o tempo de carregamento da página para todas as páginas – veremos que esta não é a única página de carregamento lento. Nenhum deles carrega muito rápido, com um tempo médio de carregamento de 570ms.

Como acelerar seu site WordPress em 20 minutos 5

Antes da otimização.

Agora, aqui está a mesma página após cerca de 20 minutos de otimização da velocidade da página:

Como acelerar seu site WordPress em 20 minutos 7

Após a otimização.

E o resto das páginas em Auditoria de site:

Como acelerar seu site WordPress em 20 minutos 9

Após a otimização.

A diferença é noite e dia. A pontuação do PageSpeed ​​Insights é quase perfeita e cada página carrega muito rápido.

Neste guia, mostrarei exatamente como fiz isso em algumas etapas simples e fáceis.

  1. Remover plug-ins não utilizados
  2. Interruptor DNS provedores para Cloudflare
  3. Instale um plugin de cache
  4. Minimize o seu código
  5. Combinar CSS e arquivos JavaScript
  6. Elimine recursos de bloqueio de renderização
  7. Imagens e vídeos de carregamento lento
  8. Otimize as fontes do Google
  9. Ativar pré-carregamento
  10. Use um CDN
  11. Otimize suas imagens

importante

Muitas das otimizações recomendadas abaixo usam WPRocket, um plug-in pago para acelerar o seu site WordPress. Listei alternativas gratuitas sempre que possível, mas é importante observar que os plug-ins às vezes podem entrar em conflito uns com os outros e causar problemas. Você deve sempre testar como eles afetam seu site em um ambiente de teste antes de enviar quaisquer alterações para seu site ativo. Aprenda como configurar um site de teste aqui.

Etapa 1. Remova os plug-ins não utilizados

A menos que você tenha um site WordPress totalmente novo, é provável que tenha instalado vários plug-ins que não usa ao longo dos anos. Alguns deles podem afetar a velocidade da página, portanto, vale a pena desativar e desinstalar tudo o que você não precisa como ponto de partida.

Apenas tome cuidado ao fazer isso. Se você não tiver certeza se algo é necessário, deixe lá.

Etapa 2. Mudar DNS provedores para Cloudflare

Os sites são arquivos em discos rígidos (servidores) conectados à internet. E cada dispositivo conectado à internet tem um IP endereço (por exemplo, 123.123.12.1).

Porque IP endereços são difíceis de memorizar, nomes de domínio são mapeados para IP endereços usando DNS, que significa Sistema de Nome de Domínio. Você pode pensar nisso como a lista telefônica da web. Quando você digita um domínio em seu navegador, um DNS procura ocorre para encontrar o servidor IP endereço.

Leia Também  Executando uma migração de domínio: uma análise interna do OnLogic (anteriormente Logic Supply)

Mas é o seguinte: a maioria das pessoas usa o DNS provedores de seu registrador de domínio, que geralmente é lento.

Se este for você, mude para um mais rápido DNS provedor como Cloudflare.

Para fazer isso, inscreva-se para uma conta Cloudflare gratuita. Clique em “Adicionar um site”, digite seu nome de domínio e clique no botão.

5 cloudflare dns

Selecione o plano gratuito e clique em “Confirmar plano”.

Cloudflare agora lhe dará a chance de revisar seu DNS configurações antes de continuar. Se não houver avisos, geralmente é seguro continuar.

Agora tudo o que resta fazer é trocar seus servidores de nomes com o registrador de domínio. A maneira como você faz isso varia entre os registradores, portanto, não hesite em pedir o suporte deles se não tiver certeza de como fazer isso.

Este é o processo se você estiver usando o Google Domains:

6 nameservers

Etapa 3. Instalar um plugin de cache

Cache é um processo que armazena arquivos temporariamente para que possam ser entregues aos visitantes com mais eficiência.

Existem dois tipos principais:

  • Cache do navegador: Salva arquivos “comuns”, como logotipos, no disco rígido dos usuários para que eles não tenham que baixá-los novamente em visitas repetidas.
  • Cache do servidor: Salva uma versão totalmente construída e ‘estática’ de uma página no servidor para que não precise ser reconstruída sempre que um novo visitante a solicitar.

WP O Rocket simplifica a ativação do cache. Basta comprar, instalar e ativar. O cache básico (servidor e navegador) está ativado por padrão. Se o seu site for responsivo, vá até as configurações de cache e marque a caixa para habilitar o cache para dispositivos móveis também.

7 wp rocket caching

Procurando uma opção gratuita? Tentar W3 Cache total.

A minificação remove espaços em branco e comentários do código para reduzir o tamanho dos arquivos. E arquivos menores resultam em tempos de carregamento mais rápidos.

velocidade da página wp

Se você estiver usando WPRocket, marque as caixas de seleção para reduzir CSS e JavaScript nas configurações.

8 minificar

Se você não estiver usando WPRocket, instale e ative a otimização automática e faça o mesmo.

Apenas saiba que você deve sempre testar como isso afeta seu site antes de implementá-lo ao vivo. A redução geralmente pode levar a código corrompido, especialmente quando se trata de Javascript.

Etapa 5. Combinar CSS e arquivos JavaScript

A maioria dos sites WordPress inclui vários CSS e arquivos JavaScripts. Alguns são para temas, outros são para plug-ins e você também pode ter alguns personalizados.

Combinar esses arquivos pode acelerar as coisas, mas depende da configuração do seu servidor.

  • Com HTTP/1.1, CSS e os arquivos JavaScript estão carregando consecutivamente. Isso significa que um arquivo precisa ser totalmente carregado antes que o próximo comece a carregar.
  • Com HTTP/ 2, os arquivos são carregados simultaneamente. Isso significa múltiplos CSS e os arquivos JavaScript podem começar a carregar ao mesmo tempo.

Se o seu servidor usa HTTP/1.1, a combinação de arquivos acelera as coisas porque menos arquivos precisam ser carregados. Se usa HTTP/ 2, combinar arquivos não fará necessariamente muita diferença porque os arquivos podem carregar ao mesmo tempo de qualquer maneira.

Para ver qual versão seu site usa, conecte seu domínio ao Key CDNtestador de.

9 http1 http2

E se HTTP/ 2 não é compatível, vale a pena combinar CSS e arquivos JavaScript.

Leia Também  As três principais tendências de marketing da era COVID-19

Para fazer isso no WPRocket, marque as caixas de seleção “Combine arquivos JavaScript” e “Combine CSS arquivos ”nas configurações.

10 wprocket combine css

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br

Se você estiver usando a otimização automática, há duas caixas de seleção para “agregar” arquivos. Apenas saiba que isso às vezes pode ‘quebrar’ coisas em seu site, portanto, vale a pena verificar se tudo ainda parece e funciona da mesma forma depois de ativado. E lembre-se de limpar o cache com antecedência e verificar se há alterações em uma janela anônima. Caso contrário, as mudanças podem não se refletir no que você vê.

Etapa 6. Elimine recursos de bloqueio de renderização

Renderização é o processo de transformar o código em uma página da web visível.

A palavra-chave aqui é ‘visível’ porque uma página da web nem sempre precisa ser totalmente carregada antes de ser visível.

Por esse motivo, faz sentido priorizar os recursos de carregamento para conteúdo ‘acima da dobra’.

Você pode fazer isso adiando o carregamento de itens não críticos CSS e arquivos JavaScript necessários para conteúdo “abaixo da dobra” até mais tarde. Para fazer isso no WPRocket, marque as caixas “Load JavaScript adiado” e “Optimize CSS Entrega.”

11 wprocket otimizar css

Se não estiver usando WPRocket, você precisará de dois plug-ins: Autoptimize e Async JavaScript.

Nas configurações de Otimização Automática, marque a caixa “Inline e Adie CSS. ” Em seguida, nas configurações de Async JavaScript, clique em “Enable Async JavaScript.

Se você já viu o problema de “eliminar recursos de bloqueio de renderização” no PageSpeed ​​Insights, isso geralmente corrigirá o problema.

12 insights de velocidade de página de bloqueio de renderização

Etapa 7. Imagens e vídeos de carregamento lento

O carregamento lento melhora a velocidade da página, adiando o carregamento de imagens e vídeos até que estejam visíveis na tela. Se você estiver executando o WordPress 5.5+, o carregamento lento de imagens é habilitado por padrão, mas não para vídeo.

Se você estiver usando WPRocket, resolva isso marcando a caixa “Habilitar para iframes e vídeos” nas configurações do LazyLoad.

13 vídeos com carregamento lento

Se você não estiver usando WPRocket, o plugin gratuito Lazy Load for Videos faz quase a mesma coisa.

Etapa 8. Otimize as fontes do Google

Muitos temas usam Google Fonts, e essas fontes precisam ser baixadas do servidor do Google sempre que alguém visita seu site. Isso pode ser um processo demorado porque o seu servidor tem que fazer HTTP pedidos, baixe um CSS arquivo e, em seguida, baixe a fonte do local referenciado na folha de estilo. E tem que fazer isso para todas as fontes da página.

Se você estiver usando WPRocket, ele otimiza automaticamente as solicitações do Google Fonts. Caso contrário, Trocar Google Fonts Display é um bom ponto de partida.

Etapa 9. Habilitar pré-carregamento

O pré-carregamento permite definir recursos essenciais, para que os navegadores saibam a prioridade dos arquivos a serem carregados.

Por exemplo, digamos que seu código seja assim:

<html> 
<head> 
<script type=”text/javascript” src=”somefile.js”></script>
<link rel=”stylesheet” href=”/style.css”>
</head>
<body>
Content
</body>
</html> 

Com base neste código, o arquivo JavaScript precisaria ser carregado primeiro por causa da hierarquia. Isso não é ideal porque o CSS arquivo é quase certamente mais crítico do que o código JavaScript.

A maneira mais simples de resolver isso é adicionar outra linha de código, como esta:

<link rel="preload" href="https://ahrefs.com/style.css" as="style">

Isso diz aos navegadores para priorizar o CSS arquivo sobre o arquivo JavaScript, independentemente da hierarquia.

Leia Também  Atualização do algoritmo de pesquisa do Google, Google Shopping é gratuito, Hub de perguntas e dicas de pesquisa para COVID-19

Você pode adicionar atributos de pré-carregamento manualmente editando o código, mas isso pode ficar complicado e confuso, a menos que você saiba o que está fazendo. É muito mais fácil instalar o WPRocket, que faz isso automaticamente.

Redes de distribuição de conteúdo (CDN) são grupos de servidores distribuídos em todo o mundo. Cada um desses armazena uma cópia do seu site para que seja mais rápido para os usuários se conectarem ao solicitar páginas da web.

Por exemplo, digamos que o servidor do seu host da web esteja no Reino Unido. Se alguém visitar seu site do NOS e você não está usando um CDN, a conexão entre o dispositivo e o servidor ficará lenta. Se alguém visitar do NOS e você usa um CDN, o dispositivo se conectará ao servidor mais próximo, o que ajuda a conectar mais rápido.

Há muitos CNS provedores, então tudo que você precisa fazer é escolher um, habilitá-lo no WPRocket e inserir o CNAME.

14 wprocket cdn

Etapa 11. Otimize suas imagens

O carregamento lento resolve muitos problemas relacionados às imagens, mas não faz nada para ajudar as imagens que carregam acima da dobra. Quanto maiores forem, maior será o impacto negativo sobre os tempos de carregamento.

Para resolver isso, comprima suas imagens com um plugin como Shortpixel. Basta instalar, ativar, ir para as configurações, digite seu API , clique em “Salvar e ir para o processo em massa e, em seguida, clique em“ Reiniciar otimização ”.

15 pixels curtos

Se você achar que a qualidade é muito baixa, vá para as configurações e altere o tipo de compactação para brilhante ou sem perdas.

Compressão de 16 pixels curtos

Os resultados

Vejamos como essas otimizações impactaram a velocidade da nossa página de acordo com algumas ferramentas populares.

Aqui estão as estatísticas de antes e depois de minha postagem no PageSpeed ​​Insights do Google:

1 pagepeed insights lento

Antes da otimização.

3 insights de velocidade da página rápido

Após a otimização.

E aqui está o mesmo do GTMetrix:

18 gtmetrix antes

Antes da otimização.

17 gtmetrix depois

Após a otimização.

Você pode ver que a página carregou totalmente em 5,9 segundos com um tamanho de página de 1,89 MB e 67 solicitações. Após as otimizações, todas as três métricas caíram. O tamanho da página é de 695 kilobytes, o tempo de carregamento total é de 4 segundos e o número de solicitações diminuiu em quase 50%.

Se verificarmos todas as páginas do site na Auditoria do Site do Ahrefs, vemos uma melhoria de cerca de 40% na média e no tempo de carregamento do 95º percentil.

4 auditoria local rápido

Pensamentos finais

Tudo acima funcionou bem para o meu site e funcionou bem para outros sites também. No entanto, é importante lembrar que cada configuração do WordPress é diferente. Você pode ter mais plug-ins, um tema mais pesado, hospedagem mais lenta ou mais scripts de rastreamento de terceiros, que tornam seu site mais lento.

Se a velocidade da sua página ainda precisa de algumas melhorias depois de fazer essas otimizações, é provável que você precise de um trabalho personalizado no seu site. Portanto, vale a pena contratar um desenvolvedor ou especialista em velocidade de página para dar uma olhada nas coisas um pouco mais de perto.

Ou, se quiser mais detalhes sobre problemas específicos, verifique nosso guia completo de velocidade da página.

Perdemos algo importante neste guia? Me manda um ping no Twitter.



cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *