Palestra sobre práticas de desenvolvimento web, com foco em performance para o front-end web, apresentada no Tá Safo em Ação, encontro da comunidade Tá Safo, em Belém do Pará, no dia 22/11/2013.

1. Performance na web, além do framework
Tá Safo em Ação!
22/11/2013
Belém – Pará – Brasil

2. Alexandre Cardoso (@accbel)
●
Analista de desempenho – InMetrics - SP
●
Desenvolvendo software há 13 anos
●
Java, Scala, Ruby, Web, Arquitetura, Performance
●
TáSafoConf 2012
●
Editor do Scalando.com.br

3. Desenvolvimento para a Web

4. O que (normalmente) está
nas preocupações do
desenvolvedor web?

5. Linguagem?
Framework?
SQL? NoSQL?
Front-end?
UX?
SEO?
Automated tests?
Mobile?
Social?
Responsive design?

6. Por quê precisamos nos preocupar com isso?

7. “Queremos implementar projetos
e produtos de sucesso”
“Queremos aproveitar
oportunidades
profissionais e de
mercado”
“Queremos ganhar $$$”

9. Fatores técnicos e não-técnicos
Isolados ou combinados
Determinam o sucesso ou fracasso

10. Um dos mais importantes é:
Experiência de Usuário (UX)

11. Experiência de Usuário - UX
“Define como pessoas se sentem quando interagem com um sistema (…),
incluindo emoções, crenças, preferências, percepções, reações físicas e
psicológicas, comportamentos e realizações do usuário que ocorrem antes,
durante e após o uso.”'
Fonte: http://www.touchpoints.com.br/experiencia-do-usuario

12. “Percepção”
“Reação”
“Realização”

13. Usuários tendo a melhor percepção de seu site
Usuários realizados ao buscar e acessar seu site
Usuário reagem com satisfação aos serviços do site

14. “(...) mas ele só carrega rapidamente na internet de 1Gbps do
escritório”

15. UX é super importante, assim como outros fatores, mas...
“Sites lentos não vivem pra contar histórias”

16. Performance importa pra quem?
“33% of broadband shoppers are unwilling to wait more than
four seconds for a web page to load, whereas 43% of
narrowband users will not wait more than six seconds
(Akamai, 2006)”
“every 100 ms increase in load time of Amazon.com
decreased sales by 1%”
Fonte: http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

17. Entretanto...
“Brasil está em 72º lugar
no ranking de velocidade
média de internet”
Fonte:http://www.tecmundo.com.br/internet/42327-brasil-esta-em-72-lugar-no-ranking-de-velocidade-media-de-internet.htm

18. Desenvolvimento web para a realidade brasileira, cada vez
mais móvel, conciliando inovação, UX e performance, é um
grande desafio.
O 3G brasileiro é uma “piada” e, mesmo
assim, milhões de pessoas vão fechar
negócios pelo celular

19. O que você,
desenvolvedor web,
pode fazer a respeito?

20. Você é livre para fazer
escolhas que suportem
seu projeto...

21. Para todas elas, hoje e por muito tempo (ainda), o mesmo
produto final
O front-end

22. Pensar o front-end desde o início, voltado para performance,
em 3 pilares
Design
Código
Requisições

23. Design e performance
●
Cuidado com imagens (quantidade e tamanho)
650 KB (?!)

24. Design e performance
●
Definir imagens de tamanhos distintos e serví-las quando necessário,
evitando redimensionamento no navegador.
150x150
71x71
30x30
<img alt="A_picture" src="/images/picture_150_150.jpg">
<img alt="A_picture" src="/images/picture_71_71.jpg">
<img alt="A_picture" src="/images/picture_30_30.jpg">
TIP: Evitar download de uma imagem pesada, onde ela não é necessária

25. Design e performance
●
Definir e aplicar a taxa de compressão adequada, sem perda
excessiva de qualidade
Arquivo original (PNG): 43KB
JPEG – Compressão 100% - 24KB
JPEG – Compressão 80% - 14KB
TIP: Largura de banda é
um recurso escasso e
não-controlado. Otimizar,
sempre que possível.

26. Código e performance
●
Evite código inline/embarcado no seu HTML.
●
Difícil de manter
●
Aumenta o tamanho (KB)
do HTML
●
Não pode ser “cacheado”

27. Código e performance
●
Use referências externas para os assets do HTML.
●
Fácil de manter
●
HTML menor (KB) e mais
enxuto
●
Candidato ao cache do
navegador

28. Código e performance
●
Não custa lembrar: CSS no topo e JS no final!
●
CSS links bloqueiam a
renderização até o fim do
download. Antecipe.
●
Tags <script> bloqueiam
downloads de outros
recursos, como imagens.
Deixe por último.

29. Código e performance
●
●
●
Javascript? Uma caixinha de surpresas. Saiba o que está fazendo.
Várias maneiras de
percorrer um array
Diferenças absurdas de
performance
●
Fazer cache evita
recálculos durante
a execução
●
jQuery facilita
muito, mas tem
seu preço

30. Requests e performance
●
Fazer download de white spaces e tabulações? “Minifique!”
●
372 bytes > 284 bytes (- 24%)
●
Como? HTML Compressor

31. Requests e performance
●
O mesmo também vale para CSS. Comprimir para otimizar.
Mesmo efeito e 40% menor.
Como?
●
Yahoo YUI Compressor
●
SAAS “:compressed”
●
CSSO

32. Requests e performance
●
Javascript, você é o próximo. #minify #compression
Como?
●
Google Closure Compiler
●
Yahoo YUI Compressor
●
UglifyJS
Mesmo efeito e 49% menor.

33. Requests e performance
●
Várias requisições para exibir apenas uma página? Agrupar recursos
estáticos (CSS e Javascript), para servir de uma vez só.
Download mais eficiente, página renderizada mais rapidamente
Como?
●
GruntJS + Plugins
●
Wro4J

34. Requests e performance
●
Layout com muitas imagens (ícones, etc)? Utilize CSS Sprites
Como?
●
SmartSprites
●
Compass Spriting
.icon-edit {
background-image: url("../img/glyphicons-halflings-white.png");
background-position: -96px -72px;
}

35. Requests e performance
●
Se algo não muda, pegue uma vez e guarde (até mudar). Utilize o
cache do navegador.
server {
listen 80;
server_name www.mysite.com.br;
root /path/to/site;
...
location ~* .(?:ico|css|js|gif|jpe?g|png)$ {
expires 30d;
expires max;
add_header Cache-Control public;
}
....
Atenção!
Não esqueça de “assinar” as
URL's dos assets, para ter
controle sobre a renovação
do cache
●
/assets/main.js?v123
1ª visita ao site
●
<script src=”/assets/main.js?v123”> → Requisita o arquivo ao servidor – 200 (OK)
2ª visita ao site
●
<script src=”/assets/main.js?v123”> → Utiliza a cópia armazenada no cache local

36. Requests e performance
●
Otimize ainda mais o tamanho da resposta. Ative a compressão
HTTP
http {
...
# enable gzip compression
gzip on;
gzip_min_length 1100;
gzip_buffers 4 32k;
gzip_types text/html application/x-javascript text/css;
gzip_vary on;
# end gzip configuration
...
}
$ curl --header "Accept-Encoding: gzip,deflate,sdch" -I http://www.mysite.com
HTTP/1.1 200 OK
Server: nginx
...
Content-Encoding: gzip

37. Legal. Já entendi que
otimizar é muito
importante, mas...
Como saber se meu
site precisa ser
otimizado e onde?

38. Monitorar é preciso!

39. Google Page Speed Insights
●
Antigo “Google Page Speed”
●
Analisa e define um score de
uma página web para seu
desempenho
●
Sugere um conjunto de
melhorias para diversas áreas
do front-end de uma página
web
●
Oferece uma API para análise
remota. Ideal para integrar ao
seu ambiente de CI (Jenkins,
etc)

40. Yahoo! YSlow
●
Mesmo princípio e objetivo do
Google Page Speed Insights
●
Possui extensões/plugins para
os principais navegadores
●
Permite executar uma análise
via linha de comando (requer
NodeJS/NPM)

41. O assunto é amplo! Referências sobre front-end performance
●
Improving UX Through Front-End Performance
●
Front-end performance for web designers and front-end developers
●
How to lose WEIGHT (in the browser)
●
Web Performance Best Practices
●
Web Assets – Tips for Better Organization and Performance
●
Google :)

42. Linguagem, frameworks, bancos, tecnologias em geral: Suas escolhas.
Performance: O produto a ser entregue!

43. Obrigado!