Por que investir em performance Front-End?

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

luiztiago@luiztiago.com