Clicky

Jump to content
  • Sign Up
Sign in to follow this  
joaopaulo

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

Recommended Posts

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:

9210242fc8f2e093a1b1b1f715e0d0c76f7ea66.jpg

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

9210311046e9527cff209d698f6eb6cef1db6f4.jpg

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:

9210947856072da6e82854691e934e3903e7959.jpg

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


Não respondo dúvidas em particular, nem via msn, bilhete elegante, PM, foto de mulher bonita no perfil, telegrama, pombo correio, sinal de fumaça, dança da chuva, fogueira, ou qualquer outra forma válida e/ou bizarra. Pergunte no fórum assim todos podem compartilhar a pizza.

Share this post


Link to post
Share on other sites
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


Não respondo dúvidas em particular, nem via msn, bilhete elegante, PM, foto de mulher bonita no perfil, telegrama, pombo correio, sinal de fumaça, dança da chuva, fogueira, ou qualquer outra forma válida e/ou bizarra. Pergunte no fórum assim todos podem compartilhar a pizza.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.


Não respondo dúvidas em particular, nem via msn, bilhete elegante, PM, foto de mulher bonita no perfil, telegrama, pombo correio, sinal de fumaça, dança da chuva, fogueira, ou qualquer outra forma válida e/ou bizarra. Pergunte no fórum assim todos podem compartilhar a pizza.

Share this post


Link to post
Share on other sites
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.


Não respondo dúvidas em particular, nem via msn, bilhete elegante, PM, foto de mulher bonita no perfil, telegrama, pombo correio, sinal de fumaça, dança da chuva, fogueira, ou qualquer outra forma válida e/ou bizarra. Pergunte no fórum assim todos podem compartilhar a pizza.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.




×
×
  • Create New...