O documento discute a importância de investir em performance front-end. Aponta que a maioria dos sites mais populares possuem versão mobile e que o tempo de carregamento afeta diretamente a receita e experiência do usuário. Recomenda otimizações como minificação de arquivos, redução de imagens, uso de sprites e adiamento de recursos pesados.

1. POR QUE INVESTIR EM
PERFORMANCE
FRONT-END?
LuizTiago.com

2. ERA DESKTOP...

3. 7 bilhões de pessoas
Fonte: ONU / ITU
> 5 bilhões

4. 25 DOS 30 MAIORES DO ALEXA
POSSUEM VERSÃO MOBILE

5. SUBMARINO
==

6. SUBMARINO
==

7. SUBMARINO

8. AMERICANAS
==

9. AMERICANAS
==

10. AMERICANAS

11. 150kbps
18,75KB/s
18,75KB = 1s
2MB = (x)s
x = 106s

12. MAS EU SÓ QUERIA
COMPRAR UM
GAME

13. SOLUÇÃO!

14. SOLUÇÃO?

15. SOLUÇÃO?

16. WPO CASE
Web Performance Optimization

17. O QUE 20 mi de usuários
FIZERAM? +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

18. WPO WPO
Web Performance Optimization
WEB PERFORMANCE OPTIMIZATION

19. ARQUIVOS MINIFICADOS
jquery-1.8.2.js - 252K jquery-1.8.2.min.js - 32K

20. MENOS REQUISIÇÕES

21. OTIMIZE IMAGENS
titulo.jpg - 62.3kb banner.......jpg - 51.7kb
gif 32 cores, transparente! - 2.21K gif 32 cores - 7.76K

22. SPRITES
OTIMIZADO
28k 158k 57k

23. CSS NO TOPO, JS NO FIM

24. ADIE O QUE PUDER

25. ADIE O QUE PUDER

26. DRY - DON’T REPEAT YOURSELF

27. REUTILIZAÇÃO

28. 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

29. MODULARIZAÇÃO

30. MODULARIZAÇÃO
Quanto vai ser
Ele pode ser
reutilizado?
testado de forma
independente?
Um módulo específico
pode existir de forma
independente?

31. WIDGETS

32. PLUGINS
$('#banners').gallery();

33. PADRONIZAÇÃO

34. DESIGN PATTERNS
http://addyosmani.com/resources/
http://jstherightway.com/ essentialjsdesignpatterns/book/

35. BOOTSTRAP

36. BOOTSTRAP

37. QUALIFICAÇÃO

38. “
Hoje, conhecer HTML e CSS é
obrigação de todo time!
Luiz Tiago

39. “
Dê tempo para sua equipe desenvolver
bem feito!
Luiz Tiago

40. Obrigado, Fortaleza!
@luiztiago
www.luiztiago.com
luiztiago@luiztiago.com