En serie med endringer på skriblerier.net

By Espen Andersson — 28. May 2008 17:04 — categorized in Egosentrisk — 9 comments

Den oppmerksomme leser vil med dette kanskje – og forhåpentligvis – legge merke til at det har skjedd en serie med endringer på skriblerier.net de siste ukene. Ikke alle endringene er så omfattende av seg, men kombinasjonen vil forhåpentligvis gjøre sidene til en hyggeligere – og mer effektiv – opplevelse.

Lastetid

Først og fremst har jeg forsøkt å gjøre sidene raskere. Dette er gjort ved bl.a. å slå sammen mange små bilder til større samlebilder, for deretter å benytte CSS til å vise bildene. Et eksempel på dette er de små ikonene nederst i kolonnen til høyre, som nå er ett bilde (som vist til høyre). Ved å gjøre dette slår man sammen flere HTTP-forespørsler til én, noe som er viktig ettersom slike forespørsler er en av de mest sentrale årsakene til trege nettsider.

Videre har jeg konvertert samtlige .gif-bilder (og de aller fleste .jpg-bildene) til .png, for deretter å kjøre de igjennom programmet PNGOUTWin, som krymper filstørrelsen betraktelig, men som samtidig ivaretar kvaliteten. Programmet er tilgjengelig i en gratis 30-dagersutgave, og kan komprimere hele mapper i ett.

En annen svært viktig endring er komprimeringen av alle .jpg-bildene på serveren. Jeg lagret tidligere alle bilder jeg redigerte i Photoshop med 85% kvalitet, noe som gjorde bildene unødig store. Ved å senke denne verdien til 75%, blir filene mange KB mindre, samtidig som kvalitetstapet knapt er synlig for et menneskeøye. Samlet krever de drøyt 250 bildene nå 5 MB mindre lagringsplass på serveren!

Når det gjelder caching, er .htaccess-fila nå oppgradert til å inneholde:

<FilesMatch ".(jpg|png)$">
  ExpiresDefault "access plus 10 months"
</FilesMatch>

<FilesMatch ".(js|css)$">
  ExpiresDefault "access plus 1 month"
</FilesMatch>

Den første kodesnutten tar seg av cachinga for alle bildefiler. Bilder som allerede er lastet opp endres svært sjeldent, og kan derfor med sikkerhet caches for en lengre periode – derav ti måneder. Javascript- og CSS-kode, derimot, endres med ujevne mellomrom, og er derfor satt til og huskes i kun én måned.

Typografi

På typografifronten har jeg etter mye om og men endelig gått inn for justerte marger på hovedinnholdet. Det vil si at alle linjene er like lange, og at avstanden mellom ordene varierer. Selv synes jeg at dette ser penere ut, og letter på lesbarheten. Fontstørrelsen er også blitt justert flere steder, og bruken skal nå være mer konsekvent.

Til slutt hadde jeg satt pris på tilbakemeldinger. Virker nettsidene raskere? Ser ting litt ryddigere ut? Eller kanskje det stikk motsatte? Alle tilbakemeldinger er velkomne.

Comments (9)

# By Martin Bekkelund – 29. May 2008 21:55

Vanskelig å si, ettersom jeg til daglig leser siden din via RSS, men du har en lang rekke gode og smarte poeng. Sidene laster i hvert fall raskt.

Selv benytter jeg «Save for web» i Photoshop. Selv om denne funksjonen har sine ulemper, genererer den bilder som er optimalisert for web. Jeg har holdt meg unna PNG, nettopp av samme årsak som du påpeker, at det blir for store filer. Jeg har omtrent 600 bilder på bekkelund.net på totalt 17 MB.

Hva gjør du forresten når du debugger? Fjerner du cache-linjene i .htaccess?

# By Espen Andersson – 29. May 2008 22:03

Selv benytter jeg «Save for web» i Photoshop. Selv om denne funksjonen har sine ulemper, genererer den bilder som er optimalisert for web.

Jepp. Jeg benytter samme funksjonalitet, men «Quality»-valget man får der er ikke nødvendigvis riktig i alle situasjoner. F.eks. er det ingen nevneverdig forskjell mellom 85% og 70-75% på de aller fleste bilder, og man kan med det spare verdifulle KB og sekunder.

Jeg har holdt meg unna PNG, nettopp av samme årsak som du påpeker, at det blir for store filer. Jeg har omtrent 600 bilder på bekkelund.net på totalt 17 MB.

PNG er utmerket til det det fungerer til, for å si det sånn ;-) F.eks. til fargerike bilder med litt størrelse, er det ubrukelig. PNG er først og fremst mitt førstevalg når det gjelder mindre bilder og ikoner, samt i tilfeller hvor jeg trenger «alpha transparency». Bildene har dog en tendens til å bli unødig store, så nevnte PNGOUTWin var et flott tilskudd i programsamlinga for min del.

Hva gjør du forresten når du debugger? Fjerner du cache-linjene i .htaccess?

Jeg debugger svært sjeldent på liveservere, og har en synkronisert utgave av skriblerier.net på localhost, så det problemet løser i grunn seg selv. Det hender jeg debugger ting i administrasjonspanelet (som kjører EBA-News), men der er jeg likevel nødt til å ha no-cache på alle filene av naturlige årsaker.

# By Asbjørn – 29. May 2008 23:52

Vanskeleg å sei akkurat kor fort det gjekk før, tenkte sjelden på det, men no lasta framsida veldig fort iallfall, merkbar fort.

# By Robert – 30. May 2008 09:23

Jeg hadde hotell hos Subsys og tidligerer Dcvhost, jeg merka det at på Subsys så bruker script en god del lenger tid på å bli ferdig.

# By Espen Andersson – 30. May 2008 13:10

Det har jeg aldri merket noe til, Robert. Snarere tvert imot.

# By Stian Andreassen – 30. May 2008 13:30

Har aldri opplevd sidene dine som trege, men nå sitter jeg på gode linjer både hjemme og på jobb.

Men apropos endringer; jeg savner fortsatt kommentartall på forsiden din.

# By Espen Andersson – 30. May 2008 13:32

Stian: Det kommer i kveld, sammen med noen mindre backend-oppdateringer.

# By Ivar – 30. May 2008 19:49

Den virker litt kjappere nå…

# By Daniel Aleksandersen – 14. June 2008 16:39

Hvorfor bruker du ikke ExpiresByType istedenfor å matche filendelsene?

Write Comment

Om «Andersson Online»

Dette er Espen Anderssons lekeplass på Internett. Jeg studerer webkommunikasjon på NITH og arbeider deltid som systemutvikler for NordkappNett AS og webutvikler for Nexus Consulting AS. Bloggens hovedfokus er rettet mot kultur- og teknologirelaterte temaer, med hyppige avstikkere innom musikken og journalistikkens verden.