O documento discute como otimizar sites para alta performance. Primeiro, explica porque a velocidade de carregamento é importante para ranqueamento, conversão e satisfação do usuário. Depois, apresenta ferramentas como Pagespeed e GTmetrix para medir o desempenho. Por fim, fornece dicas como escolher hospedagem, configurar servidores, compactar arquivos, usar CDNs e lazy load para melhorar a velocidade.
2. William Rufino
2
Bacharel em Ciência da Computação
Mestrando em Sistemas de Informações e
Gestão do Conhecimento
Sócio e professor de SEO no SEM Dúvida
3. CRONOGRAMA
1. Por que se preocupar com a velocidade de
carregamento?
2. Como medir o desempenho do seu website?
3. Como melhorar o desempenho do website?
3
4. Por que se preocupar com a velocidade
de carregamento?
13. 13
Fonte: http://goo.gl/Aslklj
FirefoxA equipe do Firefox diminuiu em 2,2s a média de
velocidade de carregamento e, consequentemente,
aumentou o número de downloads em 15.4%, gerando
mais de 60 milhões de downloads adicionais por ano.
15. 15
Fonte: http://goo.gl/Aslklj
GoogleO Google aumentou seu número de resultados de 10 para
30 por página, o que causou um aumento de 0.5s no
tempo de carregamento, diminuindo em 20% do tráfego
das buscas.
17. 17
PAGESPEED
O Pagespeed é a ferramenta da Google utilizada para
mensurar a velocidade de carregamento do website, além
de dar dicas de como otimiza-lo.
18. 18
YSLOW
O Yahoo também disponibiliza uma ferramenta para medir
a velocidade do website de forma gratuita, o YSlow.
19. 19
GTMETRIXO GTmetrix é uma ferramenta que utiliza dados do YSlow
e Pagespeed para mensuração da performance do
website. A sua vantagem é unir os dados das duas
ferramentas anteriores em uma única interface.
20. 20
PINGDOMO PINGDOM também possui uma ferramenta para a
mensuraçào do desempenho de websites. Ele também lhe
da várias dicas de como melhorar o desempenho.
http://tools.pingdom.com/fpt/
23. 23
ServidorNão só a escolha do software! A sua configuração correta
é necessária. É facil achar pesquisas mostrando o por que
do Nginx ser melhor que o Apache.
24. 24
GZIPUma das configurações mais fáceis de ser feita, é o GZIP.
Com ele todo conteúdo de texto (HTML, CSS, JS) é
comprimido o que pode cortar até 50% do tráfego.
25. 25
ImagensOtimize as suas imagens! Coloque as dimensões da
imagem diretamente no HTML. Evite
<img src=“imagem.jpg” />.
26. 26
ImagensOtimize as suas imagens! Não faça o redimensionamento
das imagens via HTML, ou seja, redimensione suas
imagens antes do upload ou via servidor.
27. 27
ImagensOtimize as suas imagens! Softwares como o Smuth.it do
Yahoo, optipng, e jpegoptim podem ajudar a reduzir o
tamanho da imagem, removendo metadados que não são
necessários.
28. 28
SpritesUtilize CSS Sprites onde for possível. Com o seu uso, o
número de requisições é reduzido, causando assim uma
melhora no desempenho.
29. 29
Minify
“Minifique" os seus arquivos CSS e JavaScript. Com isso os
arquivos ficarão menores e carregarão mais rápido.
30. 30
CombinarCombine os arquivos Javascript e CSS para diminuir a
quantidade de requisições. Há diversas ferramentas para
fazer isso somente em produção, no deploy ou
dinâmicamente.
31. 31
JS E CSSColoque seus CSS’s no topo e JS’s no fim da página.
Javascript’s no topo impedem a renderização da página, já
o CSS no topo impede que a página carregue antes do
estilo.
32. 32
HTMLA compressão do HTML, removendo espaços, comentários,
e caracteres desnecessários também reduz o tamanho do
arquivo, fazendo com que seja carregado mais rápido.
33. 33
CACHEConfigure os headers corretamente para que os arquivos
estáticos possam ser “cacheados" pelo navegador, evitando
assim, novas requisições quando o usuário visitar
novamente a página.
34. 34
CACHEOpcode cache, como APC, XCache e Zend Opcache são
ótimas ferramentas para melhorar o desempenho de sua
aplicação.
35. 35
CDNUm CDN (Content Distribution Network) pode ajudar a
servir arquivos estáticos do seu website, geralmente da
localização geográfica mais próxima, melhorando assim o
tempo de resposta.
36. 36
PLUGINSPara quem faz uso de CMS’s como o WordPress, verifique
quais plugins estão consumindo mais recursos e veja se
podem ser substituídos. Muitos plugins são mal
programados, em que não existe a preocupação com o
desempenho. Há plugins que podem auxiliar nessa análise,
como o P3 Profiler.
37. 37
LAZY LOADUtilize Lazy Load para só carregar imagens e outros
componentes quando o usuário fizer o scroll da página.
Além de carregar mais rápido, irá também economizar
banda.