Encontro /MNT: Dicas para Desenvolvedoras Web

Post on 04-Jul-2015

432 views 0 download

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

Natascha Hun

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

• Natural de Sorocaba/SP

• Tecnóloga em Processamento de Dados

• Engenheira da Computação

• Desenvolvimento PHP desde 2005

• SEO | Linux | NFe – leitorxml.com.br

Avalie a velocidade do seu site

O usuário não vai esperar seu site carregar

E torne-o mais veloz!

20 Regras

“Web site de alto desempenho leva a uma maior retenção do visitante,

engajamento e conversões”

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”

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!

Remover comentários e espaços desnecessáriosdiminuem o tamanho do arquivo

Jquery.js: 262KB Jquery.min.js: 90KB

• 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 imagem

Antes Depois

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

• 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

• 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

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

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

Adote ferramentas de apoio

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

Organize e monitore!

• 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

nshgeek@gmail.com

br.linkedin.com/in/nataschash

slideshare.net/nshgeek