Upcoming SlideShare
Palestra: Otimização de websites
- 1. Otimização de Websites CAIQUE MONTEIRO ARAUJO, INTRUS
- 2. Gestor de Design Desenvolvedor Técnico- Operacional Gestor de TI QUEM SOU EU
- 3. PAUTA O que é otimização de websites? Como diagnosticar um site? Quais são as técnicas que devem ser utilizadas?
- 4. OTIMIZAÇÃO Porque devemos otimizar? FONTE http://viverdeblog.com/otimizacao-de-sites/
- 5. DIAGNÓSTICO PageSpeed Insights
- 6. TÉCNICAS Compressão (GZIP) JavaScript / CSS / HTML / PHP Imagens / Sprites Cache do Navegador
- 7. COMPRESSÃO (GZIP) Servidor Habilitar GZIP (MOD_DEFLATE) .htaccess Para Apache/Linux
- 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. COMPRESSÃO (GZIP) Verificar compressão http://www.port80software.com/support/p80tools.asp
- 10. JAVASCRIPT Comprimir arquivo http://jscompress.com/
- 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. JAVASCRIPT Boas práticas Manter código original com comentários em documento externo
- 13. CSS Comprimir arquivo http://www.cssdrive.com/index.php/main/csscompressor/
- 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. 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. HTML Comprimir arquivo https://code.google.com/p/htmlcompressor/
- 17. HTML Comprimir com PHP ob_start(); ...</header> ob_flush(); <body></body></html> $html = ob_get_clean (); echo preg_replace('/s+/', ' ', $html);
- 18. IMAGENS JPG jpegtran –optimize origem.jpg > destino.jpg PNG pngout origem.png destino.png
- 19. SPRITES Uso de Background/CSS .sprite {background:url(sprite.png)} .nome {background-position: x y; width:largura; height:altura} class=“sprite nome”
- 20. CACHE DO NAVEGADOR .htaccess <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None
- 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. E AGORA?
- 23. FIM AGRADEÇO A TODOS PELA ATENÇÃO : )
Login to see the comments