Optimera CSS

[Marcin]

Vad jag har hört så utgör storleket på CSS ingen risk inför sökmotorer om man inte överskrider nån eller några MB. Men det skadar aldrig att jobba proaktivt.

Dessutom, om man som jag oftast har ALL layout i CSS så skadar det ju inte att sidan laddar snabbare för besökarnas skull.

Optimera CSS-fil: http://flumpcakes.co.uk/css/optimiser/

Tips: Bocka för "Pretty Print"

För mig brukar den skala bort 20-30%

[Per Renemark]

Extremt bra verktyg! Länkbete på högsta nivå med . Min cssfil gick ner med 30%, och den fungerade.

[Jocke]

soft min blev 20% lättare!

[Mattias A]

min lättade 2% jag kanske redan skriver "smart" css

[seattlegrunge]

Samma här... krympte ner min css-kod med 3% och den enda skillnaden jag ser mot innan är att den tagit bort alla mina kommentarer. Dock vill man ju ha sina kommentarer kvar.

[Marcin]

min lättade 2% jag kanske redan skriver "smart" css

Det har självklart att göra med hur du skriver CSS från början. Jag använder Dreamweaver och då blir det t.ex. så här:

DIV#m {
width: 200px;
margin: 0px;
float: left;
text-align: left;
padding: 0px 0px 100px;
}

Skriver du istället:

DIV#m {width:200px;margin:0;float:left;text-align:left;padding:0 0 100px}

så sparar du 23%. Självklart var man medveten om att det tog lite plats men inte SÅ mycket. (Mina CSSer brukar ligga på runt 40kb så det spelar helt klart roll för de med sega uppkopplingar.)

Sen tillkommer saker som
#ffffff => #fff
padding: 0px 0px 0px 0px => padding: 0
.. etc



Jag har pga detta även börjar titta på HTML i mina sidor och kunde lätt skala bort 10-15% på sådant som jag trodde redan var optimerat.

[Marcin]

Samma här... krympte ner min css-kod med 3% och den enda skillnaden jag ser mot innan är att den tagit bort alla mina kommentarer. Dock vill man ju ha sina kommentarer kvar.

De uppmanar att man ska använda tjänsten först när CCSen är klar.

[Mattias A]

Andra liknande tjänster:
http://developer.mabwebdesign.com/cs.../compress.html
http://www.cdburnerxp.se/cssparse/css_optimiser.php
http://www.cleancss.com/



off: hur redigerar man sin signatur här på forumet?

[Marcin]

Andra liknande tjänster:
http://developer.mabwebdesign.com/cs.../compress.html
http://www.cdburnerxp.se/cssparse/css_optimiser.php

Verkar inte fungera

http://www.cleancss.com/

Tar bort även radbrytning. Sorterar!! =)

Bra tips

[seattlegrunge]

De uppmanar att man ska använda tjänsten först när CCSen är klar.

Och vad säger att min CSS-fil inte var klar då? För det var just vad den var!
Man kan ha kommentarer i en färdig CSS-fil också, som underlättar framtida editering. T ex har jag min CSS-fil uppdelad med kommentarer beroende på vad för sorts element som berörs, t ex (enkelt förklarat):

/* Images */
img {
border: 0;
}

/* Form elements */
input {
border: color: #000000;
}

Hänger du med?

[Marcin]

Och vad säger att min CSS-fil inte var klar då? För det var just vad den var!
Man kan ha kommentarer i en färdig CSS-fil också, som underlättar framtida editering. T ex har jag min CSS-fil uppdelad med kommentarer beroende på vad för sorts element som berörs, t ex (enkelt förklarat):

/* Images */
img {
border: 0;
}

/* Form elements */
input {
border: color: #000000;
}

Hänger du med?

Självklart hänger jag med, men då pratar vi inte om optimering utan "puff" för din egen skull som har ingen som helst nytta för besökare eller SEO. Du bör då ställa dig frågan vem hemsidan är till? Dig eller besökare/SEO?
För att dra det hårt: Likna det vid en företagshemsida som är gjord för att företaget själva ska vara stolta över men med lite tanke på huruvida den gör sitt jobb.
Ta det inte personligt nu! =)

Ha en arbets-CSS och en kopia som är optimerad som du använder skarpt.


Annars kan man lika gärna använda BMP eller JPEG med maximal kvalité också.