Member-only story
Web Performance
Web Vitals: What Are They and How to Measure Them
Your guide to the essential performance metrics that Google uses to influence the rank of your web app
Jack is a young software engineer who loves his job. One morning as he was sitting on his desk resting his head on his fist, he came up with a brilliant idea of a new web application that could let him get his big break. He felt very enthusiastic and without wasting time, he started working on this project. Every day, for long hours, he sat at his computer and tapdanced his fingers across the keyboard. He implemented complex features, fixed tricky bugs, and cleaned up the code continuously to improve its quality.
He was also aware of how crucial the web performance is — slow web pages frustrate users and make them less likely to stick around though they wait for an app like Gmail which sometimes takes 6 seconds or longer to load. But his app is not Gmail, thus he should offer a better experience with much less load time.
He stayed up for nights, working on this issue and employed techniques like:
- deferring work with JavaScript,
- lazy-loading,
- async script loaders,
- client-side rendering,
- and dynamic content.
Months went by and Jack is very excited to go live after finishing the implementation. He started a connection with his FTP server and carried out a successful deployment.
A few weeks after deployment he received feedback from frustrated users who were unsatisfied with the app responsiveness. As they were trying to click on specific buttons, some late-loaded and -rendered content pushed important buttons down:
Google has punished Jack as well by ranking him down on the search result page.
Jack is confused; his app has a really competitive PageLoad time he is proud of. But what he has missed is that PageLoad doesn’t fully capture whether a website feels fast. Worse, the…
