Encontro /MNT: Dicas para Desenvolvedoras Web

25
Natascha Hun I Encontro /MNT Goiás Março/2013

description

Apresentação do Workshop de desenvolvimento do I Encontro Mulheres na Tecnologia, realizado em março/2013 em Goiânia/GO.

Transcript of Encontro /MNT: Dicas para Desenvolvedoras Web

Page 1: Encontro /MNT: Dicas para Desenvolvedoras Web

Natascha Hun

I Encontro /MNT – Goiás – Março/2013

Page 2: Encontro /MNT: Dicas para Desenvolvedoras Web

• 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

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

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

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

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

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

• 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

Remova bytes desnecessários de arquivos de imagem

Antes Depois

Page 10: Encontro /MNT: Dicas para Desenvolvedoras Web

• Evite resposta “inútil” (404) ou atrasos (301, 302): melhore a experiência do usuário

Page 11: Encontro /MNT: Dicas para Desenvolvedoras Web

• 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

• 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

• CSS no topo • Redução de 56KB de imagens com otimização • Redimensionamento de imagens

Page 14: Encontro /MNT: Dicas para Desenvolvedoras Web

• Minificação OK • Redimensionamento de Imagens • Javascript no topo

Page 15: Encontro /MNT: Dicas para Desenvolvedoras Web

Adote ferramentas de apoio

Padrão, organização, monitoramente e destaque!

Organize e monitore!

Page 16: Encontro /MNT: Dicas para Desenvolvedoras Web
Page 17: Encontro /MNT: Dicas para Desenvolvedoras Web
Page 18: Encontro /MNT: Dicas para Desenvolvedoras Web
Page 19: Encontro /MNT: Dicas para Desenvolvedoras Web
Page 20: Encontro /MNT: Dicas para Desenvolvedoras Web
Page 21: Encontro /MNT: Dicas para Desenvolvedoras Web
Page 22: Encontro /MNT: Dicas para Desenvolvedoras Web
Page 23: Encontro /MNT: Dicas para Desenvolvedoras Web
Page 24: Encontro /MNT: Dicas para Desenvolvedoras Web
Page 25: Encontro /MNT: Dicas para Desenvolvedoras Web

• 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

[email protected]

br.linkedin.com/in/nataschash

slideshare.net/nshgeek