Ir para conteúdo
View in the app

A better way to browse. Learn more.

Portal do Host

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

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

Featured Replies

Postado

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


Postado

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


Postado
  • Autor
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


Postado

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


Postado

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.


Postado
  • Autor
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.


Postado
  • Autor
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.


Postado

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


Visitante
Este tópico está impedido de receber novos posts.

Quem Está Navegando 0

  • Nenhum usuário registrado visualizando esta página.

Informação Importante

Concorda com os nossos termos?

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.