[WEB-DESIGN] Otimizando seu carregamento do seu site com Yslow

[joaopaulo]

Olá Pessoal,

Alguns de vocês devem já conhecer o Yslow, que nada mais é do que uma ferramenta de sugestões e análise de páginas web para otimizar o tempo de resposta e carregamento das mesmas. Um site criado levando em consideração as regras do Yslow, tem um desempenho significativamente maior para seu cliente, a partir da 2a vez que ele entrar no site ou a partir da segunda página que ele visitar no site...

Como usar o Yslow?

1o. Passo: Para ser usado, você deve instalar o Firebug em seu Firefox: https://getfirebug.com/downloads/

2o. Passo: É necessário instalar o complemento Yslow para o Firebug:

https://addons.mozilla.org/pt-br/firefox/addon/yslow/

3o. Passo: Reinicie o Firefox;

Pronto, instalado!

Para usar o Yslow, é muito simples: Basta clicar no ícone na barra de Status no canto inferior direito:

E depois... conferir a pontuação de seu site:

O pulo do gato: Antes de conferir a pontuação de seu site, geralmente seu browser pode ter já um cache de alguns arquivos... aí para ter um valor exato, é necessário limpa-lo. Para isso, faça via Firebug mesmo...

1º Pulo: Clique em Yslow no canto inferior;

2º Pulo: Clique na aba "Rede";

3º Pulo: Recarregue a página em questão(aperte F5) e clique em "Limpar";

4º Pulo: Repita os 2o e 3o passos da primeira imagem deste post.

Pronto, agora você tem sua pontuação exata.

Agora vem a pergunta: João, como aumentar minha pontuação?

Minha resposta é simples: Há várias maneiras, vou listar as 3 que influenciam mais no resultado:

1ª Solução: Otimizando seus links via aplicação, ou seja, colocando as imagens com endereços absolutos(http://meusite.com/minhaimagem.jpg) e evitar a todo custo caminhos relativos('minhaimagem.jpg');

2ª Solução: Diminuir número de requisições HTTP: basta diminuir o número de arquivos .JS, .CSS e imagens que são utilizadas no template.

Para diminuir as requisções .JS e .CSS, basta juntar todos os arquivos .CSS ou todos arquivos .JS e fazer deles um só. Por exemplo, se você usa o Jquery + a biblioteca UI, seriam essas as requisiçoes:

-->jquery.js

-->jqueryui.js

---->ui/effects.js

---->ui/effects.hightlight.js

---->ui/accordion.js

---->ui/datepicker.js

---->ui/dialog.js

---->ui/draggabble.js

---->ui/droppabble.js

---->ui/progressbar.js

---->ui/resizable.js

---->ui/slider.js

etc...

Só aqui foram 11 requisições HTTP apenas para carregar os Javascripts. Poderia ser dimuida para apenas 2 requisições:

-->jquery.js

-->jqueryui.js

Basta pegar todo o conteudo dos demais arquivos e juntar com o do jqueryui.js. Enfim, é isso.

Quanto as imagens de fundo do website, basta usar CSS Sprites: http://maujor.com/tutorial/css-sprites.php

3ª Solução: Usar um arquivo .htaccess para comprimir páginas via gzip, setar tempo de cache, etc....

Bom, como o arquivo .htaccess já sugerido ajuda em muito a pontuação(+/- 20 a 35 pontos), disponibilizo aqui um arquivo desses já previamente configurado que de certa forma, aumentou para isso aqui a pontuação de um website próprio:

O .htaccess em questão:

################################################################################

#           OTIMIZAÇÃO DE SITE COM MÉTRICA DO YSLOW BY JOAOPAULO

#                       WWW.PORTALDOHOST.COM.BR/FORUM

#                                   2011

#                   PARA DUVIDAS, CONTATE O AUTOR VIA FÓRUM

################################################################################


#-------------------------------------------------------------------------------

#Ativa tempo de expirar o cache

#-------------------------------------------------------------------------------

ExpiresActive On

ExpiresDefault "access plus 1 year"


#-------------------------------------------------------------------------------

#Aumenta a velocidade do cache

#-------------------------------------------------------------------------------

FileETag MTime Size


#-------------------------------------------------------------------------------

#Configura 1 ano de cache e controle de cache especifico para arquivos de texto

#-------------------------------------------------------------------------------

<FilesMatch "\.(js|css|ico|txt|htm|html)$">

   ExpiresDefault A31536000

   Header append Cache-Control "proxy-revalidate"

</FilesMatch>

#-------------------------------------------------------------------------------

#Configurar 1 ano de cache para arquivos de midia

#-------------------------------------------------------------------------------

<FilesMatch "\.(gif|jpg|jpeg|png|swf|flv|pdf)$">

   ExpiresDefault A31536000

   Header append Cache-Control "public"

</FilesMatch>


#-------------------------------------------------------------------------------

#Configura o mod_deflate para arquivos de texto e estáticos gerais

#-------------------------------------------------------------------------------

<FilesMatch "\.(js|css|ico|txt|htm|html|php)$">

   SetOutputFilter DEFLATE

</FilesMatch>


#-------------------------------------------------------------------------------

#Filtra as saídas de conteúdo para alguns browser específicos

#-------------------------------------------------------------------------------

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4.0[678] no-gzip

BrowserMatch bMSIE !no-gzip !gzip-only-text/html


#-------------------------------------------------------------------------------

#Ativa o uso de Etags

#-------------------------------------------------------------------------------

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">

Header set Expires "Thu, 15 Apr 2012 20:00:00 GMT"

Header unset ETag

FileETag None

</FilesMatch>

Download do arquivo: [ATTACH]126[/ATTACH]

Para quem usa o Smarty Templater, coloque o arquivo na pasta onde estão as chamadas do template e não nas pastas do template.

Para quem usa Rewrite-rules, basta adicionar o conteúdo de seu arquivo ao final desse ou vice-versa.

Abraços!

htaccess.zip

[Rocha Neto]

JP o post foi duplicado /showthread.php?t=3333 e /showthread.php?t=3334 ;)

[joaopaulo]

JP o post foi duplicado /showthread.php?t=3333 e /showthread.php?t=3334 ;)

Sim, já resolvi... eu havia clicado no lugar errado(ao inves de "visualizar post" cliquei em "enviar")...

Abraços

[positivo]

muito bom vou tentar faser isso vou ver se da certo.:D

[Ruan]

Muito obrigado João, fiz aqui e funcionou! A pontuação foi de 65 para 76 só com o arquivo .htaccess. Depois com mais calma irei fazer as sugestões 1 e 2.

[joaopaulo]

Muito obrigado João, fiz aqui e funcionou! A pontuação foi de 65 para 76 só com o arquivo .htaccess. Depois com mais calma irei fazer as sugestões 1 e 2.

Olhe, para ainda continuar com tão poucos pontos assim, algumas coisas devem estar bem erradas... mande via mp o link de seu site que dou umas sugestoes.

[joaopaulo]

Lembrando que o Google também tem o candidato dele chamado Page Speed. Parabéns pelas dicas, JP!!!

Eu particularment gosto muito do PageSpeed, mas considero que se um site estiver acima de 90 no Yslow, já está ótimo. O PageSeed tem muito mais análises que o Yslow, por isso gosto mais dele, pois ele é mais claro e tem uma wiki melhor sobre como arrumar seu site em cada sugestão fornecida...

Se voce ter tempo e for perfeccionista, o PageSpeed é a melhor solução :D.

[wakehosting]

Ótimo tutorial, já vou começar a optimizar meu site