encontro /mnt: dicas para desenvolvedoras web
DESCRIPTION
Apresentação do Workshop de desenvolvimento do I Encontro Mulheres na Tecnologia, realizado em março/2013 em Goiânia/GO.TRANSCRIPT
![Page 1: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/1.jpg)
Natascha Hun
I Encontro /MNT – Goiás – Março/2013
![Page 2: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/2.jpg)
• Natural de Sorocaba/SP
• Tecnóloga em Processamento de Dados
• Engenheira da Computação
• Desenvolvimento PHP desde 2005
• SEO | Linux | NFe – leitorxml.com.br
![Page 3: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/3.jpg)
Avalie a velocidade do seu site
O usuário não vai esperar seu site carregar
E torne-o mais veloz!
![Page 4: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/4.jpg)
20 Regras
“Web site de alto desempenho leva a uma maior retenção do visitante,
engajamento e conversões”
![Page 5: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/5.jpg)
35 Regras – 23 Analisadas
“YSlow analisa as páginas web e sugere maneiras de melhorar o seu desempenho com base em um conjunto de regras para
páginas da Web de alto desempenho”
![Page 6: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/6.jpg)
CSS na tag Head faz a página ser exibida progressivamente
Scripts bloqueiam downloads paralelos e devem ser carregados por último
Aproveite e preencha a tag tittle com
descrição relevante e única da página!
![Page 7: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/7.jpg)
Remover comentários e espaços desnecessáriosdiminuem o tamanho do arquivo
Jquery.js: 262KB Jquery.min.js: 90KB
![Page 8: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/8.jpg)
• Não redimensione imagens no HTML
• Sempre informe tamanho real da imagem
Aproveite e preencha o
atributo alt com keywords!
![Page 9: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/9.jpg)
Remova bytes desnecessários de arquivos de imagem
Antes Depois
![Page 10: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/10.jpg)
• Evite resposta “inútil” (404) ou atrasos (301, 302): melhore a experiência do usuário
![Page 11: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/11.jpg)
• Alguns arquivos mudam com pouca frequência (CSS, JS, imagens)...
... acessar esses arquivos localmente agiliza o carregamento da página, ao invés de sempre buscá-los
![Page 12: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/12.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 13: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/13.jpg)
• CSS no topo • Redução de 56KB de imagens com otimização • Redimensionamento de imagens
![Page 14: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/14.jpg)
• Minificação OK • Redimensionamento de Imagens • Javascript no topo
![Page 15: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/15.jpg)
Adote ferramentas de apoio
Padrão, organização, monitoramente e destaque!
Organize e monitore!
![Page 16: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/16.jpg)
![Page 17: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/17.jpg)
![Page 18: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/18.jpg)
![Page 19: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/19.jpg)
![Page 20: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/20.jpg)
![Page 21: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/21.jpg)
![Page 22: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/22.jpg)
![Page 23: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/23.jpg)
![Page 24: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/24.jpg)
![Page 25: Encontro /MNT: Dicas para Desenvolvedoras Web](https://reader033.vdocuments.net/reader033/viewer/2022052508/559777471a28ab88698b4810/html5/thumbnails/25.jpg)
• Google Page Speed: https://developers.google.com/speed• Central Google do Webmaster: http://www.google.com/intl/pt-BR/webmasters/
• YSlow: http://developer.yahoo.com/yslow/• 34 Regras Yahoo: http://developer.yahoo.com/performance/rules.html
nshgeek
@nshgeek
br.linkedin.com/in/nataschash
slideshare.net/nshgeek