Portanto, você tem um servidor bem configurado, mas o desempenho do seu site é ruim. O tempo de resposta da sua página (latência) é de segundos e o servidor não pode lidar com mais de 100 usuários simultâneos. Você investiu em SEO, mas ainda acha que a Pesquisa do Google não fornece a classificação que seu site merece. O que você faz? Como o Google PageSpeed ​​Insights pode ajudá-lo? Vamos começar com o básico!

O desempenho é um importante fator de classificação

Um bom desempenho do site é essencial. Um site moderno não consiste apenas em alguns arquivos estáticos, é composto de bibliotecas de front-end e estruturas como o Bootstrap. Quanto mais arquivos um cliente precisar baixar para renderizar uma página completa, mais tempo será necessário para carregar uma página. E quanto mais tempo leva para carregar uma página, menor é a classificação.

O impacto do celular

O outro fator essencial para a classificação de pesquisa de um site é a facilidade de uso por dispositivos móveis. Não apenas porque os sites otimizados para dispositivos móveis são otimizados para carregar rapidamente em conexões móveis de baixa taxa de transferência e alta latência, eles também oferecem ótimas experiências ao usuário.

Uma estrutura muito popular para implementar facilmente um design web responsivo é o Bootstrap, e mesmo sendo fácil de usar, ele requer pelo menos mais dois arquivos estáticos para funcionar. Isso significa que estamos comprando usabilidade às custas do desempenho do carregamento. Mas não se preocupe, explicarei como você pode compensar essa pequena perda posteriormente neste artigo.

O Google PageSpeed ​​Insights ajuda a aumentar o desempenho

Com o PageSpeed ​​Insights do Google, você pode realizar verificações para identificar áreas de aprimoramento e tornar seus sites mais rápidos e compatíveis com dispositivos móveis em segundos - os quais são essenciais para obter uma pole position na Pesquisa Google.

Google PageSpeed ​​Insights - Frontpage

Você pode usar o PageSpeed ​​Insights gratuitamente a partir da página do projeto ou siga o nosso guia para instalar o Google PageSpeed ​​Insights Plesk Extension  no painel de controle do Plesk.

Compreendendo as recomendações do PageSpeed ​​Insights

1. Evite redirecionamentos da página de destino

Os redirecionamentos podem causar uma latência perceptível se a solicitação for redirecionada várias vezes para o ponto final de onde os dados são eventualmente enviados para o cliente. Todo redirecionado inicia outra ação de solicitação-resposta HTTP (com possíveis pesquisas de DNS e handshakes de TCP) que pode diminuir drasticamente o desempenho do site, especialmente em um dispositivo móvel com uma conexão lenta à Internet.

Um bom exemplo de como evitar redirecionamentos para dispositivos móveis é usar um design moderno e responsivo. Um site já otimizado para celular não exige redirecionamentos para um subdomínio dedicado para dispositivos móveis.

Além disso, certifique-se de redirecionar corretamente em uma etapa de http://example.compara https://www.example.com. As pessoas tendem a digitar apenas a forma mais curta do seu domínio na barra de endereços do navegador - mas seu site deve ser executado apenas com https (para maior segurança e melhor classificação) e provavelmente usar wwwcomo subdomínio.

Dica de SEO: redirecionamentos 301 de HTTP para HTTPS

O HTTPS se tornou um fator importante para a classificação no Google. O mecanismo de pesquisa prefere o site que usa o protocolo HTTPS para garantir comunicações seguras entre os dois pontos de extremidade, aqui o cliente e o servidor. Considere ativar uma opção de redirecionamento 301 em seus domínios depois de instalar seus certificados SSL.

Para usuários do Plesk, o Security Advisor da extensão Plesk o ajudará a ativar certificados gratuitos para todos os sites e você pode ativar os redirecionamentos 301 através de "Configurações de hospedagem" no painel.

Falando sobre redirecionamentos, o Plesk suporta os redirecionamentos 301 amigáveis ​​para SEO do HTTP para o HTTPS imediatamente. Isso significa que, se você ativar um certificado SSL gratuito com o recurso Let's Encrypt, o Plesk o ajudará a mudar para o protocolo seguro sem perder o poder de classificação.

2. Ative a compactação

Sempre envie conteúdo compactado com GZIPou Deflatepara o cliente. Esta regra verifica se a fonte serviu recursos compactáveis ​​(como HTML, imagens ou arquivos JS / CSS) com compactação. A compactação reduz o número de bytes transferidos pela rede em até 90%. Isso reduz o tempo total para baixar todos os recursos, o que leva a um tempo de carregamento mais rápido e a uma melhor experiência do usuário.

Importante para o uso da compactação é que ambos os lados (cliente e servidor) entendem o algoritmo de compactação aplicado. Os chamados campos HTTP Header trocam os algoritmos suportados. Se você quiser saber mais sobre o protocolo de rede HTTP, leia meu artigo sobre HTTP / 2 . A maioria dos navegadores modernos já suporta compactação imediata. No lado do servidor, você pode usar módulos especiais, por exemplo mod_deflate(Apache) ou ngx_http_gzip_module(Nginx).

O Plesk suporta compressão imediata

Não se preocupe, um servidor Plesk já pré-instala os módulos de compactação necessários, basta ativar esse recurso manualmente para todos os domínios que devem usar compactação. Você pode adicionar o código necessário em um .htaccess(Apache) ou web.config(NGINX) no diretório raiz do seu site ou ainda mais diretamente no Plesk:

Vá para "Sites e domínios" e selecione "Configurações do Apache e nginx". Se você usa o servidor da web Apache, precisará adicionar o seguinte código na área de texto em "Diretivas adicionais do Apache". Selecione a área de texto “Diretivas adicionais para HTTPS” se você estiver usando HTTPS ou a primeira área de texto.

Apache

AddOutputFilterByType DEFLATE texto / texto sem formatação / html text / xml;AddOutputFilterByType DEFLATE text / css text / javascript;AddOutputFilterByType DEFLATE application / xml application / xhtml + xml;AddOutputFilterByType DEFLATE application / rss + xml;AddOutputFilterByType DEFLATE application / aplicação javascript / x-javascript

Se você usa o NGINX, é necessário adicionar o seguinte código na área de texto "Diretivas adicionais do nginx".

NGINX

gzip on;gzip_vary on;gzip_proxied any;gzip_comp_level 6;gzip_disable "msie6";gzip_types texto / texto sem formatação / texto css / texto javascript / aplicativo xml / aplicativo json / aplicativo javascript / aplicativo x-javascript / aplicativo xml / xml application / xml + rss;

Aviso: A compactação dinâmica pode afetar a CPU da maneira que você pode perder a vantagem de desempenho da compactação devido ao longo processamento da CPU. Não faz sentido definir o nível de compactação para o nível mais alto porque o ganho no tamanho do arquivo é mínimo em comparação com um nível médio, mas a carga da CPU e o tempo de processamento são drasticamente maiores. Outra melhoria seria armazenar em cache os arquivos já compactados e entregá-los diretamente, sem nenhum processo de compactação envolvido.

3. Aproveite o cache do navegador

O carregamento de arquivos estáticos é demorado e caro. O navegador já armazena os recursos baixados no armazenamento em cache do navegador. O servidor pode definir uma política de cache específica com cabeçalhos especiais. O cache local deve fornecer os recursos do cache local em vez de solicitá-los novamente ao servidor.

Você pode usar dois campos de cabeçalho no cabeçalho de resposta: Cache-Controle ETag. Com o Controle de cache, você pode definir por quanto tempo o navegador pode armazenar em cache respostas individuais. ETag cria um token de revalidação com o qual o navegador pode reconhecer alterações de arquivos facilmente.

O navegador deve armazenar em cache os arquivos estáticos por pelo menos uma semana. Se você possui arquivos que não são alterados regularmente, é possível aumentar o tempo de cache para um ano.

4. Reduza o tempo de resposta do servidor

O PageSpeed ​​Insights aciona essa regra se o servidor não responder dentro de um determinado período de tempo (> 200ms). O tempo de resposta significa o tempo que o navegador precisa para carregar o código HTML da saída. Muitos fatores podem ter um efeito negativo no tempo de resposta.

A razão de um tempo de resposta lento não é fácil de resolver sem análise de insight. Os possíveis fatores para o atraso podem ser causados ​​pelo servidor, como falta de CPU ou memória lenta ou na camada do aplicativo, por exemplo, lógica lenta de script, consultas pesadas ao banco de dados ou muitas bibliotecas incluídas.

A questão é: como encontrar esses gargalos? Você pode usar a extensão New Relic para resolver esses problemas ou, alternativamente, verificar seu site com o WebPageTest para ver como os navegadores processam as páginas e quais arquivos tornam o site lento!

5. Minimize HTML, CSS e JavaScript

O servidor pode reduzir recursos como o código HTML ou arquivos JavaScript e CSS antes de enviá-los ao navegador. Isso economiza muitos bytes de dados, o que acelera o download dos recursos. Minificação é o processo de compactação do código sem perder nenhuma informação necessária ao cliente para renderizar o site corretamente.

Tais otimizações contêm, por exemplo, a remoção de comentários, código não utilizado ou espaços em branco desnecessários. Não se preocupe, você não precisa fazer isso manualmente, existem muitas ferramentas ou plugins gratuitos que farão o trabalho automaticamente. Basta pesquisar no google!

Nota: Se você procurar em um arquivo tão minificado, poderá pensar que isso não é legível, mas para o computador, não faz diferença. De fato, é ainda melhor se o código for o mais compacto possível!

6. Elimine JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda

O PageSpeed ​​Insights aciona essa regra se o navegador carregar arquivos JavaScript e CSS, mesmo que o chamado conteúdo acima da dobra não precise do código para criar a saída adequada. Isso significa que o navegador não pode renderizar a saída HTML enquanto todos os recursos externos não estiverem disponíveis completamente.

Um recurso externo não é necessariamente um arquivo de outro servidor, mas um arquivo adicional em geral que o cliente precisa carregar sobre a resposta HTML para renderizar a página corretamente. A renderização de códigos JavaScript e CSS relevantes pode ser adicionada em linha. Mas isso deve ser limitado apenas às partes do código absolutamente necessárias. Você não deve carregar o código JavaScript crítico de forma assíncrona ou adiada na parte inferior da página.

Também faz sentido concatenar todos os arquivos em um único arquivo (um arquivo para CSS e JavaScript) para reduzir a quantidade de solicitações HTTP. Em geral, você definitivamente deve ativar o suporte a HTTP / 2 no seu servidor. A nova versão do protocolo de rede terá um impacto muito positivo no desempenho do site. Leia tudo sobre HTTP / 2 e como ativá-lo em nossa postagem no blog HTTP / 2 - Aumente o desempenho do seu site!

7. Otimize imagens

Se você tiver muitas imagens em seu site, esse poderá ser um dos maiores potenciais de melhoria. Otimizar imagens sem afetar a qualidade visual pode reduzir significativamente o tamanho do arquivo, o que melhora drasticamente o tempo de download e o uso da largura de banda.

Existem muitas possibilidades diferentes para otimizar imagens, por exemplo, resolução, formato da imagem ou configurações de qualidade. Em muitos sites, os webmasters carregam imagens em resoluções muito altas e, portanto, com tamanhos de arquivo muito grandes. O PageSpeed ​​Insights lista esses arquivos após a verificação com um número percentual de economia de tamanho possível para variações otimizadas das mesmas imagens.

Redes de entrega de conteúdo como o CloudFlare (link para a nossa extensão) podem otimizar imagens automaticamente para você e aproximá-las dos seus clientes. Esteja ciente de que esse recurso de otimização requer uma assinatura paga. Obviamente, você também pode otimizar suas imagens manualmente. Leia este guia fornecido pelo Google: otimizar imagens .

8. Priorize o conteúdo visível

Esta regra é semelhante à regra de bloqueio de renderização. O PageSpeed ​​Insights o aciona quando viagens de ida e volta adicionais à rede são necessárias para renderizar o conteúdo acima da dobra da página carregada. Se os visitantes carregarem esta página em uma conexão lenta (com altas latências), as solicitações de rede adicionais criarão atrasos significativos e degradarão a experiência do usuário.

É importante estruturar o código HTML para que o conteúdo crítico seja carregado primeiro. Portanto, se você tiver uma barra lateral ao lado do artigo, posicione a barra lateral após o artigo no código HTML para que o navegador renderize o artigo antes da barra lateral.

Já mencionei a entrega assíncrona de JavaScript, também é possível melhorar a estratégia de entrega de CSS. As instruções CSS necessárias na parte do conteúdo visível podem ser carregadas diretamente no código HTML e o restante adiado em um arquivo após o processo de renderização.

Extensão do Google PageSpeed ​​Insights Plesk

Se você ainda não o fez, instale a Extensão do Google PageSpeed ​​Insights hoje e comece a melhorar o desempenho e as classificações do seu site.