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.

Isabella Silveira

March 10, 2018
Tweet

More Decks by Isabella Silveira

Other Decks in Technology

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! ✨ [email protected]
    @silveira_bells
    /bella-silveira

    View Slide