Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Medindo a velocidade do seu site

Comprender como seu site fica em termos de velocidade, é muito importante para saber onde pode aplicar mudanças.

Na Nuvem Shop usamos duas ferramentas do Google para medir a velocidade: PageSpeed e Lighthouse.

As duas retornam resultados com oportunidades de melhora similares. Qual é a diferencia? PageSpeed é mais constante com a pontuação final (é mais provável que o resultado seja sempre o mesmo independente da quantidade de testes) mas também é mais “benévolo” com a pontuação.

Lighthouse por outro lado pode ter resultados um pouco mais erráticos com variações de até 10 pts entre um teste e outro, mas se você tem um bom resultado aqui, com PageSpeed vai ter uma pontuação ainda melhor.

As duas trabalham de maneira similar, de fato PageSpeed utiliza os dados que são analisados pelo Lighthouse.

Então? Recomendamos utilizar as duas para estar certo e fazer muitos testes para ter uma média, nunca ficar só com o primeiro ou o último teste.

PageSpeed é bem fácil, simplesmente você acessa neste link, cola a url do seu site e começa o análise:

Para Lighthouse pode baixar uma extensão de Chrome, que logo ficará visível na parte superior direita do navegador


Ou simplesmente fazendo clique direito no Chrome e logo clique no “inspecionar elemento”, você vai notar uma tab de “Audits” onde já pode utilizar.


Os resultados obtidos são construídos por uma pontuação geral. Segue abaixo detalhes de como ficam compostos:

Exemplo da pontuação no PageSpeed



Exemplo dos resultados feitos no Lighthouse

O mais importante não é só olhar pontuações finais, mas prestar atenção aos seguintes números:

Alguns destes são muito técnicos e como o artigo está enfocado para designers, vou falar brevemente de cada um:

Primeiro preenchimento com conteúdo é basicamente o tempo que o site demora a exibir o primeiro bit de conteúdo, o que dura a tela "em branco".

Primeiro preenchimento significativo: Similar ao anterior, neste caso é o que site demora em exibir o conteúdo mais relevante, geralmente chamado “above the fold” e faz referência ao conteúdo que é "pintado" dentro do quadro inicial da tela ou viewport, quer dizer que o rodapé por exemplo não faz parte deste conteúdo.

Índice de velocidade: É o tempo no qual o usuário pode olhar o conteúdo do site, quanto menor é melhor.

Primeira CPU inativa: É o tempo que o site demora até que usuário pode interagir com os primeiros elementos funcionalmente. É quando a tela fica "minimamente interativa".

Tempo até à interação: Similar ao ponto anterior mas é o tempo até que a tela esteja totalmente interativa.

Latência estimada das ações: É o tempo que demora o site em responder as ações dos usuários.

Fazendo testes tanto com PageSpeed quando Lighthouse você vai olhar uma secção de "Oportunidades" onde poderá ver com detalhe os pontos de melhora no seu site. Na Nuvem Shop essa foi a receita para implementar as melhoras.

Outra ferramenta que algumas vezes utilizams para olhar pontos específicos é Pingdom, funciona similar ao PageSpeed

O que é legal desta ferramente é que exibe o tipo de pedidos que o site fez e a sua distribuirão do tamanho do DOM (em resumo é como o navegador constrói e exibe o HTML) distribuído em percentagens:


No exemplo anterior os resultados exibem que 41% dos pedidos são de JS, uma área clara para começar a trabalhar.

Neste outro exemplo, os resultados dizem que 34% dos requests são do Facebook. Talvez um plugin?

Mas algumas vezes, somente com estas ferramentas não é suficiente. Para compreender ainda mais o comportamento, você pode complementar com um análise mais "manuais" com as "Dev tools" que oferece o browser.

Se você faz "inspect element" no Chrome e ativa a tab “Network” pode detetar na timeline quais são os elementos necessários no carregamento inicial e poder entender a lógica. Se tem algum item que esta bloqueando e que possa ser adiado no carregamento (ex: imagens do rodapé, etc). Você deveria fazê-lo!


Se faz zoom out você pode olhar uma imagem mais completa dos recursos carregados.


Que segue?

Agora que você conhece como medir e encontrar oportunidades, tem que sair a procurá-las! e depois disso eu recomendo ler os seguintes artigos para melhorar a velocidade de carregamento do seu site:

Melhorando o carregamento das imagens e SVGs

Melhorando o carregamento do Javascript

Melhorando o carregamento do CSS