Post on 15-Apr-2017
http://andrebaltieri.net/
HEY!SEU WORKSHOP JÁ VAI
COMEÇARINÍCIO PROGRAMADO PARA
20:30
UTILIZE O
CHATA SUA DIREITA PARASE COMUNICAR
http://andrebaltieri.net/
WorkshopOtimizando Frontends
AgendaContexto 1 – Web
Entendendo o Request/ResponseDeficiências do BrowserRequisição é requisição! Ponto!Analise seus acessos
Contexto 2 – DesenvolvimentoOrganizaçãoPageSpeed InsightsImagens vs FontsThumbnailsBundle/Minification
Cache
Contexto 3 – InfraestruturaStatic File Server ou App?CacheCache vs VersionamentoDistribuição de Imagens (Banco vs Arquivo)CDN
Contexto 4 – AutomaçãoBowerGulp e Grunt
WebEntendendo o Request/ResponseDeficiências do BrowserRequisiçã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 de Resposta
HTML JSON Imagem Texto Etc...
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
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
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?
DesenvolvimentoOrganize seu códigoPageSpeed InsightsImagens vs Fonts
ThumbnailsBundle/MinificationCache
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”
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!
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
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?
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!
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
InfraestruturaStatic File Server ou App?CacheCache vs Versionamento
Distribuição de ImagensCDN
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
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 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!
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
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
AutomaçãoOtimizando seu desenvolvimentoBowerGrunt
Gulp
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?
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/
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/
Gulp Realiza tudo que o Grunt faz, mas tem alguns pontos muito
interessantes gulp-webserver gulp-watch gulp-notify
http://gulpjs.com/
Dúvidas
OBRIGADO