first-contentful-paint

⌘K
  1. Home
  2. SiteLint
  3. Performance Rules
  4. first-contentful-paint

first-contentful-paint

Print this article

Description

The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen. For this metric, content refers to text, images (including background images), <svg> elements, or non-white <canvas> elements. This includes text with pending web fonts. This is the first time users could start consuming page content.

How to interpret your FCP score is outlined in this table:

FCP score explanation
FCP time (in seconds)Result
0 – 1.8Fast
1.8 – 3Moderate
Over 3Slow
Report message PerformancePaintTiming API is not available means that there were no Performance Painting Timing data available (performance.getEntriesByType('paint')) at the moment when audits were evaluated.

How to fix it

  • Ensure the custom font is loaded fast. Preload web fonts to improve loading speed. Use for example:
    <link rel="preload" href="/assets/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin/>
  • Track FCP on real users’ devices. This rule should help you. Note that we send the report for this rule if the FCP time is above 1.8 seconds.
  • Improve loading speed for images. See article: 8 tips to speed up image loading.

Standard

Best Practice, Performance, SiteLint

Was this article helpful to you? No Yes

How can we help?