Peter McLachlan

Twitter LinkedIn

Peter’s background in HCI research and large-scale system architecture drives the evolution of Mobify’s Mobile Cloud. On sunny days, he leads workouts on Mobify’s rooftop patio.

CSS Sprites vs. Data URIs: Which is Faster on Mobile?

This article is the final piece of a three part series investigating the performance of data URIs on mobile. You can check out my previous posts 'On Mobile, Data URIs are 6x Slower than Source Linking' and 'Data URI Performance: Don’t Blame it on Base64' for more information on the subject.

About a month ago, I did some research to understand why I was seeing poor performance using data URIs in a web component I was building. After posting my results, the most persistent question from the wider web performance community was:

"OK, but how do data URIs perform compared to CSS spriting as a technique to reduce the number of HTTP requests on a page?"

The question makes a lot of sense — using data URIs in CSS as an alternative to sprites is the most typical way data URIs get used in web design today, although it is not their only use: for example, data URIs can be used for other resources such as JavaScript.

To provide an answer to this question, I’ve conducted further research on data URIs. In this article I’ll provide more background on why the performance of data URIs is an important issue, some additional details about the experiment and, of course, the results of whether data URIs or CSS sprites perform better on mobile.

Read the full article →

Data URI Performance: Don't Blame it on Base64

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!

Read the full article →

On Mobile, Data URIs are 6x Slower than Source Linking (New Research)

This article provides a general introduction to the subject, however, updated results have been released.

As a web developer, you're likely well aware that a key rule to high performance web design is to make fewer HTTP requests — especially on smartphones, where high latencies are the norm.

You may also know that data URIs have long been considered a web performance best practice for reducing these requests.

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!

In this article, I'll discuss the different use cases of both data URIs and binary images, review my experiment results, and suggest future best practices for both using data URIs and building high performance mobile websites.

Read the full article →

Smartphone Browser localStorage is up to 5x Faster than Native Cache (New Research)

As a web developer you know that creating engaging web UX means quickly delivering content that captures your visitor's attention.

The storage API, including localStorage, was designed to help web developers provide more app- like behaviour for the web than cookies previously allowed.

But it turns out you can also use localStorage to make your mobile website faster!

Read the full article →

Does Mobile Web Performance Optimization Still Matter?

Mobile networks are much faster than they used to be. You've probably heard of 4G, a suite of mobile telecommunications standards including Wi-Max & LTE that are delivering download speeds between 2 - 40Mbps on current generation high-end smartphones. A few popular handsets that currently support these standards include the iPhone 5 and Samsung Galaxy S III. You can expect that over the next year most mid-market smartphones will support these standards, too.

Read the full article →