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
   

   View Slide

2. No que você pensa quando começa
   a construir uma aplicação nova?
   

   View Slide

3. Grid system?
   

   View Slide

4. Scss, sass, less?
   

   View Slide

5. JS Frameworks?
   

   View Slide

6. REACT
   VUE ANGULAR
   

   View Slide

7. Natural, essas preocupações sempre
   surgem na fundação do projeto
   

   View Slide

8. E agora avançando um pouco
   

   View Slide

9. Acessibilidade?
   Por favor digam que sim
   

   View Slide

10. Segurança?
    Diz que sim, vai
    

    View Slide

11. View Slide

12. Mas pra quem estamos desenvolvendo?
    

    View Slide

13. Será que não estamos
    esquecendo de nada?
    

    View Slide

14. View Slide

15. Isa Silveira
    @silveira_bells
    Desenvolvedora @Work&Co
    Beer lover, cover da Anitta*, mãe de cachorro, maths
    freak, senso de humor peculiar @vida
    

    View Slide

16. Prazer, República Federativa do Brasil
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. Disponibilidade de 61%
    

    View Slide

22. Isso significa que quase 40% da população
    não tem nem acesso a 4G
    

    View Slide

23. 83 milhões de pessoas não tem
    acesso ao 4G
    

    View Slide

24. E a internet também mudou
    

    View Slide

25. 2012: ~500M de fotos compartilhadas por dia

    

    View Slide

26. 2012: ~500M de fotos compartilhadas por dia

    2017: ~6B+ de fotos compartilhadas por dia
    

    View Slide

27. Aumento de 1200%
    

    View Slide

28. View Slide

29. View Slide

30. A web deveria ser para todos
    

    View Slide

31. Alcance de informação define o quanto
    seu usuário tem a evoluir na sua plataforma
    

    View Slide

32. View Slide

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/
    

    View Slide

34. E do contrário…
    

    View Slide

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/
    

    View Slide

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:
    

    View Slide

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
    

    View Slide

38. View Slide

39. View Slide

40. Otimize para democracia de acesso e ganhe
    vantagem competitiva e redução de custos
    

    View Slide

41. E por onde começar a otimizar?
    

    View Slide

42. Métricas, métricas e mais métricas
    

    View Slide

43. Time to render
    

    View Slide

44. Time to interactive
    

    View Slide

45. Tooling
    

    View Slide

46. webpagetest.org
    

    View Slide

47. View Slide

48. Chrome Dev Tools + Lighthouse
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. Otimizações
    

    View Slide

55. Redução do bundle final
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

60. View Slide

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
    

    View Slide

62. View Slide

63. Otimização do processo de paint
    

    View Slide

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
    

    View Slide

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
    

    View Slide

66. View Slide

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
    

    View Slide

68. View Slide

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
    

    View Slide

70. Carregar as web fonts assincronamente
    

    View Slide

71. FOUT e FOIT
    

    View Slide

72. FontFaceObserver
    https://github.com/bramstein/fontfaceobserver
    

    View Slide

73. View Slide

74. Cuidado com a quantidade
    de fontes customizadas
    

    View Slide

75. Subset só dos caracteres utilizados
    

    View Slide

76. Variable fonts
    

    View Slide

77. Um mesmo arquivo de fonte com
    variações de todos os pesos
    

    View Slide

78. View Slide

79. View Slide

80. Gerenciamento de assets
    

    View Slide

81. Gerenciamento de assets
    1. GZip
    2. CDN
    3. HTTP2
    

    View Slide

82. Gerenciamento de assets
    1. GZip
    2. CDN
    3. HTTP2
    

    View Slide

83. Gzip é vida ✨
    

    View Slide

84. Configuração do nginx
    gzip on;
    gzip_comp_level 5;
    gzip_min_length 256;
    

    View Slide

85. $ npm install compression-webpack-plugin —-save-dev
    

    View Slide

86. plugins: [
    new CompressionPlugin({
    asset: "[path].gz[query]",
    algorithm: "gzip",
    test: /\.js$|\.css$|\.html$/,
    threshold: 10240,
    minRatio: 0.8
    })
    Configuração do webpack
    

    View Slide

87. app.get('*.js', function (req, res, next) {
    req.url = req.url + '.gz';
    res.set('Content-Encoding', 'gzip');
    next();
    });
    

    View Slide

88. Gerenciamento de assets
    1. GZip
    2. CDN
    3. HTTP2
    

    View Slide

89. View Slide

90. Gerenciamento de assets
    1. GZip
    2. CDN
    3. HTTP2
    

    View Slide

91. View Slide

92. View Slide

93. Usem seus novos poderes mágicos com
    sabedoria e consciência
    

    View Slide

94. Nós desenvolvedores temos sim um dever
    social de inclusão
    

    View Slide

95. Cabe a nós garantir que a web continue
    sendo um lugar de todos e para todos
    

    View Slide

96. View Slide

97. Muito obrigada! ✨ isabella.silveira.souza@gmail.com
    @silveira_bells
    /bella-silveira
    

    View Slide