O documento fornece uma agenda para um workshop sobre otimização de frontends. A agenda inclui tópicos como entendimento de requisições e respostas, deficiências do navegador, organização do código, ferramentas de automação e cache.
10. 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
12. 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...
13. 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
14. 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
15. 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?
17. 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”
18. 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!
19. 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
20. 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?
21. 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!
22. 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
24. 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
25. Cache (Server)
Existem servidores que tratam o cacheamento da sua aplicação
Redis
Memcache
Squid
etc..
26. 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!
27. 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
28. 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
30. 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?
31. 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/
32. 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/
33. Gulp
Realiza tudo que o Grunt faz, mas tem alguns pontos muito
interessantes
gulp-webserver
gulp-watch
gulp-notify
http://gulpjs.com/