Otimização de aplicações webÍTALO LELIS DE VIETRO

JOÃO DE ARAÚJO NETO

O que iremos ver?

Entendendo a otimização

Organizando o server-side

GZIP

Headers Etags

Caching

Reduzindo a quantidade de requests

Minificar e mesclar css e js Yahoo CLI

Otimização de imagens Css Sprite

Organização do HTML

Otimização do CSS

Carregamento modular js

HTML5 Boilerplate

Ferramentas de diagnostico

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.

Configurando nossa aplicaçãoOTIMIZANDO A APLICAÇÃO

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

Como configuramos nossos servidores para utilizar o gzip? Muito simples, basta informarmos ao .htaccess que queremos utiliza-lo. Exemplo:

O Gzip é um software para compressão e descompressão de arquivos. Ele é altamente utilizado em websites para aumentar a performance.

Sites que utilizam o o Gzip podem ser até 80% mais rápidos.

  # Compress all output labeled with one of the following MIME-types  <IfModule mod_filter.c>    AddOutputFilterByType DEFLATE application/atom+xml \                                  application/javascript \                                  application/json \                                  application/rss+xml \                                  application/vnd.ms-fontobject \                                  application/x-font-ttf \                                  application/xhtml+xml \                                  application/xml \                                  font/opentype \                                  image/svg+xml \                                  image/x-icon \                                  text/css \                                  text/html \                                  text/plain \                                  text/x-component \                                  text/xml  </IfModule>

Configure o cache Configure as Etags

Invalide o cache

Defina o tempo de cache para cada tipo de arquivo

Faça as requisições Ajax com cache

Muitas vezes pensamos que o browser do cliente irá fazer o cache automático de nossa aplicação, mas precisamos informa-lo de como fazer o cache da maneira correta.

Para isso utilizamos os recursos de headers.

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 não.

O problema das Etags é que elas são geradas para um único servidor sendo inviável valida-la em outro servidor

A melhor solução então é cancelar o uso da Etag, dessa forma o browser não irá verificar o componente. Isso trás uma performance significativa para o website

# FileETag None is not enough for every server.<IfModule mod_headers.c>  Header unset ETag</IfModule>

# Since we're sending far-future expires, we don't need ETags for# static content.# developer.yahoo.com/performance/rules.html#etagsFileETag None

Invalide o cache

Invalidar o cache também é uma ótima estratégia para alteração de conteúdo.

Podemos utilizar uma estratégia de versionamento de componentes, assim o servidor saberá quando um arquivo foi alterado e precisa ser recarregado.

Utilize helpers server-side para versionamento dos arquivos.

<link rel=“stylesheet” src=“http://domain.com/style.css?v=1”>

<link rel=“stylesheet” src=“http://domain.com/normalize.css?v=1”>

Defina o tempo de cache para cada tipo de arquivo

O famoso Expires dos servidores é uma das melhores soluções para controle de cache

Utilizamos diversos “tempos” diferentes para cada tipo de arquivo, por exemplo, arquivos como imagem

<IfModule mod_expires.c>  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.  ExpiresDefault "access plus 1 month"

# Your document html  ExpiresByType text/html "access plus 0 seconds“

# Data  ExpiresByType text/xml "access plus 0 seconds"  ExpiresByType application/xml "access plus 0 seconds"  ExpiresByType application/json "access plus 0 seconds"

# Favicon (cannot be renamed)  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>

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.

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:

• O arquivo é escrito normalmente

Arquivos js/css normais

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

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

ExemplosComo as ferramentas funcionam

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

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

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

Boas práticasAPRENDENDO AS BOAS PRATICAS DA OTIMIZAÇÃO WEB

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

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

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

Carregamento modular js

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {

//the jquery.alpha.js and jquery.beta.js plugins have been loaded.

$(function() {

$('body').alpha().beta();

});

});

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.

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

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

Dúvidas?

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/