Otimização de aplicações web
Upcoming SlideShare
Loading in...5
×
 

Otimização de aplicações web

on

  • 1,056 views

 

Statistics

Views

Total Views
1,056
Views on SlideShare
1,056
Embed Views
0

Actions

Likes
2
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Otimização de aplicações web Otimização de aplicações web Presentation Transcript

  • Otimização deaplicações webÍTALO LELIS DE VIETROJOÃO DE ARAÚJO NETO
  • 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
  • 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: # 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>
  • Configure o cache  Configure as EtagsMuitas vezes pensamos que obrowser do cliente irá fazer o cache  Invalide o cacheautomático de nossaaplicação, mas precisamos informa-  Defina o tempo de cache paralo de como fazer o cache da cada tipo de arquivomaneira correta.Para isso utilizamos os recursos de  Faça as requisições Ajax com cacheheaders.
  • 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 were sending far-future expires, we dont 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
  • 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.
  • Defina o tempo de cache paracada 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>
  • 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: 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
  • Ferramentas para comprimirarquivos  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 deimagens 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 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(); }); });
  • 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/