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         Otimiz...
Entendendo a otimização As aplicações web estão cada vez mais robustas, muitas delas recebem milhões de usuários por dia, ...
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 confi...
Como configuramos nossos servidores para                                        utilizar o gzip? Muito simples, basta     ...
Configure o cache                                          Configure as EtagsMuitas vezes pensamos que obrowser do client...
ETags    A Etag é um mecanismo para     identificação de um componente     em cache. Em outras palavras um     componente...
Invalide o cache    Invalidar o cache também é uma     ótima estratégia para alteração     de conteúdo.    Podemos utili...
Defina o tempo de cache paracada tipo de arquivo                     <IfModule mod_expires.c>                             ...
Reduzindo as requisições Reduzir a quantidade de requisições que a aplicação faz para nossos servidores é uma ótima soluçã...
Minificar e mesclar js e css Essa estratégia é considerada uma das melhores para obtermos uma boa performance, o problema ...
Ferramentas para comprimirarquivos    YUI Compressor – Ferramenta de Yahoo que promete ser a mais     segura e eficiente ...
Ferramentas para unificar arquivos Normalmente essas ferramentas são executadas em tempo de execução, elas comprimem e uni...
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...
Css Sprite Sprite é uma imagem que contém outras imagens dentro dela, onde nós podemos pega-las através do css e manipula-...
Ferramentas para compressão deimagens e criação de sprites    Caesium – Promete comprimir imagens em até 90%    Smush.it...
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 mes...
Otimização de CSS    Use css sprites    Coloque os arquívos no topo do documento    Evite expressões no HTML      {back...
Carregamento modular js Utilizamos o carregamento modular do js quando precisamos de mais performance e organização. Atrav...
Carregamento modular js O requireJS trabalha de forma simples, apenas uma função chamada “require(“file”, function)”. O gr...
HTML5 Boilerplate O HTML5 boilerplate é um conjunto de boas práticas para você iniciar o seu projeto otimizado em HTML5. C...
Ferramentas de diagnostico Com as ferramentas de diagnostico podemos saber como está o fluxo de nossas aplicações, além de...
Dúvidas?
Bibliografia    Coding Smashing - http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-     sprites-technique...
Upcoming SlideShare
Loading in...5
×

Otimização de aplicações web

786

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
786
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Otimização de aplicações web

  1. 1. Otimização deaplicações webÍTALO LELIS DE VIETROJOÃO DE ARAÚJO NETO
  2. 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. 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. 4. Configurando nossa aplicaçãoOTIMIZANDO A APLICAÇÃO
  5. 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. 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. 7. 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.
  8. 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 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
  9. 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. 10. 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>
  11. 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. 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. 13. 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
  14. 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. 15. ExemplosComo as ferramentas funcionam
  16. 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. 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. 18. 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
  19. 19. Boas práticasAPRENDENDO AS BOAS PRATICAS DA OTIMIZAÇÃO WEB
  20. 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. 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. 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. 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. 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. 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. 26. Dúvidas?
  27. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×