Data URI's slow down page

Question

I built a script that replaced all inline images with data URI's to reduce http requests and seed up loading time on mobile devices.

Unfortunately I experienced slower loading. I figure it depends on that the html file was bigger (around 100kb instead of around 5 kb) :)? Or is there something else with data URIs that slows down the page load?

Must the browser complete download of the full document before it can load liked sources in it? Or will linked sources, for example css and javascript in the top of document, be loaded before browser has completet the full document?

How does it work with CSS? Must the browser load the complete CSS file before reading all the CSS settings?

If so, is it better to have a sepearate CSS file for data uri like this:

1. Load CSS for structure (no data uri's)
2. Load CSS for background images (all background images in URI format)

Will a "separate chaced jpg file" load faster than a "URI based image included in a cached css file"?

Any other suggestions on how to use data URIs?

Answer 1

mobify.com published a blog post: On Mobile, Data URIs are 6x Slower than Source Linking (New Research)

[…]
So you can imagine my surprise to discover, when measuring the performance of hundreds of thousands of mobile page views, that loading images using a data URI is on average 6x slower than using a binary source link such as an img tag with an src attribute!

I didn’t dig into this post, but I guess part of the problem might be the required CPU power for decoding base64-encoded data URIs.

The author recommends to use data URIs only "infrequently for small images".

Answer 2

HTML contents are loaded in order they appear in the HTML file. Data URI's of large size slows down the page. Large Data URI are not supported in IE browsers(IE6).

Data URI for image size less than 20KB is recommended & normally used.

You have the option of image compression, js, css compression to increase pagespeed.