Engenharia de front end de alta performance

Engenharia de frontend de alta performance

Engenharia de frontend
de alta performance

@andersonSolano dúvidas? #FIR2011 naoesqueca.com


Mas porque engenharia?
A engenharia é a ciência e a profissão de adquirir
e aplicar os conhecimentos matemáticos,
técnicos e científicos na criação,
aperfeiçoamento e implementação de
utilidades, tais como materiais, estruturas,
máquinas, aparelhos, sistemas ou processos, que
realizem uma determinada função ou objetivo.
Fonte:
http://pt.wikipedia.org/wiki/Engenharia



Tenha sempre em mente


Tenha sempre em mente Engenharia de frontend de alta performance



Keep It Simple, Stupid!



Preguiça



Ferramentas


Ferramentas Engenharia de frontend de alta performance

Editor de
Firebug Yslow Pagespeed Webdeveloper
código

Firefox
Colorzilla Measureit! Html validator Screen grab!
collection

Virtualbox / Editor de
Css usage lynx
VM Ware imagens



o que fazer para o site
ficar mais rápido


O que fazer para o site ficar mais rápido Engenharia de frontend de alta performance

sprites


O que fazer para o site ficar mais rápido / sprites Engenharia de frontend de alta performance

O que é sprite?
Em computação gráfica, um sprite é um objeto gráfico bi
ou tridimensional que se move numa tela sem deixar
traços de sua passagem (como se fosse um "espírito").

Os sprites foram inventados originalmente como um
método rápido de animação de várias imagens
agrupadas numa tela, em jogos de computador
bidimensionais, usando hardware especial...

Fonte:
http://pt.wikipedia.org/wiki/Sprite_(gráfico)



Sprites

Porque usar sprites?

Dá para usar sprites para todas as
imagens?



Exemplo de sprite
Dimensões em pixel: 500 x 1200
Tamanho em kb: 450
Tempo de carregamento: 2.4s
Agrupamento de 202 imagens
Qual o tamanho em kb se não estivessem agrupadas?
Maior controle das imagens utilizadas no site
Menos imagens de layout para o site inteiro
Agrupamento no css do uso das imagens
Felicidade do designer por manter aquela sombrinha
“essencial”
E o melhor, poder de negociação para cortar aquela bossa
chata de ser implementada



CSS


O que fazer para o site ficar mais rápido / CSS Engenharia de frontend de alta performance

CSS

CSS genérico ou “amarrado”?

Quando o CSS genérico é bom?

Quando o CSS amarrado é bom?



javascript


O que fazer para o site ficar mais rápido / javascript Engenharia de frontend de alta performance

javascript

JS puro ou
framework?



HTML


O que fazer para o site ficar mais rápido / HTML Engenharia de frontend de alta performance

HTML

menor código possível ou
código mais otimizado?



conhecimentos que
fazem a diferença


Conhecimentos que fazem a diferença Engenharia de frontend de alta performance

CDN DNS

Montar o ambiente de
Download de elementos da página
desenvolvimento

Interpretação dos seletores pelo
Noções de SEO
browser

Estresse do browser com CSS e JS Microformats e schema.org

Overlays e selects no IE6 Noções de programação backend



Simplificando as coisas


Simplificando as coisas Engenharia de frontend de alta performance

Exemplo 01



Exemplo 02



Exemplo 03


Engenharia de front end de alta performance

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Engenharia de front end de alta performance

Engenharia de front end de alta performance