What is First Contentful Paint (FCP)?
Definition
First Contentful Paint (FCP) measures the time from page navigation start to when the browser renders the first piece of DOM content — text, image, or SVG. It's the first visual confirmation for users that the page is loading. Google's target is under 1.8 seconds.
Why First Contentful Paint (FCP) matters for Shopify stores
Shopify themes loaded with large hero images, render-blocking font files, and third-party app scripts frequently have FCP above 3 seconds on mobile. A slow FCP means shoppers see a blank page longer — increasing bounce rate before any content appears.
Shopify example
A beauty store's homepage has a 3.2MB hero image, two font families loading synchronously, and a loyalty app script in the `<head>`. FCP is 4.8s on mobile. Compressing the hero image and deferring non-critical scripts brings FCP to 1.6s.
How Sauron handles First Contentful Paint (FCP)
Sauron tracks FCP trends over time per store and alerts merchants when FCP worsens by more than 500ms — typically caused by newly installed apps or theme changes.
See Product SEO on Autopilot feature →Common mistakes
- ✕ Large uncompressed hero images blocking first paint
- ✕ Loading fonts synchronously from Google Fonts without font-display: swap
- ✕ Third-party app scripts in the <head> that block rendering
- ✕ CSS files that must load before the browser renders any content
Automate your Shopify SEO
Understanding First Contentful Paint (FCP) is step one. Sauron handles the implementation — automatically, for your entire Shopify store.