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

A Web para todos: Melhorando a performance em c...

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. Isa Silveira @silveira_bells Desenvolvedora @Work&Co Beer lover, cover da Anitta*,

    mãe de cachorro, maths freak, senso de humor peculiar @vida
  2. 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/
  3. 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/
  4. • 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:
  5. O Netflix teve uma queda de 43% nas despesas operacionais

    depois de implantar GZip. fonte: https://wpostats.com/2015/11/04/netflix-bandwidth.html
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. app.get('*.js', function (req, res, next) { req.url = req.url +

    '.gz'; res.set('Content-Encoding', 'gzip'); next(); });