tl;dr: You can stop worrying and URL-encode only the # character. What? So you want to have an SVG image in a CSS stylesheet. Yup, using data URIs (hey lookie, a 2009 post). There are a number of reasons not to embed images in CSS to begin with (caching, reuse), but hey, sometimes you’re not […]

So next step after the sexy CSS lexer is parsing. But first – railroad diagrams to help visualize how/when the tokens make sense forming valid CSS code. Below is what I have so far. It includes pretty much everything except selectors. Selectors are getting increasingly complex, come to think of it. There are probably mistakes […]

I have so much stuff to do and I’ve been feeling a little overwhelmed lately. Not depressed, because it’s next to impossible to be depressed at a climate including 320 sunny days a year and a beach. So I thought why not drop everything and relax. I’m currently staying at home, enjoying my unused vacation […]

Last year I compared some CSS minifiers, namely YUICompressor, CSSTidy (with “small” vs. “safe” settings), PHP PEAR’s CSS lib and Minify (detailed results). Now that I’ve done some work on the YUICompressor and since there’s a new kid on the block from Microsoft I thought I should give it another go. I only compared CSSTidy […]

MHTML and Data URIs in the same CSS file is totally doable and gives us nice support for IE6+ and all modern browsers. But the question is – what about inline styles. In other words can you have a single-request web application which bundles together markup, inline styles, inline scripts, inline images? With data URIs […]

I came across this blog post (via @pornelski and @souders) where Markus has stumbled upon a case where an IE6-only stylesheet included with a conditional comment blocks the downloads in IE8. Whaaat? I had to dig in. To give you a summary: turned out that any conditional comment, not only for an extra CSS, will […]

The previous parts are here (building and testing) and here (what gets minified). Now let’s see how YUI CSS min handles CSS hacks. As you know CSS hacks often use errors in CSS parsers in browsers to target specific browser versions and supply additional rules to work around other issues in said browsers. That makes […]

The first part is here. It was more about building the YUICompressor, writing and running test cases. Now let’s see what the compressor does exactly to your CSS. BTW, you can play with the web UI to see for yourself how the minifier works. Stripping comments and white space This is the bare minimum a […]

Since I have a ton of things to do, I decided it was about time to spend some time with this blog, performance optimization-wise. Not do anything special, just the bare minimum, the no-brainer, works-every-time, easy stuff. And I’m quite happy with the results. I only looked at the homepage, although the results will be […]

Preloading components in advance is good for performance. There are several ways to do it. But even the cleanest solution (open up an iframe and go crazy there) comes at a price – the price of the iframe and the price of parsing and executing the preloaded CSS and JavaScript. There’s also a relatively high […]

So I’ll be publishing 5 books this year. Isn’t that incredible? Is it even possible? And good quality books at that? It’s a nice challenge (my last year’s challenge failed, I didn’t even bother to count how bad it failed). I think it’s possible, especially if you bend a little bit the meaning of “5”, […]

So I’ve been thinking and talking to folks about this idea of having one-stop shop for all your minification needs. Minification of JS and CSS as well as image optimization helps site performance by reducing download sizes. This is good. But not a lot of people do it. People don’t do it, because it’s a […]

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 23 This post is the one-before-last article in the 2009 performance advent calendar experiment. Often performance improvements come with their drawbacks, sometimes improving performance causes pains in other parts of the development process or strips stuff from the final product. Sometimes there’s even a […]

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 19 This post is part of the 2009 performance advent calendar experiment. Stay tuned for the articles to come. Intrigued by Luke Smith’s comment and also Alois Reitbauer’s comment on the previous post about rendering I did some more testing with dynaTrace and SpeedTracer. […]

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 17 This post is part of the 2009 performance advent calendar experiment. Stay tuned for the articles to come. UPDATE: Ukraine translation here. Nice 5 “R” words in the title, eh? Let’s talk about rendering – a phase that comes in the Life of […]

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 13 This post is part of the 2009 performance advent calendar experiment. Stay tuned for the articles to come. People are often afraid to use PNG because they think that: a/ it doesn’t work in all browsers, or b/ filesizes are bigger than GIF […]

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 11 This post is part of the 2009 performance advent calendar experiment. Stay tuned for the next articles. After removing all the extra HTTP requests you possibly can from your waterfall, it’s time to make sure that those that are left are as small […]

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 9 This post is part of the 2009 performance advent calendar experiment. Stay tuned for the next articles. One of Yahoo!’s first batch of performance best practices has always been “Avoid duplicate scripts” (check Steve Souders’ post). Later we added “… and styles”. This […]

In the spirit of the content-to-markup ratio bookmarklet, here’s another one that gives you some more data points to help you judge the quality of a page’s markup and help answer the old question – where does all this page weight go. Install the statsy bookmarklet Drag this link to your bookmarks: statsy the results […]

Randomly browsing something on the iPhone it occurred to me that people could prefix their mobile sites with “mmm” instead of “m” or “i”, as in mmm.mysite.tld. It’s longer, true, but I don’t think it will take longer to type three m’s instead of one. And it’s funny – mmm, it’s like www. Only… flipped. […]

Since my previous post on @font-face and gzipping, Paul Irish has asked (and so has @KLTF) what about WOFF? WOFF is a newer format with built in compression and ability to store meta data. So I took this stnf2woff utility and converted all the TTF and OTF files from my previous tests to WOFF. Below […]

Adding custom fancy fonts to a web page seems to be all the rage these days. Looking at some examples with Net panel on, I saw some of those font files are 100K which is a pretty big price to pay for an ornament like this. I mean you can build whole pages, with fancy […]

Not sure if I’ve ever put that in writing, but CSS irks me with its verboseness. I mean things like: background-position, padding-bottom, text-decoration… those are long property names, repeatedly used in stylesheets. And there’s pretty much nothing you can do about them in terms of minification, it’s not like they are variables in JavaScript which […]

cssmin.js is a JavaScript port of YUICompressor’s CSS minifier. The motivation Minifying CSS helps reduce file sizes and makes your pages faster and your users happier. YUICompressor is cool but is written in Java, which can be a blocker for some folks – you know JVM, command line, classpaths… No more excuses, now you have […]

Yesterday I came across this post (via Ajaxian), it talks about how you might be able to end up with smaller file sizes (after gzipping) if you help gzip a little bit by sorting the CSS properties and values in stylesheets, so they are as similar and close to each other as possible. Now obviously […]