perceived performance

Using the Paint Timing API

It's a great time to be a web performance aficionado, and the arrival of the Paint Timing API in Chrome 60 is proof positive of that fact. The Paint Timing API is yet another addition to the burgeoning Performance API, but instead of capturing page and resource timings, this new and experimental API allows you to capture metrics on when a page begins painting.

If you haven't experimented with any of the various performance APIs, it may help if you brush up a bit on them, as the syntax of this API has much in common with those APIs (particularly the Resource Timing API). That said, you can read on and get something out of this article even if you don't. Before we dive in, however, let's talk about painting and the specific timings this API collects.


Prerender on hover?

InstantClick is a pretty popular JavaScript library (4,344 stars, as I type). This is the gist:

Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). InstantClick makes use of that time to preload the page, so that the page is already there when you click.

You hover a link, it Ajaxs for that page and prerenders it. On click, it replaces the <body></body> and <title></title> and changes the URL.

I just heard about it. Seems pretty smart. Progressive enhancement. Increased perceived performance. I can imagine one objection being bandwidth concerns. Downloading every page I hover over seems a bit bandwidth greedy.

It got me thinking though... isn't there a newfangled prerendering thing? (more…)