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 […]
CSS railroad diagrams
Nov 28th, 2010So 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 […]
CSS Lexer
Nov 27th, 2010I 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 […]
CSS minifiers comparison
Oct 30th, 2010Last 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 […]
Inline MHTML+Data URIs
Oct 3rd, 2010MHTML 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 […]
Conditional comments block downloads
May 23rd, 2010I 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 […]
YUI CSS min – part 3 – hacks
May 21st, 2010The 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 […]
YUI CSS Min – part 2
May 20th, 2010The 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 […]
15 minutes could save you…
May 17th, 2010Since 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 […]
Preload CSS/JavaScript without execution
Apr 21st, 2010Preloading 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 […]
Publishing 5 books this year
Apr 1st, 2010So 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”, […]
One-click Minifier Gadget (OMG) – initial checkin
Jan 31st, 2010So 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 […]
CSS performance: UI with fewer images
Dec 23rd, 20092010 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 […]
The new game show: “Will it reflow?”
Dec 19th, 20092010 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. […]
Rendering: repaint, reflow/relayout, restyle
Dec 17th, 20092010 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 […]
Give PNG a chance
Dec 13th, 20092010 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 […]
Reducing the payload: compression, minification, 204s
Dec 11th, 20092010 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 […]
Duplicates and near-duplicates
Dec 9th, 20092010 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 […]
Statsy – more data points for markup quality
Nov 30th, 2009In 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 […]
Flipity flop – mmm.phpied.com
Nov 19th, 2009Randomly 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. […]
@font-face gzipping – take II
Oct 20th, 2009Since 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 […]
Gzip your @font-face files
Oct 10th, 2009Adding 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 […]
CSS munging – a FAILed experiment
Oct 3rd, 2009Not 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
Sep 23rd, 2009cssmin.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 […]
Sorting CSS to reduce gzip file sizes?
Sep 2nd, 2009Yesterday 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 […]