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