Upcoming Course: Code Your Own Business w/ React + GraphQL!
We're live-coding on Twitch! Join us!

First Meaningful Paint is close to useless because it’s an illusion. It’s a decoy to keep the user from bouncing off your website while we get them the real thing. When does the user get this real thing? That time frame is what we call Time to Interactive. The time when the CPU is idle and the user can start using what ever product you have (remember scrolling is also interaction).

You should be aiming for a 3-5 second TTI.

Given the fact that today’s web pages and sites are considerably heavier than in years past. Websites have matured into vast online ecosystems where a lot of internal and third-party components work together to deliver a cohesive user experience. This implies that there’s simply more content to process and load on today’s sites.

TTI can be subjective. Let’s assume you’re part of the operations management team saddled with the task of monitoring website performance, how do you determine the yardstick for measuring TTI? Will components such as the navigation menu and the sign in link count? And at a time when websites frequently update their content, how can you establish a meaningful baseline against which to measure future performance using TTI?

Performance reliable software such as Amazon Cloudwatch and Microsoft System Center are a great way to measure TTI. Using Visual User Experience (VUX) metrics, they enable you measure how your page is performing. This enables you to measure the time it takes for the first pixels of a page to become visible to the human eye, providing consistent visibility into how long it takes before your users actually perceive the page starting to render. What’s more, there is no subjective determination required to designate what the page’s primary interactive content should be. VUX also provides the total load time for above the fold content, so you can measure how long it takes before your page is fully rendered from your visitor’s perspective.

You should be aiming for a 3-5 second TTI. Once the time exceeds this window, the user might get the feeling that your site is unresponsive and it’s time for him/her to go.

Most of the considerations in FMP would still save you here but the major difference is that FMP buys you more time to calculate and render what else is needed before the user can start using the app.

Like this article? Follow @codebeast on Twitter