Otimização de aplicações web

  • 708 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
708
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Otimização deaplicações webÍTALO LELIS DE VIETROJOÃ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çãoOTIMIZANDO 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 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. 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. 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 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. 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 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. 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. ExemplosComo 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 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. Boas práticasAPRENDENDO 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/