Torne seu Site Mais Veloz! I GDG Women Sorocaba

522 visualizações

Publicada em

Seu Cliente não Espera seu Site Carregar!
Torne seu Site Mais Veloz!

Palestra apresentada no I GDG Women Sorocaba - Outubro/2014.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
522
No SlideShare
0
A partir de incorporações
0
Número de incorporações
12
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Torne seu Site Mais Veloz! I GDG Women Sorocaba

  1. 1. Natascha Sava Hun I Encontro GDG Women Sorocaba – Out/2014
  2. 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. 3. Seu site carrega rápido? Ou ZZzzzz... ? O usuário não vai esperar seu site carregar Torne-o mais veloz!
  4. 4. Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites
  5. 5. Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites
  6. 6. Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites
  7. 7. Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites
  8. 8. Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites
  9. 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
  10. 10. 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
  11. 11. Você sabia que espaços em brancos e comentários pesam? Jquery.js: 262KB Jquery.min.js: 90KB
  12. 12. 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
  13. 13. • Não redimensione imagens no HTML • Sempre informe tamanho real da imagem Aproveite e preencha o atributo alt com keywords!
  14. 14. 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
  15. 15. A imagem não perde qualidade quando otimizada! Não Otimizada Otimizada Aproveite dê nomes relevantes à imagem! “transicao-fp-editada81.png” não!
  16. 16. 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
  17. 17. Várias imagens em uma única imagem = 1 request spriteme.org
  18. 18. Content Delivery Network – espalhe seu conteúdo estático e diminua a latência!
  19. 19. • Evite resposta “inútil” (404) ou atrasos (301, 302): melhore a experiência do usuário home.snafu.de/tilman/xenulink.html
  20. 20. • 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
  21. 21. • 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
  22. 22. www.webpagetest.org
  23. 23. natascha@gdgsorocaba.org slideshare.net/nshgeek • Google Page Speed: developers.google.com/speed • YSlow: developer.yahoo.com/yslow

×