This article is a follow-up to my recent post: On Mobile, Data URIs are 6x Slower than Source Linking.
In a previous post, I introduced new research which showed that using the data URI scheme inline is significantly slower to materialize an image on mobile than using an image tag directly (and if the image is known to be in the browser cache). I suggested that mobile web developers focus on using data URIs only for smaller resources and look at alternatives such as CSS sprites instead.
As a result of discussions with Ilya Grigorik from the Google Make the web Faster team and other developers from the web community such as Andy Davies, Tim Kadlec and Alex Sexton, I decided to run a follow-up test to give web developers a more precise insight into the source of the performance bottleneck of using data URIs.
In this article, I’ll investigate one possible candidate for the bottleneck: decoding the Base64 encoded data. This decoding process is used with binary images to transform the data into a format that is safe to include inline in HTML or CSS.
Spoiler: the bottleneck does not lie in Base64 encoding but may reside in resource scheduling of data URIs in general!