Paginas web carregarem mais rapido

[Jefrey 0]

Ola, masters!

Seguinte, criei um site para a escola e, como eh meu ultimo ano la, queria deixar minha marca: um site fod...!

Ate aqui, tudo bem. O site esta legal, sem problemas, tal, etc.

Porem, para facilitar a utilizaçao do moderador, "enfeitei" todo o painel de controle, para ficar mais facil. Abusei de jQuery, iFrame, graficos e varios pecados do desenvolvedor. Para terem uma ideia, nao criei uma caixa de alerta normal, todos eu fiz em jQuery. E nisso eu me ferrei tive problemas.

Dai, os moderadores começaram a falar que nao conseguiam entrar no painel, outras entraram, mas com demora e lentidao, e eu so abri porque minha net e rapida, mas mesmo assim ficou lento. Para se ter uma ideia, o pacote total ficou em 3 MB e meio, mas tudo muito util.

Entao, sai procurando em baixo de cada pedra, uma maneira de compressar o codigo. Criptografia nao deu certo (pois tinha PHP no meio do codigo). Teve um programinha que compressou um pouco, mas nao foi o suficiente. Uns camaradas falaram para eu colocar isso no final do codigo:

<?php exit; ?>

Mas nao adiantou praticamente nada.

 

O que eu to precisando e de um bom compressor de paginas web, ou codificador (criptografador) que suporte PHP tambem. Quais os mais utilizados?

[criatividade zero 17]

o php pode nao conter erro, mas um js ruim pode ser fatal e obstrusivo, css com codigos redundantes...

iFrame...???

qual finalidade?

quais bibliotecas js você esta usando? chama todas de uma vez ou cada uma na sua hora?

[William Bruno 1501]

cara.. faz um teste..

 

desabilita todos os scripts javascript.

 

se tiver com o Firefox, instala o WebDeveloper, ai vai aparecer uma barra.

primeiro item: Desabilitar > Desabilitar JavaScript > Todo Javascript

 

dê F5, e navegue pelo site.

 

se continuar lento, então o problema está no php.

reveja as consultas e os códigos.

 

ficar 'remendando', e comprimindo, não vai 'resolver', mas talvez mascarar.

[Jefrey 0]

eh, com o php ta tudo bem mesmo, sao os codigos de sempre.

o problema eu acho que e mesmo no JS (eu uso jQuery). o menu principal eh em abas (desculpe, meu teclado ta desconfigurado).

as coisas feitas com jQuery (o menu em abas, as caixas de mensagens, os botoes, etc...) utilizam um tema feito no themeroller.

iFrame, eu sei que e errado, mas e por uma questao de leveza. ao inves de abrir pagina por pagina diferente, eu direciono (target) os links para o iFrame, que possui transparencia ligado (allowtransparence="true").

ali deve ser ou o JS ou o CSS. eu preciso de um optimizador, compressor de codigos. conhece algum?

[wolfphw 60]

O seu site inteiro ficou com 3mb, ou apenas 1 arquivo ficou com esse tamanho?

[William Bruno 1501]

ali deve ser ou o JS ou o CSS. eu preciso de um optimizador, compressor de codigos. conhece algum?

 

é fácil achar vários.

 

porém, repito: Não será o compressor que vai deixar o teu site mais rápido (a ponto tão notável), pelo menos nessa escala que ele parecer ter.

http://www.csscompressor.com/

 

 

faça o teste que eu indiquei.

[Jefrey 0]

william, obrigado pela atencao.

eu fiz oq você me recomendou. demorei um pouco para achar o WebDeveloper, mas achei. desabilitei o JavaScript e a pagina abriu mais rapidamente (velocidade normal). o problema, entao, esta no JavaScript (jQuery).

oq vcs me recomendam agora para resolver o problema? vejo tantos sites exagerando ainda mais no jQuery, e que nao ficam (tao) lentos (soh um pouquinho). mas o codigo esta com os nomes das funcoes e objetos representados apenas por combinacoes de duas letras. tem algum programa que compresse o codigo pra mim?

[William Bruno 1501]

beleza... então esquece essa de comprimir.

 

se você comprimir css, js.. vai ficar mais rápido para baixar, e não no desempenho.

no caso, você cometeu algum erro grave.

 

como você desabilitou o suporte, o 'download' do script ainda ocorre. Porém ele só não é interpretado.

e se ficou mais rápido, está provado, que não vai ser 'comprimindo' que vai resolver. O problema não está no tamanho dos arquivos, mas em como eles foram usados.

 

habilite novamente o suporte a javascript.

comente todos os scripts, deixe apenas o da lib jQuery.

 

depois vá descomentando um por um, até achar qual é que está causando a lentidão.

[criatividade zero 17]

o problema nao é ter 1000 js - apos a 1ª visita, o navegador cria o cache

a questao é o que contem esses JS

 

MUITOS efeitos são enormes e tem muita coisa desnecessaria que pode tornar obstrusivo

[Jefrey 0]

O seu site inteiro ficou com 3mb, ou apenas 1 arquivo ficou com esse tamanho?

 

nao, cara! ai ja ta querendo demais! kkk

todo o painel de controle ficou com 3mb (sem incluir o site, mas ele esta normal).

 

beleza... então esquece essa de comprimir.

 

se você comprimir css, js.. vai ficar mais rápido para baixar, e não no desempenho.

no caso, você cometeu algum erro grave.

 

como você desabilitou o suporte, o 'download' do script ainda ocorre. Porém ele só não é interpretado.

e se ficou mais rápido, está provado, que não vai ser 'comprimindo' que vai resolver. O problema não está no tamanho dos arquivos, mas em como eles foram usados.

 

habilite novamente o suporte a javascript.

comente todos os scripts, deixe apenas o da lib jQuery.

 

depois vá descomentando um por um, até achar qual é que está causando a lentidão.

 

mas (desculpe pela ignorancia), oq causaria uma lentidao? neste projeto, pela primeira vez, nao uso javascript sem jQuery. trabalho mais eh com PHP. estou organizando a pagina principal e jaja posto o codigo (algumas partes, que interessam). mas, obrigado pelo apoio!

 

o problema nao é ter 1000 js - apos a 1ª visita, o navegador cria o cache

a questao é o que contem esses JS

 

MUITOS efeitos são enormes e tem muita coisa desnecessaria que pode tornar obstrusivo

 

como disse, vou postar os codigos. obrigado!

 

Algumas partes do codigo:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="pt-br">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Painel de controle</title>
<link rel="stylesheet" href="./cupertino/jquery.ui.all.css" type="text/css">
<link rel="stylesheet" href="./adm.css" type="text/css">
<link rel="stylesheet" href="./painel.css" type="text/css">
<script type="text/javascript" src="./jquery-1.4.2.min.js"></script> ---------------------
<script type="text/javascript" src="./jquery.ui.core.min.js"></script>                      |
<script type="text/javascript" src="./jquery.ui.widget.min.js"></script>                   |   aqui chamo varios templates
<script type="text/javascript" src="./jquery.ui.mouse.min.js"></script>                   |    para coisas que usarei
<script type="text/javascript" src="./jquery.ui.sortable.min.js"></script>                |   no jQuery, como botoes
<script type="text/javascript" src="./jquery.ui.tabs.min.js"></script>                       |    caixas de alerta e abas
<script type="text/javascript" src="./jquery.ui.button.min.js"></script> ----------------|
<script type="text/javascript">
$(document).ready(function()
{
   var jQueryTabs1Opts =
   {
      fx:
      {
         opacity: 'toggle',
         duration: 'normal'
      },
      event: 'click',
      deselectable: 'false'
   };
   $("#jQueryTabs1").tabs(jQueryTabs1Opts).find(".ui-tabs-nav").sortable();
   $("#jQueryButton1").button();
   $("#jQueryButton2").button();
   $("#jQueryButton3").button();
   $("#jQueryButton4").button();
   $("#jQueryButton5").button();
   $("#jQueryButton6").button();
   $("#jQueryButton7").button();
   $("#jQueryButton8").button();
   $("#jQueryButton9").button();
   $("#jQueryButton10").button();
   $("#jQueryButton11").button();
});
</script>
</head>
<body>
<div id="container">
<div id="Shape1" 

style="margin:0;padding:0;position:absolute;left:55px;top:41px;width:857px;height:686px;opacity:0.55;-moz-opacity:0.55;-khtml-opacity:0.55;filter:alpha(opacit

y=55);text-align:center;z-index:12;">
<img src="images/img0001.gif" id="Shape1" alt="" title="" style="border-width:0;width:857px;height:686px"></div>
<div id="TextArt1" style="margin:0;padding:0;position:absolute;left:201px;top:57px;width:577px;height:61px;text-align:center;z-index:13;">
<img src="images/img0002.png" id="TextArt1" alt="Area restrita" title="Area restrita" style="border-width:0;width:577px;height:61px"></div>
<div id="jQueryTabs1" style="position:absolute;left:96px;top:123px;width:759px;height:102px;z-index:14">
<ul>
<li><a href="#exemplo"><span>exemplo de aba</span></a></li>
</ul>
<div style="height:62px;overflow:auto" id="exemplo">
<a href="outrapagina.php" target="main" id="jQueryButton1" style="position:absolute;left:11px;top:55px;width:167px;height:35px;z-index:0"><font 

face="Verdana" size="1">exemplo de botao</font></a>
</div>
<iframe name="main" id="main" allowtransparence="true" style="position:absolute;left:97px;top:255px;width:771px;height:432px;z-index:15;" src="" 

frameborder="0">Atualize seu navegador.</iframe>
<div id="TextArt2" style="margin:0;padding:0;position:absolute;left:665px;top:690px;width:202px;height:33px;text-align:right;z-index:16;">
<a href="http://www.jotasoft.t35.com" target="_blank"><img src="images/img0003.png" id="TextArt2" alt="Produzido por    Jefrey S. Santos" title="Produzido 

por    Jefrey S. Santos" style="border-width:0;width:202px;height:33px"></a></div>
</div>
</body>
</html>

como PHP, tenho so uma linha de include, para conectar ao bd e verificar o login, nada demais. alem, claro, das paginas que rodarao no iFrame.

postar os scripts dos templates que chamei no local indicado nem precisa, o autor os criptografou, mas muitos de nos os utilizam. portanto, nao tem problemas.

ja falaram para nao utilizar iFrame (nao so o criatividade_zero, como muitos outros), mas oq eu posso usar no lugar? como faço target para embed/object?

 

Contagem refeita depois da compressao com o programa citado anteriormente:

588 KB

(mais de 200 arquivos).

mas a demora continua (embora seja menos)

[William Bruno 1501]

deve ser do mesmo cara.. no google, achei:

http://javascriptcompressor.com/

 

cara.. não dá pra você dar uma class?

$("#jQueryButton1").button();
   $("#jQueryButton2").button();
   $("#jQueryButton3").button();
   $("#jQueryButton4").button();
   $("#jQueryButton5").button();
   $("#jQueryButton6").button();
   $("#jQueryButton7").button();
   $("#jQueryButton8").button();
   $("#jQueryButton9").button();
   $("#jQueryButton10").button();
   $("#jQueryButton11").button();

?

 

trocar por:

$('.jQueryButton').button();

[criatividade zero 17]

1º você tem que entender quais funções do JS

 

<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./jquery.ui.core.min.js"></script>             |
<script type="text/javascript" src="./jquery.ui.widget.min.js"></script>           |   aqui chamo varios templates
<script type="text/javascript" src="./jquery.ui.mouse.min.js"></script>            |    para coisas que usarei
<script type="text/javascript" src="./jquery.ui.sortable.min.js"></script>         |   no jQuery, como botoes
<script type="text/javascript" src="./jquery.ui.tabs.min.js"></script>             |    caixas de alerta e abas
<script type="text/javascript" src="./jquery.ui.button.min.js"></script>

um js pode depender de outro - isso é normal

o problema é que algumas dependencias são poluidas

ja vi js para lightbox usar varios loops para encontrar elemento, que bastava definir um parametro a mais

 

 

minha sugestão - como nao gosto de nada pronto - é que você de uma refinada nesses js ai

eu poderia usar um LB pronto com quase 800 linhas ou mais, porem montei meu lightbox com menos de 50 linhas

va eliminando o lixo dos codigos pq a maioria é muito poluido

[Jefrey 0]

esse JavaScript Compressor apenas poe todo o codigo na mesma linha, nao adianta muita coisa, mas obrigado!

Nao teria como reduzir aqueles jQueryButton por uma classe, pois eles se diferenciam um pouco demais.

Eu acho que vou deixar como esta (um pouco mais rapido depois do ultimo compressor) e colocar aquele famoso script de "carregando" em JS junto a um GIF de bolinhas girando, para que a pessoa soubesse que pelo menos nao travou. o host ser de outro pais e muito cheio influencia um pouco, nao eh?

 

1º você tem que entender quais funções do JS

 

<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./jquery.ui.core.min.js"></script>             |
<script type="text/javascript" src="./jquery.ui.widget.min.js"></script>           |   aqui chamo varios templates
<script type="text/javascript" src="./jquery.ui.mouse.min.js"></script>            |    para coisas que usarei
<script type="text/javascript" src="./jquery.ui.sortable.min.js"></script>         |   no jQuery, como botoes
<script type="text/javascript" src="./jquery.ui.tabs.min.js"></script>             |    caixas de alerta e abas
<script type="text/javascript" src="./jquery.ui.button.min.js"></script>

um js pode depender de outro - isso é normal

o problema é que algumas dependencias são poluidas

ja vi js para lightbox usar varios loops para encontrar elemento, que bastava definir um parametro a mais

 

 

minha sugestão - como nao gosto de nada pronto - é que você de uma refinada nesses js ai

eu poderia usar um LB pronto com quase 800 linhas ou mais, porem montei meu lightbox com menos de 50 linhas

va eliminando o lixo dos codigos pq a maioria é muito poluido

 

mas esses JS vieram criptografados!

[criatividade zero 17]

mas esses JS vieram criptografados!

 

pior ainda, você nem sabe o que executa e pode incluir malw.

ou foi alguem da equipe que encriptou?

se nao foi, recomendo pegar um js 'editavel', alem de seguro é facil de faze manutenção como seu caso

[Jefrey 0]

pior ainda, você nem sabe o que executa e pode incluir malw.

ou foi alguem da equipe que encriptou?

se nao foi, recomendo pegar um js 'editavel', alem de seguro é facil de faze manutenção como seu caso

foi um dos criadores que criptografou, eu baixei direto do site oficial ja criptografado. agora, acreditar se foi livre ou nao vai da confiança, ne? baixei direto do site do cara, linkado diretamente pelo site do jQuery, ja da uma confianca!

[criatividade zero 17]

pra ser sincero, digo por mim, nao passa confiança nao

 

se esta na net como 'free' então deve permitir que leia-se o conteudo, caso contrario, entende-se que ha coisas que não devem ser vistas

esse é o meu ponto de vista, nada entra no meu site sem que eu leia e saiba o que executa

 

qual é esse componente?

[Bruno Augusto 417]

Olha dificilmente haverá um JS disponibilizado gratuitamente encriptado sem que o método de descriptografia não esteja junto pois no navegador do cliente, que é onde vai ser executado o JavaScript, não vai conseguir executar algo que ele desconhece a sintaxe.

 

O que pode ter acontecido é que o desenvolvedor obfuscou o código. E é até melhor você descompactá-lo nates de usar, com esse UnPacker por exemplo.

 

Até onde sei, isso não é ilegal.

 

Agora, uma coisa que você pode fazer para deixar o site o mais leve possível para o cliente é fazer o site "passar" por dezenas de testes de performance do Firefox Add-On YSlow (requer o Firebug também).

 

Uma vez instalada, na bara de status do navegador vai aparecer um velocímetro escrito YSlow.

 

Acesse o site (pode ser local mesmo) e abra esse Painel (que roda dentro do Firebug).

 

Clica no botão Run test e em seguida na aba Grade.

 

Vão aparecer diversas categorias e a classificação do site em cada uma delas. Agora, seu objetivo é fazer as correções necessárias para que o site atinja o Grade A

 

É possível que várias categorias já estejam com A, mas o Grade se baseia no conjunto geral.

 

Aqui o Fórum, por exemplo, tem vários A's, mas o Grade é D

 

No seu caso em particular, por se tratar de muitos JavaScripts, a mais significativa das alterações será um conjunto de Minificar os Códigos (ou seja lá o que Minify significa), agrupá-los num único arquivo .JS e comprimí-los com GZIP.

 

E outra seria enxugar as imagens usadas. E para isso a ferramenta traz um link (na aba Tools) para o Yahoo Smush It, onde faz o upload das imagens, ele enxuga e te devolve o arquivo.

 

Na maioria das vezes, com imagens de layout, a imagem volta 45 ou 50% menor e sem perda de qualidade.

 

Eu também sou meio "tarado" por essas frescuradas com jQuery e, no meu caso, a coisa pode acabar indo além, pois às vezes utilizo os módulos de Orientação a Objetos da MooTools para desenvolver. Acaba que numa página simples, sem muitos plugins, tenho um JS de 200k

 

E com todas essas correções propostas, mesmo no servidor online gratuito (que normalmente é mais lento), tem uma performance decente.

 

Ufa!

[William Bruno 1501]

caras.. estamos falando do jquery.ui !

 

não é que o código 'veio criptografado', é que ele foi 'minimizado', para ter um tamanho menor, e acelerar o carregamento.

no site tem lá as versões full, e a .min

 

e qnto ao seletor ali...

é só para melhorar a chamada javascript..

 

deixa os teus botões algo como:

< ... id="jQueryButton1" class="jQueryButton" ... >
< ... id="jQueryButton2" class="jQueryButton" ... >

...

entendeu ?

[Jefrey 0]

Na verdade, estou vendo que o que acontece é que o Internet Explorer é o único navegador que não abre (só não sei a versão que os moderadores usam). Disse para abrir por qualquer outro e eles conseguiram!

[Jefrey 0]

Ah, entendi!

É porque eu usava, dentro do Iframe, uma página PHP que pegava um arquivo txt e paginava suas linhas. E, como o site ainda estava cru, o arquivo estava vazio. Dado o conflito, o servidor mandava alguma coisa inesperada e o navegador do cliente travava. Então, pulei uma linha dentro do arquivo e não trava mais (besteira minha, peço desculpas).

Bom, pelo menos, acho que o tópico não ficou em vão, pois os visitantes poderão ter dicas de como otimizar seus projetos com frameworks.

Obrigado a todos.

Mas, por enquanto, não vou dar o tópico como resolvido. Pelo contrário, vou pedir para que postem dicas de otimização de websites, tais como formatos de imagens, strings desnecessárias e outras melhorias assim.