5505 otimizando frontends

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