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.
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.
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
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
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