A palestrante apresentou várias técnicas para otimizar sites e torná-los mais rápidos, incluindo minificar arquivos, otimizar imagens, usar CDNs, diminuir requisições externas e implementar caching para reduzir o tamanho do HTML. Ela também recomendou ferramentas para testar a performance dos sites.

1. Natascha Sava Hun
I Encontro GDG Women Sorocaba – Out/2014

2. • Tecnóloga em Processamento de Dados - FATEC
• Engenheira da Computação - FACENS
• Mestrado em Ciência da Computação - UFSCAR
• Experiência com WEB desde 2005
• E-Commerce | SEO/SEM | Microdados | PHP

3. Seu site carrega rápido? Ou ZZzzzz... ?
O usuário não vai esperar seu site carregar
Torne-o mais veloz!

4. Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites

5. Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites

6. Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites

7. Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites

8. Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites

9. “Web site de alto desempenho leva a
uma maior retenção do visitante,
engajamento e conversões”
Qual a nota para seu site?
developers.google.com/speed/pagespeed/insights

12. CSS na tag Head faz a
página ser exibida
progressivamente,
Sem o efeito “tela em
branco”
Scripts bloqueiam downloads
paralelos e devem ser
carregados por último

13. Você sabia que espaços em brancos e comentários pesam?
Jquery.js: 262KB Jquery.min.js: 90KB

14. Você sabia que espaços em brancos e comentários pesam?
•HTML sem minificar: 48KB
•HTML minificado: 28KB
willpeavy.com/minifier | code.google.com/p/minify

15. • Não redimensione imagens no HTML
• Sempre informe tamanho real da imagem
Aproveite e preencha o
atributo alt com keywords!

16. Remova bytes desnecessários de arquivos de imagem
Use sempre a opção “Salvar para Web”.
•Antes da Otimização: 120KB
•Depois da Otimização: 100KB

17. A imagem não perde qualidade quando otimizada!
Não Otimizada Otimizada
Aproveite dê nomes relevantes à imagem!
“transicao-fp-editada81.png” não!

18. Diminua quantidade de requisições externas!
Use para imagens, CSS. Aceito pelos navegadores, até mesmo pelo IE 8. ;)
CUIDADO! Uso em excesso aumentará tamanho do HTML e não usa cache.
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAZCAYAAABQDyyRAAAE/UlEQVRIic1WW28T
VxDmJ/gn5Cfktb5IqURKH6P2AVWqqqhSBOpDhShSIULCtAU1cRIHyMWX9f2ya+86ttcXfM3GdiBuEtsB2pCEBDeFB
9qiujQEWqj0dc7SiCI1jROktiN9Ouv16Mw3c76ZPYcO/R/M5DNoRoKGHldS2/GfEBjyG1yXBD1MHj38QZ/CEAj6jIR/h
9Aob3BdDulhEd/EoGlAhT/gARFoTUyOnXidvYcDhg7CCUoyysCeCZpXnMZEvebkOd2Jd47qzFqtXv3zTP+pTpfb2nC6
HOjr6+s5UGKCoZeSa42LR7CyPo9KzQv6zdD6+Kxh7z1tttEOt8eGc8Zzzf0Gp6R6CGDgs324d/8u7hN23o349fjgmH5
vEpxj3GUaGgRVpnM/BCxTuiYBDFKxDw++v69i5x3DmS91rT03stkv9TA9EIG2teBMaDuC2R7cupPAalNB8948Wq0f
CQ9xZ7OE9c0ybqxJGOR0aIeAxu2x40x/v8KHgl0+v8sohHijEBaMoT/BC4FoWAoroiQqYkRUhNhAY3ZpAFtbj7D1+BE
eb/+C7e0tbD95jCdPt/GU4dcnCObe2puAmpHbwoKDQQjzBAEUGBQMsXgM8YSMKK0xOa6u0YQf4WI36qsWNAhr38Xx/PfnePbsN8wv2zF3
k0Nm7gL6hwztEaAqGAvFPJ3hD0imkrizvoFEMoF6vYFcLotr1+eoZXkUphW4PT6kr2Yw6n0XZqZ4wUAiPIaHDx/gJzqGK+EXIhyX9Dj+ib5tAl3Jd
AK5fB4bd5sUPInG0g0IgoDrc1Wk0ilMKyV4vH6kMzlwDhck2YlJJraoDtGZ43QcP6tHwMk6OBI6mOj8u4/ozW0RYOb1OdD8dpMqkMLX3yxDF
EVUv5qngRWAMlNGWJSQyebhcLohJ1Ow2DiE42PwJt8Gn+/G6mYMC8vDCGTfwKBVy4K72g7OzO2xKvlCAcu3VyBJEhYW6+B
5HqXyLHz+ALK5AgK8QNVJw0rBp6JxjE9YEY3F4fR/gWjuU5w8q22+/6HORR3Vta/gzOzcZXOpXEYkEkGtvgSeyl+5Nk
ffDh65QhEutwfJdBpeX4CCypiYtCIsTWHCYkeIquVwuVkr9+478F8I9MiJOGq1OoRQiIRXRTAooFCcUYWXSl+FnXMiLi
eIjJc6JIpJK0e+1CmxCE6f7sfOmD+QcdzljkDQQ0LzqoLjhdBL4ZHq7SS8eCIJi9VO5Y/R+wC1q0Qk7JATCRw9+l7jwMF
3zOdztMqVWTXDq5k8ldtPa1ZV/cvgcdioEiKVn5ELki6icZllb3xtAh6vTWElZoKzcw4aQvIrqo9Q5qwSYmSKSDgg0coL
QQwMmvb9Lfmb7K2aYICLzs6W4XQ61LNmQmPBrDaHmjlHZMJiRNWCRGK12S2Yns5jZHiovYGzmzld45pKpdgoVK
8gXjqFpdsyFhcXqOVSL5FKq0iSGFPpDEqlAso1l+p/Y0VGLDrVOLAIfT5bb2XRB3ZtY2Dj9e7GGt0TzjdNQ8PK0PAIwaw
Mj5iVEfOoMjZ+pcH8R3f8aSSvr9/c1xf1FQuHvb3lRZu6Gbu6cbIWC7WZXYUlir6u6eqESuCFvw61pcLBhZiQwx3rG7d
a0vRHoJszyvXPwXGTuw4WOSZoVteWVH9nG/5tWX2x2pnPpZvVagUXL5zH4cPd/zjL67VqZ7GQeeF/8bNd/f8AD08
1wRsX0JQAAAAASUVORK5CYII="
=
motobit.com/util/base64-decoder-encoder.asp

19. Várias imagens em uma única imagem = 1 request
spriteme.org

20. Content Delivery Network – espalhe seu conteúdo
estático e diminua a latência!

21. • Evite resposta “inútil” (404) ou atrasos (301, 302):
melhore a experiência do usuário
home.snafu.de/tilman/xenulink.html

23. • Alguns arquivos mudam com pouca frequência (CSS,
JS, imagens)... acessar esses arquivos localmente agiliza
o carregamento da página.
Adicione tempo de expiração em seu htaccess.
Sofreu alteração antes do tempo?
Mude o nome ou adicione parâmetro para limpar o cache.
produtos.css?v=1
produtos.css?v=2

24. • Ao colocar CSS e JS em arquivos externos junto com
adoção de cache, o código será baixado uma única vez e
o HTML será reduzido

25. www.webpagetest.org

26. natascha@gdgsorocaba.org
slideshare.net/nshgeek
• Google Page Speed: developers.google.com/speed
• YSlow: developer.yahoo.com/yslow