/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Optimal opsætning af HTML, CSS, JavaScript~
Fra : Kasper Johansen


Dato : 23-05-05 14:44

Hej gruppe.

Jeg kunne ikke rigtig finde ud af hvilken anden gruppe det hørte under, så
jeg poster det her (jeg mener også det hører til her, men send mig endelig
videre hvis det ikke er tilfældet).

Som alle andre vil jeg gerne have en side der reagere utroligt hurtigt.
Server-mæssigt skulle jeg mene at have ret godt styr på det. Klient-mæssigt
vil jeg gerne høre andres mening og forslag.

For at mindske socket-connections for browseren har jeg kun et enkelt
stylesheet, samt en enkelt fil med JavaScripts. Begge filer er genereret i
PHP udfra (altså ikke lokalt) om man bruger IE (tak Microsoft). Der er
selvfølgelig et serverscript der sørger for at stoppe sendingen af filen,
hvis den er cached af browseren (såsom webserveren normalt ville har gjort
det med et stylesheet eller en anden statisk fil).

Både stylesheetet og javascriptet er placeret på flere forskellige mirrors,
for at bruge flere linjer til at loade siden. Derved bliver selve
hovedlinjen (til det dynamiske indhold) ikke overbelastet med forbindelser
når der er mange online. Flere af mine billeder bliver ligeledes mirroret
fra andre linjer (hvilken linje bestemmes efter forskellige faktorer, blandt
andet om man er logget ind (ca. halvdelen er logget ind)).

Forskellige cronjobs ser efter hvadfor nogle mirrors der er oppe og hvilke
der er nede, således at det kun er dem der er oppe der bliver brugt.


Er denne løsning optimal? Jeg er lidt tvivl, eftersom det kan forestilles at
det tager længere tid at oprette forbindelse til flere forskellige servere?
Til gengæld syntes jeg også at kunne se en optimering når der er mange
online på en gang. Servermæssigt tager mine scripts mellem 0,1 og 0,3
sekunder at generere (alt efter hvad for en side man er på). Har jeg glemt
noget der mærkbart kan optimere min loadtid?

Jeg vil mægtig gerne høre lidt af andres erfaringer indenfor emnet.

--
Med venlig hilsen
Kasper Johansen



 
 
Martin Hintzmann And~ (23-05-2005)
Kommentar
Fra : Martin Hintzmann And~


Dato : 23-05-05 15:19

Kasper Johansen wrote:
>
> For at mindske socket-connections for browseren har jeg kun et enkelt
> stylesheet, samt en enkelt fil med JavaScripts. Begge filer er genereret i
> PHP udfra (altså ikke lokalt) om man bruger IE (tak Microsoft). Der er
> selvfølgelig et serverscript der sørger for at stoppe sendingen af filen,
> hvis den er cached af browseren (såsom webserveren normalt ville har gjort
> det med et stylesheet eller en anden statisk fil).
>

Hvis du generere det på serversiden mener jeg at det ikke bliver cachet
i browseren og altså bliver hentet hver gang.
Så derfor ville jeg nok have lavet 2 javascripts og 2 stylesheets, og
bruge conditional comments, for at adskille IE-specifikke ting.
Men det er lidt svært at bedømme da vi ikke har set et online eksempel
af det.


--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

Kasper Johansen (23-05-2005)
Kommentar
Fra : Kasper Johansen


Dato : 23-05-05 16:11

"Martin Hintzmann Andersen" <no@spam.invalid> skrev i en meddelelse
news:4291e668$0$79465$14726298@news.sunsite.dk...
> Hvis du generere det på serversiden mener jeg at det ikke bliver cachet i
> browseren og altså bliver hentet hver gang.
> Så derfor ville jeg nok have lavet 2 javascripts og 2 stylesheets, og
> bruge conditional comments, for at adskille IE-specifikke ting.
> Men det er lidt svært at bedømme da vi ikke har set et online eksempel af
> det.

Normalt bliver servergenereret sider ikke cachet. Det kan du selvfølgelig
fikse i selve server-scriptet, hvilket jeg har gjort. Så de bliver skam
cachet.

For at gøre det helt enkelt har jeg et enkelt af hvert. Efter de er
genereret en gang, er der stort set ingen script-generation-time på dem mere
nemlig.

Conditional comments? Måske du vil forklare? Jeg har nemlig ikke hørt det
før?

Ikke at det har noget at gøre her, men her er hvordan jeg får den til at
cache server-sidet (PHP):

$if_modified_since = preg_replace("/;.*$/", "", $HTTP_IF_MODIFIED_SINCE);
$mtime = filemtime($SCRIPT_FILENAME);
$gmdate_mod = gmdate("D, d M Y H:i:s", $mtime) . " GMT";

if ($if_modified_since == $gmdate_mod) {
header("HTTP/1.0 304 Not Modified");
exit;
}

header("Last-Modified: " . $gmdate_mod);


Evt. hvis det er stylesheet skal man også huske at sende en header så den
ved det er et stylesheet:
header("Content-type: text/css");


I mine øjne er det helt optimalt. Men jeg vil rigtig gerne høre hvad nogle
af jer andre gør for at gøre jeres side helt optimal klientsidet :)

--
Med venlig hilsen
Kasper Johansen



Kasper Johansen (23-05-2005)
Kommentar
Fra : Kasper Johansen


Dato : 23-05-05 16:13

"Martin Hintzmann Andersen" <no@spam.invalid> skrev i en meddelelse
news:4291e668$0$79465$14726298@news.sunsite.dk...

> Hvis du generere det på serversiden mener jeg at det ikke bliver cachet i
> browseren og altså bliver hentet hver gang.
> Så derfor ville jeg nok have lavet 2 javascripts og 2 stylesheets, og
> bruge conditional comments, for at adskille IE-specifikke ting.
> Men det er lidt svært at bedømme da vi ikke har set et online eksempel af
> det.

Jeg glemte lige et online eksempel. Jeg bruger den omtalte teknik på denne
side (samt flere, men det er jo et eksempel):

www.partyworm.dk

Mirrorurlen (som giver url til der hvor billederne er hosted) er sådan set
bare en serversidet variabel. Man sætter derfor noget lignende <?=$murl?>
foran sine url's til billeder, stylesheets og javascripts. Stort set alle
statiske filer.

--
Med venlig hilsen
Kasper Johansen



Martin Hintzmann And~ (23-05-2005)
Kommentar
Fra : Martin Hintzmann And~


Dato : 23-05-05 17:46

Kasper Johansen wrote:
>
>
> Jeg glemte lige et online eksempel. Jeg bruger den omtalte teknik på denne
> side (samt flere, men det er jo et eksempel):
>
> www.partyworm.dk
>


Det er det du sender til browseren der er problemet og ikke hvor du
henter det fra.

Din HTML-kode fylder pt. 133KB! Det er alt, alt, alt for meget.

Du kan snilt mere end halvere den, hvis du adskiller indhold (HTML) og
præsentation (CSS).
Jeg vil tro at jeg kan få den ned på 4-50Kb.

Din CSS-fil fylder pt. 5,14 Kb. Jeg vil tro jeg kan skære den 1/3-del
ned. Ligeså med din Javascript fil som fylder pt. 5,8 Kb.

Dine billeder fylder også ret meget.
Logo'et fylder 44Kb. Det vil kunne halveres.
Alle dine Thumbnails bliver skalleret ned i klientens browser.
Følgende billede er rigtig 140x105, men bliver vist som 85x64
http://gx-clan.dk/pw/galleri/391/16353_tn1.jpg

Hvis du formindsker billedet i størrelsen kan du få det fra 4,88Kb til
2,34Kb. Og så kan du endda stadig komprimere kvaliteten af billedet.



--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

Kasper Johansen (23-05-2005)
Kommentar
Fra : Kasper Johansen


Dato : 23-05-05 20:54

"Martin Hintzmann Andersen" <no@spam.invalid> skrev i en meddelelse
news:429208be$0$79461$14726298@news.sunsite.dk...
> Din HTML-kode fylder pt. 133KB! Det er alt, alt, alt for meget.

Jeg har aktiveret zlib serversidet på det højeste niveau (jeg har en ok
kraftig server). Efter den har været igennem zlib fylder den omkring 8 kb ;)
Gemt som plaintext fylder den selvfølgelig 100-150 kb.


> Du kan snilt mere end halvere den, hvis du adskiller indhold (HTML) og
> præsentation (CSS).
> Jeg vil tro at jeg kan få den ned på 4-50Kb.
>
> Din CSS-fil fylder pt. 5,14 Kb. Jeg vil tro jeg kan skære den 1/3-del ned.
> Ligeså med din Javascript fil som fylder pt. 5,8 Kb.

CSS og JavaScript bliver jo cached hvis du mener at de fylder for meget?


> Dine billeder fylder også ret meget.
> Logo'et fylder 44Kb. Det vil kunne halveres.
> Alle dine Thumbnails bliver skalleret ned i klientens browser.
> Følgende billede er rigtig 140x105, men bliver vist som 85x64
> http://gx-clan.dk/pw/galleri/391/16353_tn1.jpg
>
> Hvis du formindsker billedet i størrelsen kan du få det fra 4,88Kb til
> 2,34Kb. Og så kan du endda stadig komprimere kvaliteten af billedet.

Billedet bliver skalleret ned når vi uploader dem serversidet. Til at starte
med skulle vi vise thumbnails i en maskimal størrelse af 140x105 og derfor
denne størrelse. Mener du at jeg skal lave en dynamisk fil der læser
billeder så det kun vises i den fil den størrelse som det også bliver vist i
browseren?


Nu sidder jeg desværre ikke og leger alt for meget med HTML, CSS og lignende
klientside. Det var også derfor jeg startede denne tråd, for at få lidt mere
input.

Måske du, eller nogle andre, kunne give mig et par links til nogle gode
guides hvordan jeg bedst muligt skære ned på mit overflødige HTML? (hvis jeg
kan få størrelsen endnu længere ned kan jeg sætte mit
zlib-kompressionsniveau længere ned og få mere ydelse den vej i hvert fald!)

--
Med venlig hilsen
Kasper Johansen



Martin Hintzmann And~ (24-05-2005)
Kommentar
Fra : Martin Hintzmann And~


Dato : 24-05-05 10:07

Kasper Johansen wrote:
>
> Jeg har aktiveret zlib serversidet på det højeste niveau (jeg har en ok
> kraftig server). Efter den har været igennem zlib fylder den omkring 8 kb ;)
> Gemt som plaintext fylder den selvfølgelig 100-150 kb.
>

Det giver jo så bare mere arbejde til din server. Du spurgte jo efter
optimal opsætning af HTML.

>
>
>>Du kan snilt mere end halvere den, hvis du adskiller indhold (HTML) og
>>præsentation (CSS).
>>Jeg vil tro at jeg kan få den ned på 4-50Kb.
>>
>>Din CSS-fil fylder pt. 5,14 Kb. Jeg vil tro jeg kan skære den 1/3-del ned.
>>Ligeså med din Javascript fil som fylder pt. 5,8 Kb.
>
>
> CSS og JavaScript bliver jo cached hvis du mener at de fylder for meget?
>

Ja, men hvis du adskiller indhold og præsentation vil din CSS-fil bliver
3-4 gange så stor, så hvis du optimere CSS'er til 66% er det også værd
at tage med.

>
> Billedet bliver skalleret ned når vi uploader dem serversidet. Til at starte
> med skulle vi vise thumbnails i en maskimal størrelse af 140x105 og derfor
> denne størrelse. Mener du at jeg skal lave en dynamisk fil der læser
> billeder så det kun vises i den fil den størrelse som det også bliver vist i
> browseren?
>

Det giver jo også bare mere arbejde til din server. Det er bedre at du
ændre størrelsen til det skal være, og har billederne liggende som
rigtige billede-filer. Ellers skal serveren beregne billederne gang på gang.

> Måske du, eller nogle andre, kunne give mig et par links til nogle gode
> guides hvordan jeg bedst muligt skære ned på mit overflødige HTML? (hvis jeg
> kan få størrelsen endnu længere ned kan jeg sætte mit
> zlib-kompressionsniveau længere ned og få mere ydelse den vej i hvert fald!)
>

Følgende er bare proof of concept, og er slet ikke færdig lavet, men
viser blot hvordan man kan nedsætte mængden af HTML-koden ved at
adskille indhold og præsentation.

Jeg har taget eksempel i den kode omkring dine billeder på forsiden.

Den gamle fylder 2.050 bytes (*)
http://www.hintzmann.dk/testcenter/sites/partyworm.dk/index_old.html

Den nye fylder 400 bytes (*)
http://www.hintzmann.dk/testcenter/sites/partyworm.dk/index.html

Det er ca 80% nedskæring af HTML-koden. Og dem har du 35 af på midten af
siden. dvs. 58Kb kan du skære fra.

Selvfølgelig bliver CSS-filen støre, men det er kun sølle 675 bytes, og
det bliver jo cachet.

(*) Doctype,html,head og body er ikke regnet med (220 byte)

--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408925
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste