I’ve been trying to stay away from webfonts as much as I can. IMO they are not worth the performance complications. Font loaders, FOUT, yadda-yadda. But… it happens. Story time While showing off another one of my music theory exercises to my prof, he mentioned it would be nice to be able to tell v […]

I’m sure better tools exist, but hey, quick and dirty is faster: running a quick console thing to tell me what makes the HTML payload bigger

TL;DR: Please start writing and finish before Dec 1st. Amazingly http://calendar.perfplanet.com has been up for 7 years straight now, helping spread the word about web performance and helping the developers do their best to provide fast and pleasurable experiences. Every year people from all walks of development life come to the calendar where an article […]

Beacons are small requests that our apps make to report some information “home”, to the server. Beacons are often used to report visitor stats, JS errors, performance metrics. Beacons often don’t return any data back to the client, but some do. Example use <div id="app">Awesome app is awesome</div> <script> // gather data somehow var data […]

On my way to NYC for Edge conference and NYC Web perf meetup. Some slides and RSVP links inside.

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 […]

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 […]

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 […]

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 […]

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 […]

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 […]

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 […]

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 […]

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 […]

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 […]

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 […]

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. […]

(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 […]

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 […]

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 […]

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 […]

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 […]

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 […]

NOTE: This is late night mumbling from a week or two ago, leaving here for posterity. Don’t read it. Meanwhile Steve wrote up a proper blog post which is highly recommended: Self-updating scripts. Read his post instead! tl;dr: Load the component in an iframe, then reload() Backstory Steve Souders and I were chatting last week […]

This tweet had me revise a 5 year old experiment on how print CSS affects page loading, especially in the light of mobile browsers. So I tweaked the test ever so slightly to print out timing info in the document.title and after the page is done. The test is essentially how does a slow print […]