More Related Content Similar to Palestra: Otimização de websites Similar to Palestra: Otimização de websites (20) Palestra: Otimização de websites3. PAUTA
O que é otimização de websites?
Como diagnosticar um site?
Quais são as técnicas que devem ser utilizadas?
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
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)})}
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; }
17. HTML
Comprimir com PHP
ob_start();
...</header> ob_flush(); <body></body></html>
$html = ob_get_clean ();
echo preg_replace('/s+/', ' ', $html);
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