Menu
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:
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?
455
Why Should I Use Them? The main benefit to using data URIs is that you can reduce the number of HTTP requests that your site needs to make to load the page. Each individual file referenced in your CSS or HTML code will create a new HTTP request.
Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. By consisting only of ASCII characters, base64 strings are generally url-safe, and that's why they can be used to encode data in Data URLs.
A Data URI (Uniform Resource Identifier) is a scheme that allows data to be encoded into a string, and then embedded directly into HTML or CSS. The more commonly known URL (Uniform Resource Locator) is a subset of Data URI that specifically identifies a resource's location, such as the IP address of a website.
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 animgtag with ansrcattribute!
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".
125
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.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
