Upload
luiz-oliveira
View
513
Download
5
Embed Size (px)
Citation preview
POR QUE INVESTIR EM PERFORMANCE FRONT-END?
LuizTiago.com
ERA DESKTOP...
7 bilhões de pessoas
> 5 bilhõesFonte: ONU / ITU
25 DOS 30 MAIORES DO ALEXA POSSUEM VERSÃO MOBILE
SUBMARINO
==
SUBMARINO
==
SUBMARINO
AMERICANAS
==
AMERICANAS
==
AMERICANAS
150kbps
18,75KB/s
18,75KB = 1s
2MB = (x)s
x = 106s
MAS EU SÓ QUERIA COMPRAR UM
GAME
SOLUÇÃO!
SOLUÇÃO?
SOLUÇÃO?
WPOWeb Performance Optimization
CASE
O QUE FIZERAM?
20 mi de usuários+15mi de acessos / mês
• 3MB => 287Kb
• 7.5s => 4.3s
• 3.2s ~= aumento em receita de R$ 1.000.000,00 por dia• R$ 16.000,00 / dia = Redução de custo em servidores
WPOWeb Performance Optimization
WPOWEB PERFORMANCE OPTIMIZATION
ARQUIVOS MINIFICADOSjquery-1.8.2.js - 252K jquery-1.8.2.min.js - 32K
MENOS REQUISIÇÕES
OTIMIZE IMAGENS
titulo.jpg - 62.3kb banner.......jpg - 51.7kbgif 32 cores, transparente! - 2.21K gif 32 cores - 7.76K
SPRITES
28k 158k 57kOTIMIZADO
CSS NO TOPO, JS NO FIM
ADIE O QUE PUDER
ADIE O QUE PUDER
DRY - DON’T REPEAT YOURSELF
REUTILIZAÇÃO
MODULARIZAÇÃO
When we say an application is modular, we generally mean it's composed of a set of highly decoupled, distinct pieces of functionality stored in modules.“
Addy Osmani
MODULARIZAÇÃO
MODULARIZAÇÃO
Quanto vai serreutilizado?
Um módulo específicopode existir de forma
independente?
Ele pode ser testado de forma independente?
WIDGETS
PLUGINS
$('#banners').gallery();
PADRONIZAÇÃO
DESIGN PATTERNS
http://jstherightway.com/http://addyosmani.com/resources/essentialjsdesignpatterns/book/
BOOTSTRAP
BOOTSTRAP
QUALIFICAÇÃO
Hoje, conhecer HTML e CSS éobrigação de todo time!
“Luiz Tiago
Dê tempo para sua equipe desenvolverbem feito!
“Luiz Tiago
Obrigado, Fortaleza!
@luiztiagowww.luiztiago.com