HardConcept

What are Core Web Vitals and how do you improve them?

Technology:
HTML,
CSS,
JavaScript
Experience:
Senior
Roles:
Frontend Developer,
Full Stack Developer
Topics:
Performance

Quick answer

Core Web Vitals are Google鈥檚 field metrics for real-user experience: LCP (loading), INP (interactivity) and CLS (visual stability). They influence search ranking and are measured on real devices, not only Lighthouse.

Detailed explanation

LCP (Largest Contentful Paint) should happen within about 2.5 seconds: compress the hero image, preload it, and cut render-blocking CSS/JS. INP (Interaction to Next Paint) replaced FID: keep event handlers short, break up long tasks, and show immediate feedback. CLS (Cumulative Layout Shift) should stay below 0.1: always set width and height (or aspect-ratio) on images and embeds, and avoid inserting banners above existing content.

Lab tools (Lighthouse, DevTools Performance) are for debugging. Rankings use field data from the Chrome User Experience Report. Fix the slowest template first, measure with web-vitals or Search Console, and do not chase a 100 Lighthouse score at the cost of features users need.

Download HTML PDFMore HTML questions

Related interview questions

  • HTMLMedium

    What is the difference between async and defer on script tags?

    Both download the script without blocking HTML parsing. defer waits until parsing finishes and runs scripts in document order; async runs a script as soon as it is downloaded, which can be before or after parsing and in any order.

    Mid-level 路 Senior 路 Browser & DOM
  • HTMLMedium

    How does the browser render a web page?

    The browser parses HTML into a DOM and CSS into a CSSOM, combines them into a render tree, computes layout (reflow), paints pixels and composites layers onto the screen.

    Mid-level 路 Senior 路 Browser & DOM
  • JavaScriptHard

    How do you find and fix memory leaks in JavaScript?

    Take heap snapshots in Chrome DevTools before and after the suspect action, compare what grew, and fix the retaining reference, which is usually a forgotten listener, timer, global variable or unbounded cache.

    Senior 路 Memory Management
  • JavaScriptMedium

    What is event delegation in JavaScript?

    Event delegation means attaching one listener to a parent element and using event bubbling to handle events from its children, instead of adding a listener to each child.

    Junior 路 Mid-level 路 Browser & DOM
  • JavaScriptMedium

    What is the event loop in JavaScript and how does it work?

    The event loop is the mechanism that lets single-threaded JavaScript handle asynchronous work: it runs the call stack to empty, then runs all queued microtasks (promises), then takes the next task (timers, events) from the queue.

    Mid-level 路 Senior 路 Asynchronous Programming

Free templates to practise with