torne seu site mais veloz! i gdg women sorocaba
DESCRIPTION
Seu Cliente não Espera seu Site Carregar! Torne seu Site Mais Veloz! Palestra apresentada no I GDG Women Sorocaba - Outubro/2014.TRANSCRIPT
![Page 1: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/1.jpg)
Natascha Sava Hun
I Encontro GDG Women Sorocaba – Out/2014
![Page 2: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/2.jpg)
• 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
![Page 3: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/3.jpg)
Seu site carrega rápido? Ou ZZzzzz... ?
Torne-o mais veloz!
O usuário não vai esperar seu site carregar
![Page 4: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/4.jpg)
Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites
![Page 5: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/5.jpg)
Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites
![Page 6: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/6.jpg)
Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites
![Page 7: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/7.jpg)
Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites
![Page 8: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/8.jpg)
Fonte: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites
![Page 9: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/9.jpg)
“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
![Page 10: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/10.jpg)
![Page 11: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/11.jpg)
![Page 12: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/12.jpg)
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
![Page 13: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/13.jpg)
Você sabia que espaços em brancos e comentários pesam?
Jquery.js: 262KB Jquery.min.js: 90KB
![Page 14: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/14.jpg)
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
![Page 15: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/15.jpg)
• Não redimensione imagens no HTML
• Sempre informe tamanho real da imagem
Aproveite e preencha o
atributo alt com keywords!
![Page 16: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/16.jpg)
Remova bytes desnecessários de arquivos de imagemUse sempre a opção “Salvar para Web”.
•Antes da Otimização: 120KB
•Depois da Otimização: 100KB
![Page 17: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/17.jpg)
A imagem não perde qualidade quando otimizada!
Aproveite dê nomes relevantes à imagem!
“transicao-fp-editada81.png” não!
Não Otimizada Otimizada
![Page 18: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/18.jpg)
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/UlEQVRIic1WW28TVxDmJ/gn5Cfktb5IqURKH6P2AVWqqqhSBOpDhShSIULCtAU1cRIHyMWX9f2ya+86ttcXfM3GdiBuEtsB2pCEBDeFB9qiujQEWqj0dc7SiCI1jROktiN9Ouv16Mw3c76ZPYcO/R/M5DNoRoKGHldS2/GfEBjyG1yXBD1MHj38QZ/CEAj6jIR/h9Aob3BdDulhEd/EoGlAhT/gARFoTUyOnXidvYcDhg7CCUoyysCeCZpXnMZEvebkOd2Jd47qzFqtXv3zTP+pTpfb2nC6HOjr6+s5UGKCoZeSa42LR7CyPo9KzQv6zdD6+Kxh7z1tttEOt8eGc8Zzzf0Gp6R6CGDgs324d/8u7hN23o349fjgmH5vEpxj3GUaGgRVpnM/BCxTuiYBDFKxDw++v69i5x3DmS91rT03stkv9TA9EIG2teBMaDuC2R7cupPAalNB8948Wq0fCQ9xZ7OE9c0ybqxJGOR0aIeAxu2x40x/v8KHgl0+v8sohHijEBaMoT/BC4FoWAoroiQqYkRUhNhAY3ZpAFtbj7D1+BEeb/+C7e0tbD95jCdPt/GU4dcnCObe2puAmpHbwoKDQQjzBAEUGBQMsXgM8YSMKK0xOa6u0YQf4WI36qsWNAhr38Xx/PfnePbsN8wv2zF3
k0Nm7gL6hwztEaAqGAvFPJ3hD0imkrizvoFEMoF6vYFcLotr1+eoZXkUphW4PT6kr2Yw6n0XZqZ4wUAiPIaHDx/gJzqGK+EXIhyX9Dj+ib5tAl3JdAK5fB4bd5sUPInG0g0IgoDrc1Wk0ilMKyV4vH6kMzlwDhck2YlJJraoDtGZ43QcP6tHwMk6OBI6mOj8u4/ozW0RYOb1OdD8dpMqkMLX3yxDF
EVUv5qngRWAMlNGWJSQyebhcLohJ1Ow2DiE42PwJt8Gn+/G6mYMC8vDCGTfwKBVy4K72g7OzO2xKvlCAcu3VyBJEhYW6+B5HqXyLHz+ALK5AgK8QNVJw0rBp6JxjE9YEY3F4fR/gWjuU5w8q22+/6HORR3Vta/gzOzcZXOpXEYkEkGtvgSeyl+5NkffDh65QhEutwfJdBpeX4CCypiYtCIsTWHCYkeIquVwuVkr9+478F8I9MiJOGq1OoRQiIRXRTAooFCcUYWXSl+FnXMiLieIjJc6JIpJK0e+1CmxCE6f7sfOmD+QcdzljkDQQ0LzqoLjhdBL4ZHq7SS8eCIJi9VO5Y/R+wC1q0Qk7JATCRw9+l7jwMF3zOdztMqVWTXDq5k8ldtPa1ZV/cvgcdioEiKVn5ELki6icZllb3xtAh6vTWElZoKzcw4aQvIrqo9Q5qwSYmSKSDgg0coLQQwMmvb9Lfmb7K2aYICLzs6W4XQ61LNmQmPBrDaHmjlHZMJiRNWCRGK12S2Yns5jZHiovYGzmzld45pKpdgoVK8gXjqFpdsyFhcXqOVSL5FKq0iSGFPpDEqlAso1l+p/Y0VGLDrVOLAIfT5bb2XRB3ZtY2Dj9e7GGt0TzjdNQ8PK0PAIwawMj5iVEfOoMjZ+pcH8R3f8aSSvr9/c1xf1FQuHvb3lRZu6Gbu6cbIWC7WZXYUlir6u6eqESuCFvw61pcLBhZiQwx3rG7da0vRHoJszyvXPwXGTuw4WOSZoVteWVH9nG/5tWX2x2pnPpZvVagUXL5zH4cPd/zjL67VqZ7GQeeF/8bNd/f8AD081wRsX0JQAAAAASUVORK5CYII="
=
motobit.com/util/base64-decoder-encoder.asp
![Page 19: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/19.jpg)
Várias imagens em uma única imagem = 1 request
spriteme.org
![Page 20: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/20.jpg)
Content Delivery Network – espalhe seu conteúdo estático e diminua a latência!
![Page 21: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/21.jpg)
• Evite resposta “inútil” (404) ou atrasos (301, 302): melhore a experiência do usuário
home.snafu.de/tilman/xenulink.html
![Page 22: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/22.jpg)
![Page 23: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/23.jpg)
• 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=1produtos.css?v=2
![Page 24: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/24.jpg)
• 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
![Page 25: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/25.jpg)
www.webpagetest.org
![Page 26: Torne seu Site Mais Veloz! I GDG Women Sorocaba](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5596714a1a28ab47618b458d/html5/thumbnails/26.jpg)
• Google Page Speed: developers.google.com/speed• YSlow: developer.yahoo.com/yslow
slideshare.net/nshgeek