Archive for the 'CSS' Category

Inline MHTML+Data URIs

Oct 3rd, 2010

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

 

The proper MHTML syntax

Oct 3rd, 2010

Reducing the number of HTTP requests is a must, sprites are cool, but a pain to maintain, so there come data URIs (for all browsers) and MHTML (IE6 and 7). I’ve talked about these things on this blog to a point where the blog comes up in top 10 results in search engines for queries […]

 

Conditional comments block downloads

May 23rd, 2010

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

 

YUI CSS min – part 3 – hacks

May 21st, 2010

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

 

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