http://andrebaltieri.net/
HEY!SEU WORKSHOP JÁ VAI
COMEÇAR
INÍCIO PROGRAMADO PARA
20:30
UTILIZE O
CHATA SUA DIREITA PARA
SE COMUNICAR
http://andrebaltieri.net/
Workshop
Otimizando Frontends
Agenda
Contexto 1 – Web
Entendendo o Request/Response
Deficiências do Browser
Requisição é requisição! Ponto!
Analise seus...
Web
Entendendo o Request/Response
Deficiências do Browser
Requisição é requisição! Ponto!
Analise seus acessos
Entendendo o Req/Res
 Request
 Toda requisição feita ao servidor
 Response
 Resposta do servidor a requisição
 Tipos ...
Deficiências
 O browser possui um limite de requisições simultâneas (Isto vai
mudar no HTTP 2.0)
 Quanto mais requisiçõe...
Sobre Requisições
 Uma requisição é uma requisição! Não importa se o retorno é um
HTML, um JSON, uma Imagem, etc...
 Se ...
Analise seu tráfego
 Quantos usuários/acessos sua aplicação recebe?
 Destes, quantos são novos? Por que isto importa?
 ...
Desenvolvimento
Organize seu código
PageSpeed Insights
Imagens vs Fonts
Thumbnails
Bundle/Minification
Cache
Organize seu código
 Separe seu CSS/JS em arquivos
 CSS no topo
 JS no fim da página
 Evite JS no “meio” das páginas
...
PageSpeed Insights
 Ferramenta que fornece informações sobre sua página
 https://developers.google.com/speed/pagespeed/i...
Imagens VS Fonts
 Minha aplicação tem muitos ícones, como proceder?
 Fontes são sempre a melhor opção?
 E os SVG?
 Qua...
Imagens
 Minha aplicação tem muitas imagens, como proceder?
 Gere thumbnails das suas imagens
 Posso gerar thumbs dinam...
Bundle/Minification
 Se quanto mais arquivos, mais requisições e quanto mais requisições
mais lento....
 Por que não jun...
Cache (Client)
 Existem dois tipos de cache
 Server Side
 Client Side
 Cache padrão do HTML
 Cache Manifest
 https:/...
Infraestrutura
Static File Server ou App?
Cache
Cache vs Versionamento
Distribuição de Imagens
CDN
Static vs App Server
 Sendo sua aplicação somente HTML, CSS e JS, ela pode ser
armazenada em um servidor de arquivos está...
Cache (Server)
 Existem servidores que tratam o cacheamento da sua aplicação
 Redis
 Memcache
 Squid
 etc..
Versão
 Se meus arquivos serão cacheados, o que acontece quando eu subir
uma nova versão deles?
 Que tal versionar seus ...
Distribuição de Imagens
 Junto a sua aplicação (Arquivos estáticos)
 Em base64 armazenada no banco de dados
 Em um serv...
CDN
 Content Delivery Network
 Otimiza a entrega de arquivos estáticos “espalhando-os” por vários
servidores pelo mundo
...
Automação
Otimizando seu desenvolvimento
Bower
Grunt
Gulp
Otimizando o Dev
 O que faço com todas as dependências da minha aplicação?
 Toda vez tenho que minificar meus arquivos?
...
Bower
 Faz a gestão de todos os pacotes que sua aplicação usa e que não são
servidos via CDN
 Utilize o Bower para geren...
Grunt
 Automatiza tarefas como cópia de imagens, minificação, junção de
arquivos
 Você pode deixar tudo pré-configurado ...
Gulp
 Realiza tudo que o Grunt faz, mas tem alguns pontos muito
interessantes
 gulp-webserver
 gulp-watch
 gulp-notify...
Dúvidas
OBRI
GADO
5505   otimizando frontends
5505   otimizando frontends
5505   otimizando frontends
5505   otimizando frontends
5505   otimizando frontends
5505   otimizando frontends
5505   otimizando frontends
5505   otimizando frontends
Próximos SlideShares
Carregando em…5
×

5505 otimizando frontends

400 visualizações

Publicada em

Assista a gravação desta apresentação https://www.youtube.com/watch?v=DNaC06_Padk

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
400
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

5505 otimizando frontends

  1. 1. http://andrebaltieri.net/ HEY!SEU WORKSHOP JÁ VAI COMEÇAR INÍCIO PROGRAMADO PARA 20:30
  2. 2. UTILIZE O CHATA SUA DIREITA PARA SE COMUNICAR http://andrebaltieri.net/
  3. 3. Workshop Otimizando Frontends
  4. 4. Agenda Contexto 1 – Web Entendendo o Request/Response Deficiências do Browser Requisição é requisição! Ponto! Analise seus acessos Contexto 2 – Desenvolvimento Organização PageSpeed Insights Imagens vs Fonts Thumbnails Bundle/Minification Cache Contexto 3 – Infraestrutura Static File Server ou App? Cache Cache vs Versionamento Distribuição de Imagens (Banco vs Arquivo) CDN Contexto 4 – Automação Bower Gulp e Grunt
  5. 5. Web Entendendo o Request/Response Deficiências do Browser Requisição é requisição! Ponto! Analise seus acessos
  6. 6. Entendendo o Req/Res  Request  Toda requisição feita ao servidor  Response  Resposta do servidor a requisição  Tipos de Resposta  HTML  JSON  Imagem  Texto  Etc...
  7. 7. Deficiências  O browser possui um limite de requisições simultâneas (Isto vai mudar no HTTP 2.0)  Quanto mais requisições sua página fizer, mais lenta será  Quanto mais imagens, mais lenta  Quanto mais arquivos CSS, JS, mais lenta  Similar a cópia de arquivos nos SOs
  8. 8. Sobre Requisições  Uma requisição é uma requisição! Não importa se o retorno é um HTML, um JSON, uma Imagem, etc...  Se seu frontend está na mesma aplicação da sua API, além de fornecer seus arquivos “HTML” sua aplicação também tem que “ouvir” as requisições do seu serviço.  Eles vão disputar a atenção
  9. 9. Analise seu tráfego  Quantos usuários/acessos sua aplicação recebe?  Destes, quantos são novos? Por que isto importa?  Sua aplicação escala automático?  Se sim, por que me preocupar com performance?
  10. 10. Desenvolvimento Organize seu código PageSpeed Insights Imagens vs Fonts Thumbnails Bundle/Minification Cache
  11. 11. Organize seu código  Separe seu CSS/JS em arquivos  CSS no topo  JS no fim da página  Evite JS no “meio” das páginas  A semântica correta do HTML também ajuda  Evite CSS “inline”
  12. 12. PageSpeed Insights  Ferramenta que fornece informações sobre sua página  https://developers.google.com/speed/pagespeed/insights/  Já mostra as possíveis soluções para os problemas encontrados  Não entre em pânico!
  13. 13. Imagens VS Fonts  Minha aplicação tem muitos ícones, como proceder?  Fontes são sempre a melhor opção?  E os SVG?  Quais opções temos?  Font-awesome  Material Icons
  14. 14. Imagens  Minha aplicação tem muitas imagens, como proceder?  Gere thumbnails das suas imagens  Posso gerar thumbs dinamicamente?  Sim, mas muita calma nesta hora!  É interessante trabalhar com Sprites?
  15. 15. Bundle/Minification  Se quanto mais arquivos, mais requisições e quanto mais requisições mais lento....  Por que não juntar todos os arquivos CSS/JS em um único arquivo?  Minifique os arquivos! O browser não precisa de espaços e quebras de linha!
  16. 16. Cache (Client)  Existem dois tipos de cache  Server Side  Client Side  Cache padrão do HTML  Cache Manifest  https://developer.mozilla.org/pt- BR/docs/Web/HTML/Using_the_application_cache
  17. 17. Infraestrutura Static File Server ou App? Cache Cache vs Versionamento Distribuição de Imagens CDN
  18. 18. Static vs App Server  Sendo sua aplicação somente HTML, CSS e JS, ela pode ser armazenada em um servidor de arquivos estáticos  Arquivos estáticos podem ser servidos mais rapidamente  São melhores cacheados  Impossibilita técnicas de bootstrap, cache do lado do servidor, otimização do SEO por parte do servidor e afins
  19. 19. Cache (Server)  Existem servidores que tratam o cacheamento da sua aplicação  Redis  Memcache  Squid  etc..
  20. 20. Versão  Se meus arquivos serão cacheados, o que acontece quando eu subir uma nova versão deles?  Que tal versionar seus arquivos?  scripts-1.0.0.min.js  styles-1.0.0.min.css  logo_300x300-1.0.0.png  Mudando o nome do arquivo, a atualização é automática  Cuidado, isto pode impactar as requisições no seu servidor!
  21. 21. Distribuição de Imagens  Junto a sua aplicação (Arquivos estáticos)  Em base64 armazenada no banco de dados  Em um servidor separado (Só para imagens)  Em um servidor separado (Cacheando)  Via CDN
  22. 22. CDN  Content Delivery Network  Otimiza a entrega de arquivos estáticos “espalhando-os” por vários servidores pelo mundo  O usuário sempre acessa o arquivo no servidor mais próximo  Quanto mais servidores, melhor  Não é tão barato
  23. 23. Automação Otimizando seu desenvolvimento Bower Grunt Gulp
  24. 24. Otimizando o Dev  O que faço com todas as dependências da minha aplicação?  Toda vez tenho que minificar meus arquivos?  Como preparo minha aplicação para publicação?
  25. 25. Bower  Faz a gestão de todos os pacotes que sua aplicação usa e que não são servidos via CDN  Utilize o Bower para gerenciar seus pacotes. Evite fazer o download direto dos sites  Ele versiona os pacotes e promove a facilidade da concentração das dependências em um repositório. Isto ajuda no trabalho em equipe  http://bower.io/
  26. 26. Grunt  Automatiza tarefas como cópia de imagens, minificação, junção de arquivos  Você pode deixar tudo pré-configurado e fazer seu pacote para deploy com apenas um comando  Utiliza JavaScript como linguagem   http://gruntjs.com/
  27. 27. Gulp  Realiza tudo que o Grunt faz, mas tem alguns pontos muito interessantes  gulp-webserver  gulp-watch  gulp-notify  http://gulpjs.com/
  28. 28. Dúvidas
  29. 29. OBRI GADO

×