O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Palestra: Otimização de websites

284 visualizações

Publicada em

Uma breve palestra sobre a otimização de websites. Serão demonstradas algumas técnicas para otimizar a velocidade de carregamento de um website.

Vídeo explicativo: http://youtu.be/cvLNWIuc3RQ

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Palestra: Otimização de websites

  1. 1. Otimização de Websites CAIQUE MONTEIRO ARAUJO, INTRUS
  2. 2. Gestor de Design Desenvolvedor Técnico- Operacional Gestor de TI QUEM SOU EU
  3. 3. PAUTA O que é otimização de websites? Como diagnosticar um site? Quais são as técnicas que devem ser utilizadas?
  4. 4. OTIMIZAÇÃO Porque devemos otimizar? FONTE http://viverdeblog.com/otimizacao-de-sites/
  5. 5. DIAGNÓSTICO PageSpeed Insights
  6. 6. TÉCNICAS Compressão (GZIP) JavaScript / CSS / HTML / PHP Imagens / Sprites Cache do Navegador
  7. 7. COMPRESSÃO (GZIP) Servidor Habilitar GZIP (MOD_DEFLATE) .htaccess Para Apache/Linux
  8. 8. COMPRESSÃO (GZIP) .htaccess <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE (tipo) AddType (tipo de arquivo) (extensão) </IfModule> text/plain text/html text/css text/javascript application/javascript image/x-icon .ico image/png .png
  9. 9. COMPRESSÃO (GZIP) Verificar compressão http://www.port80software.com/support/p80tools.asp
  10. 10. JAVASCRIPT Comprimir arquivo http://jscompress.com/
  11. 11. JAVASCRIPT Original function lerProduto (codigo) { $.ajax( { type: "POST", url: "lerproduto.php", data: { codigo: codigo } } ).done( function ( r ) { $("div#produto").html( r ); }); } Comprimido function lerProduto(e){$.ajax({type:"POST",url:"lerprodut o.php",data:{codigo:e}}).done(function(e){$("div #produto").html(e)})}
  12. 12. JAVASCRIPT Boas práticas Manter código original com comentários em documento externo
  13. 13. CSS Comprimir arquivo http://www.cssdrive.com/index.php/main/csscompressor/
  14. 14. CSS Original h1 { font-size: 7.6em; letter-spacing: 0em; margin: 0; padding: 0; font-family: "Fira Sans"; text-align: center; } Comprimido h1{font-size:7.6em;letter-spacing: 0em;margin:0;padding:0;font-family:" Fira Sans";text-align:center}
  15. 15. CSS Boas práticas ident { desenho ; formatação ; fonte ; outros } footer { width: 100%; background-color: #222; padding: 18em 0em 18em 0em; margin: 0em; font-family:" Fira Sans"; font-size:7.6em; letter-spacing: 0em; text-align:center; color: #FFF; }
  16. 16. HTML Comprimir arquivo https://code.google.com/p/htmlcompressor/
  17. 17. HTML Comprimir com PHP ob_start(); ...</header> ob_flush(); <body></body></html> $html = ob_get_clean (); echo preg_replace('/s+/', ' ', $html);
  18. 18. IMAGENS JPG jpegtran –optimize origem.jpg > destino.jpg PNG pngout origem.png destino.png
  19. 19. SPRITES Uso de Background/CSS .sprite {background:url(sprite.png)} .nome {background-position: x y; width:largura; height:altura} class=“sprite nome”
  20. 20. CACHE DO NAVEGADOR .htaccess <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None
  21. 21. CACHE DO NAVEGADOR .htaccess <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 (tempo)" ExpiresByType (tipo) "access plus 1 (tempo)" </IfModule> text/plain text/html text/css text/javascript application/javascript second(s) hour(s) day(s) week(s) month(s) year
  22. 22. E AGORA?
  23. 23. FIM AGRADEÇO A TODOS PELA ATENÇÃO : )

×