Estas duas funções do WebPagetest que você ainda não conhecia - mas deve usá-las regularmente

Jan Hornung Atualizado em 21.10.2020
6 min.
Compare websites com o Webpagetest

Webpagetest.org é provavelmente a melhor ferramenta gratuita para medir o tempo de carregamento da sua página. Porque a WebPagetest é muito mais poderosa do que a concorrência directa. E isso é principalmente graças a duas funções: A possibilidade de comparar websites e a comparação a longo prazo.

Este artigo é parte de uma série para medir e avaliar o tempo de carregamento das suas páginas web. Nos artigos anteriores nós mostramos:

Hoje vou mostrar-vos duas funções da Webpagetest que provavelmente ainda não conheciam. Porque a ferramenta é especialmente adequada para comparações de desempenho e uma avaliação contínua do tempo de carregamento da sua página.

É por isso que hoje te vou mostrar

Outras métricas importantes - Índice de Velocidade, Elementos DOM e custo

Para além dos valores padrão - como Start Render, Document Complete etc. - A Webpagetest também fornece outros dados-chave úteis que lhe permitem avaliar a eficiência do seu site. Estes valores são importantes para que você possa interpretar corretamente os resultados da ferramenta.

Amostra do resultado de um teste de página web, que mostra os importantes parâmetros estendidos
Exemplo de resultado de um teste de página web. O índice de velocidade, o número de elementos DOM e o número de pedidos são três indicadores importantes para o desempenho global do seu site.

Elementos DOM: Um elemento DOM é, grosso modo, um módulo HTML. Quanto menos seu navegador precisar carregar esses blocos de construção, mais enxuta e rápida será a sua página. Portanto, o número de elementos DOM é apenas uma indicação do tempo de carregamento da página. O número de elementos DOM pode ser significativamente reduzido através da alteração do Plugins, mas especialmente do Theme, .

Extracto do código fonte de um RAIDBOXES  post de blog
Cada elemento do corpo HTML que está encerrado entre parênteses angulares é um elemento DOM.

Pedidos: Este valor descreve o número de solicitações HTTP individuais que seu navegador deve fazer para o servidor web. Elementos individuais como arquivos CSS, arquivos JavaScript ou imagens são solicitados através de uma solicitação HTTP. Teoricamente, quanto menos pedidos, melhor. A propósito, o diagrama de cascata seu site tem sempre a melhor visão geral dos pedidos HTTP que são carregados.

Na prática, porém, o número real de solicitações HTTP não é tão importante. Pelo menos não se o seu site estiver encriptado SSL e alojado num servidor com HTTP/2 está a correr. Porque então vários pedidos podem ser executados e carregados simultaneamente.

Índice de velocidade: Este índice é calculado pela Webpagetest e é um indicador do tempo de carregamento da página percebido. O valor descreve um valor de milissegundo - portanto, valores baixos são melhores que valores altos - o que indica a rapidez e eficiência com que o conteúdo visível da sua página é carregado. Em princípio, a Webpagetest utiliza screenshots do seu site para determinar a experiência do usuário e mede isso com um valor de tempo. Se você estiver interessado: A Webpagetest também tem um Equação formulada.

Base de cálculo do Índice de Velocidade
O índice de velocidade da Webpagetest é exibido e calculado como uma área. Quanto mais rápido o conteúdo da sua página for carregado, menor será a área e, portanto, o Índice de Velocidade. Se você estiver interessado nos detalhes: aqui A Webpagetest lista todas as informações sobre o cálculo do Índice de Velocidade.

O Índice de Velocidade é o mais adequado para comparações. Se uma medida de otimização resultar em uma redução significativa do índice, ela tende a ser bem sucedida e a página é percebida como mais rápida. Se o seu site tem um índice de velocidade significativamente inferior ao da competição, pode assumir que o seu site oferece uma melhor experiência de navegação aos visitantes.

Custo: Este valor é bastante agradável de se ter. Ele indica o quanto seu site é caro quando é carregado através de redes móveis. Os dados são provenientes de whatdoesmysitecost.com e formam um valor médio para todas as tarifas dos países listados aqui. Com esta função você pode ver os custos para o carregamento móvel do seu site. Mas penso que este valor só em muito poucos casos é realmente relevante para a optimização. Por favor, corrige-me se eu estiver errado aqui.

A função mais importante da Webpagetest: Compare vários sites diretamente

Quando você mede o tempo de carregamento da sua página, geralmente há duas razões: Ou você fez uma mudança e quer saber que efeito tem no tempo de carregamento ou quer comparar a sua página com outras.

É claro que você precisa de um valor comparativo para tal afirmação. E é exactamente isso que a função "comparação visual"criado". Porque com ele você pode comparar diretamente o tempo de carregamento e o comportamento de carregamento de vários URLs.

A função de Comparação Visual permite comparar sites directamente entre si.
Você encontrará a função de comparação diretamente à direita da análise padrão da Webpagetest.

Com esta função você pode, por exemplo:

  • compare os seus próprios sites com os dos seus concorrentes
  • verificar o que a troca de mangueiras trouxe
  • testar duas ou mais subpáginas uma contra a outra
  • verificar a rapidez de carregamento das subpáginas em comparação com a página inicial

Para a comparação direta, basta nomear as páginas, inserir os URLs e executar o teste com os parâmetros previamente definidos.

Para fins de teste comparamos duas das nossas páginas de produtos uma com a outraO resultado permite que você compare as páginas usando várias métricas. A mais descritiva está logo no início do documento de resultado: The Filmstrip View. Aqui você pode ver quando o visitante percebe que sua página está completamente carregada (o parâmetro relevante é chamado Visualmente Completo).

O valor de referência também pode ser alterado para que outras características, tais como Totalmente Carregado e Documento Completo, também possam ser exibidas.

Resultado, se você comparar dois sites na Webpagetest
As métricas mais vívidas são apresentadas logo no início: A vista da película. Você ainda pode configurá-lo usando as configurações no canto inferior direito. Você pode alternar os diagramas de cachoeira usando o controle deslizante à esquerda acima dos diagramas.

Abaixo você encontrará mais quatro gráficos de barras que mostram como as páginas testadas funcionam em termos de tempo de carregamento percebido, tempos de carregamento de chaves, número de solicitações HTTP e tamanho da página.

Com estas métricas, você pode ver num relance quais das páginas testadas carregam mais rápido, são mais enxutas e oferecem uma melhor experiência para o visitante.

Para os utilizadores do Google, a Webpagetest também oferece a possibilidade de comparações a longo prazo

Quando você faz login na Webpagetest com sua Conta do Google, cada teste é registrado. Isto dá-lhe a oportunidade de ver e comparar todos os testes do ano passado.

Comparações a longo prazo na Webpagetest para comparar várias versões de um site
A nossa história da Webpagetest dos últimos sete dias. Sempre que você faz login com sua Conta do Google, seus testes são salvos e podem ser visualizados mais tarde.

Esta visão geral é extremamente prática devido a duas funções: Você pode acessar os dados do teste histórico clicando na URL. Isso significa que você pode ver os resultados completos de todos os testes do ano passado.

E você pode marcar testes individuais e compará-los entre si para obter uma rápida visão geral do desenvolvimento das suas páginas.

Conclusão: O Webpagetest é muito mais poderoso que outras ferramentas gratuitas

A comparação directa de várias páginas é certamente a função mais poderosa da Webpagetest. Ele permite que você veja o seu site em relação aos seus concorrentes, modelos ou benchmarks do setor. Os resultados obtidos são - para condições webpagetest - também bem preparados e fáceis de entender.

A análise das séries cronológicas também permite obter uma visão abrangente do desenvolvimento do tempo de carregamento da sua página. Isso permite que você veja exatamente quais medidas de otimização ou mudanças afetaram sua página, seu tempo de carregamento e a experiência do usuário.

Com estas duas funções é possível registar todas as alterações relevantes das suas páginas e, mais importante ainda, analisá-las.

Conhece outra funcionalidade útil da Webpagetest que já esquecemos? Então estamos ansiosos pelo seu comentário!

Membro da equipa RAIDBOXES desde o primeiro momento e chefe de suporte. Ele prefere falar sobre o PageSpeed ​​ e desempenho do site em BarCamps e em WordCamps. A melhor maneira de o subornar é com um café expresso - ou um pretzel da Baviera.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com * .