Otimização de 
Websites 
CAIQUE MONTEIRO ARAUJO, INTRUS
Gestor de 
Design 
Desenvolvedor 
Técnico- 
Operacional 
Gestor de TI 
QUEM SOU EU
PAUTA 
O que é otimização de websites? 
Como diagnosticar um site? 
Quais são as técnicas que devem ser utilizadas?
OTIMIZAÇÃO 
Porque devemos otimizar? 
FONTE 
http://viverdeblog.com/otimizacao-de-sites/
DIAGNÓSTICO 
PageSpeed Insights
TÉCNICAS 
Compressão (GZIP) 
JavaScript / CSS / HTML / PHP 
Imagens / Sprites 
Cache do Navegador
COMPRESSÃO (GZIP) 
Servidor 
Habilitar GZIP (MOD_DEFLATE) 
.htaccess 
Para Apache/Linux
COMPRESSÃO (GZIP) 
.htaccess 
<IfModule mod_deflate.c> 
AddOutputFilterByType DEFLATE (tipo) 
AddType (tipo de arquivo) (e...
COMPRESSÃO (GZIP) 
Verificar compressão 
http://www.port80software.com/support/p80tools.asp
JAVASCRIPT 
Comprimir arquivo 
http://jscompress.com/
JAVASCRIPT 
Original 
function lerProduto (codigo) 
{ 
$.ajax( { 
type: "POST", 
url: "lerproduto.php", 
data: { codigo: c...
JAVASCRIPT 
Boas práticas 
Manter código original com comentários em 
documento externo
CSS 
Comprimir arquivo 
http://www.cssdrive.com/index.php/main/csscompressor/
CSS 
Original 
h1 
{ 
font-size: 7.6em; 
letter-spacing: 0em; 
margin: 0; 
padding: 0; 
font-family: "Fira Sans"; 
text-al...
CSS 
Boas práticas 
ident { desenho ; formatação ; fonte ; outros } 
footer { width: 100%; background-color: #222; 
paddin...
HTML 
Comprimir arquivo 
https://code.google.com/p/htmlcompressor/
HTML 
Comprimir com PHP 
ob_start(); 
...</header> ob_flush(); <body></body></html> 
$html = ob_get_clean (); 
echo preg_r...
IMAGENS 
JPG 
jpegtran –optimize origem.jpg > destino.jpg 
PNG 
pngout origem.png destino.png
SPRITES 
Uso de Background/CSS 
.sprite {background:url(sprite.png)} 
.nome {background-position: x y; width:largura; 
hei...
CACHE DO NAVEGADOR 
.htaccess 
<IfModule mod_headers.c> 
Header unset ETag 
</IfModule> 
FileETag None
CACHE DO NAVEGADOR 
.htaccess 
<IfModule mod_expires.c> 
ExpiresActive on 
ExpiresDefault "access plus 1 (tempo)" 
Expires...
E AGORA?
FIM 
AGRADEÇO A TODOS PELA ATENÇÃO : )
Próximos SlideShares
Carregando em…5
×

Palestra: Otimização de websites

276 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
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
276
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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 : )

×