Archive for the 'CSS' Category

YUI CSS Min – part 2

May 20th, 2010

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 […]

 

15 minutes could save you…

May 17th, 2010

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 […]

 

Browser sniffing with conditional comments

May 13th, 2010

Browser sniffing is bad. But sometimes unavoidable. But doing it on the server is bad, because UA string is unreliable. The solution is to use conditional comments and let IE do the work. Because you’re targeting IE most of the times anyway. In fact IE8 is a decent browser for the most practical purposes and […]

 

Preload CSS/JavaScript without execution

Apr 21st, 2010

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 […]

 

Publishing 5 books this year

Apr 1st, 2010

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”, […]

 

YUICompressor’s CSSMin

Mar 10th, 2010

Honored to be a part of the YUI project, I am now helping with the maintenance of the CSSMin part of the YUICompressor. My changes are now part of the trunk on github, so I’m official. Next on the agenda is documenting the thing, so that’s what I’ll try to do here, maybe in a […]

 

Uncompressed data in base64? Probably not

Feb 4th, 2010

The beauty of experimentation is that failures are just as fun as successes. Warning: this post is about a failure, so you can skip it altogether 🙂 The perf advent calendar was my attempt to flush out a bunch of stuff, tools and experiments I was doing but never had the time to talk about. […]

 

One-click Minifier Gadget (OMG) – initial checkin

Jan 31st, 2010

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 […]

 

CSS performance: UI with fewer images

Dec 23rd, 2009

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 […]

 

The new game show: “Will it reflow?”

Dec 19th, 2009

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. […]

 

Rendering: repaint, reflow/relayout, restyle

Dec 17th, 2009

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 […]

 

Give PNG a chance

Dec 13th, 2009

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 […]

 

Reducing the payload: compression, minification, 204s

Dec 11th, 2009

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 […]

 

Duplicates and near-duplicates

Dec 9th, 2009

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 […]

 

Data URIs, MHTML and IE7/Win7/Vista blues

Dec 7th, 2009

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 7 This is the seventh in the series of performance articles as part of my 2009 performance advent calendar experiment. Stay tuned for the next articles. UPDATE: While this post is an interesting study, the problem it solves turns out to be much simpler. […]

 

Reducing the number of page components

Dec 5th, 2009

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 5 This is the fifth in the series of performance articles as part of my 2009 performance advent calendar experiment. Stay tuned for the next articles. Let’s talk a but about waterfall optimization – the first thing that happens in Mr.Page’s life. The best […]

 

Statsy – more data points for markup quality

Nov 30th, 2009

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 […]

 

Flipity flop – mmm.phpied.com

Nov 19th, 2009

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. […]

 

@font-face gzipping – take II

Oct 20th, 2009

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 […]

 

Gzip your @font-face files

Oct 10th, 2009

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 […]

 

CSS munging – a FAILed experiment

Oct 3rd, 2009

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

Sep 23rd, 2009

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 […]

 

Sorting CSS to reduce gzip file sizes?

Sep 2nd, 2009

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 […]

 

The art and craft of postload preloads

Aug 27th, 2009

What can your tired old page, once loaded and used and read, can do for your user? It can preload components needed by the next page, so when the users visit the next page, they have the new scripts, styles and images already in the cache. Next page loads faster and the user’s happy. On […]

 

The star hack in IE8 and dynamic stylesheets

Jul 3rd, 2009

CSS hacks ⇓ skip if you already know about the star and underscore hacks For most CSS tasks, there are only two hacks that are straighforward to use, easy to spot and maintain (delete down the road), easy to understand. The star hack that targets IE6 and 7 and the underscore hack that targets IE6. […]