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 JSperf.com 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
34 Comments »

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
4 Comments »

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
4 Comments »

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
31 Comments »

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
4 Comments »

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
19 Comments »

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
8 Comments »

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! http://www.meetup.com/SF-Web-Performance-Group/events/72890422/ […]

July 26th, 2012
Tags: speaking
6 Comments »

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 http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/ 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
30 Comments »

3PO

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
46 Comments »

<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
19 Comments »

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
2 Comments »

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
6 Comments »

3PO#fail

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 blackhole.webpagetest.org 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
8 Comments »

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
3 Comments »

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
35 Comments »

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
3 Comments »

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
10 Comments »

Pixel manipulation in canvas

Done it before with PHP, but now that JavaScript is all-powerful, let’s see how we can manipulate images in an HTML <canvas>. The demo is here. Pixel manipulation The simplest way to fiddle with image data is to take each pixel and change the value of one or more of its channels: red, green, blue […]

June 10th, 2012
Tags: (x)HTML(5), canvas, images
19 Comments »

Web Performance Daybook vol. 2

In the spirit of the true high-performance non-blocking asynchronous delivery, we’ll have the Web Performance Daybook volume 2 published before volume 1. I hope you’ll enjoy reading the book as much as I enjoyed working on it and rubbing (virtual) shoulders with some of the brightest people in our industry. Back in December of 2009 […]

June 6th, 2012
Tags: book, performance
Comments Off

CSS and the critical path

Back when I was still actively into speaking at public events (way, way back, something like year and a half ago (which strangely roughly coincides with the time I joined Facebook, hmmm (hmm? (huh? what’s with the parentheses? sure all of them are closed at this point?)))) I remember showing this slide: The reason I’m […]

June 5th, 2012
Tags: CSS, performance
43 Comments »

Async JavaScript callbacks

Ah, asynchronous JavaScripts. Love ‘em, hate ‘em, but you gotta use them! I have quite a few posts here on this blog about this stuff. Starting with something I considered an interesting hack to emulate PHP’s require(). This was posted in 2005. (2005! That’s ancient. That’s only a year after gmail was introduced, and you […]

June 3rd, 2012
Tags: IE, JavaScript
11 Comments »

Ajax with images

So you can do Ajaxy stuff with XMLHttpRequest or or iframes or dynamic JavaScript tags or… how about simple images. This is best used for simple stuff where you can have a limited number of predefined responses, such as “success” and “oops”. All you do is create an image and set its source and this […]

June 2nd, 2012
Tags: Ajax, images, JavaScript
34 Comments »