Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Torne seu Site Mais Veloz! I GDG Women Sorocaba

586 views

Published on

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

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×