Performance na web, além do framework

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

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

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

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

Por quê precisamos nos preocupar com isso?

“Queremos implementar projetos
e produtos de sucesso”

“Queremos aproveitar
oportunidades
profissionais e de
mercado”

“Queremos ganhar $$$”

Performance na web, além do framework

Fatores técnicos e não-técnicos

Isolados ou combinados

Determinam o sucesso ou fracasso

Um dos mais importantes é:

Experiência de Usuário (UX)

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

“Percepção”

“Reação”

“Realização”

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

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

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

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/

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

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

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

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

Para todas elas, hoje e por muito tempo (ainda), o mesmo
produto final

O front-end

Pensar o front-end desde o início, voltado para performance,
em 3 pilares

Design

Código

Requisições

Design e performance
●

Cuidado com imagens (quantidade e tamanho)

650 KB (?!)

●

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">
TIP: Evitar download de uma imagem pesada, onde ela não é necessária

●

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.

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”

●

Use referências externas para os assets do HTML.

●

Fácil de manter

●

HTML menor (KB) e mais
enxuto

●

Candidato ao cache do
navegador

●

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.

●

●

●

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

Requests e performance
●

Fazer download de white spaces e tabulações? “Minifique!”

●

372 bytes > 284 bytes (- 24%)

●

Como? HTML Compressor

●

O mesmo também vale para CSS. Comprimir para otimizar.

Mesmo efeito e 40% menor.

Como?
●

Yahoo YUI Compressor

●

SAAS “:compressed”

●

CSSO

●

Javascript, você é o próximo. #minify #compression

Como?
●

Google Closure Compiler

●

Yahoo YUI Compressor

●

UglifyJS

Mesmo efeito e 49% menor.

●

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

●

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;
}

●

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

●

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

Legal. Já entendi que
otimizar é muito
importante, mas...

Como saber se meu
site precisa ser
otimizado e onde?

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)

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)

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 :)

Linguagem, frameworks, bancos, tecnologias em geral: Suas escolhas.

Performance: O produto a ser entregue!

Performance na web, além do framework

Mais conteúdo relacionado

Semelhante a Performance na web, além do framework (20)

Último (16)

Performance na web, além do framework