How To Improve Your First Contentful Paint (FCP) In WordPress

First Contentful Paint (FCP) measures how long it takes before the browser shows the first text or image. Visitors stare at a blank screen until it happens. Google’s guidance treats 1.8 seconds or less as good.

What usually delays FCP

• A slow server response (the browser cannot start until it gets the HTML)
• CSS and JavaScript files that block rendering
• Web fonts that hide text until they load
• Page builders and plugins that load large files on every page

1. Fix the server response first

If your server is slow, nothing else will help much. Start with the guide on reducing TTFB.

2. Reduce render-blocking CSS

PageSpeed Insights lists render-blocking requests. Your options:

• Inline the small amount of CSS needed for the first screen and load the rest later. Many caching plugins offer this as an option called critical CSS or optimized CSS delivery.
• Remove CSS you do not use. Test carefully, because removing too much can break layouts.
• Avoid @import inside CSS files, which makes the browser load files one after another.

3. Defer JavaScript

Add the defer attribute to scripts the first screen does not need. Chat widgets, analytics and marketing tags are good candidates, and many can wait until the visitor interacts. After each change, test forms, menus and sliders, because deferring a script that other code depends on can break them.

4. Load fonts without blocking text

Show a fallback font immediately and swap in your font when it arrives, with font-display: swap. Self-hosting your fonts avoids an extra connection to another server.

@font-face {
  font-family: "Inter";
  src: url("/wp-content/uploads/fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

Preload only the one font used above the fold, and use as few families and weights as you can:

<link rel="preload" href="/wp-content/uploads/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>

5. Send less from your builder and plugins

Many page builders and plugins load their CSS and JavaScript on every page. Disable modules and widgets you do not use, and use tools that unload assets on pages that do not need them.

Check the result

Run PageSpeed Insights three times and compare the FCP value. Look at the filmstrip of screenshots: the first visible content should appear earlier than before. If your largest image or heading still appears late, continue with the LCP guide.