Nesta talk, apresentei um estudo de caso real onde partindo da premissa de não aplicar grandes mudanças de implementação e somente boas práticas simples, é possível aumentar consideravelmente a performance de carregamento de uma aplicação web. #perfmatters

1. Coca-Cola
Web performance
[case] CCZ - Digital Sampling

2. Leandro Nunes
Frontend Developer
leandrof@ciandt.com

3. Web Performance
[ técnicas de otimização front-end ]

4. Performance
● Tempo de carregamento
● Tempo de percepção
● Tempo de execução (animação css - FPS)
● Tempo de execução (js)

5. Performance
● Tempo de carregamento
● Tempo de percepção
● Tempo de execução (animação css - FPS)
● Tempo de execução (js)

6. Impacto
● + Bounce rate
● - Conversion rate
● + SEO penalization
● - UX (abandon)
● + Hosting/Infrastructure costs

7. “... optimize front-end performance first,
that's where 80% or more of the end-user
response time is spent” — Steve Soulders

9. Banda Larga

11. HTTP 1.1

12. [ CASE ]
CCZ - Digital Sampling

15. [ checkpoint ]
* Conexão: Good 3G (1Mbps 40ms RTT)
● Size: 1.3MB
● Requests: 31
● DOMContentLoad: 3.14s
● Load: 6.49s

16. Imagens

17. [46%]

18. grunt-contrib-imagemin
https://github.com/gruntjs/grunt-contrib-imagemin

19. -5%[-6%]

21. Kraken
https://kraken.io
Compressor
https://compressor.io
Tinypng
https://tinypng.com

22. [-74%] -41%

27. [-75%] -46%

29. Unveil
https://github.com/luis-almeida/unveil
(http://www.appelsiini.net/projects/lazyload)

30. [-76%] -41%

31. [ checkpoint ]
* (Otimização de imagens)
● Size: 1.3MB -> 821KB [-36%]
● Requests: 31 -> 29 [-6%]
● DOMContentLoad: 3.14s -> 2.96 [-6%]
● Load: 6.49s -> 3.83s [-40%]

32. Fonts

33. medium != book ?

34. medium book

35. [-34%]

36. [ checkpoint ]
* (Otimização de fonts)
● Size: 1.3MB -> 797KB [-38%]
● Requests: 31 -> 28 [-9%]
● DOMContentLoad: 3.14s -> 2.87 [-8%]
● Load: 6.49s -> 3.50s [-46%]

37. Requests

41. [ checkpoint ]
* (Otimização requests)
● Size: 1.3MB -> 722KB [-44%]
● Requests: 31 -> 25 [-19%]
● DOMContentLoad: 3.14s -> 2.86 [-8%]
● Load: 6.49s -> 3.38s [-47%]

42. Servidor

43. Gzip / Deflate
(compactação de dados)
max-age
(controle de cache)

45. [ checkpoint ]
* (Otimização servidor)
● Size: 1.3MB -> 381KB [-70%]
● Requests: 31 -> 25 [-19%]
● DOMContentLoad: 3.14s -> 1.41 [-63%]
● Load: 6.49s -> 1.92s [-70%]

46. Inicial (6,49s)
Otimização de imagens (3,83s)
Otimização de fonts (3,50s)
Otimização de requests (3,38s)
Otimização de servidor (1,92s)
Recap...
* Conexão: Good 3G (1Mbps 40ms RTT)

47. site site otimizado
381KB
25
1.41s
1.92s
1.3MB
31
3.14s
6.49s

48. “Performance is not a checklist, it's a
continuous process” — Ilya Grigorik

49. Obrigado
http://browserdiet.com/
PERFORMANCE
MATTERS