A Web para todos: Melhorando a performance em condições adversas

O Brasil tem uma população de mais de 207 milhões de pessoas e só 37,9% tem acesso a celulares com rede LTE, a maioria ainda usa 3G e até GSM. Dados móveis são caros, assim como a maior parte dos smartphones mais modernos, o que torna toda a experiência digital inviável. Mas calma! Há uma luz no fim do mundo. Ao otimizar a performance dos nossos produtos digitais, podemos atender a esses usuários e acabar alcançando uma experiência melhor para todos. Nessa talk, eu falo sobre a minha experiência com otimização de performance, melhores práticas que você poderá usar em seus próprios projetos e alguns desafios que cidadãos de países subdesenvolvidos e emergentes ainda encontram.

Transcript

1. A web para todos Promovendo a inclusão digital através da performance @silveira_bells
2. No que você pensa quando começa a construir uma aplicação nova?
3. Grid system?
4. Scss, sass, less?
5. JS Frameworks?
6. REACT VUE ANGULAR
7. Natural, essas preocupações sempre surgem na fundação do projeto
8. E agora avançando um pouco
9. Acessibilidade? Por favor digam que sim
10. Segurança? Diz que sim, vai
12. Mas pra quem estamos desenvolvendo?
13. Será que não estamos esquecendo de nada?
15. Isa Silveira @silveira_bells Desenvolvedora @Work&Co Beer lover, cover da Anitta*, mãe de cachorro, maths freak, senso de humor peculiar @vida
16. Prazer, República Federativa do Brasil
21. Disponibilidade de 61%
22. Isso significa que quase 40% da população não tem nem acesso a 4G
23. 83 milhões de pessoas não tem acesso ao 4G
24. E a internet também mudou
25. 2012: ~500M de fotos compartilhadas por dia

26. 2012: ~500M de fotos compartilhadas por dia
 2017: ~6B+ de fotos compartilhadas por dia
27. Aumento de 1200%
30. A web deveria ser para todos
31. Alcance de informação define o quanto seu usuário tem a evoluir na sua plataforma
33. 53% das visitas em sites são abandonadas se o site demora mais do que 3s para carregar fonte: https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
34. E do contrário…
35. 25% a mais de anúncios vistos 70% de sessões mais longas 35% a menos de taxa de bounce fonte: https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
36. • 40% a menos de load time; • aumento de 15% de tráfego; • 15% a mais de conversão no signup. fonte: https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7 Melhorias de performance no Pinterest:
37. O Netflix teve uma queda de 43% nas despesas operacionais depois de implantar GZip. fonte: https://wpostats.com/2015/11/04/netflix-bandwidth.html
40. Otimize para democracia de acesso e ganhe vantagem competitiva e redução de custos
41. E por onde começar a otimizar?
42. Métricas, métricas e mais métricas
43. Time to render
44. Time to interactive
45. Tooling
46. webpagetest.org
48. Chrome Dev Tools + Lighthouse
54. Otimizações
55. Redução do bundle final
56. Redução do bundle final 1. Minificação de scripts e estilos 2. Code Splitting 3. Compressão de imagens 4. Ser mais crítico na definição da stack
57. Redução do bundle final 1. Minificação de scripts e estilos 2. Code Splitting 3. Compressão de imagens 4. Ser mais crítico na definição da stack
58. Redução do bundle final 1. Minificação de scripts e estilos 2. Code Splitting 3. Compressão de imagens 4. Ser mais crítico na definição da stack
59. Redução do bundle final 1. Minificação de scripts e estilos 2. Code Splitting 3. Compressão de imagens 4. Ser mais crítico na definição da stack
61. Redução do bundle final 1. Minificação de scripts e estilos 2. Code Splitting 3. Compressão de imagens 4. Ser mais crítico na definição da stack
63. Otimização do processo de paint
64. Otimização do processo de paint 1. Extrair e inline o CSS crítico 2. Cuidado com muita animação e transição 3. Otimização de fontes
65. Otimização do processo de paint 1. Extrair e inline o CSS crítico 2. Cuidado com muita animação e transição 3. Otimização de fontes
67. Otimização do processo de paint 1. Extrair e inline o CSS crítico 2. Cuidado com muita animação e transição 3. Otimização de fontes
69. Otimização do processo de paint 1. Extrair e inline o CSS crítico 2. Cuidado com muita animação e transição 3. Otimização de fontes
70. Carregar as web fonts assincronamente
71. FOUT e FOIT
72. FontFaceObserver https://github.com/bramstein/fontfaceobserver
74. Cuidado com a quantidade de fontes customizadas
75. Subset só dos caracteres utilizados
76. Variable fonts
77. Um mesmo arquivo de fonte com variações de todos os pesos
80. Gerenciamento de assets
81. Gerenciamento de assets 1. GZip 2. CDN 3. HTTP2
82. Gerenciamento de assets 1. GZip 2. CDN 3. HTTP2
83. Gzip é vida ✨
84. Configuração do nginx gzip on; gzip_comp_level 5; gzip_min_length 256;
85. $ npm install compression-webpack-plugin —-save-dev
86. plugins: [ new CompressionPlugin({ asset: "[path].gz[query]", algorithm: "gzip", test: /\.js$|\.css$|\.html$/, threshold: 10240, minRatio: 0.8 }) Configuração do webpack
87. app.get('*.js', function (req, res, next) { req.url = req.url + '.gz'; res.set('Content-Encoding', 'gzip'); next(); });
88. Gerenciamento de assets 1. GZip 2. CDN 3. HTTP2
90. Gerenciamento de assets 1. GZip 2. CDN 3. HTTP2
93. Usem seus novos poderes mágicos com sabedoria e consciência
94. Nós desenvolvedores temos sim um dever social de inclusão
95. Cabe a nós garantir que a web continue sendo um lugar de todos e para todos
97. Muito obrigada! ✨ isabella.silveira.souza@gmail.com @silveira_bells /bella-silveira