5

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?

unor
  • 87,575
  • 24
  • 195
  • 335
user1087110
  • 3,453
  • 11
  • 30
  • 42

2 Answers2

6

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".

unor
  • 87,575
  • 24
  • 195
  • 335
  • 2
    Thanks. I also found this: http://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice. I will not go with URIs, not even in a separated CSS document since it cost CPU... Thanks – user1087110 Dec 12 '13 at 15:09
  • I would imagine the main issue is that for every image you've increased the size of the overall download because base64 encoded strings are much larger than the binary equivalent. – Rob Evans Feb 12 '19 at 19:16
1

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.

user2227606
  • 71
  • 7
  • Thanks for answering! Do you know why URI's of large size slows down the page? I dont care about versions lower than EI9 :) Why would a data URI of 200 kb be worse than a separated jpg file of 200kb? Do you know if the browser must complete the load of the html file before it can start loading the linked sources in it? Do you know if the CSS file will have to be complete loaded before all CSS settings are set? – user1087110 Dec 12 '13 at 14:36