Como verificar a velocidade do site • Yoast

Jono Alderson

Jono é um estrategista digital, tecnólogo de marketing e desenvolvedor full stack. Ele está em SEO técnico, tecnologias emergentes e estratégia de marca.

Avatar de Jono Alderson

Aprender como verificar a velocidade do seu site doesn ’ t precisa ser daunting. Este guia curto lhe dará o básico, e apontará você na direção certa.

There’s sem métrica única

A primeira coisa a entender é que não existe uma única métrica ou mensuração para ‘. There’. There’ não é nenhum número simples que você pode usar para medir a rapidez com que suas páginas carregam.

Pense no que acontece quando você carrega um website. Existem   lotes   de diferentes estágios   e muitas partes diferentes que podem ser medidos. Se a conexão de rede for lenta, mas as imagens carregam rapidamente, como ‘ fast’ é o site? E o contrário?

Mesmo se você tentar simplificar tudo isso para algo como “ o tempo que ele leva até que ela ’ s completamente carregados “, it ’s ainda complicado de dar que um número útil.

Por exemplo, uma página que leva mais tempo para ‘ termine o carregamento ’ pode fornecer um funcional ‘ lightweight’ versão enquanto a página completa ainda está baixando em segundo plano. É que ‘faster’ ou ‘ slower’ do que um website que carrega mais rápido, mas que eu posso ’ t use até ti ’ s terminou de carregar?

A resposta é, “ depende ”, e há muitas maneiras diferentes das ”.

.

Understanding the loading process

A partir do momento em que você clica em um link (ou hit ‘enter’ em sua barra de URL), um processo começa a carregar a página solicitada.

Aquele processo contém muitas etapas, mas podem ser agrupados em amplos   estágios o que parece algo assim:

O “one second timeline ” from Google’s documentação de velocidade do site

Enquanto o Google’ a documentação pode ser um pouco ambiciosa sobre os timings dessas etapas, o modelo é útil. Essencialmente, o processo pode ser descrito como três estágios de carregamento.

1. Coisas da rede

Primeiro para cima, o hardware físico do seu dispositivo precisa se conectar à   Internet. Usualmente, isso envolve movimentação de dados através de cabos de fibra transatlânticos. Isso significa que você ’ re   limitado pela velocidade da luz, e o quão rapidamente seu dispositivo pode processar informações.

It’s hard para medir ou impactar esta parte do processo!

2. Coisas do servidor

Aqui, seu dispositivo pergunta ao seu servidor para uma página, e o servidor prepara e retorna a resposta.

Esta seção pode ficar um pouco técnica, já que ela ’ s focada no desempenho de hardware de servidor, bancos de dados e scripts. Você pode precisar pedir ajuda ao seu provedor de hospedagem ou equipe de tecnologia.

NewRelic

Podemos mensurar o desempenho do servidor com ferramentas como NewRelic  ou DataDog, que monitora como seu site se comporta e responde a partir do ‘ inside’.

They’ll fornecer gráficos e métricas em torno de coisas como   slow database queries e   scripts lentos. Armado com essas informações, você pode obter um melhor entendimento se a sua hospedagem estiver em cima do zero e se você precisar fazer alterações de código em seu tema / plugins/scripts.

O Query Monitor plugin para WordPress

WordPress possui alguns ótimos plugins para fazer esse tipo de análise, também – I ’ m um grande fã de Monitor de Querer. Isso fornece algum grande insight sobre quais bits do WordPress podem estar atrasando você para baixo – se ele ’ s seus temas, plugins ou ambientes.

3. Coisas do navegador

Este estágio é onde a página precisa ser construída, dispostas, coloridas e exibidas. A maneira como o carregamento de imagens, no qual o JavaScript e CSS são processados, e cada tag HTML individual em sua página afeta o quão rapidamente as coisas carregam.

Podemos monitorar alguns disto do ‘ outside-in’ com ferramentas que escaneiam o website e medem como ele carrega. Recomendamos usar várias ferramentas, já que medem as coisas de forma diferente, e são úteis para diferentes avaliações.   Por exemplo:

  • WebPageTest é ótimo para fornecer um ‘waterfall’ visualização do website, e como todos os ativos carregam.
  • O Google PageSpeed Insights é um pouco simplista, mas ele fornece ‘real user metrics ’ do seu website, direto do Google.
  • Lighthouse for Chrome fornece uma análise incrivelmente sofisticada do desempenho e comportamento do site, mas pode ser difícil de digerir!
  • Chrome Developer Console mostra exatamente o que ’ s acontecendo como seu site carrega, em seu computador, em seu navegador.
  • Speed report no Google Search Console mostra o quão rápido ou lento suas páginas carregam sobre qualquer tempo determinado.

Resultados WebPageTest para yoast.com

Estes tipos de ferramentas são ótimas para spotting coisas como imagens que precisam ser otimizadas, onde seu CSS ou JavaScript é lento, ou onde você ’ re esperando por ativos para carregar a partir de outros domínios.

Métricas Universais

Apesar de todas essas partes em movimento, lá   são poucas as métricas universais que fazem sentido para todos os sites medem, e otimizam para. Estes são:

  • Tempo até o primeiro byte, que é quanto tempo demora até que o servidor responda com alguma informação. Mesmo que o seu front-end esteja blazando rápido, isso vai te segurar. Medida com Query Monitor ou NewRelic.
  • Time até primeiro contentful (e significativo) paint, que é quanto tempo leva para o conteúdo visual chave (e.g., uma imagem de herói ou um título de página) para aparecer na tela. Medida com Lighthouse for Chrome.
  • Tempo até interativo, que é o tempo que leva para que a experiência seja visível, e reaja à minha entrada. Medida com Lighthouse for Chrome.

Estas são métricas muito mais sofisticadas do que “ quanto tempo demorou para carregar ”, e, talvez mais importante, tenha um foco centrado no usuário. Melhorar essas métricas deve correlacionar-se diretamente com a satisfação do usuário, que é super importante para SEO.

imagem03-11-2020-22-11-58

Um relatório Lighthouse para yoast.com mostrando métricas chave

Você pode ler mais sobre essas métricas em Google’s documentação.

Wrapping isso em um processo

  • Use an ‘outside-in’ ferramenta, como WebPageTest  para gerar um diagrama de cachaças de como o website carrega.
  • Identifique gargalos com servidores   e o back end.  Procure tempos de conexão lenta, apertos de handshakes de SSL lento e consultas de DNS lentas. Use um plugin como Monitor de Consulta, ou um serviço como NewRelic  para diagnosticar o que ’ s segurando as coisas para cima. Faça alterações de servidor, hardware, software e script.
  • Identificar gargalos com o   front end. Procure carregar e processar tempos de carregamento lento em imagens, scripts e stylesheets. Use uma ferramenta como  Google PageSpeed Insights  ou Lighthouse for Chrome  para obter sugestões sobre como agilizar como as cargas da página.
  • Use  Lighthouse for Chrome  para medir suas principais métricas, como   tempo até primeiro tinta significativa e tempo   até interativo.
  • Já faltou alguma coisa? Deixe-nos saber nos comentários!

    Leia mais: Melhorando a velocidade do site: Ferramentas e sugestões »

    Obtenha dicas de SEO grátis direto para sua caixa de entrada!

    • Obtenha dicas semanais sobre como otimizar o SEO do seu website, usabilidade e conversão
    • Obtenha nossos cursos livres de imediato para aprender a fazer o seu site se classificar mais alto.

    Fonte: yoast.com/how-to-check-site-speed