Gráficos de cachoeira são diagramas que representam como os recursos do site estão sendo baixados, analisados pelo motor, em uma linha do tempo que nos dá a oportunidade de ver a sequência e dependências entre os recursos. Auxilia na identificação de onde eventos importantes aconteceram durante o processo de carregamento. Eles também podem permitir que o usuário veja facilmente o quão bom ou ruim é o desempenho de seu site, mostrando exatamente o que está atrasando seu site.
Gráficos de cachoeiras dentro da plataforma Dotcom-Monitor podem ajudar os usuários a identificar onde eventos importantes aconteceram durante o processo de carregamento da página. Os gráficos de cachoeira nos permitem ver um efeito cascata em várias tarefas, e em questão de alguns segundos, o usuário pode ver o quão ruim/bom é o desempenho do site, como quantos recursos estão bloqueando downloads paralelos ou quantas linhas existem. O usuário tem o resumo no dispositivo, com visualizações descritivas das estatísticas do dispositivo em gráficos de tortas. Os usuários também podem assistir ao vídeo real de carregamento de URL na janela do navegador.
A captura de tela abaixo é uma amostra de um gráfico de cachoeira de amazon.com para introduzir como são os gráficos de cachoeira. Como você pode ver, há um monte de elementos diferentes que entram em jogo durante o tempo de carga da página. Alguns desses fatores incluem o seguinte:
- URL
- Localização do teste
- Navegador (Chrome, Firefox, Internet Explorer, navegadores móveis etc…)
- conexão
- Número de testes
- Exibir repetição
Elementos usados em gráficos de cachoeira
Slider Interativo: O Slider Interativo é um indicador do desempenho de cada elemento em termos de milissegundos. Na imagem abaixo, é apontado com a seta. O usuário pode arrastar o controle deslizante interativo para ver qual elemento está sendo carregado e em que ponto o tempo. Nesta captura de tela, você pode ver que os elementos destacados estão sendo carregados no 531º milissegundo.
Grade de tempo de carga: A área destacada abaixo é chamada de Grade de Tempo de Carga. Mostra quanto tempo leva para carregar cada elemento.
Lista deelementos : Os elementos existentes na página da Web são mostrados na Lista de elementos. A extensão do elemento pode ser HTML, CSS, GIF, etc.
Desempenho do Elemento: Um usuário pode alcançar as informações do desempenho de cada elemento que existe no gráfico de cachoeiras.
Quando o usuário clica no botão de elemento específico, ele é recebido por uma página de desempenho, mostrada abaixo.
Ao analisar a página de desempenho, o usuário tem um conhecimento mais profundo sobre os detalhes de resposta. Eles podem selecionar o que deseja e soltar o botão do mouse para exibir detalhes. O usuário também pode observar os problemas de desempenho prestando atenção à área marcada vermelha,o que significa que há um período de baixa de desempenho.
Detalhes do tempo de carga para elementos individuais: No gráfico de cachoeira, quando o usuário move seu cursor em uma barra específica, ele é mostrado um detalhe de tempo de carga que são DnsTime, ConnectTime, SSLTime, RequestTime, FirstByteTime, ResponseTime, StartTime, EndTime, Speed que é apontado em um oval vermelho.
Explicação da codificação decores : Dentro da plataforma Dotcom Monitor, a representação dos detalhes do tempo de carga são definidas pelas seguintes cores:
Tempos de navegação: Eles podem ser mostrados como uma coluna no gráfico de cachoeira para mostrar o início de navegação, redirecionar start, redirecionar fim, buscar início, iniciar a pesquisa de domínio, extremidade de pesquisa de domínio, conectar partida, conectar início, conectar fim, iniciar a solicitação, iniciar a resposta, final de evento de descarga, final de evento de descarga, carregamento do DOM, DOM Interactive, Dom Content Loaded Event Start, DOM Content Loaded Event End End , DOM Complete, Load Event Start e Load Event End com codificação de cores (mostrado abaixo dentro do oval vermelho).
É importante mencionar que dentro da plataforma Dotcom Monitor há um recurso que um usuário pode assistir ao vídeo real de carregamento de URL na janela do navegador (mostrado abaixo).
Otimizando o desempenho da Web entendendo gráficos de cachoeira
O desempenho e a velocidade de um site desempenham um papel tremendo. Se o seu site não for rápido o suficiente, o usuário não vai esperar que ele termine de carregar. Um site rápido aumenta as taxas de conversão e leva você a ter um bom desempenho nos mecanismos de busca. Para entender a velocidade do seu site, são usados diagramas de cachoeiras. Os gráficos de cachoeira ajudam você a identificar a fonte do problema e são uma ótima maneira de diagnosticar o que está atrasando suas páginas da Web.
Em um gráfico de cachoeiras olhando um tamanho de um arquivo que é mais de 1MB pode fazer com que seu site desacelere. Com a ajuda da linha do tempo no gráfico de cachoeiras, o usuário é capaz de descobrir as diferentes fases de carregamento de recursos e entender quais fases atrasam seu site. Algumas das fases são apresentadas abaixo:
- Recebendo. O tempo que leva para baixar arquivos. Esta é a primeira fase da linha do tempo. Arquivos grandes, como imagens não otimizadas, atrasa o tempo de download e absorve mais largura de banda, causando um atraso no site. A solução para este problema específico é que o usuário deve otimizar a mídia reduzindo o tamanho das imagens sem diminuir sua qualidade. Para aumentar a disponibilidade de largura de banda, o usuário deve manter as imagens em um servidor de nuvem.
- Tempo de espera. O tempo capturado pelo servidor para produzir uma resposta. Se o tempo de espera for demais, pode significar um servidor de rede sobrecarregado ou pode haver um código ineficiente, que deve ser corrigido pelos desenvolvedores de software, encontrando os bugs e corrigindo o código. Além disso, o utilitário de cache pode diminuir o tempo de espera. Nesse caso, o usuário deve passar da hospedagem compartilhada para a hospedagem dedicada.
- Pedido enfileirido. Consiste em conexões convenientes HTTP/HTTP2, autenticação HTTP, execução de CSS ou JavaScript, tempo de conexão SSL, é uma fase importante da linha do tempo.
- Procuração DNS. Consiste no tempo para o DNS resolver e dá ao usuário uma grande pista do que está atrasando o site. Em geral, a maioria dos scripts estão diminuindo a velocidade dos sites devido à procuração de DNS.
Quando o usuário identifica os problemas que estão atrasando sua página web com a ajuda de gráficos de cachoeira, ele pode começar a chegar a uma solução para o problema. Alguns dos problemas e suas soluções estão representados abaixo.
| Solução de | problemas |
Link de rastreamento de página | Desinstale ou remova a ferramenta de rastreamento que está em uso |
| Pesquisa DNS lenta | O usuário pode usar um CDN |
| Fim lento do servidor | Envie um e-mail para seu provedor de serviços. |
| Erro devido aos plugins | O usuário pode desinstalar os plugins. |
| Personalização de tema não uso/volumoso | O usuário pode contratar um desenvolvedor web |
Mesmo o usuário abeginner pode entender rapidamente as razões específicas que estão atrasando seu site observando os gráficos de cachoeiras. Por exemplo, barras longas significam que o elemento relacionado leva muito tempo para carregar, texto vermelho significa um erro buscando dados, e longas lacunas entre barras significam momentos em que não há solicitações.
Como fazer os sites carregarem mais rápido
Usando gráficos de cachoeira, podemos criar uma ótima experiência de usuário fazendo uma página da Web carregar mais rápido.
Diminuir a largura da cachoeira
O desempenho do site pode ser melhorado reduzindo o tempo necessário para baixar os recursos que leva a reduzir a largura do gráfico de cachoeiras.
Se houver longas barras roxas no gráfico da cachoeira.
Roxo significa tempo gasto realizando uma negociação SSL/TLS. No caso de um usuário enfrentar com roxo continuamente, isso significa que o site não é otimizado para TLS. O usuário deve otimizar o desempenho do TLS.
Se há um monte de laranja no gráfico da cachoeira. Laranja significa a conexão TCP inicial feita para o seu site. Apenas 2-6 solicitações para um hostname específico devem criar uma conexão TCP. Após 2-6 solicitações, as conexões existentes são reutilizadas. Quando um usuário se depara com muita laranja, ele deve entender que o site não usa conexões persistentes. Quando a conexão persistente for feita, a largura de cada solicitação será metade, uma vez que o navegador da Web não fará novas conexões a cada solicitação.
Se houver barras azuis longas no gráfico de cachoeiras.
Cor azul significa tempo gasto baixando a resposta. Se há uma barra azul longa, há uma forte probabilidade de que seja porque o recurso é muito grande. Reduzir o tamanho do arquivo do arquivo pode ajudar a resolver o problema. Um usuário pode diminuir o tamanho por otimização de imagem ou compressão HTTP.
Se houver muito verde o gráfico da cachoeira.
A cor verde significa que o navegador está esperando para obter conteúdo. Para reduzir o verde, o usuário deve mover o conteúdo estático para um CDN.
Diminuir a altura do gráfico da cachoeira
A velocidade do site pode ser melhorada diminuindo o número de solicitações que o navegador precisa realizar para carregar a página da Web, o que leva à diminuição da altura da cachoeira. O usuário deve rever todo o seu conteúdo dentro de cada página e decidir se realmente precisa dele.
Se houver muitos arquivos JavaScript/CSS com menos de 2kb
. O usuário deve envolver o conteúdo desses arquivos diretamente no HTML via inline, , or
Tags.
Se houver muitos arquivos JavaScript/CSS no gráfico de cachoeira
. O usuário deve combiná-los com o plugin CMS ou como parte de um processo de construção. Essa ação diminuirá o número de solicitações feitas, aumentará a velocidade da página.
Se houver muitos 302 redirecionamentos.
Linhas amarelas significam redirecionamentos, o que significa que links na página são feitos erroneamente ou desatualizados, que criam redirecionamentos desnecessários que aumentam a altura da cachoeira. A solução é substituir esses links por links diretos.
Aumentar o tempo de renderização
Para melhorar o tempo de renderização, o usuário deve otimizar o pedido de solicitações de recursos, o que move a linha verde Start Render para a esquerda.
Se houver muitos pedidos para arquivos CSS separados
. Antes que os navegadores comecem a renderizar a página, eles esperam até que todo o CSS seja baixado. O usuário deve inline ou combina esses arquivos CSS.
Se um usuário ver chamadas para carregar bibliotecas JavaScript
. O JavaScript inclui a renderização da página. O usuário deve movê-los mais baixos na página.
Se um usuário ver fontes externas
. Até que o navegador baixe a fonte externa, ele não desenha nada. O usuário deve evitar o uso de fontes externas.
Primeira visita e visita repetida. O que é mais importante?
Com base na visita do usuário, pode haver dois tipos de gráficos de cachoeira criados: First Visit and Repeat Visit. Qual é a diferença?
Cache vazio (Primeira Exibição): O usuário acessa o site pela primeira vez e não tem dados armazenados em cache. Ferramentas típicas baseadas no navegador vão limpar o cache antes de fazer as solicitações. Em outras palavras, as pessoas estão visitando o site pela primeira vez.
Modo cached (Repeat Visit): O usuário acessa o site pela segunda vez, emulando uma segunda visita da perspectiva do usuário, que inclui todos os arquivos agora armazenados em cache em um armazenamento local. Em outras palavras, como as pessoas visitaram seu site de antemão, agora elas podem ter suas imagens, css descontado em seu navegador para que o sistema não tenha que entregar muito para eles.
Nas capturas de tela abaixo, você pode ver o quão diferente é o gráfico da primeira visita e o gráfico de cachoeiras de visita repetida.
Uma das coisas importantes a se perceber é que o cache vazio leva 6,8 segundos para carregar, enquanto a repetição, que é um modo em cache, leva 1,9 segundos.
Se o site estiver funcionando bem, será o mesmo caso em termos de comparação de tempos, com cache vazio levando mais tempo do que a versão em cache. O motivo é que na primeira visita, as ferramentas esvaziarão o cache antes de fazer as solicitações, e na visita repetida, o sistema terá os arquivos que podem ser armazenados em cache em um armazenamento local, levando a um tempo menor para carregar o site.
O gráfico Modo Cached (Repeat View) tem menos linhas, o que significa que muito menos recursos foram carregados. Este é um bom exemplo de um site onde cache eficiente sendo usado.
Sem alterar nada no site, a visita repetida estaria respondendo mais rápido por causa dos elementos sendo armazenados em cache. A primeira visita levaria mais tempo do que a visita repetida. Se algo estiver errado no site, o que atrasa o site, o usuário o corrige. E eles testam o site novamente. Eles consideram fatores como geolocalização, servidores CDN e PoP (Pontos de Presença). Eles podem ver a partir de gráficos de cachoeira qual elemento está retardando o processo. Talvez o site esteja usando muita CPU. Depois de corrigi-lo, eles podem testar o site novamente.
A primeira visita é importante porque o usuário entende quanto tempo leva para baixar as fotos e outros recursos. A visita repetida também é importante porque após o processo de cache, o usuário deve avaliar quanto tempo leva para carregar os itens restantes. Além disso, o usuário observa quais recursos são armazenados em cache olhando os gráficos de cachoeiras desde a primeira visita e visita repetida. É assim que um usuário pode entender o desempenho do site e problemas de conteúdo com recursos.
Quer ver quais elementos podem estar atrasando seu site? Execute um teste gratuito de velocidade do site e visualize seus resultados através de gráficos de cachoeira e relatórios de desempenho.
Como usar um gráfico de cachoeira para monitorar sua distribuição adequada de CDN
A Content Delivery Network (CDN) é um grupo de servidores distribuídos geograficamente otimizado para fornecer conteúdo estático aos usuários finais. Esse conteúdo estático pode ser quase qualquer tipo de dados, no entanto, os CDNs são geralmente usados para fornecer páginas da Web e seus arquivos relacionados, áudio, streaming de vídeo e grandes pacotes de software.
Utilização do CDN
Os servidores de borda de um CDN aumentam a velocidade, conectando a lacuna entre os recursos do site e seus visitantes. Em vez de fazer solicitações diretamente à origem de um site, os usuários se conectam às várias plataformas de distribuição de CDN que o provedor possui. Quanto mais perto um pedido viaja, mais tempo é economizado. Além disso, a hospedagem de CDN acomoda a compactação de arquivos que melhora a navegação geral porque tamanhos de arquivo menores equivalem a velocidades de carregamento mais rápidas.
Usando gráficos de cachoeira para monitorar CDNs
Na captura de tela de um gráfico de cachoeira abaixo, a área de URL de monitoramento representa a lista de todos os elementos individuais, juntamente com seu tamanho e desempenho à direita.
Se o usuário estiver aproveitando um CDN, ele poderá ver muitos arquivos e recursos provenientes dessa fonte – que é uma maneira de determinar se o CDN está configurado corretamente.
Você precisa de um CDN?
Os gráficos de cachoeira permitem que o usuário descubra como a latência está influenciando a velocidade do site. Voltando ao gráfico codificado por cores no início do artigo, a barra amarela significa que o navegador da Web está esperando por dados do servidor de nome de domínio (DNS). Geralmente, o tempo de espera de 100ms é aceito normalmente, enquanto os 400ms são considerados lentos. Quando há um problema de velocidade, ele pode ser interpretado como um recurso que leva muito tempo para baixar ou seu tamanho é muito grande. Além disso, pode significar que a velocidade de transferência do servidor web é muito lenta. Para este problema específico, o uso do CDN pode ser uma solução para diminuir o tempo de espera.
Além disso, se o usuário tiver muito tempo de espera para obter uma resposta, isso pode significar que o conteúdo do site está fisicamente mais distante do visitante. Para poder decidir se há necessidade de CDN, a localização do servidor deve ser conhecida. Para isso, uma plataforma como o Dotcom-Monitor pode ser usada para monitorar um local mais distante do seu servidor. Revise o gráfico de cachoeiras e as linhas para solicitações e recursos. Se o tempo de espera for superior a 100ms, o usuário deve considerar o uso do CDN.
