data:URI is the next generation of acceleration techniques
This is the third post (part 1, 2) in our Stage 2 of website performance optimization. After Stage 1 with 2-3x speedup we are going to add about 20% more to load speed value.
Today’s theme is data:URI (and mhtml) technique.
Basics: benefits and drawbacks
data:URI allows you to present image (=binary) data in text files (i.e. CSS ones). This is possible with the help of base64-encoding (each 3 bytes are encoded with 4, more info in Wikipedia). So we can add all CSS images directly to CSS file and save a lot of HTTP requests.
For example there is a favicon.ico from our website.
AAABAAEAEBAAAAEAGABoAwAAFgAAACgAAAAQAAAAIAAAAAEAGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAADc1NRxTU1QJCQ9DAw9DAxQJCRxTU3c1NQAAAAAAAAAAAAAAAAAAAAAAAAAAABvS0s1AgIzAAAzAA AzAAAzAAAzAAAzAAA1AgJvS0sAAAAAAAAAAAAAAAAAAABiOjo4BgY9DAyOcXHVysr18vL18vLVysqOcXE9DAw4B gZgOTkAAAAAAAAAAAB4V1dBEhJUKirb0tL////////////////////////b0tJUKipBEhJ4V1cAAAAAAABMICBR JSXc1NT////q4+O1nJz///////+1nJzq4+P////c1NRPIyNMICAAAACIampUKSmcg4P///////+dfXxSGRj59/f 59/dSGRidfXz///////+cg4NUKSmIamp0UVFdNTXe1tb////7+flQFxZAAQCniYmniYlAAQBQFxb7+fn////e1t ZdNTV0UVFtSEhmQED49vb///+/qqpAAQCUcXBNExJNExKUcXBAAQC/qqr////49vZmQEBtSEh2VFRwTEz49/f// /9tPTxrOzr8+/tYISBYISD8+/tqOThtPTz////49/dwTEx2VFSMcHB5WFjk3d3e09NAAQC3n5////+1nJy1nJz/ //+2nZ1AAQDe09Pk3d15WFiMcHCok5OCY2O1o6P////////////////8+/v+/f3///////////////+1o6OCY2O ok5MAAACNcHCPcnLp4+P////////////////////////////////p4+OPcnKNcHAAAAAAAACzoaGVenqgiIjq5e X////////////////////////q5eWgiIiVenqzoaEAAAAAAAAAAACzn5+ehoagiYnHubnq5eX6+fn6+fnq5eXHu bmgiYmehoayn58AAAAAAAAAAAAAAAAAAADCsrKpk5OokpKokpKokpKokpKokpKokpKpk5PCsrIAAAAAAAAAAAAA AAAAAAAAAAAAAADy7u7Ju7u8q6u1oqK1oqK8q6vJu7vy7u4AAAAAAAAAAAAAAADwDwAA4AcAAMADAACAAQAAgAE AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIABAACAAQAAwAMAAOAHAADwDwAA
And all modern browsers will display the code above as a common image: 
Benefits of such approach are obvious. But what about drawbacks? There is a good article about data:URI and mhtml approaches combination. Also there are several troubles with serving such CSS images to different IE (mhtml can be a solution but it works badly in IE7@Vista). But this is a good point to start from.
Tools and automation
duris.ru was launched more than a year ago and provides you with a completely automated way to prepare data:URI / mhtml CSS files + some JavaScript magic to server them correctly to our visitors. But this can be inacceptable because we need to manually change our templates. And there are lot of changes.
There is also a number of console tools to prepare the same thing. One of them is CSSEmbed which requires java and parses input CSS file to provide complete package.
Also there is a good open source PHP library to perform almost the same – CSS-JS-Booster. You can try this stuff to optimize WordPress blog. It seems it provide the same approach as PHP Speedy and is being developed more rapidly.
But let’s review some WordPress plugins which can help us to inject some data:URI to our blog.
Autoptimize
One of a few WordPress plugins which allows you to prepare base64-encoded files is Autoptimize. Yesterday we finished with the following picture (YSlow chart).
Let’s see how it can be improved with this plugin.
It seems it handles data:URI creation quite well. But (as we remember) it doesn’t handle properly one our style sheet (and we can’t exclude it). Also by default it creates 2 CSS files (with mhtml it creates even 3 files which is a bit ridiculous – we are going to minimize and cache HTTP requests, not to increase them).
OK. Autoptimize is sometimes good.
WEBO Site SpeedUp
Well, after straight data:URI enable we have a bit broken website. It seems CSS Tidy (which is used for styles optimization) can’t handle CSS property font right. But we can use additional option and set some styles over calculated ones (to override them). In our case this set seems to fix all (or almost all) troubles.
body {
line-height:1.5;
}
h2, .content .meta {
line-height:1
}And we have now?
It seems there is something wrong. We have no CSS images (that is good) but 2 CSS files for about 260 (!) Kb. Why?
2 CSS files are generally better than 1 (that’s why Autooptimize tries to create 2) but they should be used carefully (we will review what is the best practice here – to download styles concurrently). But now let’s fix this issue. First of all we need to find why there are so many images in our CSS file.
GD Star Rating plugin by default adds to CSS file all possible background images. It’s better to remove unused ones (to reduce CSS files size and number of unused CSS selectors). But we have another way – we can just exclude a number of images from data:URI / mhtml creation. For GD Star Rating this set of exclusions will be the following.
stars12.png stars16.png stars20.png stars24.png stars30.png stars46.png stars12.gif stars16.gif stars20.gif stars24.gif stars30.gif stars46.gif
After this tuning overall picture became much better.
As you can see without any losses in image quality, size, or number we have reduced HTTP requests by 11 (actually here is implemented a fix for the previous day trouble with 1 style sheet) and page size by 70 Kb (this is because of compression over minified images – when we combine several images together general compression rate increases).
Right now we have 2 CSS files (that is good) but both are loaded before page starts to render in browser (that is bad). We will cover in the next post how to prevent such behavior.
Conclusion
In a few steps (they were maybe not so simple, but took from us about an hour only) we reached 17% more speedup and decreased the number of HTTP requests (which we are fighting against in our optimization sage Stage 2) by 20%. Well done.
We will speak deeper about data:URI approach in the next post. Keep tuned.
Have you had any trouble with https? When we use images and css combined using mhtml we get a “secure and non-secure” warning in IE if the request uses https.
Yes, it seems to have been investgated a bit. But there is little information about actual IE issues with mhtml usage. We are going to cover them in the next posts.