O documento discute técnicas para otimizar aplicações web, incluindo organização do HTML e CSS, redução de requisições, minificação e combinação de arquivos JavaScript e CSS, otimização de imagens, uso de sprites CSS, carregamento modular de JavaScript e ferramentas de diagnóstico.

1. Otimização de
aplicações web
ÍTALO LELIS DE VIETRO
JOÃO DE ARAÚJO NETO

2. O que iremos ver?
 Entendendo a otimização  Organização do HTML
 Organizando o server-side  Otimização do CSS
 GZIP  Carregamento modular js
 Headers  HTML5 Boilerplate
 Etags  Ferramentas de diagnostico
 Caching
 Reduzindo a quantidade de
requests
 Minificar e mesclar css e js
 Yahoo CLI
 Otimização de imagens
 Css Sprite

3. Entendendo a otimização
As aplicações web estão cada vez mais robustas, muitas delas
recebem milhões de usuários por dia, mas será que elas realmente
aguentam essa quantidade de requisições mantendo a qualidade de
seus serviços?
Nosso objetivo hoje é de aprender a otimizar nossas aplicações front-
end para que o usuário tenha a melhor experiência possível.

4. Configurando nossa aplicação
OTIMIZANDO A APLICAÇÃO

5. Organizando o server-side
Apesar do foco dessa apresentação ser o front-end, não podemos
deixar de mencionar algumas configurações do servidor para
interagirmos com nosso front-end, aqui vão algumas dicas:
 Habilitar o GZIP
 Configure os headers de resposta

6. Como configuramos nossos servidores para
utilizar o gzip? Muito simples, basta
informarmos ao .htaccess que queremos
utiliza-lo. Exemplo:
# Compress all output labeled with one of the following MIME-types
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml
O Gzip é um software para application/javascript
application/json
compressão e descompressão de application/rss+xml
arquivos. Ele é altamente utilizado application/vnd.ms-fontobject
em websites para aumentar a application/x-font-ttf
application/xhtml+xml
performance. application/xml
font/opentype
Sites que utilizam o o Gzip podem ser image/svg+xml
até 80% mais rápidos. image/x-icon
text/css
text/html
text/plain
text/x-component
text/xml
</IfModule>

7. Configure o cache
 Configure as Etags
Muitas vezes pensamos que o
browser do cliente irá fazer o cache
 Invalide o cache
automático de nossa
aplicação, mas precisamos informa-
 Defina o tempo de cache para
lo de como fazer o cache da cada tipo de arquivo
maneira correta.
Para isso utilizamos os recursos de
 Faça as requisições Ajax com cache
headers.

8. ETags
 A Etag é um mecanismo para
identificação de um componente
em cache. Em outras palavras um
componente é identificado por
uma string única e o browser pode
verificar se ela foi modificada ou # FileETag None is not enough for every server.
não. <IfModule mod_headers.c>
 O problema das Etags é que elas Header unset ETag
</IfModule>
são geradas para um único servidor
sendo inviável valida-la em outro
servidor # Since we're sending far-future expires, we don't need ETags for
# static content.
 A melhor solução então é cancelar # developer.yahoo.com/performance/rules.html#etags
o uso da Etag, dessa forma o FileETag None
browser não irá verificar o
componente. Isso trás uma
performance significativa para o
website

9. Invalide o cache
 Invalidar o cache também é uma
ótima estratégia para alteração
de conteúdo.
 Podemos utilizar uma estratégia <link rel=“stylesheet”
de versionamento de src=“http://domain.com/style.css?v=1”>
componentes, assim o servidor
saberá quando um arquivo foi <link rel=“stylesheet”
src=“http://domain.com/normalize.css?v=1”>
alterado e precisa ser
recarregado.
 Utilize helpers server-side para
versionamento dos arquivos.

10. Defina o tempo de cache para
cada tipo de arquivo <IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
 O famoso Expires dos servidores é ExpiresDefault "access plus 1 month"
uma das melhores soluções para # Your document html
controle de cache ExpiresByType text/html "access plus 0 seconds“
# Data
 Utilizamos diversos “tempos” ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
diferentes para cada tipo de ExpiresByType application/json "access plus 0 seconds"
arquivo, por exemplo, arquivos # Favicon (cannot be renamed)
como imagem ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

11. Reduzindo as requisições
Reduzir a quantidade de requisições que a aplicação faz para nossos
servidores é uma ótima solução para otimizarmos o carregamento da
página, mas para isso precisamos entender como fazer isso.
 Um browser pode carregar até 3 arquivos em paralelo para cada
servidor.
 Deixe os arquivos estáticos em servidores CDN com
subdomínios, dessa forma o browser poderá carregar 3 arquivos
para cada subdomínio em paralelo.
 Exemplo: Um website com 9 js sendo carregados no mesmo
servidor, irá carregar 3 deles em paralelos depois mais 3 e mais 3. Já
com o CDN com 3 subdomínios ele poderá carregar os 9 em
paralelo.

12. Minificar e mesclar js e css
Essa estratégia é considerada uma das melhores para obtermos uma
boa performance, o problema é que a maioria dos desenvolvedores
não utiliza. Vamos entender como funciona:
Envio do arquivo
Compressor
• O arquivo é • O GZIP irá para o cliente
escrito comprimi-lo
normalmente • Usamos uma ainda mais para • O arquivo é
ferramenta de enviarmos para o entregue para o
compressão cliente browser cerca de
90% menor que o
original
Arquivos js/css
GZIP
normais

13. Ferramentas para comprimir
arquivos
 YUI Compressor – Ferramenta de Yahoo que promete ser a mais
segura e eficiente de todas.
 Packer – Comprime JS pela web
 JSCompress.com – Usa JSMin ou Packer para reduzir o tamanho dos
arquivos.
 CSS Compressor – Comprime arquivos CSS.
 Easy YUI compressor – Versão visual do YUI compressor

14. Ferramentas para unificar arquivos
Normalmente essas ferramentas são executadas em tempo de
execução, elas comprimem e unificam os arquivos, logo em seguida
armazenam os arquivos gerados em cache.
 Minify – Ferramenta em PHP que utiliza a biblioteca YUI compressor
 Zend_Minify – API do Zend Framework para YUI compressor
 Easy Minify – API do Easy Framework para YUI compressor
 YUI compressor for .net. – Biblioteca para .NET
 Ant – Biblioteca para Java

15. Exemplos
Como as ferramentas funcionam

16. Otimização de imagens
As imagens são os maiores responsáveis pela baixa performance de
websites e aplicações. Felizmente existem formas de contornar esse
problema:
 Não coloque imagens maiores do que o necessário
 Comprima as imagens
 Use os formatos corretos para cada ocasião
 Defina o tamanho e a largura da imagem no HTML
 Use Sprites onde possível

17. Css Sprite
Sprite é uma imagem que contém outras imagens dentro dela, onde
nós podemos pega-las através do css e manipula-la de diversas
formas.
 Diminui significativamente as requisições para o servidor
 As imagens são manipuladas pelo css através da posição no
arquivo

18. Ferramentas para compressão de
imagens e criação de sprites
 Caesium – Promete comprimir imagens em até 90%
 Smush.it™ - Compressor de imagens da Yahoo
 Data URI Sprites - Gerador de sprites baseado na web
 Spritr – Gera código css para sprites
 SmartSprites – Gerador de sprites para desktop

19. Boas práticas
APRENDENDO AS BOAS PRATICAS DA OTIMIZAÇÃO WEB

20. Organização do HTML
 Arquivos css no topo do documento
 Arquivos js no final do arquivo
 Deixe os arquivos de mesmo tipo próximos
 Crie arquivos css e js externos
 Evite duplicação de scripts
 Fazer carregamento tardio de components
 Pré carregamento dos componentes
 Quebre os componentes em vários subdominios
 Diminiua o uso de iframes
 Mantenha seus componentes abaixo de 25k

21. Otimização de CSS
 Use css sprites
 Coloque os arquívos no topo do documento
 Evite expressões no HTML
{background-color: expression((new Date().getHours()%2 ? “#00000” :
“#FFFFF”))}
 Use arquivos externos (evite inline e tag style)
 Prefira <link> ao invés de @import

22. Carregamento modular js
Utilizamos o carregamento modular do js quando precisamos de mais
performance e organização. Através do carregamento modular
podemos carregar apenas os arquivos, funções ou classes especificas
que iremos usar. Para isso podemos utilizar o Require JS.
Vantagens:
 Carregamento otimizado, não precisamos carregar tudo
 Podemos carregar apenas uma função ou classe
 Integrado com NodeJs
 Jquery incorporado
 UglifyJS para comprimir e unificar todos os js requeridos

23. Carregamento modular js
O requireJS trabalha de forma simples, apenas uma função chamada
“require(“file”, function)”.
O grande diferencial é que o arquivo será carregado somente quando
você precisar.
require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
//the jquery.alpha.js and jquery.beta.js plugins have
been loaded.
$(function() {
$('body').alpha().beta();
});
});

24. HTML5 Boilerplate
O HTML5 boilerplate é um conjunto de boas práticas para você iniciar
o seu projeto otimizado em HTML5. Com ele você tem um arquivo
.htaccess totalmente configurado para trabalhar da melhor maneira
possível, além disso também contamos com:
 Suporte cross-browser
 Compatibilidade com browsers legados
 Estrutura padrão de um documento HTML5 otimizado
 Estrutura padrão para criação de plug-ins js
 Estutura padrão para css cross-browser

25. Ferramentas de diagnostico
Com as ferramentas de diagnostico podemos saber como está o fluxo
de nossas aplicações, além de sabermos exatamente quais arquivos
ou recursos estão deixando o site lento. Aqui vai uma lista dos mais
populares:
 Chrome Developer Tools – Para debugação do js, analise de recursos e
elementos
 Firebug – Para debugação do js, analise de recursos e elementos
 GzipTest – Verifica se determinado domínio usa GZIP
 HTTP Analysis Tools – Diversas ferramentas de analise, como
compressão, cache, invalid caches
 Page Speed – Verifica se sua aplicação segue as diretrizes de um site
otimizado

26. Dúvidas?

27. Bibliografia
 Coding Smashing - http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-
sprites-techniques-tools-and-tutorials/
 Yahoo Developers -
http://developer.yahoo.com/everything.html?category=all&view=detail
 Caesium - http://sourceforge.net/projects/caesium/
 Yahoo User Interface Library - http://yuilibrary.com/
 Google Developers - https://developers.google.com/
 Require JS - http://requirejs.org
 HTML5 Biolerplate - http://html5boilerplate.com/