🍙
Frontend Dev Guide
  • ⚡Read Me First
  • 📖Frontend Interview Guide
    • 💬Technical Behavior
      • Frontend Interview Questions
      • Answering Interview Questions
    • 💻Coding Challenges
      • Frontend Code Challenges
      • Data Structures and Algorithms
        • Binary Search Tree
        • Blind 75 and Neetcode
      • Take Home Assignments
    • 🕸️Frontend System Design
      • What is Frontend System Design?
        • Parts of the Frontend System Design
          • 1) Gather Requirements
          • 2) Architecture/High Level Design
          • 3) Data Model and Flow
          • 4) API
          • 5) Optimization and Deep Dive
        • Example: Design Spotify
  • 🔦Frontend Deep Dive
    • 🥞Microfrontends
    • 🧩Fundmentals
      • 🔵Cross Browser Compatibility
    • 📚Frameworks/Libraries
      • 🟢Vue
      • 🔵React
        • Waterfalls, Unidirectional Data Flow
        • React Server Components
    • 🏁Patterns
      • 🟡Design Patterns
      • ⚪Rendering Patterns
      • 🟣Performance Patterns
    • 🔋Performance
      • ⚪Network Optimizations
      • 🟠Build Optimizations
      • 🟣Asset Optimizations
      • 🔵Core Web Vitals
  • 🐍Python
    • ⚪Django
      • Classbased Views (CBV)
      • Cross-Site Request Forgery (CSRF)
  • 🗻Working Life
    • 🟣Technical Communication
  • 📚Glossary
  • 💡Resources
  • 👩‍💻About Me
Powered by GitBook
On this page
  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)
  1. Frontend Deep Dive
  2. Performance

Core Web Vitals

Essential Metrics for a Healthy Site

PreviousAsset OptimizationsNextPython

Last updated 2 years ago

According to core web vitals is a useful way "to quantify the experience of your site and identify opportunities to improve". These metrics are used to provide insights into the performance of a website from the user's perspective and help website owners and developers identify areas for improvement to enhance the user experience.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is a metric that measures the loading performance of a web page, specifically the time it takes for the largest visible element (such as an image or a block of text) to render on the screen.

First Input Delay (FID)

First Input Delay (FID) measures the time from when a user first interacts with a page (e.g. clicks a link or taps a button) to the time when the browser is able to respond to that interaction.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures the visual stability of a web page, specifically the amount of unexpected layout shift of visible elements. This includes elements that move, change size, or suddenly appear, causing the user to lose their place on the page.

🔦
🔋
🔵
web.dev