Ferramenta de teste de velocidade do Pingdom - Como melhorar as pontuações do Pingdom

Sites de carregamento rápido sempre ganham mais tráfego em comparação com os lentos, o que afeta a classificação e o desempenho. Neste artigo, falarei sobre a ferramenta Pingdom Speed ​​Test, que pode ajudá-lo a entender quaisquer problemas de desempenho em seu site. O objetivo é chegar ao ponto de quão rápido é seu site e como você pode torná-lo mais rápido.

Muitas vezes, os usuários interpretam erroneamente os dados da ferramenta Pingdom Speed ​​Test, a ponto de piorar a velocidade de seus sites. Lembre-se, sempre use todas as ferramentas como uso orientado porque elas não são 100% precisas.

O que é a ferramenta de teste de velocidade Pingdom e o que ela oferece?

Pingdom é uma popular ferramenta gratuita de teste de velocidade da web, uma solução de monitoramento para seus sites, aplicativos e servidores. Ele não apenas monitora o tempo de atividade, mas também o desempenho de carregamento para que você possa ver como os visitantes experimentam seu site. Pingdom oferece serviços como monitoramento de tempo de atividade, monitoramento de velocidade de página, monitoramento de transação, monitoramento de servidor e insights do visitante (RUM).

Por que é tão popular? Bem, é provavelmente a ferramenta mais fácil para monitorar a velocidade do site e o desempenho da página. Nem todos os usuários podem ser especialistas em desempenho, por isso é uma boa escolha para o usuário médio do WordPress.

Vamos ver como você pode realizar um teste no Pingdom. Usar a ferramenta Pingdom Speed ​​Test não é grande coisa - basta ir ao site Pingdom, inserir sua URL e selecionar o local de acordo com a localização de seus visitantes. Em seguida, clique no botão 'Iniciar teste' .

A ferramenta Pingdom Speed ​​Test permite que você teste seu site em 7 locais de teste diferentes (5 continentes) ao redor do globo:

• Ásia - Japão - Tóquio
• Europa - Alemanha - Frankfurt
• Europa - Reino Unido - Londres
• América do Norte - EUA - Washington DC
• América do Norte - EUA - São Francisco
• Pacífico - Austrália - Sydney
• América do Sul - Brasil - São Paulo

Então, qual local de teste de velocidade de site do Pingdom seria o melhor para teste? Depende dos visitantes do seu site. Certifique-se de selecionar o local que está próximo aos seus visitantes. Se o público-alvo do seu site estiver na Europa , você terá 2 opções de escolha: (Europa - Alemanha - Frankfurt) ou (Europa - Reino Unido - Londres) . Se o seu site recebe visitantes de todo o mundo, teste-o em locais diferentes e execute as etapas adequadas para aprimoramento.

Compreendendo a análise de cachoeira com a ferramenta de teste de velocidade Pingdom

Uma página da web geralmente é uma combinação de HTML, CSS, JavaScript e arquivos de mídia , e cada um deles gera uma solicitação para renderizar no servidor. Mais pedidos podem ser o motivo da lentidão do site. Existem várias seções na ferramenta Pingdom Speed ​​Test que indicam a pontuação e sugestões de melhoria. As seções da ferramenta Pingdom Speed ​​Test são:

• Resumo do Pingdom
• Melhore o desempenho da página
• Códigos de Resposta
• Tamanho do conteúdo e solicitações por tipo de conteúdo
• Tamanho do conteúdo e solicitações por domínio
• Gráfico de Cachoeira

Nesta seção, vou explicar como você pode fazer uma análise em cascata e dividirei cada seção do Pingdom e explicarei com mais detalhes.

Resumo do Pingdom

Quando você executa um site WordPress por meio do Pingdom, ele gera um resultado com base em uma nota de desempenho, tamanho da página, tempo de carregamento e solicitações.

Ao testar seu site várias vezes, você notará que o tempo de carregamento do site muda a cada teste, enquanto os outros resultados (nota de desempenho, tamanho da página e solicitações) permanecem os mesmos. O motivo dessa variação no tempo de carregamento é o cache DNS, o cache CDN, o cache do WordPress e APIs externas .

Uma pontuação de Pingdom aprimorada depende de seu aplicativo da web e da configuração do servidor. Pode não ser possível obter pontuações de 100 por cento o tempo todo, especialmente quando você está executando um site de comércio eletrônico, mas sempre há espaço para melhorias.

Melhore o desempenho da página

A seção Melhorar o desempenho da página inclui notas agregadas de desempenho com sugestões sobre como melhorar o desempenho da página. Embora essas sugestões possam não ser aplicáveis ​​a todos os sites, elas aumentam as chances de melhoria.

Vamos dar uma olhada nessas sugestões.

1) Use uma rede de distribuição de conteúdo (CDN)

A coisa mais importante para usar em seu site WordPress é um CDN (Content Delivery Network). O CDN se refere a um grupo de servidores geograficamente distribuídos que fornecem entrega rápida de conteúdo da Internet. Trata-se de uma rede de servidores localizados ao redor do globo. O CDN permite a transferência rápida de conteúdo da web, trazendo-o mais perto de onde os usuários estão.

Se você é um usuário do Cloudways, pode aproveitar as vantagens do CloudwaysCDN. Todos os planos de hospedagem da Cloudways possuem CloudwaysCDN embutido que pode ser habilitado com alguns cliques. Para saber mais, confira o blog WordPress CDN em Cloudways.

Vamos dar uma olhada em alguns provedores de CDN terceirizados:

1. KeyCDN
2. CloudFlare CDN
3. Amazon CloudFront
4. CDN77

Aqui você pode ver o benchmarking de CDN do WordPress de três provedores de CDN populares amplamente usados.

2) Evite o erro HTTP 404 (não encontrado)

O erro Avoid HTTP (404) aparece na sugestão da ferramenta Pingdom Speed ​​Test quando a solicitação não pode ser completada com sucesso. Um link quebrado, como quando você anexa manualmente um link a uma imagem excluída dentro da página, resulta em um erro 404.

Sempre certifique-se de que nenhuma solicitação seja gerada para ativos que não existem mais.

3) Minimize Redirecionamentos

A sugestão mais comum da ferramenta Pingdom Speed ​​Test é 'minimizar redirecionamentos'. Um redirecionamento ocorre quando uma página em seu site faz com que outra página carregue. Isso pode acontecer quando você redireciona HTTP para HTTPS , www para não www e o URL da postagem atualizada mudou.

Aqui estão algumas coisas que você pode fazer para evitar que seu site muitos redirecionamentos:

1. Nunca crie um link para uma página que já possui um redirecionamento, pois isso pode causar vários redirecionamentos.
2. Certifique-se de excluir plug-ins desativados / não usados ​​que podem resultar em redirecionamentos desnecessários.
3. Ao criar links em seu site, use o prefixo adequado HTTP ou HTTPS e verifique se é www ou não www.

Se você quiser saber mais sobre redirecionamentos, verifique o artigo da Cloudways sobre Redirecionamentos WP 301.

4) Adicionar cabeçalhos de expiração

Todos os arquivos do site WordPress são carregados um por um para um visitante de primeira vez. As solicitações geradas entre o navegador da web e o servidor aumentam o tempo de carregamento do site. O cache do navegador salva os arquivos do site no computador do visitante, portanto, quando ele visita o site novamente, o site carrega do cache do navegador em vez do servidor, o que acelera o site.

Mas como o navegador sabe qual arquivo salvar e qual arquivo carregar do servidor e por quanto tempo mantê-los? É aí que entram os cabeçalhos de expiração. Essas são regras que informam aos navegadores da web se devem carregar os recursos da página da web do cache do navegador do visitante ou de seu servidor.

Agora, vamos entrar na parte de como fazer. Vou mostrar como adicionar cabeçalhos de expiração usando dois métodos diferentes.

Adicionar cabeçalhos de expiração usando um plug-in

Instale um plugin W3 Total Cache. Depois de instalado e ativado, vá para Painel do WordPress> Desempenho> Cache do navegador e , em seguida, ative a opção 'Definir cabeçalho de expiração' e salve as alterações.

Se você estiver curioso para saber mais sobre o plugin W3 Total Cache, consulte o artigo Cloudways sobre como usar o plugin WordPress W3 Total Cache para sites mais rápidos.

Adicionar cabeçalhos de expiração usando um código

Você também pode adicionar cabeçalhos de expiração usando código. Para isso, descubra se o seu site está usando servidores Apache ou Nginx. Para fazer isso, execute seu site no navegador, pressione Ctrl + Shift + I para ir para a rede do site (talvez você precise atualizar o site uma vez), clique no nome de domínio na parte superior e vá para o cabeçalho seção. Lá, você encontrará o nome do seu servidor.

Para adicionar cabeçalhos de expiração a um servidor Apache, acesse seu arquivo .htaccess usando qualquer servidor FTP (Filezilla) e o código fornecido no topo de seu arquivo .htaccess.

 ## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image / jpg "acesso 1 ano"
ExpiresByType image / jpeg "acesso 1 ano"
ExpiresByType image / gif "acesso 1 ano"
ExpiresByType image / png "acesso 1 ano"
ExpiresByType image / svg "acesso 1 ano"
ExpiresByType text / css "acesso 1 mês"
ExpiresByType application / pdf "access 1 month"
ExpiresByType application / javascript "access 1 month"
ExpiresByType application / x-javascript "acessar 1 mês"
ExpiresByType application / x-shockwave-flash "acesso 1 mês"
ExpiresByType image / x-icon "acesso 1 ano"
ExpiresDefault "acesso 3 dias"
</IfModule>
## EXPIRES HEADER CACHING ##

No Cloudways, você não pode fazer alterações no nível Nginx, mas pode usar as regras do Apache e adicionar Expires Headers no arquivo .htaccess de seus aplicativos. Para obter mais informações, consulte o artigo da Cloudways: Alavancar o cache do navegador no WordPress para otimizar o tempo de carregamento da página.

5) Faça menos solicitações HTTP

Cada vez que você carrega o site, um monte de coisas técnicas acontecem para entregar o conteúdo na tela do usuário, incluindo uma solicitação HTTP. Então, o que é uma solicitação HTTP? Como isso afeta a experiência do usuário? E o que você pode fazer para reduzir as solicitações HTTP do seu site?

Quando alguém visita uma página do seu site, o navegador dessa pessoa envia uma solicitação ao seu servidor da web. Seu servidor hospeda a página da web que eles estão tentando visualizar em seu site. Para cada arquivo, um navegador da web precisa fazer uma solicitação HTTP separada , portanto, quanto mais arquivos o seu site tiver, mais solicitações HTTP serão geradas a partir do seu navegador. Mais solicitações HTTP podem afetar a experiência do usuário do seu site.

Aqui estão algumas estratégias gerais para fazer menos solicitações HTTP :

• Remova as solicitações HTTP removendo os plug-ins desnecessários que não agregam valor ao seu site, porque os plug-ins geralmente carregam seus próprios CSS e JavaScript.
• Combine solicitações HTTP mesclando vários arquivos CSS em um único arquivo CSS. O site carrega mais rápido porque o navegador precisa fazer menos solicitações.
• Uma das melhores estratégias é substituir o plug-in pesado por outros mais leves.
• Embora as imagens tornem seu site mais atraente e agreguem valor a ele, remova as imagens desnecessárias e sempre use as imagens otimizadas (você pode usar ShortPixel e WP Compress para otimizar suas imagens).
• Use o carregamento lento para imagens e vídeos.

Use esses pontos para acelerar seu site WordPress e obter um melhor desempenho.

6) Comprimir componentes com GZIP

A compactação GZIP é uma tecnologia que reduz o tempo de download do arquivo compactando os arquivos de dados. Todos os navegadores modernos descompactam automaticamente os arquivos compactados quando os dados compactados são recebidos pelo navegador. Todos os navegadores modernos, software de servidor e todas as melhores hospedagens de WordPress suportam compressão GZIP. A compactação GZIP pode reduzir o tamanho dos arquivos em até 70%.

Cloudways vem com um plug-in Breeze instalado, para que você possa obter compactação GZIP simplesmente instalando e ativando o plug-in de cache Breeze WordPress.

Aqui estão os plug-ins recomendados para a compactação GZIP:

• GZIP com foguete WP
• GZIP com WP Super Cache
• GZIP com Cache Total W3

W3 Total Cache é um plugin de cache com uma versão gratuita. Você só precisa instalar e ativar o plugin, e a compressão GZIP será habilitada automaticamente em seu site. Vá para Desempenho> Configurações gerais e ative o 'Cache do navegador' . Clique no botão 'Salvar todas as alterações' após fazer as alterações.

7) Evite Src ou Href vazio

Os atributos HTML sem valor definido (sem informações entre aspas) são chamados de atributos 'vazios' . O atributo vazio da origem (src) e do link (href) enfatiza o navegador a se conectar, mesmo se não houver um valor de URI (Uniform Resource Identifier).

Aqui estão alguns exemplos de tags vazias Source (src) e Link (href) em HTML e JavaScript :

HTML:

 <img src = ””>
<a href=””>

JavaScript:

 var img = nova imagem ();
img.src = "";

Certifique-se de que não haja tags HTML e JavaScript em branco em seu site. Se houver, exclua-os e mantenha todos os seus links adequadamente. Em segundo lugar, o problema da tag vazia está relacionado às imagens, portanto, sempre verifique os links da imagem ao enviar e usar.

8) Coloque o JavaScript na parte inferior

Isso significa que você carrega outro conteúdo da página antes do JavaScript, de modo que um usuário com uma conexão lenta à Internet não precise esperar o JavaScript carregar. Quando o JavaScript é colocado na parte superior, ele começa a carregar primeiro e afeta a experiência do usuário, tornando o resto do conteúdo da página mais lento.

Salve seu arquivo JavaScript com a extensão .js (my-amazing-script.js) e coloque esse arquivo JS em seu diretório de tema (você pode criar um diretório para JavaScripts, ou seja, public_html / wp-content / themes / your-theme / assets / js). Depois de colocar o arquivo JavaScript, edite o arquivo functions.php do seu tema e adicione este código:

 function wpb_adding_scripts () {
wp_register_script ('my-amazing-script', get_template_directory_uri (). '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script ('meu-incrível-script');
}
add_action ('wp_enqueue_scripts', 'wpb_adding_scripts');

A função usada wp_register_script () e inclui:

 <? php
wp_register_script ($ handle, $ src, $ deps, $ ver, $ in_footer);
?>

Defina o parâmetro $ in_footer como true para adicionar o script no rodapé ou na parte inferior de uma página do WordPress.

Códigos de Resposta

A próxima seção na ferramenta de teste de velocidade Pingdom são os Códigos de Resposta, também conhecidos como códigos de status HTTP. Esta seção informa o que está acontecendo com todos os recursos que você está carregando na página. Alguns comuns são:

• 200 - Está tudo bem
  301 - O recurso solicitado foi movido permanentemente
  404 - O recurso solicitado não foi encontrado

Geralmente, códigos de respostas na faixa de 200s a 300s são adequados, mas aqueles entre 400 e 500 são geralmente chamados de erros que devem ser corrigidos.

Tamanho do conteúdo e solicitações por tipo de conteúdo

Isso ajuda você a ver os recursos de sua página da web. As tabelas são as informações sobre a distribuição de seu conteúdo e suas solicitações.

O tamanho do conteúdo por tipo de conteúdo fornece uma lista de todos os ativos do seu site agrupados por tipo de conteúdo. Essas informações podem ajudá-lo a eliminar os erros. Sempre que você perceber que o tamanho do conteúdo por tipo de conteúdo é mais do que o esperado, você pode trabalhar nessa parte do conteúdo para melhorar o desempenho.

Tamanho do conteúdo e solicitações por domínio

O tamanho do conteúdo e as solicitações por seção de domínio permitem que você veja os serviços internos e externos com seus tamanhos médios. Esta seção exibe as solicitações geradas pelo domínio. É recomendável fazer menos solicitações externas porque cada serviço externo apresenta sua própria latência.

Em geral, é melhor minimizar o número de solicitações e hospedar os ativos em um só lugar, por exemplo, movendo-os para seu servidor da web ou CDN. FontAwesome ou BootStrap podem ser considerados como um exemplo. Se você estiver vinculando o script de FontAwesome ou BootStrap externamente, baixe-o e exiba-o diretamente.

Gráfico de Cachoeira

Por fim, temos a seção de solicitações da ferramenta de teste de velocidade do Pingdom, que gera um gráfico em cascata. Você pode analisar cada solicitação para ver os problemas de desempenho. Esta seção possui um gráfico em cascata com código de cores detalhado.

A análise em cascata do Pingdom mostra cada solicitação HTTP em seu site e é usada por desenvolvedores para entender visualmente o carregamento do site e identificar gargalos. Concentre-se nos tamanhos de conexão - a conexão longa e as barras longas bloqueiam o carregamento rápido do site.

Resumo

Quando se trata de ferramentas de teste de velocidade de sites, existem muitas ferramentas disponíveis no mercado. Como você pode ver, a ferramenta Pingdom Speed ​​Test funciona melhor para explorar o desempenho do site com explicações e sugestões aprofundadas.

Eu dei a você informações detalhadas sobre o produto. Agora é a sua vez de usar esta ferramenta para melhorar o desempenho do seu site.