• Latency and Bandwidth Effects on data URIs in CSS

    Today’s post is just a quick one to share some data from bandwidth and latency tests I conducted on a page using CSS embedded data URIs. For the tests I used another free template from Smashing Magazine and set up the same scenarios as last time: Original: 1 HTML, 1 CSS in HEAD, 1 JS ...

    (1 Comment)

  • The Digital Magazine Concept (for an extra buck you can touch)

    Earlier this month, Time Inc pulled back the curtain on their “Manhattan Project” and revealed a prototype for a tablet-based digital magazine concept.  A few days later, Time Inc., Conde Nast, Meredith, the Hearst Corporation, and the News Corporation announced they were forming a consortium to build a platform for developing and distributing digital magazine ...

    (No Comments)

  • Data URIs for CSS Images: More Tests, More Questions

    Today we’re going to take another look at embedding data URIs in stylesheets.  For this example I’ve taken a free HTML/CSS template from Smashing Magazine and created 3 versions of a page. 1. The original. It consists of one HTML file, one CSS, one JS, and 31 images. Total HTTP requests: 34. Total size: 388KB. ...

    (42 Comments)

  • A Look at How Browsers Download and Render CSS Background Images

    Last week I wrote about using data URIs in stylesheets and how parallel downloads could be negatively affected in certain situations. The tests I ran got me thinking about background images, particularly how the browser downloads them in relation to the other components. After some Googling I was suprised to find very little information on ...

    (13 Comments)

  • CSS Images and Data URIs

    A few weeks ago I took a quick look at replacing the CSS images on this site with data URIs, via Nicholas Zakas’ handy CSSEmbed tool. I figured out I could serve the same amount of data with 1 HTTP request instead of 14. At face value it sounded like a huge performance gain: same ...

    (9 Comments)

  • Track Downloads and Other Click Events in Analytics with jQuery

    The old way to track clicks and outbound links in Google Analytics was to call the _trackPageview function on the click event, passing it a label that could then be searched for in Analytics. One of the problems with this method was that the clicks were counted as pageviews, affecting your total pageview number. Now ...

    (11 Comments)

  • Convert CSS images to data URIs automatically with CSSEmbed

    I wanted to play around with Nicholas Zakas’ new tool for automatically converting CSS background images to data URIs so I tested it out with the CSS on this site.  CSSEmbed accepts a CSS file and outputs a copy with all image references replaced with base 64-encoded data URIs.  (If you’re unfamiliar with the concept ...

    (5 Comments)

  • CSS data URIs and Resource Packages

    In the last few days Steve Souders has blogged about two interesting web performance ideas. One is a command line tool built by Nicholas Zakas that makes working with CSS data URIs a little easier.  You can read Steve’s post here. The other is a proposal by Alexander Limi for bundling page components in a ...

    (No Comments)