Com o passar dos anos, a internet vem crescendo e juntamente com ela as formas de utilização. Com isso vemos pessoas deixando um pouco de lado o PC (Computador Pessoal | Personal Computer) para acessar sites, blogs, redes sociais, dentre outros através de tablets e smartphones. Com isso, faz-se necessário um melhor desempenho no carregamento do site.
Após o site/blog totalmente criado, o web designer pensa: Finalmente, missão cumprida!
Ééééééé….. NÃO! rs
Há uma necessidade em analisar o carregamento do site pois isso pode interferir diretamente na forma como o usuário interage com o seu site.
Para isso, vamos lhe dar dicas de 5 ferramentas para melhorar a performance e carregamento do seu site. Vamos lá!
1 – Page Speed Insights, do Google
Essa ferramenta faz parte do Portal para Desenvolvedores da empresa e analisa o carregamento do site tanto Desktop como Mobile.
- Mobile – Velocidade
- Mobile – Experiência do usuário
- Desktop – Velocidade
Em cada uma das seções listadas acima, a página receberá uma nota de classificação, entre 0 e 100, sendo 0 o pior índice e 100 o melhor. Quanto mais próximo de 100, menos itens você terá para corrigir.
Além disso, será realizada uma avaliação detalhada dos problemas encontrados e uma recomendação do que pode ser feito para correção. Da mesma forma, os elementos que estiverem em ordem, serão listados na área de “Aprovado”.
A ferramenta também exibirá uma captura de tela da página em um dispositivo móvel e em um desktop.
Acesse o Page Speed Insights em https://developers.google.com/speed/pagespeed/insights/
2 – Pingdom Website Speed Test
Nessa ferramenta, além da nota de classificação, você também poderá visualizar em destaque o número de requisições feitas pela página, o tempo total de carregamento e o tamanho total dos arquivos presentes na página.
Logo abaixo deste resumo, você verá um gráfico contendo todas as requisições feitas e o tempo de carregamento individual. Ao pousar o mouse sobre uma das barras de tempo, um balão é exibido, contendo o tempo de duração de cada item no processo, da requisição à resposta, conforme ilustrado na imagem abaixo.
Acesse a ferramenta Pingdom em http://tools.pingdom.com/fpt/ (em inglês)
3 – GT Metrix
A análise do GT Metrix utiliza 27 critérios distintos para gerar sua nota de classificação. Em cada critério é possível visualizar o que precisa ser otimizado (se houver). Assim como na ferramenta Pingdom, também é possível visualizar as requisições individualmente.
Em destaque, você verá o índice de classificação Page Speed, da GT Metrix, e também o índice YSlow, que é uma ferramenta de código aberto para análise de velocidade baseada em regras de performance definidas pelo Yahoo. As notas de classificação são exibidas em percentual (de 0 a 100%).
Acesse a ferramenta GT Metrix em http://gtmetrix.com/ (em inglês)
4 – Web Page Test
Esta ferramenta oferece a possibilidade de se escolher o local de origem do teste e também o tipo de navegador. Os testes de velocidade sempre são realizados de um ponto inicial até o local onde se encontra o servidor físico. Sendo assim, o ponto inicial fará diferença no resultado. Por exemplo: se você está acessando um site do Brasil e o servidor está nos Estados Unidos, o tempo de resposta será maior em comparação com um usuário que está nos EUA. Antes de iniciar o teste é possível alterar a localidade de origem, como pode ser visto abaixo.
Após a submissão, o resultado é bem detalhado, incluindo desempenho, conteúdo e domínios (carregamento do conteúdo detalhado por domínio). Oferece também uma visão interessante sobre a compactação do conteúdo e o uso de cache pelo website. Você poderá navegar pelas abas Details (detalhes), Performance Review (análise de desempenho), Content Breakdown (detalhamento de conteúdo), Domains (domínios) e Screen Shot (captura de tela).
Acesse o Web Page Test em http://www.webpagetest.org/
5 – Web Page Analizer – de Website Optimization
O Web Page Analyzer foi criado por Andy King, autor do livro Website Optimization, lançado pela O’Reilly em 2008. Assim como as demais ferramentas, ela calcula o tamanho da página, elementos e tempo de carregamento.
O resultado é exibido em tabelas contendo as principais informações sobre o assunto. Ao final da página, há uma área de Analysis and Recommentations (análise e recomendações), na qual itens como HTML, imagens, scripts, entre outros, são comentados com recomendações de melhoria.
Acesse o Web Page Analyzer em http://www.websiteoptimization.com/services/analyze/ (em inglês)
Extra
– E agora?
Agora que você já conhece as ferramentas essenciais para fazer o teste de velocidade do seu site, é só seguir os dicas sugeridas pela ferramenta escolhida.
Agora algumas dicas extras para você que chegou até aqui:
- Prefira trabalhar com sprites ao invés de diversas imagens. Melhora em até 75% o carregamento do seu site.
- Seja Minimalista: Steve Jobs dizia uma coisa que eu guardo como uma lição: “Eu me orgulho das coisas que eu não faço tanto quanto das que eu faço”. É por isso que o iPod, o iPhone e o iPad têm apenas um botão. Eles não precisavam de mais que um. Pense nisso quando estiver criando um site: – Eu preciso usar essa galeria de imagens? – Esse layout funciona apenas com fontes padrão? Você vai perceber que suas decisões de design irão se destacar mais quando você fizer menos, e de quebra seus sites ficarão muito mais leves.
- Se está desenvolvendo com WP: Instale apenas o essencial. Não instale plugins que nem você sabe para que serve ou só porque seu colega disse que é legal ou porque leu em um blog que ele não deve faltar no seu blog. Pense nisso!