> Markdown version of [/videos/1040-core-web-vitals-put-your-application-into-orbit-with-best-practices?t=89](https://www.wearedevelopers.com/videos/1040-core-web-vitals-put-your-application-into-orbit-with-best-practices?t=89). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Core Web Vitals: Put your application into orbit with best practices Flawless unit tests mean nothing if poor performance drives users away. Master Core Web Vitals to optimize LCP, eliminate layout shifts, and conquer interaction latency before deployment. - **Speakers:** [Nicolas Frizzarin](https://www.wearedevelopers.com/@nicolas-frizzarin) - **Event:** World Congress 2024 - **Published:** August 20, 2024 - **Duration:** 19:52 - **URL:** https://www.wearedevelopers.com/videos/1040-core-web-vitals-put-your-application-into-orbit-with-best-practices ## Summary Modern web applications can pass all functional unit tests yet still suffer from low user adoption due to poor perceived performance, such as slow initial rendering or visually jarring screen shifts. Because user experience fluctuates heavily based on varying device capabilities and network conditions, developers need objective methods to catch issues before deploying to production. Google’s Core Web Vitals initiative solves this by providing lab and field measurement strategies to track tangible metrics that mirror human frustration. Addressing these frustrations starts with optimizing the Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). LCP delays often stem from inefficient resource loading, which can be mitigated by utilizing HTML preload attributes, assigning fetch priorities, and minimizing expensive elements like time to first byte. For CLS, which tracks visual instability caused by dynamically changing elements, developers must pre-allocate spatial placeholders for ads, leverage the CSS aspect-ratio property for responsive images, and utilize size-adjust attributes for web font fallbacks to prevent disruptive DOM shifts. The newest metric, Interaction to Next Paint (INP), evaluates overall interaction latency and requires strict management of JavaScript execution. Improving INP scores involves breaking up heavy processing functions, minimizing input delays, and deferring non-critical operations using utilities like timeouts or the emerging scheduler.postTask API. By combining real user monitoring via the web-vitals javascript library with local debugging environments like Lighthouse and the Chrome Performance Insights panel, engineering teams can proactively architect applications that remain aggressively fast, visually stable, and highly responsive. **Keywords:** core web vitals, LCP optimization, largest contentful paint, cumulative layout shift, INP metrics, interaction to next paint, web performance debugging, real user monitoring, CSS aspect-ratio, lighthouse audits, javascript main thread blocking, DOM layout shifts, fetch priority handling, scheduler.posttask, web font fallbacks, HTML preloading, time to first byte ## Chapters 1. **Understanding user dissatisfaction with web application performance** (01:29) — Materializing subjective user experience differences into concrete web performance issues helps developers catch and fix loading problems early. 1. **Measuring core web vitals through real user monitoring** (03:05) — Collecting field metrics with the web vitals JavaScript library and custom providers enables real-user performance tracking. 1. **Analyzing device variability using lab environment tools** (05:04) — Using lab tools like Lighthouse uncovers how variable network conditions and device capabilities impact rendering speed. 1. **Defining the largest contentful paint performance metric** (07:00) — Measuring the time it takes to render the largest text block or image determines initial content layout performance. 1. **Strategies for identifying and improving LCP components** (08:25) — Splitting content loading into distinct phases and adopting preloading techniques lowers the overall browser render delay. 1. **Causes of cumulative layout shift and screen instability** (11:50) — Unsized images, dynamic content injection, and web fonts frequently disrupt visual stability and ruin reading focus. 1. **Techniques for sizing elements and stabilizing visual layouts** (13:40) — Reserving static space for dynamic elements and configuring CSS aspect ratios prevents unexpected layout shifts during component rendering. 1. **Understanding interaction to next paint input delays** (15:27) — Replacing first input delay, the new interaction metric evaluates how JavaScript execution blocks the main thread from updating interfaces. 1. **Breaking up long javascript tasks to improve INP** (17:46) — Deferring non-critical execution with timeouts and yielding to the scheduler prevents interaction overlap and unblocks UI updates. ## Related Moments - [Understanding core Web Vitals for user experience](https://www.wearedevelopers.com/videos/719-measure-and-improve-frontend-performance-by-using-test-automation) (from "Measure and improve frontend performance by using test automation") - [Measuring virtual user experience with core web vitals](https://www.wearedevelopers.com/videos/833-what-you-need-to-know-about-core-web-vitals) (from "What you need to know about Core Web Vitals") - [Exploring core web vitals and user experience metrics](https://www.wearedevelopers.com/videos/973-next-js-unleashed-optimizing-web-vitals-for-superior-user-experience) (from "Next.js Unleashed: Optimizing Web Vitals for superior User Experience") - [Evolving core web vitals and interaction metrics](https://www.wearedevelopers.com/videos/1573-optimistic-ui-updates-enhancing-user-experience-and-improving-interaction-to-next-paint-inp) (from "Optimistic UI Updates: Enhancing User Experience and Improving Interaction to Next Paint (INP)") - [Measuring speculative rendering impacts with Core Web Vitals](https://www.wearedevelopers.com/videos/1570-blazing-fast-page-navigation-with-speculation-rules) (from "Blazing Fast Page Navigation with Speculation Rules") - [Learning web performance basics and core web vitals](https://www.wearedevelopers.com/videos/903-catching-up-on-the-basics-you-don-t-really-need-that-much-code) (from "Catching up on the basics you don't really need that much code") ## Related Articles - [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front) - [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries) - [Dev Digest 113 - Debugging above the cloud](https://www.wearedevelopers.com/magazine/422-dev-digest-113-debugging-above-the-cloud) - [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us) ## Related Jobs - [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.** - [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse** - [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/645320-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse**