Web performance [#perfmatters]

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

Transcript

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