perceived performance Archives

Article December 19, 2018

Fighting FOIT and FOUT Together

Author

Comments

There are 2 kinds of problems that can arise when using webfonts; Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT) ... If we were to compare them, FOUT is of course the lesser of the two evils

If you wanna fight FOIT, the easiest tool is the font-display CSS property. I like the optional value because I generally dislike the look of fonts swapping.… Read article

Article October 22, 2018

Building Skeleton Components with React

Author

Mathias Rechtzigel

2 Comments

Go to Comments

One of the advantages of building a Single Page Application (SPA) is the way navigating between pages is extremely fast. Unfortunately, the data of our components is sometimes only available after we have navigated to a specific part of our application. We can level up the user’s perceived performance by breaking the component into two pieces: the container (which displays a skeleton view when it’s empty) and the content. If we delay the rendering of the content component until we … Read article

perceived performance react

Article August 16, 2017

Using the Paint Timing API

Author

Jeremy Wagner

4 Comments

Go to Comments

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 … Read article

paint timing api perceived performance performance rendering

Article December 7, 2016

Prerender on hover?

Author

Chris Coyier

8 Comments

Go to Comments

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>… Read article

instantclick perceived performance performance prerender