20 ms·

What CSS minifiers also leave behind

252 points by remy_luisant 10y ago

cperciva 10y ago
I'm for hire now. Le Sigh. Email's in the footer. Remy: I'd suggest posting a CV and linking to it from this post. I looked and couldn't find one anywhere on your site; you'll get a lot more qualified interest if people can find out more about you than just a few blog posts.
- remy_luisant 10y ago
  I thought about it, but I'm way too shy for that. Not like it would lead to anywhere either, you know. :P Two years of teaching university, MSc in computing, love of automation, combinatiorial optimization without any significant amount of deep math skill, circuit design, gate array stuff, low-level CPU optimization stuff, hardware counters, microcontrollers, SQLite, Julia language, C, shell, a bunch more programming languages, basic CSS and HTML, Mustache templates, Linux. No JavaScript. The whole of luisant.ca is done by hand and from scratch, so you can see what I can do with that. Also statistics. I'm uncommonly silly and not at all serious, while still standing up for what I believe is right, even if everyone disagrees with me. I do integrity though and while I can stand my ground, I will yield to good evidence any day. I wear goofy clothes to work, usually very colourful stuff. Don't expect conformity. And I have no love greater than the one for the cause of nature conservation, and all research that goes with that. That's about me in a nutshell. Told you nothing will come of it. :P
  - xentronium 10y ago
    Man, just post a link to CV like you're advised and let good things happen to you. If they don't, you lose nothing, but if they do, you got something out of your effort.
    - cfqycwz 10y ago
      Seriously, somebody saw he's looking for a job, and was actually looking for his CV as somebody in charge of hiring might do
  - wyldfire 10y ago
    Some unsolicited advice: 1. I am not interested in jobs that focus on JavaScript, but I'd never say "No JavaScript". 2. when people ask for your CV, post a link (or if you're concerned about privacy, solicit requests via PM/email). 3. Your integrity, sillyness and attire are mostly immaterial to the job hunt. It's most appropriate for folks to make this kind of assessment during an in-person interview. 4. what is all this "nothing will come of it" business? If you think you can't get hired as a result of an HN post, I think you're sorely mistaken. Capitalize on these fifteen minutes. You've created some original, interesting content. The traffic you're getting to your site won't last, so strike while the iron is hot.
    - clairity 10y ago
      > "Your integrity, sillyness (sic) and attire are mostly immaterial to the job hunt." this sounds like drab corporate thinking and i disagree wholeheartedly. the attributes mentioned show his personality and warmth, and indicate the possibility of an interesting person and a creative thinker. as a hiring manager, my ears perk up at such things. life is too short to play it safe. have fun!
  - greenshackle2 10y ago
    You're being silly, I'm a self-taught Python coder with a degree in agricultural engineering, a sprinkling of C, Linux, Lisp and statistics, almost no JavaScript, I'm headstrong and I dress like shit, and I still managed to find interesting opportunities in the job posting threads here. Just post your damn CV.
    - remy_luisant 10y ago
      Right. You guys are right. I'll do that next time around.
  - cperciva 10y ago
    After reading that, I see only one reason I wouldn't consider hiring you: You don't have enough common sense to post your CV when someone asks for it. Seriously, if you want a job, publish your CV on your website already.
- jwilk 10y ago
  Pro tip: you can increase your chances of getting hired by 4.2% by not saying Le Sigh.
  - matt4077 10y ago
    Dunno about OP, but I wouldn't want to work for anyone who doesn't appreciate Le Sigh.
  - bostonvaulter2 10y ago
    Maybe he's actually filtering out employers
    - remy_luisant 10y ago
      I am. It won't work if the employer is not silly/carefree enough. Good fucking luck, no? :P
- remy_luisant 10y ago
  https://luisant.ca/Remy_CV_public.pdf https://luisant.ca/Remy_CV_public.pdf Well, fuck my life. Here goes, posted on the site too. This required way more courage than anything else I have done in the last few months, even after I censored it to death. Thanks for the good words, guys. I know you are right. Even though I hate to agree with you, you are right. I hate to do this, but you are right. So it is done.
josephg 10y ago
The scientific notation one is a bug. Scientific notation isn't part of the CSS spec[1], and its not supported in all browsers. I learned this one the hard way a few months ago. We ran into a flexbox bug in one browser which we worked around by adding some-rule: 0.0000001px instead of 0px. However, our minifier collapsed that using scientific notation, which triggered a rendering issue in a different browser due to the out-of-spec CSS. The whole adventure left me feeling like I'd travelled back in time. [1] https://www.w3.org/TR/CSS21/syndata.html#numbers https://www.w3.org/TR/CSS21/syndata.html#numbers
- rectangletangle 10y ago
  That's a hell of a bug, always an adventure when the error locality is really far.
- legulere 10y ago
  Scientific notation seems to be part of CCS3: https://www.w3.org/TR/css3-values/#numbers https://www.w3.org/TR/css3-values/#numbers Which browser had problems with it?
  - masklinn 10y ago
    "q" is also CSS3, incidentally, and its background is interesting[0]: it's a mostly japanese metric typographical unit[1], it replaces the point, and is slightly smaller: q is 0.25mm while pt is ~0.3528mm (precisely 1/72th of an inch which is 25.4mm). [0] http://tosche.net/2013/10/font-size-in-the-metric-system_e.html http://tosche.net/2013/10/font-size-in-the-metric-system_e.h... [1] although non-japanese typographers like Otl Aicher have recommended its use it doesn't seem to have had much success outside Japan
    - kijin 10y ago
      "q" seems to be doomed to failure. If I were that interested in moving away from points and ems, why would I adopt arbitrary fractions of a millimeter when I could just use plain old SI units that are universally understood? It doesn't even save a byte at typical font sizes: 20q == 5mm.
remy_luisant 10y ago
Author here. Wow. #1 on HN. Wow. I'd usually hang around a bit more, but I'm really tired. I posted this past my midnight. 00:51 now, and I'm fading fast. Thanks for all the love, everyone. I'll come over tomorrow (12 hours from now, or so) to answer any questions or to pick up any corrections.
- catenthusiast 10y ago
  I hope you sleep well.
  - remy_luisant 10y ago
    :3
ovao 10y ago
crass is doing some really wonderful stuff here -- I'm impressed! It's very interesting, however, that no one minifier is a consistent winner in these test cases, and that running CSS through multiple minifiers is actually, potentially, not all that crazy. (The very debatable real value in doing that notwithstanding.)
- remy_luisant 10y ago
  Yeah, crass is pretty amazing. Have you seen my post on the Remynifier, where I do exactly that? https://luisant.ca/remynifier https://luisant.ca/remynifier
- abritinthebay 10y ago
  Really? It seems that CSSO was the strong winner. It didn't possibly create bugs by rewriting to new units (especially poorly supported units like q) and had the best results overall. I'd like it to be a wee bit more aggressive on the rounding but other than that it seemed a clear winner.
- bastawhiz 10y ago
  I appreciate the compliment! (author of crass here) I've mentioned it before, but it's really not a great idea to use multiple minifiers. Minifier bugs can get nasty, and using multiple minifiers exponentially increases the likelihood that you'll encounter some weird or broken behavior. Make sure to test thoroughly.
  - remy_luisant 10y ago
    And I will mention it one more time: I totally agree with you. It needs to be said.
pasta 10y ago
This looks like a fun project indeed! Unfortunately every time I read something about minifiers I got the feeling that people are optimizing the wrong problem. If you gzip data over the line it's already compressed. So minifying your stuff will only help you a little. The problem is on the client side. You can compress what you like but if the browser starts dropping frames because it has to compile/handle a ton of Javascript and CSS then minifying doesn't help the end user.
- remy_luisant 10y ago
  I had an article about that too. If you have to do just one, you should go with zopfli or brotli instead of minifying. Having both minification and some kind of compression on top does help the file sizes. https://luisant.ca/brotli-css https://luisant.ca/brotli-css Also, purifycss and uncss are your friends to cut stuff down, to reduce the final load for the user.
- flukus 10y ago
  The other benefit is from combining files and reducing the number of http requests. Minifiers are really needed for that, but the do make for some nicer development workflows.
  - mifreewil 10y ago
    Number of HTTP requests is not a concern with HTTP2 server push and multiplexing. In fact it's usually better to have 2 fairly sized files that can be downloaded in parallel rather than 1 large file.
    - merb 10y ago
      probably not true, since most http/2 implementations that I know of use time multiplexing, which means that only one element at a time can pass, so the time is exactly the same. I mean if I split a file in 10 exact pieces or if I split two files in the exact same 10 pieces as well I still have the same data. (Edit: Well basically two files have mostly more data since they both might contain a BOM or so)
fleetfox 10y ago
Can someone provide some hard numbers from real projects as to is it really worth it assuming we can gzip/brotili?
- diamondo25 10y ago
  Don't forget that gzip/brotli only affects the shipping time. This would be the process: 1. Server: check Accept-encoding header for gzip or brotili support 2. Server: compress either brotli or gzipped file, or fall back to a raw file 3. Server: send data to client 4. Client: receive (and decompress, if not raw) 5. Client: parse (big) resource Also, compression through uglifying/minifying improves parse speed, which is really helpful on (old) mobile devices. Adding compression through gzip or brotli introduces additional overhead, because the uncompressing step will be in-memory and stalls the processing of the file.
  - the8472 10y ago
    > 2. compress No, you don't need to waste CPU cycles on compression for each connection. You can store the .css.gz on the filesystem along with the .css and have the webserver pick up the appropriate file based on Accept-encoding. That way you can precompress with the slowest compression options.
    - diamondo25 10y ago
      Of course, there are multiple ways to optimize it (like storing stuff at a CDN), but I'm pretty sure 95% of the people do not precompress their assets.
- bastawhiz 10y ago
  If you have a build step (you probably do), in most cases it's as simple as running `npm install --save` for your minifier of choice and adding one line to your build script. Even if the difference is minimal, it could mean the difference between, say, three TCP packets and four, which adds up for users on high-latency connections.
- 10y ago
mercer 10y ago
I have a slightly-related question for those of you familiar with Webpack, css modules (css-loader/style-loader), and perhaps React as well: is there any reason not to use the 'default' approach where the styles for the components are simply inserted in a <style> (with unique, generated classnames)? To be clear: I don't mean philosophical reasons. I personally love letting javascript deal with the 'cascading' part and I don't have a problem with the idea of having styling embedded in the final page. What I'm curious about is if this has any kind of negative impact on performance, bandwidth, etc. Because the CSS is loaded on the component level, and because Webpack 2 does tree shaking, the page will be guaranteed to only contain CSS for the components that are on the page. And if I'd 'lazy-load' parts of the app, I'd get that benefit for my CSS as well with no extra effort. On the other hand, any benefits of having a compiled (and hopefully cached) bundle.css are offset by the need for an extra request for the css file, as well as the very likely situation that there'll be a bunch of unused css in that bundle. Am I missing some drawback to the above-mentioned approach?
- snitko 10y ago
  Embedding css into a webpage forces this css to be loaded every time. Even if the css only contains what's needed for the page, it can still be a lot. Caching it is just common sense. I think if you try and calculate, there will be a lot of bandwidth saved if you separate css into a file.
  - ricardobeat 10y ago
    Not true. The CSS is inlined as strings in the js file, and benefits from caching just as much as the rest of your templates (this is for single-page apps).
- WorldMaker 10y ago
  <style> tags in the middle of the DOM often have a rerendering penalty (most browsers force an entire page rerender each time they encounter one). In a past life a website I worked on had a huge browser paint performance and content flash issue that was eventually cleared out by moving all the styles out of <style> tags in the DOM.
buster 10y ago
I liked the writing style, fun read AND very informative!
- remy_luisant 10y ago
  My pleasure, I'm glad you liked it! :)
Silhouette 10y ago
Here's the same author's earlier post on this subject, "The missed chances: What minifiers leave behind", from last week: https://luisant.ca/css-opts-survey https://luisant.ca/css-opts-survey
- cfqycwz 10y ago
  Anybody know if the transparency one is actually a desirable optimization? Iirc, you might want to assign a color to your transparency so it's not shifting hue as you fade it in through CSS transitions, animations, or JS.
  - bastawhiz 10y ago
    Author of crass here. That's interesting: if you have a specific case where the browser doesn't do what you'd expect, I'd love to see it in a Github issue! https://github.com/mattbasta/crass/issues/new https://github.com/mattbasta/crass/issues/new
    - cfqycwz 10y ago
      I was thinking of the fact that transparent is supposedly an alias for rgba(0,0,0,0), but this doesn't seem to cause an issue when I try it out, in Firefox at least.
replete 10y ago
Don't mean to squash any enthusiasm, but these types of 1byte optimization savings don't really have real-world benefits due to over-the-wire compression like gzip and Brotli. A more interesting problem to solve, I think, is that of optimising CSS rules for browser rendering.
- CapacitorSet 10y ago
  I partly agree. Though removing one or two bytes more than another minifier doesn't really matter that much, what matters is being able to deduplicate CSS as well as doing the usual whitespace elimination. SASS and SCSS seem to have a bit of a problem with duplicated CSS.
  - 52-6F-62 10y ago
    It's funny you should say that. I'm curious, do you have an example? I'm engaging in this ugly probably unsightly (but helpfully quick and maintainable) practice in a project with a short developmental cycle right now, and I've yet to have any issues outside of temporarily forgetting that I have already globally defined a specific style or enclosed a style I thought I'd left global. (It's a corp. annual report -- that my team got tasked with as a favour -- so it has some repeating styles, and others isolated between pages)
- phire 10y ago
  I think that there is merit in designing a minifier that is explicitly designed to optimise the gziped size rather than the uncompressed size. Things like: * Rearrange rules within the file to put similar rules within the sliding window. * Rearrange rules so that tail of the last declaration of one rule and the start of the next selector create the longest possible common substring. * Rearrange the order of declarations within the rules to maximize the length of common substrings that span two declarations, ie ": 2em;\nbackground-color: rgb("
  - remy_luisant 10y ago
    I'm working on one, though I'm not sure if it will ever see the light of the day. I have four months of free time and if someone would feed and house me for that time, I'd do it and open source it. Any sponsors? No? Didn't think so. Not even you, big G? Aww... For now some minifiers do sort the values, which helps.
cornedor 10y ago
> I'm guessing that at nine nines that is pretty much a one anyway and it would not even change a single pixel on the screen. There used to be a bug with flex-wrap: wrap; where an element would wrap to the next line while it should have fit. You could fix it by instead using width: 25%; use width: 24.999999%; so it would be 25% on the screen but it would fix the problem so it didn't wrap to the next line. So you should look out with this.
- b34r 10y ago
  That sounds like the time-honored single whitespace bug. Usually fix it with margin-left: -4px on all but the first element in the row.
- remy_luisant 10y ago
  Nice catch. Yeah, I do something like that too in my own code, though it does not cause issues when minified.
tambourine_man 10y ago
Didn't know about all of those units. q, mm, cm… scientific notation?! Also didn't know one could use counters already. Browser support is great. I thought it was still under approval. Amazing stuff, thanks
- bastawhiz 10y ago
  CSS is a far bigger spec than anyone knows. Did you know that you can put dots and spaces in your CSS classnames? Bonus points if you can figure out how to escape characters in CSS identifiers ;)
  - tambourine_man 10y ago
    That I did know. But scientific notation? C'mon
WhitneyLand 10y ago
Are there any good tools for deobfuscating css/js if you want to study a technique used on some web page?
- tclancy 10y ago
  Not sure it's a great solution for deep study, but if you just need a quick peek, the Chrome developer tools include a pretty print/ format option when applicable: https://developers.google.com/web/tools/chrome-devtools/javascript/reference#format https://developers.google.com/web/tools/chrome-devtools/java...
- SippinLean 10y ago
  There are browser extensions that will beautify source code: https://chrome.google.com/webstore/detail/javascript-and-css-code-b/iiglodndmmefofehaibmaignglbpdald?utm_source=chrome-app-launcher-info-dialog https://chrome.google.com/webstore/detail/javascript-and-css...
- bastawhiz 10y ago
  If you're using Crass, it has a --pretty flag that will pretty-print your CSS, even after minification. You can play with it online here, too: http://www.mattbasta.com/crass/ http://www.mattbasta.com/crass/
wyldfire 10y ago
If folks tend to use some higher level abstraction (isn't that what SASS and LESS are?) maybe it makes sense to provide a new way to encode the information in CSS. Similar to how WASM is supposed to be easier to parse than JavaScript, right?
bgrohman 10y ago
I like your site design. Very clean and readable.
- remy_luisant 10y ago
  Aww... Thanks! My pleasure! All from scratch, designed for nothing but readability. I am building textbooks on the same code, so the blog is a great stress and user test.

252 points by remy_luisant 10y ago

I'm for hire now. Le Sigh. Email's in the footer. Remy: I'd suggest posting a CV and linking to it from this post. I looked and couldn't find one anywhere on your site; you'll get a lot more qualified interest if people can find out more about you than just a few blog posts.

remy_luisant 10y ago
I thought about it, but I'm way too shy for that. Not like it would lead to anywhere either, you know. :P Two years of teaching university, MSc in computing, love of automation, combinatiorial optimization without any significant amount of deep math skill, circuit design, gate array stuff, low-level CPU optimization stuff, hardware counters, microcontrollers, SQLite, Julia language, C, shell, a bunch more programming languages, basic CSS and HTML, Mustache templates, Linux. No JavaScript. The whole of luisant.ca is done by hand and from scratch, so you can see what I can do with that. Also statistics. I'm uncommonly silly and not at all serious, while still standing up for what I believe is right, even if everyone disagrees with me. I do integrity though and while I can stand my ground, I will yield to good evidence any day. I wear goofy clothes to work, usually very colourful stuff. Don't expect conformity. And I have no love greater than the one for the cause of nature conservation, and all research that goes with that. That's about me in a nutshell. Told you nothing will come of it. :P
- xentronium 10y ago
  Man, just post a link to CV like you're advised and let good things happen to you. If they don't, you lose nothing, but if they do, you got something out of your effort.
  - cfqycwz 10y ago
    Seriously, somebody saw he's looking for a job, and was actually looking for his CV as somebody in charge of hiring might do
- wyldfire 10y ago
  Some unsolicited advice: 1. I am not interested in jobs that focus on JavaScript, but I'd never say "No JavaScript". 2. when people ask for your CV, post a link (or if you're concerned about privacy, solicit requests via PM/email). 3. Your integrity, sillyness and attire are mostly immaterial to the job hunt. It's most appropriate for folks to make this kind of assessment during an in-person interview. 4. what is all this "nothing will come of it" business? If you think you can't get hired as a result of an HN post, I think you're sorely mistaken. Capitalize on these fifteen minutes. You've created some original, interesting content. The traffic you're getting to your site won't last, so strike while the iron is hot.
  - clairity 10y ago
    > "Your integrity, sillyness (sic) and attire are mostly immaterial to the job hunt." this sounds like drab corporate thinking and i disagree wholeheartedly. the attributes mentioned show his personality and warmth, and indicate the possibility of an interesting person and a creative thinker. as a hiring manager, my ears perk up at such things. life is too short to play it safe. have fun!
- greenshackle2 10y ago
  You're being silly, I'm a self-taught Python coder with a degree in agricultural engineering, a sprinkling of C, Linux, Lisp and statistics, almost no JavaScript, I'm headstrong and I dress like shit, and I still managed to find interesting opportunities in the job posting threads here. Just post your damn CV.
  - remy_luisant 10y ago
    Right. You guys are right. I'll do that next time around.
- cperciva 10y ago
  After reading that, I see only one reason I wouldn't consider hiring you: You don't have enough common sense to post your CV when someone asks for it. Seriously, if you want a job, publish your CV on your website already.
jwilk 10y ago
Pro tip: you can increase your chances of getting hired by 4.2% by not saying Le Sigh.
- matt4077 10y ago
  Dunno about OP, but I wouldn't want to work for anyone who doesn't appreciate Le Sigh.
- bostonvaulter2 10y ago
  Maybe he's actually filtering out employers
  - remy_luisant 10y ago
    I am. It won't work if the employer is not silly/carefree enough. Good fucking luck, no? :P
remy_luisant 10y ago
https://luisant.ca/Remy_CV_public.pdf https://luisant.ca/Remy_CV_public.pdf Well, fuck my life. Here goes, posted on the site too. This required way more courage than anything else I have done in the last few months, even after I censored it to death. Thanks for the good words, guys. I know you are right. Even though I hate to agree with you, you are right. I hate to do this, but you are right. So it is done.

josephg 10y ago

The scientific notation one is a bug. Scientific notation isn't part of the CSS spec[1], and its not supported in all browsers. I learned this one the hard way a few months ago. We ran into a flexbox bug in one browser which we worked around by adding some-rule: 0.0000001px instead of 0px. However, our minifier collapsed that using scientific notation, which triggered a rendering issue in a different browser due to the out-of-spec CSS. The whole adventure left me feeling like I'd travelled back in time. [1] https://www.w3.org/TR/CSS21/syndata.html#numbers https://www.w3.org/TR/CSS21/syndata.html#numbers

rectangletangle 10y ago
That's a hell of a bug, always an adventure when the error locality is really far.
legulere 10y ago
Scientific notation seems to be part of CCS3: https://www.w3.org/TR/css3-values/#numbers https://www.w3.org/TR/css3-values/#numbers Which browser had problems with it?
- masklinn 10y ago
  "q" is also CSS3, incidentally, and its background is interesting[0]: it's a mostly japanese metric typographical unit[1], it replaces the point, and is slightly smaller: q is 0.25mm while pt is ~0.3528mm (precisely 1/72th of an inch which is 25.4mm). [0] http://tosche.net/2013/10/font-size-in-the-metric-system_e.html http://tosche.net/2013/10/font-size-in-the-metric-system_e.h... [1] although non-japanese typographers like Otl Aicher have recommended its use it doesn't seem to have had much success outside Japan
  - kijin 10y ago
    "q" seems to be doomed to failure. If I were that interested in moving away from points and ems, why would I adopt arbitrary fractions of a millimeter when I could just use plain old SI units that are universally understood? It doesn't even save a byte at typical font sizes: 20q == 5mm.

remy_luisant 10y ago

Author here. Wow. #1 on HN. Wow. I'd usually hang around a bit more, but I'm really tired. I posted this past my midnight. 00:51 now, and I'm fading fast. Thanks for all the love, everyone. I'll come over tomorrow (12 hours from now, or so) to answer any questions or to pick up any corrections.

catenthusiast 10y ago
I hope you sleep well.
- remy_luisant 10y ago
  :3

ovao 10y ago

crass is doing some really wonderful stuff here -- I'm impressed! It's very interesting, however, that no one minifier is a consistent winner in these test cases, and that running CSS through multiple minifiers is actually, potentially, not all that crazy. (The very debatable real value in doing that notwithstanding.)

remy_luisant 10y ago
Yeah, crass is pretty amazing. Have you seen my post on the Remynifier, where I do exactly that? https://luisant.ca/remynifier https://luisant.ca/remynifier
abritinthebay 10y ago
Really? It seems that CSSO was the strong winner. It didn't possibly create bugs by rewriting to new units (especially poorly supported units like q) and had the best results overall. I'd like it to be a wee bit more aggressive on the rounding but other than that it seemed a clear winner.
bastawhiz 10y ago
I appreciate the compliment! (author of crass here) I've mentioned it before, but it's really not a great idea to use multiple minifiers. Minifier bugs can get nasty, and using multiple minifiers exponentially increases the likelihood that you'll encounter some weird or broken behavior. Make sure to test thoroughly.
- remy_luisant 10y ago
  And I will mention it one more time: I totally agree with you. It needs to be said.

pasta 10y ago

This looks like a fun project indeed! Unfortunately every time I read something about minifiers I got the feeling that people are optimizing the wrong problem. If you gzip data over the line it's already compressed. So minifying your stuff will only help you a little. The problem is on the client side. You can compress what you like but if the browser starts dropping frames because it has to compile/handle a ton of Javascript and CSS then minifying doesn't help the end user.

remy_luisant 10y ago
I had an article about that too. If you have to do just one, you should go with zopfli or brotli instead of minifying. Having both minification and some kind of compression on top does help the file sizes. https://luisant.ca/brotli-css https://luisant.ca/brotli-css Also, purifycss and uncss are your friends to cut stuff down, to reduce the final load for the user.
flukus 10y ago
The other benefit is from combining files and reducing the number of http requests. Minifiers are really needed for that, but the do make for some nicer development workflows.
- mifreewil 10y ago
  Number of HTTP requests is not a concern with HTTP2 server push and multiplexing. In fact it's usually better to have 2 fairly sized files that can be downloaded in parallel rather than 1 large file.
  - merb 10y ago
    probably not true, since most http/2 implementations that I know of use time multiplexing, which means that only one element at a time can pass, so the time is exactly the same. I mean if I split a file in 10 exact pieces or if I split two files in the exact same 10 pieces as well I still have the same data. (Edit: Well basically two files have mostly more data since they both might contain a BOM or so)

fleetfox 10y ago

Can someone provide some hard numbers from real projects as to is it really worth it assuming we can gzip/brotili?

diamondo25 10y ago
Don't forget that gzip/brotli only affects the shipping time. This would be the process: 1. Server: check Accept-encoding header for gzip or brotili support 2. Server: compress either brotli or gzipped file, or fall back to a raw file 3. Server: send data to client 4. Client: receive (and decompress, if not raw) 5. Client: parse (big) resource Also, compression through uglifying/minifying improves parse speed, which is really helpful on (old) mobile devices. Adding compression through gzip or brotli introduces additional overhead, because the uncompressing step will be in-memory and stalls the processing of the file.
- the8472 10y ago
  > 2. compress No, you don't need to waste CPU cycles on compression for each connection. You can store the .css.gz on the filesystem along with the .css and have the webserver pick up the appropriate file based on Accept-encoding. That way you can precompress with the slowest compression options.
  - diamondo25 10y ago
    Of course, there are multiple ways to optimize it (like storing stuff at a CDN), but I'm pretty sure 95% of the people do not precompress their assets.
bastawhiz 10y ago
If you have a build step (you probably do), in most cases it's as simple as running `npm install --save` for your minifier of choice and adding one line to your build script. Even if the difference is minimal, it could mean the difference between, say, three TCP packets and four, which adds up for users on high-latency connections.
10y ago

mercer 10y ago

I have a slightly-related question for those of you familiar with Webpack, css modules (css-loader/style-loader), and perhaps React as well: is there any reason not to use the 'default' approach where the styles for the components are simply inserted in a <style> (with unique, generated classnames)? To be clear: I don't mean philosophical reasons. I personally love letting javascript deal with the 'cascading' part and I don't have a problem with the idea of having styling embedded in the final page. What I'm curious about is if this has any kind of negative impact on performance, bandwidth, etc. Because the CSS is loaded on the component level, and because Webpack 2 does tree shaking, the page will be guaranteed to only contain CSS for the components that are on the page. And if I'd 'lazy-load' parts of the app, I'd get that benefit for my CSS as well with no extra effort. On the other hand, any benefits of having a compiled (and hopefully cached) bundle.css are offset by the need for an extra request for the css file, as well as the very likely situation that there'll be a bunch of unused css in that bundle. Am I missing some drawback to the above-mentioned approach?

snitko 10y ago
Embedding css into a webpage forces this css to be loaded every time. Even if the css only contains what's needed for the page, it can still be a lot. Caching it is just common sense. I think if you try and calculate, there will be a lot of bandwidth saved if you separate css into a file.
- ricardobeat 10y ago
  Not true. The CSS is inlined as strings in the js file, and benefits from caching just as much as the rest of your templates (this is for single-page apps).
WorldMaker 10y ago
<style> tags in the middle of the DOM often have a rerendering penalty (most browsers force an entire page rerender each time they encounter one). In a past life a website I worked on had a huge browser paint performance and content flash issue that was eventually cleared out by moving all the styles out of <style> tags in the DOM.

buster 10y ago

I liked the writing style, fun read AND very informative!

remy_luisant 10y ago
My pleasure, I'm glad you liked it! :)

Silhouette 10y ago

Here's the same author's earlier post on this subject, "The missed chances: What minifiers leave behind", from last week: https://luisant.ca/css-opts-survey https://luisant.ca/css-opts-survey

cfqycwz 10y ago
Anybody know if the transparency one is actually a desirable optimization? Iirc, you might want to assign a color to your transparency so it's not shifting hue as you fade it in through CSS transitions, animations, or JS.
- bastawhiz 10y ago
  Author of crass here. That's interesting: if you have a specific case where the browser doesn't do what you'd expect, I'd love to see it in a Github issue! https://github.com/mattbasta/crass/issues/new https://github.com/mattbasta/crass/issues/new
  - cfqycwz 10y ago
    I was thinking of the fact that transparent is supposedly an alias for rgba(0,0,0,0), but this doesn't seem to cause an issue when I try it out, in Firefox at least.

replete 10y ago

Don't mean to squash any enthusiasm, but these types of 1byte optimization savings don't really have real-world benefits due to over-the-wire compression like gzip and Brotli. A more interesting problem to solve, I think, is that of optimising CSS rules for browser rendering.

CapacitorSet 10y ago
I partly agree. Though removing one or two bytes more than another minifier doesn't really matter that much, what matters is being able to deduplicate CSS as well as doing the usual whitespace elimination. SASS and SCSS seem to have a bit of a problem with duplicated CSS.
- 52-6F-62 10y ago
  It's funny you should say that. I'm curious, do you have an example? I'm engaging in this ugly probably unsightly (but helpfully quick and maintainable) practice in a project with a short developmental cycle right now, and I've yet to have any issues outside of temporarily forgetting that I have already globally defined a specific style or enclosed a style I thought I'd left global. (It's a corp. annual report -- that my team got tasked with as a favour -- so it has some repeating styles, and others isolated between pages)
phire 10y ago
I think that there is merit in designing a minifier that is explicitly designed to optimise the gziped size rather than the uncompressed size. Things like: * Rearrange rules within the file to put similar rules within the sliding window. * Rearrange rules so that tail of the last declaration of one rule and the start of the next selector create the longest possible common substring. * Rearrange the order of declarations within the rules to maximize the length of common substrings that span two declarations, ie ": 2em;\nbackground-color: rgb("
- remy_luisant 10y ago
  I'm working on one, though I'm not sure if it will ever see the light of the day. I have four months of free time and if someone would feed and house me for that time, I'd do it and open source it. Any sponsors? No? Didn't think so. Not even you, big G? Aww... For now some minifiers do sort the values, which helps.

cornedor 10y ago

> I'm guessing that at nine nines that is pretty much a one anyway and it would not even change a single pixel on the screen. There used to be a bug with flex-wrap: wrap; where an element would wrap to the next line while it should have fit. You could fix it by instead using width: 25%; use width: 24.999999%; so it would be 25% on the screen but it would fix the problem so it didn't wrap to the next line. So you should look out with this.

b34r 10y ago
That sounds like the time-honored single whitespace bug. Usually fix it with margin-left: -4px on all but the first element in the row.
remy_luisant 10y ago
Nice catch. Yeah, I do something like that too in my own code, though it does not cause issues when minified.

tambourine_man 10y ago

Didn't know about all of those units. q, mm, cm… scientific notation?! Also didn't know one could use counters already. Browser support is great. I thought it was still under approval. Amazing stuff, thanks

bastawhiz 10y ago
CSS is a far bigger spec than anyone knows. Did you know that you can put dots and spaces in your CSS classnames? Bonus points if you can figure out how to escape characters in CSS identifiers ;)
- tambourine_man 10y ago
  That I did know. But scientific notation? C'mon

WhitneyLand 10y ago

Are there any good tools for deobfuscating css/js if you want to study a technique used on some web page?

tclancy 10y ago
Not sure it's a great solution for deep study, but if you just need a quick peek, the Chrome developer tools include a pretty print/ format option when applicable: https://developers.google.com/web/tools/chrome-devtools/javascript/reference#format https://developers.google.com/web/tools/chrome-devtools/java...
SippinLean 10y ago
There are browser extensions that will beautify source code: https://chrome.google.com/webstore/detail/javascript-and-css-code-b/iiglodndmmefofehaibmaignglbpdald?utm_source=chrome-app-launcher-info-dialog https://chrome.google.com/webstore/detail/javascript-and-css...
bastawhiz 10y ago
If you're using Crass, it has a --pretty flag that will pretty-print your CSS, even after minification. You can play with it online here, too: http://www.mattbasta.com/crass/ http://www.mattbasta.com/crass/

wyldfire 10y ago

If folks tend to use some higher level abstraction (isn't that what SASS and LESS are?) maybe it makes sense to provide a new way to encode the information in CSS. Similar to how WASM is supposed to be easier to parse than JavaScript, right?

bgrohman 10y ago

I like your site design. Very clean and readable.

remy_luisant 10y ago
Aww... Thanks! My pleasure! All from scratch, designed for nothing but readability. I am building textbooks on the same code, so the blog is a great stress and user test.