Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

91b0fc08849c4128f1eed542c057fd27?s=128

Isabella Silveira

March 10, 2018
Tweet

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

  11. None
  12. Mas pra quem estamos desenvolvendo?

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

  14. None
  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

  17. None
  18. None
  19. None
  20. None
  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%

  28. None
  29. None
  30. A web deveria ser para todos

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

    evoluir na sua plataforma
  32. None
  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
  38. None
  39. None
  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

  47. None
  48. Chrome Dev Tools + Lighthouse

  49. None
  50. None
  51. None
  52. None
  53. None
  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
  60. None
  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
  62. None
  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
  66. None
  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
  68. None
  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

  73. None
  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
  78. None
  79. None
  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

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

  91. None
  92. None
  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
  96. None
  97. Muito obrigada! ✨ isabella.silveira.souza@gmail.com @silveira_bells /bella-silveira