Reduktion af båndbredde

#logobg { 
  left : 0;
  top : 7px;
  width : 100%;
  height : 34px;
  position : absolute;
  z-index : 0;
  background-color: #99b5cd;} 
#logobg{left:0; top:7px; 
width:100%; height:34px; 
position:absolute;z-index:0; 
background-color:#99b5cd;} 

Hvad er forskellen på de to formdeklarationer, du ser herover?

Den til venstre er klart mere læsevenlig end den til højre. Indholdet er imidlertid det samme, så de to formdeklarationer er funktionelt set fuldstændig ens.

Læsevenligheden har imidlertid en pris, og det er præcis dér forskellen på de to formdeklarationer ligger: Den til venstre fylder 144 bytes, den til højre 110 bytes.

Ingen af filstørrelserne lyder jo af ret meget, og forskellen på 34 bytes er heller ikke noget, der rykker.

Men hør nu: Hvis vi erkender at denne ene formdeklaration er 31 procent større end den behøver at være, er det et godt gæt, at hele stylesheet'et også er 31 procent større end det behøver at være.

Jeg ved ikke hvordan du har det, men mine styleheets (eller summen af dem, jeg bruger som regel flere stylesheets til en webside, lidt afhængigt af hvilken side, der er tale om) har en tyngde på fra 6.000 bytes og op til måske det dobbelte for særligt komplicerede sider.

Desuden har jeg den (u?)vane netop at skrive mine formdeklarationer som vist til venstre herover, givet min fortid som underviser, min forfattervirksomhed og givet karakteren af dette websted.

Hertil kommer, at jeg har umådelig svært ved at huske kortformsudgaverne af nogle egenskaber udenad, så derfor skriver jeg som regel:

background-image:url(bg_img.jpg);
background-color:rgb(214,215,210);
background-repeat:no-repeat;
background-position:left top;
background-attachment:fixed;

i stedet for

background:#d6d7d2 url(bg_img.jpg) no-repeat fixed left top

Også disse to formdeklarationer er ens, men den første fylder 161 bytes, mens den anden kun fylder 59 bytes.

Har det nogen praktisk betydning?

Ja, det mener jeg. Det altid være god konstruktionspraksis at spare så mange bytes som overhovedet muligt, alle de steder det kan lade sig gøre. Jo mindre datamængde, der skal overføres, des hurtigere bygges siden op hos læseren.

Du vil kunne indvende, at stylesheet'et lagres i læserens browsercache, men det forhindrer jo ikke, at hele bulletjavsen skal indlæses mindst én gang, som er første gang. Og førstehåndsindtrykket er også på dette felt aldeles afgørende for brugrens oplevelse af dit websted.

Den gode nyhed

Min evne til at huske kortformsudgaverne af de forskellige CSS-egenskaber forbedres jo ikke af denne erkendelse. Desuden har jeg selv brug for at mine stylesheets er let læselige, det gør dem noget nemmere at overskue, finde fejl i og rette i.

Og det er også noget af en tidrøver at komprimere stylesheets manuelt.

Heldigvis findes der online tjenester, der kan ordne denne sag for dig. De to jeg kender til, er
CSS Formatter and Optimiser og
CSS Cascading Style Sheet Optimiser.