Pros & Cons ved flere .css filer?

Til gengæld skal du sende headere for hvert request og de kan være på flere kilobytes. Især på mobile enheder, hvor operatørerne ønskede, at man genererede trafik, som man jo skulle betale for.

Det er ikke atypisk at HTTP request headerne fylder mere end CSS filen.

På komogvind.dk er vi gået over til at lave spil i JavaScript. Da vi lavede i Java var alt pakket ned i en JAR fil. Der findes ikke noget tilsvarende til JavaScript så vi compiler JavaScript til én fil, og billeder ryger igennem vores egenudvikliede sprite mapper: http://opensource.cego.dk/spritemapper/

Alt sammen for at undgå mange requests.

Jeg har typisk 1 css fil med de generelle styles og 1 css fil med styles specifikke for den aktuelle side/sektion. Det vil sige at jeg har mange css filer, men oftest loades kun 2 filer ad gangen, den generelle og den specifikke. Det synes jeg giver et godt overblik når man koder, det minimerer unødvendig css og performance forskellen på 1 og 2 css filer er somregel ikke til at få øje på. Der ud over er det en god ide at have fornuftige caching headers på statiske filer, såsom css, js og billeder, så klienten ikke behøver spørge serveren efter filerne mere end højst nødvendigt.

Til gengæld skal du sende headere for hvert request og de kan være på flere kilobytes. Især på mobile enheder, hvor operatørerne ønskede, at man genererede trafik, som man jo skulle betale for.

Det er ikke atypisk at HTTP request headerne fylder mere end CSS filen.

På komogvind.dk er vi gået over til at lave spil i JavaScript. Da vi lavede i Java var alt pakket ned i en JAR fil. Der findes ikke noget tilsvarende til JavaScript så vi compiler JavaScript til én fil, og billeder ryger igennem vores egenudvikliede sprite mapper: http://opensource.cego.dk/spritemapper/

Alt sammen for at undgå mange requests.

I skulle overveje, at prøve SASS og i den sammenhæng også Compass

Ved ikke hvad teknologi du bruger at kode imod, men jeg er netop begyndt at rode med ASP.NET MVC4 netop fordi der her er indbygget en masse ting der hjælper på det du søger.

1. BUNDLING
Du kan samle flere filer sammen i en til en såkaldt bundle. Derved kan du selv styre hvilke filer der skal sammen til en, plus du kan lave flere forskellige bundles alt efter formål.
Du kan bundle css filer og javascript filer således at alle dine css filer kan være splittet op i så mange der er passende logisk for dig, men når koden afvikles samles de i en enkelt fil for at optimere kaldene. Hvis du har 2-3 css-filer for at opdele det logisk så kan du hurtigt ende på 10-12ms, hvor hvis de samles i en enkelt kan dette tal blive langt mindre.


2. MINIFY
Du kan tilføje hvad du ønsker, men her er det muligt at fjerne whitespaces i fx dine css-filer - og det er ret så store besparelser du kan få ud af det. Langt størstedelen af dine filer er whitespaces fordi de skal være læsbare og nemt overskuelige for dig, men det bliver unødigt spild for en maskine der kun skal bruge indholdet, og endnu mere jo mindre din fil er jo mindre skal der sendes afsted over netværket.

Der er mange muligheder alt efter hvad du ønsker og kan sagtens bruge LESS og meget andet i sammenhæng med ovenstående i ASP.NET MVC4.

Har netop selv siddet og rodet med det fået det til at virke. Kunne pludseligt se en forbedring på ~140% i loadtider af at udnytte ovenstående. Lagde ikke mærke til hvor stor forbedring der var i filstørrelse, men kan jeg eventuelt vende tilbage med.

Langt størstedelen af dine filer er whitespaces fordi de skal være læsbare og nemt overskuelige for dig

Det er vist lidt af en overdrivelse.

http://www.udvikleren.dk/Style.css består af 2994 whitespace chars og 9969 non-whitespace, altså 23% whitespace.

http://www.dr.dk/assets/css/003/base-static.css har 26236 whitespaces og 161038 non whitespaces, altså 14% whitespace.

Langt størstedelen af dine filer er whitespaces fordi de skal være læsbare og nemt overskuelige for dig

Det er vist lidt af en overdrivelse.

http://www.udvikleren.dk/Style.css består af 2994 whitespace chars og 9969 non-whitespace, altså 23% whitespace.

http://www.dr.dk/assets/css/003/base-static.css har 26236 whitespaces og 161038 non whitespaces, altså 14% whitespace.

Du har ret. Jeg vender tilbage med nogle tal for hvor meget mindre mine filer er blevet af den tur med minifyeren.

Jeg betvivler ikke at der er en besparelse (jeg foreslog selv at bruge en minifier), men forhåbentlig er der ikke mere whitespace end reel indhold.

En "rigtig" minifier kan mere end at fjerne whitespace.

Dette:

 color:#ff0000;

...f.eks. kan minimeres til:

 color:#f00;

Der er flere tricks, men jeg er ikke den store CSS haj, så jeg kender ikke dem alle.

Skal man ud i de helt store besparelser, så compiler man både CSS, HTML og JavaScript sammen. Jeg udvikler spil med Google Closure til daglig, og der kan man bruge GSS (Google Style Sheets) som bliver compilet til CSS mens JavaScript bliver compilet mindre. I samme ombæring bliver CSS'en omskrevet så classes bliver forkortet til enkeltbogstaver (eller to, hvis man har mange).

Jeg betvivler ikke at der er en besparelse (jeg foreslog selv at bruge en minifier), men forhåbentlig er der ikke mere whitespace end reel indhold.

En "rigtig" minifier kan mere end at fjerne whitespace.

Dette:

CSS kode 

 color:#ff0000;

...f.eks. kan minimeres til:

CSS kode 

 color:#f00;

Der er flere tricks, men jeg er ikke den store CSS haj, så jeg kender ikke dem alle.

Skal man ud i de helt store besparelser, så compiler man både CSS, HTML og JavaScript sammen. Jeg udvikler spil med Google Closure til daglig, og der kan man bruge GSS (Google Style Sheets) som bliver compilet til CSS mens JavaScript bliver compilet mindre. I samme ombæring bliver CSS'en omskrevet så classes bliver forkortet til enkeltbogstaver (eller to, hvis man har mange).

Det er ganske rigtigt der meget at hente ved at optimere.

Men du siger man compiler CSS, HTML og JavaScript sammen - mener du så til en samlet fil med det nødvendige til det request og leverer?

Jeg ved dog ikke hvad den indbyggede minifier tager hensyn til ud over at den ordner whitespaces.
Der er blot muligheden for det - så kan du selv optimere som du selv vil til dit behov. Om du vil bruge LESS eller CoffeeScript eller hvad du føler for.

Det ER også bare vigtigt at have en hurtig side! Ikke alene på grund af dette nu er blevet en del af din ranking på Google, men også fordi brugerne er blevet meget mere krævende.
Google lavede et forsøg med at levere deres søgeresultater 500ms langsommere. Det er halvt sekundt så er virkeligt lidt, men det var meget målbart! Det gav 20% færre pageclicks.
Amazon har også lavet nogle forsøg lignende det, hvor det også var betydeligt færre køb de fik af det.
Så det kan skam betale sig at optimere.

Men du siger man compiler CSS, HTML og JavaScript sammen - mener du så til en samlet fil med det nødvendige til det request og leverer?

Dog ikke, men for at omdøbe CSS klasser er den også nødt til at rette i JavaScript (den leverer en mapning fra gammelt til nyt navn) og HTML, så det skal "minifieren" også have adgang til.

Men man kunne sagtens bygge det hele sammen til én fil, hvis man absolut vil.

Se evt. her for et eksempel på et minified CSS for et af vores spil: http://www.komogvind.dk/jsgames/PuzzleTown/679/kov.css

Men du siger man compiler CSS, HTML og JavaScript sammen - mener du så til en samlet fil med det nødvendige til det request og leverer?

Dog ikke, men for at omdøbe CSS klasser er den også nødt til at rette i JavaScript (den leverer en mapning fra gammelt til nyt navn) og HTML, så det skal "minifieren" også have adgang til.

Men man kunne sagtens bygge det hele sammen til én fil, hvis man absolut vil.

Se evt. her for et eksempel på et minified CSS for et af vores spil: http://www.komogvind.dk/jsgames/PuzzleTown/679/kov.css

Nå på den måde. Så kan jeg bedre forstå hvad du mente.

Ja det er ikke meget læsbart, men er effektivt. Det er lækkert.
Derfor jeg også selv roder med ASP.NET MVC4, fordi der masser af muligheder for den slags indbygget som jeg selv kan udvide som det passer mig. Lige nu holder jeg mig til minifieren, men skal nok have noget LESS ovenpå på et tidspunkt også.