Ottimizzazione codice Html

[piercing]

a parte che ASP.NET fa delle cose stupefacenti in questo senso... (anche se come sistema non mi piace per nulla... ma sono un "vecchio stampo")... che pare proprio non ricarichi nulla...

cmq utilizzando piccoli frames l'effetto sembra davvero immediato...
puoi dare un'occhiata qui (usa explorer), nel frame con le combo che si autosettano a seconda dei valori presenti nel DB, in modo di non ritornare mai query vuote...
tanto per fare un esempio di quello che voglio dire...

esistono tanti metodi... anche l'XML aiuterebbe a superare problematiche di questo tipo...

la leggerezza delle pagine è cmq un elemento fondamentale di usabilità!

[Swalke]

Eh si, 30 secondi sono davvero troppi!

Le altre pagine ce ne mettono sui 15 che per un sito in grafica è accettabile. Nel senso che ho girato su internet e i siti di questo genere vanno dai 15 ai 20. Se invece date un’occhiata ai siti hard scoprirete che qui ci si avvicina anche al minuto!!!

La mia home invece attualmente ci impiega sui 30 secondi e ora vi do i tempi suddivisi per argomenti:

Tutte le immagini: 13 secondi. Ho già ottimizzato più che potevo sia a livello di compressione sia ripetendo le stesse immagini dove possibile e adottando su certi sfondi la tecnica del singolo pixel di larghezza.

Codice ASP: 2 secondi. Comprende la visualizzazione degli ultimi post del forum, gli utenti in linea, gli utenti in chat e un messaggio scorrevole.

Java Script (esterno e interno): 10 secondi. Comprende controlli, preload, openwindow ma soprattutto la creazione di uno slide a scomparsa che visualizza la descrizione di una serie di link “preferiti” quando si passa sopra a uno di questi col mouse. La lista di link è cospicua quindi le descrizioni occupano un po’ di byte.

Codice html e css: 9 secondi. Comprende anche tutto il testo della pagina.

Lo so, ora mi direte che una pagina così non sarà mai visitata, che gli utenti non aspettano il caricamento e così via.
Queste cose le so già anche io e non avrei mai creato un sito del genere se fosse stato il sito di qualche azienda che me lo commissionava!

Partite da 2 presupposti:
1) E’ un sito sperimentale. Voglio riuscire a fare un sito il più veloce possibile nonostante il dettaglio grafico e la componente dinamica (con dinamico in questo caso intendo eventuali oggetti in movimento).
2) E’ un sito che non nasce per il grande pubblico ma solo per una cerchia di amici della mia città che lo visiteranno e ci inseriranno i loro messaggi o le loro cose utili. Poi se in futuro verrà visitato anche da altri ben venga, ma non ho particolari mire.

Quello che voglio fare è dunque non rendere la vita troppo difficile a questa decina o ventina di persone. In teoria il primo accesso sarà quello + mortale, poi le pagine entreranno in cache e comunque le immagini sono spesso le stesse in tutte le pagine.

Quindi ho bisogno dei consigli sull’ottimizzazione che partano dal presupposto che il sito deve essere pomposo a livello grafico. Tutto quello che mi avete detto fino ad ora è prezioso!

Si parte da 34 secondi ragazzi e voglio vedere fino a dove posso arrivare!
E’ dura come il ferro e su questo forum siete gli unici ad avermi detto cose di una certa utilità e non le solite cose sull’usabilità del web che sappiamo tutti bene!

Ovviamente chiunque di voi mi darà utili consigli sarà vistosamente ringraziato nella pagina dei ringraziamenti con tanto di foto commenti e apprezzamenti personali!

Ps: una volta un una news di Pc-facile (se non erro) si parlava di un nuovo formato di compressione di immagini che sarebbe stato definitivo... ...ne sapete qualcosa?

[archimede]

Credo non sia facile dare consigli senza vedere la pagina, ma tanto per avere un termine di paragone (non ho un 56K sottomano) quanto impieghi a caricare questa?

Inoltre, se ho ben capito, non hai ancora scelto il server dove pubblicare il sito: se così è, rischi di fare uno sforzo che si rivelerà inutile (o insufficiente) quando fari il deploy definitivo.

Alessandro

[pjfry]

cmq utilizzando piccoli frames l'effetto sembra davvero immediato...
puoi dare un'occhiata qui (usa explorer), nel frame con le combo che si autosettano a seconda dei valori presenti nel DB, in modo di non ritornare mai query vuote...
tanto per fare un esempio di quello che voglio dire...

bello!
a parte grafica e colori

[Swalke]

Archimede, ci metto 80 secondi a caricarlo completamente... ...più che altro ci mette tempo il menù silla destra!
Dreamweaver lo da a 27 secondi!!!

Comunque le cose escono piano piano e non di colpo dopo 80 secondi che è la cosa principale da evitare!

Il server l'ho già scelto ma devo ancora registrarmi. E' quello di Natan! Qualcuno a opinioni a riguardo? Perchè dici che rischio di fare lavoro per niente?
Supporta ASP e lo spazio a disposizione è infinito!

[Dylan666]

Comunque le cose escono piano piano e non di colpo dopo 80 secondi che è la cosa principale da evitare!

Pensa che invece la tecnica di far aprire almeno un qualcosa durante l'attesa è una tecnica diffusissima. Non a caso c'è chi usa immagini interlacciate o indicatori della percentuale di pagina che resta da caricare.
Insomma si vuole far capire al visitatore "abbi fede, la pagina non è ancora pronta ma il sito non è morto"

[archimede]

Perchè dici che rischio di fare lavoro per niente?

Perchè magari il server su cui lo metti va come una scheggia e la tua pagina si carica immediatamente così com'è. Oppure è un chiodo e per quanto ottimizzi non scenderai mai sotto una certa soglia.

Alessandro

[Swalke]

X Dylan: si, infatti io intendevo che è letale se non ti appare niente per un bel po' e poi ti compare tutto alla fine... ...mi ero espresso male!

x archimede: si, hai ragione... ...ma il tempo minimo sarebbe comunque di 30 secondi, quindi devo scendere ancora!

[Triumph Of Steel]

puoi dare un'occhiata qui,

accidenti, avevo il popUp blocker e non capivo!

(usa explorer)

su firefox infatti non funziona...

[piercing]

puoi dare un'occhiata qui,

accidenti, avevo il popUp blocker e non capivo!

(usa explorer)

su firefox infatti non funziona...

nasce da un motore (di mia invenzione ) per le creazione di applicazioni web... generalmente su intranet... che nel tempo ho ottimizzato solo per explorer... poi .NET mi ha fottuto l'idea!!

è chiaro che un qualcosa come quello in questione è solo per capire il funzionamento dinamico delle combo (il tempo di caricamento sembra quasi non esistere... ed è un serveraccio di aruba su db access)... in merito alla grafica c'è nulla...

@pj... i colori li scelse il cliente... ahahah

[Dylan666]

Io sto continuando a cercare su Google cose già fatte: una tipo questa ma da modificare in modo che i valori li carichi alla pressione del listbox? si può fare?

http://www.learnasp.com/learn/listdynamicdb.asp

http://www.applicationgroup.com/asp/Dua ... Source.htm

[Swalke]

Io invece ho trovato due programmini utili!
Uno è un ottimizzatore di HTML che mi ha fatto recuperare 3k.
L'altro è un programmino che rimpicciolisce le gif agendo su degli attributi inutili che restano nel file di immagine (più o meno). Usandolo su tutte le immagini della home ho recuperato 2 secondi!

In tutto quindi ho recuperato 2 secondi e mezzo... ...che non è molto ma non ci sputo sopra!

Io una cosa come quella che suggerisci tu Dylan non la so fare!
Però mi sarebbe davvero utilissima!

[Swalke]

Raga, questa è bella!!!
Avete visto quanto pesa la hom di eBay.it???

Per una 56K dreamweaver calcola 41 secondi!!!

Mortacci sua!

Sono felice perchè adesso so che con i miei 30 secondi netti posso avere un futuro.
Anche perchè il contenuto della mia home quantitativamente è di più di quello di Ebay e anche la grafica è super pompata!!!

Quando lo metterò on-line ve lo farò sapere... ...però andateci piano con le critiche perchè sono di animo molto sensibile!

[disgrazia]

Prova a convertire le immagini gif in png, se usi un buon programma di grafica (l'efficienza della compressione varia da software a software) puoi arrivare a dimensioni considerevolmente contenute, soprattutto se smanetti un po' coi vari parametri di compressione. Con GIMP ho avuto ottimi risultati.

[Swalke]

Ragazzi, un tipo mi ha consigliato di mettere questo codice che dovrebbe servire a caricare le option soltanto al passaggio sul "select" anzichè al caricamento iniziale della pagina.

Io non ne sono convinto. A me sembra che le option vengano solo "visualizzate" quando si passa sul select, ma in realtà vengono "caricate" quando si apre la pagina e si incontra il riferimento al file js che contiene il javascript.

Cosa mi dite?

Vi lascio il codice. Potete direttamente copiarlo e incollarlo:

Codice: Seleziona tutto

<HTML><HEAD>
<SCRIPT language="Javascript1.2">
<!--
var d1=false;
var d2=false;
var d3=false;
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM action="filloption" method="post">
<SELECT id="1" onMouseOver="fill(1);" onFocus="fill(1);">
<OPTION selected>----------------
</SELECT>
<BR><BR>
<SELECT id="2" onMouseOver="fill(2);" onFocus="fill(2);">
<OPTION selected>----------------
</SELECT>
<BR><BR>
<SELECT id="3" onMouseOver="fill(3);" onFocus="fill(3);">
<OPTION selected>----------------
</SELECT>
<BR><BR>
</FORM>
<SCRIPT language="Javascript1.2">
<!--
///////Coded by 16437952///////
function fill(id)
{
var nid=""+id;
if ((d1==false)&&(nid=="1"))
{
var opt11=document.createElement("OPTION");
var opt12=document.createElement("OPTION");
var opt13=document.createElement("OPTION");

document.getElementById(nid).options.add(opt11);
document.getElementById(nid).options.add(opt12);
document.getElementById(nid).options.add(opt13);

opt11.innerText="Italia";
opt12.innerText="Francia";
opt13.innerText="Germania";

opt11.value="it";
opt12.value="fr";
opt13.value="de";

d1=true;
}

if ((d2==false)&&(nid=="2"))
{
var opt21=document.createElement("OPTION");
var opt22=document.createElement("OPTION");
var opt23=document.createElement("OPTION");

document.getElementById(nid).options.add(opt21);
document.getElementById(nid).options.add(opt22);
document.getElementById(nid).options.add(opt23);

opt21.innerText="Mela";
opt22.innerText="Pesca";
opt23.innerText="Ananas";

opt21.value="Mela";
opt22.value="Pesca";
opt23.value="Ananas";

d2=true;
}

if ((d3==false)&(nid=="3"))
{
var opt31=document.createElement("OPTION");
var opt32=document.createElement("OPTION");
var opt33=document.createElement("OPTION");

document.getElementById(nid).options.add(opt31);
document.getElementById(nid).options.add(opt32);
document.getElementById(nid).options.add(opt33);

opt31.innerText="Coca cola";
opt32.innerText="Aranciata";
opt33.innerText="Sprite";

opt31.value="Coca cola";
opt32.value="Aranciata";
opt33.value="Sprite";

d3=true;
}
}
//-->
</SCRIPT></BODY></HTML>

[archimede]

Credo sia semplice capirlo: se funziona in locale (e scommetto di sì) vuol dire che nella pagina c'è tutto quello che serve (quindi devi aver già scaricato dal server).

Alessandro

[Swalke]

Cioè tu dici di tenere il file html in locale e mettere il js on-line?
Ora non posso farlo comunque:
Non dovrebbe chiedermi di connettermi quando nella pagina web trova un riferimento a un js che non sta in locale?
Se così fosse vuol dire che vuole caricare il js e quindi legge tutto il js e quindi non risparmio nulla!

No?

[archimede]

Cioè tu dici di tenere il file html in locale e mettere il js on-line?

No: intendevo dire che se metti tutti i tuoi files in locale e tutto funziona, significa che nessuna richiesta viene fatta al server dopo che hai caricato la pagina. Ergo, già al primo caricamento viene scaricato tutto il codice. ergo, non guadagni nulla.

Il fatto di avere il codice JavaScript in un file js esterno (anzichè nella pagina) NON vuol dire che il file js non arriva al client (il browser) se il JavaScript non viene usato.

Alessandro