Hastighed på Internet

Undersøgelser har vist, at brugere af Internet typisk mister tålmodigheden med et program efter 10-15 sekunder [1]. Når man arbejder med udvikling af hjemmesider er 15 sekunders "tålmodighedsgrænse" svær at leve op til. Men med nogle få regler og omtanke kan det lade sig gøre at overleve brugernes korte lunte.

Hastigheden afhænger dels af størrelsen på de filer, der skal hentes fra nettet men i høj grad også af hele den kæde af forbindelser [2], som filerne skal igennem for til sidst at ende på brugerens computerskærm.

Flaskehalse mærkes specielt meget ved overførsel af grafik,idet grafikfiler fylder meget mere end tekst. Et billede består dybest set af tusinder af tegn, der skal hentes fra nettet, behandles og vises på skærmen.

GIF eller JPEG

I forbindelse med grafik til Internet er det specielt GIF (Graphics Interchange Format) og JPEG (Joint Photographic Experts Group) [3] formaterne der bruges. De to formater egner sig til hver sin type grafik, og brugt rigtigt kan de spare meget ventetid for brugeren.

GIF formatet er en tabsfri komprimeringsmetode. Det betyder bl.a., at grafikken står klart og ikke bliver "ulden" i kanterne. Men også at billederne bliver forholdvis store og derfor tunge at hente fra nettet. Derfor egner GIF sig bedst til mindre stykker tegnet grafik, der skal stå klart og skarpt, som fx menubjælker, navigationsknapper, logoer og lignende, eller til grafik med mange detaljer, som fx bykort.
En funktion der støtter anvendelsen af GIF formatet, er muligheden for at vælge en farve ud og gøre den gennemsigtig. Således kan man fx integrere en knap i en baggrund. GIF kan kun arbejde i 256 farver eller mindre, og egner sig derfor til grafik med klare farver og stor kontrast.

Med hensyn til hastighed rummer GIF formatet en mulighed for at "snyde" brugeren til at tro, at grafikken kommer hurtigere frem på siden. I stedet for at computeren henter og opbygger en linie pixels ad gangen, kan man ved at gemme sin GIF grafik som interlaced [4] opnå, at computeren med det samme opbygger et lavopløsningsbillede, som gradvist forbedres, til hele billedet er hentet. Brugeren kan således med det samme se en grov skitse af billedet i stedet for at skulle vente på at få hele billedet på en gang.

JPEG (Joint Photographic Experts Group) er, som bogstaverne bag forkortelsen antyder, udviklet som et fotokomprimeringsformat. Modsat GIF arbejder JPEG i op til 16 mill. farver og har flere grader af komprimering. Med JPEG komprimering kan man reducere et billedes filstørrelse op til 100 gange men med et tab af kvalitet til følge. Formatet er velegnet til fotos, men også "fotoligende" illustrationer uden stor kontrast og med jævne farver kan JPEG-formatet anvendes til.

I dag understøtter alle browsere både GIF og JPEG. Man kan derfor vinde en del i hastighed ved at benytte de to formater til det, de er bedst til.

GIF:

• Egner sig bedst til tegninger, grafik, diagrammer o.lign.
• Mulighed for at hente filer interlaced
• Mulighed for at lave dele af grafikken gennemsigtig

• Egner sig bedst til fotos, komplekse illustrationer, o.lign.
• Mulighed for stærk komprimering
• Understøtter 16 mill. farver.

HTML-koderne i et webdokument bestemmer dokumentets struktur. Sidens opbygningbestemmes af browseren. Som websideforfatter kan man gøre en del for at hjælpe browseren til hurtigere at kunne opbygge siden.

Specielt behandling af billeder og tabeller kan tage meget tid.

Billeder
Når et HTML-dokument hentes ned, behandles det naturligvis fra toppen af dokumentet. Hvis dokumentet fx indeholder først noget tekst, så et billede og derefter mere tekst, så vises den tekste, der kommer før billedet, straks. Når browseren kommer til billedet, er den nødt til at finde ud af, hvor meget billedet fylder, før den kan vise den tekst, der kommer efter billedet. Hvis man ikke selv har angivet størrelsen på billedet, så er browseren nødt til at hente billedet, før den kan vise den sidste tekst. Har man derimod angivet billedets størrelse, kan browseren vise den sidste tekst, før den begynder at hente billedet.

Angives størrelserne på billederne, giver det således hurtigere information på siden.

Nedenstående to billeder har begge fået angivet deres størrelser.

Koden ser ud som følger

<CENTER><TABLE BORDER COLS=2>
<TR>
<TD ALIGN=CENTER><IMG SRC="/billeder/artik/98/skall.gif" WIDTH=176 HEIGHT=82></TD>

<TD ALIGN=CENTER><IMG SRC="/billeder/artik/98/skall.gif" WIDTH=100 HEIGHT=47></TD>
</TR>
</TABLE></CENTER>

Det fremgår af de to billeders SRC attribut at der er tale om det samme billede. Blot er størrelsen på billedet til højre gjort mindre.

Selv om det er muligt for browseren at skalere et billede, bør det undgås, idet det tager ekstra tid. Skalering med et grafikprogram giver også typisk et bedre resutat, end browserens skalering.

Har man tunge sider med billeder på, kan det være en fordel at angive LOWSRC attributtet i billedets IMG tag [5].
Det billede, man angiver ved LOWSRC attributtet, har en lavere opløsning, og er derfor også mindre end det optimale billede. LOWSRC billedet vil blive vist i browseren, indtil det 'rigtige' billede er hentet ned.

Brug af LOWSRC attributtet medvirker til at give læseren noget på skærmen hurtigt.

Tabeller
For at kunne bestemme udseendet af en tabel er det nødvendigt for browseren at vide, hvor meget indholdet i de enkelte celler i tabellen fylder.

Har man en stor tabel, skal hele tabellen hentes, før starten af tabellen kan vises.

Lange tabeller kan derfor med fordel deles op i flere mindre tabeller. Især i de tilfælde, hvor man vælger at lade hele siden være indeholdt i en tabel, er det vigtigt at dele tabellen op, således at der hurtigt kommer noget på skærmen. Deler man ikke tabellen op, skal browseren i værste fald hente hele siden, før den kan vise starten af siden.

Avancerede tabelkonstruktioner med tabeller inde i tabeller bør så vidt muligt undgås.

Anbefalingerne kan opsummeres i følgende huskeliste

• Angiv altid størrelsen på billederne
• Lad ikke browseren skalere
• Brug LOWSRC versioner af billedet de steder, hvor det er vigtigt, at der hurtigt kommer noget på skærmen (fx grafiske menuer i toppen af siden)
• Reducer antallet af farver i grafikken, hvor det er muligt [6].
• Beskær billedet, så kun det nødvendige (informationsbærende) er med
• Undgå at anbringe lyd, video og Java-applets direkte på din forside, hvis det er muligt
• Del lange tabeller op i mindre tabeller
• undgå komplicerede tabelkonstruktioner

Den tid det tager at hente hjemmesider på Internet er i dag nettetsvæsentligste begrænsning. Hastighedsproblemerne kan på kort sigt holdes på et overkommeligt niveau ved, at forfattere af websider overholder nogle få regler. På længere sigt er det op til telefonselskaber, Internetudbydere og ikke mindst politikere at udbygge kapaciteten, så Internets potentiale for alvor kan udnyttes. Men indtil da:

1. Jakob Nielsen Response Times: The Three Important Limits
2. Uddybende artikel om de tekniske flaskehalse.
3. Se fx
   • Yale C/AIM Web Style Guide - Interlaced GIF
   • Yale C/AIM Web Style Guide - Transparent GIF
   • Yale C/AIM Web Style Guide - JPEG graphics
   • PC Webopedia - GIF
   • PC Webopedia - JPEG
4. Interlaced betyder i denne sammenhæng at i stedet for at vise billedet række for række startende oppefra, så vises først fx række 1, 3, 5, 7, … og derefter række 2, 4, 6, … Man får således hurtigt et billede, som man er i stand til at aflæse.
   Se også Yale C/AIM Web Style Guide - Interlaced GIF, samt PC Webopedias definition af interlacing.
5. Se HTML Support History om IMG tag
6. Se tidligere artikel om valg og brug af farver.
7. Citat fra Art and the Zen of Web Sites
8. Jakob Nielsen - The Need for Speed
9. HotWired - Site Optimization Tutorial
10. Web Site Garage med bl.a. Tune Up, hvor man gratis kan få checket problemer på en webside.