Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

When GZIPped, is this …

h1 {
  font-size: 3em;
  font-weight: bold;
}

h2 {
  font-size: 2em;
  font-weight: bold;
}

b, strong {
  font-weight: bold
}

… substantially different from this …

h1,h2,b,strong{font-weight:bold}
h1{font-size:3em}
h2{font-size:2em}

… when it comes to file download size?

(Obviously, this is short enough that it won't really matter. But on an enterprise-level site with thousands of classes, is one of these going to be radically different from a file-size perspective? Also: There are other benefits to extracting out common code, but I'm wondering at the moment about file size.)

@jbeker
Copy link

jbeker commented May 21, 2014

I would argue this needs some testing with larger files. (I ran a quick test and given the small file size of your second example, it actually got larger due to gzip compression)

I would argue that it would be good to do both. By "collapsing" the CSS first you can apply syntactical compression of the data that gzip can't use but then gzip can get rid of normal runs and repetitions.

gzip is a great, "free" way to make things smaller (at the expense of some CPU cost).

@jbeker
Copy link

jbeker commented May 21, 2014

But, as a side note, the compressed version of the first example (92 bytes) is still larger than the uncompressed second version (70 bytes)

@charliepark
Copy link
Author

charliepark commented May 21, 2014

Jeremy, thanks for running that test. I agree: it'd be worth running a larger-scale test on it. I'll let you know what I find out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment