It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
Lots from Divya with the setup:
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 “Fighting FOIT and FOUT Together”
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 “Building Skeleton Components with React”
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 “Using the Paint Timing API”
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 “Prerender on hover?”
