Web performance measures how quickly a page loads, becomes visible, remains visually stable, and responds to user interaction.
Definitions
- Render-blocking resources: CSS or JavaScript that the browser must download and process before displaying the page. These resources mainly delay FCP and LCP. Inline critical CSS, load non-critical CSS asynchronously, and use defer for non-essential scripts.
- Time to First Byte (TTFB): The time between requesting a page and receiving the first byte from the server. It is affected by hosting, PHP execution, database queries, caching, redirects, and network latency. Aim for ≤ 0.8 seconds.
- First Contentful Paint (FCP): The time until the first visible content—such as text, an image, or a background—appears. It is influenced by TTFB, render-blocking resources, fonts, and scripts. Aim for ≤ 1.8 seconds.
- Total Blocking Time (TBT): A laboratory metric measuring how long JavaScript blocks the browser’s main thread during page loading. It helps diagnose responsiveness problems, while INP measures responsiveness using real-user interactions. Aim for ≤ 200 milliseconds.
Core Web Vitals
Core Web Vitals are Google’s key metrics for measuring real-world page experience: loading speed (LCP), visual stability (CLS), and responsiveness (INP).
- Largest Contentful Paint (LCP): The time until the largest visible image or text block is displayed. This is often a banner image, featured image, or main heading. Aim for ≤ 2.5 seconds.
- Cumulative Layout Shift (CLS): Measures unexpected movement of content—for example, text shifting when an image, advertisement, or font loads. Prevent it by defining image dimensions, reserving space for dynamic content, and using stable font-loading strategies. Aim for ≤ 0.1.
- Interaction to Next Paint (INP): Measures how quickly the page visibly responds to clicks, taps, and keyboard input. Heavy JavaScript, complex page updates, and long main-thread tasks can make it worse. Aim for ≤ 200 milliseconds.
Google recommends
- A page should meet all three Core Web Vitals thresholds—LCP, CLS, and INP—at the 75th percentile of real visits over a rolling 28-day period, evaluated separately for mobile and desktop devices.
- Use real-user data from Google Search Console or PageSpeed Insights alongside laboratory tools such as Lighthouse to identify and diagnose performance problems.