What is the difference between FCP and LCP?

FCP (First Contentful Paint) and LCP (Largest Contentful Paint) both measure loading performance but at different points. FCP: when any content (text, image, SVG, canvas) first appears on screen. It measures when the page starts to feel useful — the user sees something happening. Good: <1.8 seconds. FCP can be a small spinner or a navigation bar — not necessarily meaningful content. LCP: when the largest content element (image, video poster, or text block) finishes rendering. It measures when the main content is visible and the page feels loaded. Good: <2.5 seconds. LCP is always ≥ FCP since the largest element typically loads after smaller elements. Example: a page loads a logo (small, FCP fires), then the hero image (large, LCP fires). FCP and LCP together tell the story: FCP is the first sign of life, LCP is when the page feels complete. Large gaps between FCP and LCP indicate the main content is slow to load — often due to an unoptimized hero image or render-blocking resources before the main content.