Remarkable React

I gave a talk about React at BrazilJS few days ago. The “slides” are here. In this post I’ll go over what I said (more or less) at the beginning of the presentation. I hope to follow up with some more code. Disclaimer: I work at Facebook. But these are my thoughts. In fact, I […]

August 26th, 2013
Tags: facebook, JavaScript, performance, react

Here’s to a faster Recommendations plugin

So I’ve been part of the quest of making all Facebook social plugins faster, even if it means rewriting them from scratch. After the Send plugin, Like button (perf optimizations described here), Follow plugin, Facepile and Likebox (perf details here), now you have a faster Recommendations plugin. The techniques used to make it faster are […]

May 5th, 2013
Tags: facebook, performance

CSS animations off the UI thread

This excellent Google I/O talk mentions that Chrome for Android moves the CSS animations off of the UI thread, which is, of course, a great idea. Playing around with it, here’s what I found: Browser support: Desktop Safari, iOS Safari, Android Chrome. You need to use CSS transforms. Animating regular properties doesn’t work. Update: (see […]

March 12th, 2013
Tags: CSS, performance

C3PO: Common 3rd-party objects

Problem: too much JavaScript in your page to handle 3rd party widgets (e.g. Like buttons) Possible solution: a common piece of JavaScript to handle all third parties’ needs What JavaScript? If you’ve read the previous post, you see that the most features in a third party widget are possible only if you inject JavaScript from […]

February 18th, 2013
Tags: facebook, JavaScript, performance

Speed geek’s guide to Facebook buttons

or “How to help your users share your content on Facebook and not hurt performance” Facebook’s like button is much much faster now than it used to be. It also uses much fewer resources. And lazy-evaluates JavaScript on demand. And so on. But it’s still not the only option when it comes to putting a […]

February 14th, 2013
Tags: JavaScript, performance

Run jsperf tests in a bunch of WebPagetest browsers

Motivation 1. You write a new test to confirm a JavaScript-related performance speculation 2. You click 3. Your test runs in a bunch of browsers Glossary is the site where all you JavaScript performance guesswork should go to die or be confirmed. You know how the old wise people say “JSperf URL or it […]

February 11th, 2013
Tags: JavaScript, performance

webkit css-on-demand issues

This post brought to you via Facebook engineers Jeff Morrison and Andrey Sukhachev, who discovered and helped isolate the issue. Use case Think a “single page app” use case. You click a button. Content comes via XHR. But content is complex (and app is as lazy-loading as possible) and content requires extra CSS. In an […]

February 11th, 2013
Tags: CSS, performance

Digging into the HTTP archive #2

Continuing from earlier tonight, let’s see how you can use the HTTP archive as a starting point and continue examining the Internet at large. Task: figure out what % of the JPEGs out there on the web today are progressive vs baseline. Ann Robson has an article for the perfplanet calendar later tonight with all […]

December 28th, 2012
Tags: performance

Digging into the HTTP archive

Update: Second part One way to do web performance research is to dig into what’s out there. It’s a tradition dating back from Steve Souders and his HPWS where he was looking at the top 10 Alexa sites for proof that best practices are or aren’t followed. This involves loading each pages and inspecting the […]

December 28th, 2012
Tags: performance

Deck the Halls 2012

Traditions are traditions. Marry Christmas with a new cover, this time it’s Deck the Halls: Deck the halls (part one) (It’s only part one because I didn’t find the time to properly record what I had in mind – another 7/8th cover like last year. But you can hear the idea at the end) Here […]

December 24th, 2012
Tags: Music

WebAudio: live input

Live input, aka getUserMedia: it exists in Chrome Canary for audio too. Great times to be a web developer, right? Let’s check it out. Here’s the demo, but first a prerequisite: go chrome://flags, search for “Web Audio Input” and enable it. Restart Chrome Canary. With a guitar I wanted to have a little trickier setup […]

October 28th, 2012
Tags: JavaScript, Music, WebAudio

WebAudio: oscillator in JS

How about generating some noise in JavaScript? Demo is here: oscillator. How does this work? Using HTML Web Audio you can synthesize audio with a given frequency. E.g. 440Hz is A (“la” in solf├Ęge) This means you don’t need an <audio> element or any mp3, ogg, wav, etc, no external files. Let’s see how. Capable […]

October 27th, 2012
Tags: JavaScript, Music, WebAudio

In Public

Update: + WebPerfSummit Update 2: + SydJS, + Anaconda Limo@Molly Malone’s, + qCon confirmed, + fix *some* Portuguese spelling After a year or two with almost no public appearance (with an exception or a few) I’ve lined up a bunch of talks till the end of the year. I hope I’ll see you soon! […]

July 26th, 2012
Tags: speaking

Non-onload-blocking async JS

Update Oct 2013: for a more bulletproof version, tested in the wild, IE and all, check Philip’s snippet at Asynchronous JS is cool but it still blocks window.onload event (except in IE before 10). That’s rarely a problem, because window.onload is increasingly less important, but still… At my Velocity conference talk today Philip “Log […]

June 28th, 2012
Tags: JavaScript, performance


Say hello to the 3PO extension for YSlow. It checks your site for integration with popular 3rd parties, such as Facebook, Twitter widgets, Google Analytics and so on. 3PO (3rd party optimization) extension currently has 5 checks: two of them generic to all 3rd parties and three specific to Facebook plugins. I’m looking forward to […]

June 27th, 2012
Tags: performance, yslow

<style> tag to inline style=”” attrrib

As you may have noticed, I claim that CSS is bad for performance because: Most browsers block the very first paint until all screen CSS arrives Additionally many browsers block rendering until all non-screen (e.g.print) CSS arrives Sometimes CSS blocks downloads See “The evil that CSS do” in CSS and the critical path for details. […]

June 21st, 2012
Tags: CSS, performance

YSlow development: custom rulesets

(This is part 3. See part one and part two.) There are two concepts to remember when working on your YSlow extensions and customizations: rules (or “recommendations” if you will, or “best practices” or simply “lint checks”), and rulesets which are lists of rules An example rule is “Reduce HTTP requests”. An example ruleset is […]

June 20th, 2012
Tags: performance, yslow
1 Comment »

YSlow development: setup

As promised, let’s setup for YSlow development using the easiest option – the bookmarklet version. The journey of conquering the world with your rules and extensions… starts with the first step. Checkout First you need to get teh codez. Go to the Github repository and click that big ol’ Fork button. Then checkout the repository […]

June 19th, 2012
Tags: performance, yslow

YSlow development: getting started

Since version 2.0, YSlow is no longer just a tool, it’s a platform. You can create your own rules (performance or otherwise), combine them into rulesets, tweak scores to your liking and so on. Once Marcel took over and did version 3.0. YSlow can now run in many many environments: as a Firebug extension (like […]

Anaconda Limousine: the guitar parts

I’m part of a band that has an album out now. I know, right? (links: excuse-for-a-site, amazon, itunes). I wanted to put up all the songs on the site, but seems like there’s a little dissonance in the band whether this is a good idea. Plan B: 30s samples. Like the bigwigs do on Amazon […]

June 17th, 2012
Tags: JavaScript, Music, tools


So I was flipping through recent slides from Steve Souders and came across a reference to a nice post from Pat Meenan explaining how he setup and how you can edit your hosts file to send third party scripts to the black hole simulating a firewall-blocked or down third party and the effect on […]

June 16th, 2012
Tags: browsers, JavaScript, performance

getUserMedia in Opera 12

Opera 12 wins – the first stable desktop browser to ship getUserMedia(). I believe they had shipped it already in a mobile version of the browser. (I’ll need to fix my example from last night because Chrome Canary uses webkitGetUserMedia and also uses a stream URL to assign to video element’s src) You can start […]

June 14th, 2012
Tags: (x)HTML(5), browsers

CSS variables

Weeee, CSS variables just landed in WebKit, this is pretty exciting! Unfortunately I couldn’t see them in action in WebKit nightly (must be something I’m missing), but they’re here and here to stay. I know there are “purists” that say that stuff like variables has no place in the language and we don’t really understand […]

June 14th, 2012
Tags: CSS

Canvas pixels #3: getUserMedia

getUserMedia() is a proposal for one of the most desired device APIs that can give HTML and JS access to the user’s camera and microphone. It’s already available in Chrome Canary in the form of navigator.webkitGetUserMedia(). It’s also available in Opera without a prefix. In part #1 of this miniseries I talked about manipulating pixels […]

June 13th, 2012
Tags: (x)HTML(5), canvas, images, JavaScript

Canvas pixels #2: convolution matrix

In the previous post I talked about manipulating and changing pixels in an image (using JavaScript and canvas) one at a time. We took a single pixel and messed around with its R, G, B or A values. This time let’s look into taking account not only the single pixel but the pixels around it. […]

June 11th, 2012
Tags: (x)HTML(5), canvas, images, JavaScript