What Is Core Web Vitals?
Core Web Vitals are a set of real-world performance metrics defined by Google that measure the user experience of a web page — specifically loading performance, interactivity, and visual stability. They are a confirmed Google ranking factor under the Page Experience signal. The three Core Web Vitals are: LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift).
The three Core Web Vitals
LCP (Largest Contentful Paint) measures loading performance — how long until the largest visible element is rendered. Good: <2.5s. Needs improvement: 2.5–4s. Poor: >4s. INP (Interaction to Next Paint) replaced FID in 2024 — it measures responsiveness to user interactions throughout the page lifetime. Good: <200ms. CLS (Cumulative Layout Shift) measures visual stability — how much layout shifts unexpectedly as the page loads. Good: <0.1. Each metric has 'good', 'needs improvement', and 'poor' thresholds.
How to improve LCP
Optimise your largest above-the-fold element (usually a hero image or heading). Serve images in WebP or AVIF format. Use a CDN. Preload your LCP image (`<link rel='preload'>`). Reduce server response time (TTFB). Remove render-blocking resources. For Next.js, use the `<Image>` component with `priority` on above-the-fold images.
How to improve CLS
CLS is caused by elements that load and shift other content. Fixes: always set width and height attributes on images and videos. Reserve space for ads and embeds. Avoid inserting content above existing content after load. Use `font-display: swap` with fallback font size matching to minimise layout shift from web fonts loading.
Core Web Vitals & Canvas Builder
canvasbuilder.co achieves strong Core Web Vitals through Next.js server-side rendering, optimised images via Cloudflare CDN, and Bootstrap 5 HTML with minimal JavaScript overhead — resulting in fast LCP and minimal CLS.
Try Canvas Builder →