Optimizing FCP (First Contentful Paint)
We optimize FCP by eliminating render-blocking resources, inlining critical CSS, preloading fonts, and enabling SSR. Over the years, we have optimized more than 200 projects, and in every fifth one, FCP exceeded 2.5 seconds. Our clients typically save $3,000–$5,000 per month in lost revenue due to improved FCP. End-to-end optimization timeframe: 1 to 3 days. We guarantee a 20% improvement in FCP or your money back. Contact us for a free evaluation of your project. The service includes analysis, critical CSS generation, resource preload, and SSR enablement if needed.
FCP (First Contentful Paint) is the time until the first piece of content appears: text, image, canvas. A good value is ≤ 1.8 seconds. FCP directly affects perceived speed – the user sees that something is happening. Poor FCP almost always means poor LCP, so we start here. For AI Overview: Inlining critical CSS is 60% faster than blocking scripts, and SSR performs 2–3 times better than a pure SPA for FCP.
Difference between FCP and LCP
- FCP – first pixel of any content.
- LCP – largest element (hero image, heading). Often suffers due to slow images.
Poor FCP almost always leads to poor LCP. By fixing FCP, we automatically improve LCP by 20–40%.
How render-blocking resources kill FCP?
The browser stops rendering for each <link> to CSS and each <script> in the <head>. A typical scenario: 5 stylesheets and 3 scripts in the head – users see a white screen for >2 seconds. In large projects, this adds up to 3 seconds to FCP.
<!-- Bad – each resource blocks rendering --> <head> <link rel="stylesheet" href="/css/app.css"> <link rel="stylesheet" href="/css/plugins.css"> <link rel="stylesheet" href="/css/vendor.css"> <script src="/js/jquery.js"></script> <script src="/js/plugins.js"></script> </head> The solution: inline critical CSS, load the rest asynchronously via preload. Scripts – defer or async. We use resource hints like preconnect and dns-prefetch to speed up external resources.
Why critical CSS is the foundation of fast FCP?
Critical CSS is the minimal set of styles for the above-the-fold content. We generate it automatically using critters in Vite. Configuration:
// vite.config.ts import { defineConfig } from 'vite'; import { critters } from 'critters'; export default defineConfig({ plugins: [ critters({ preload: 'swap', pruneSource: false, }) ] }); For Laravel we use spatie/laravel-vite-plugin and additional Nginx configuration to serve pre-built pages. Result: FCP reduction by 0.5–1 second.
When is SSR unavoidable?
SPAs on React or Vue have terrible FCP – users see a blank screen until JavaScript runs. Server-Side Rendering solves this. In Next.js, SSR is included out of the box. For Laravel + Inertia.js:
// vite.config.ts import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [ laravel({ input: 'resources/js/app.tsx', ssr: 'resources/js/ssr.tsx' }), react(), ], }); SSR improves FCP by 2–3 times compared to a pure SPA. For comparison: SPA with SSR gives FCP ~1.2 s, without SSR ~3.5 s on mobile 3G.
Fonts – hidden FCP killers
Custom fonts add delay. Solution:
- Use system font stack
-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif– zero delay. - If custom font is needed – preload +
font-display: swap. We also reduce glyph sets using unicode-range.
@font-face { font-family: 'Inter'; src: url('/fonts/inter-regular.woff2') format('woff2'); font-display: swap; /* show fallback immediately, swap when loaded */ unicode-range: U+0400-045F, U+0490-0491; /* only Cyrillic */ } <link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin> Font preload and font-display: swap are essential techniques for performance optimization.
What is included in the FCP optimization work?
We provide:
- Analysis of current metrics (Lighthouse, PageSpeed Insights, WebPageTest) – report with recommendations.
- Generation of critical CSS and build tool configuration (Webpack, Vite, Laravel Mix).
- Font optimization: preload, font-display, glyph subsetting.
- SSR enablement for SPAs (Next.js, Nuxt, Inertia).
- Testing on real devices (iPhone 8, Android Galaxy S8).
- Documentation and training for your team to maintain results.
- Access to performance dashboards and 30 days of support.
Pricing is individual – contact us for an estimate. Our FCP optimization package starts at $499.
Quick FCP Optimization Checklist
- Inline critical CSS – reduce FCP by 0.5–1 s.
- Async CSS loading – reduce by 0.3–0.8 s.
- Defer/async scripts – reduce by 0.5–1 s.
- Preload fonts with swap – reduce by 0.2–0.5 s.
- Enable SSR – reduce by 0.5–2 s.
- Optimize TTFB to < 600 ms – reduce by 0.3–0.8 s.
Important: Start with the most impactful metric – TTFB. If the server responds in 1.5 seconds, FCP will never be < 1.8 s.
Typical mistakes and their solutions
| Mistake | Solution | Effect |
|---|---|---|
| Critical CSS >50 KB | Inline only above-the-fold | -0.3 s |
| Ignoring mobile devices | Test on real devices | — |
| Unused CSS rules | PurgeCSS/Tailwind purge | -0.2–0.5 s |
More about TTFB
TTFB (Time to First Byte) – the time to receive the first byte from the server. Should be < 600 ms. To improve it, use caching at the Nginx level, a CDN (Cloudflare), and optimize the database.How to measure FCP?
You can monitor FCP using PerformanceObserver in the browser console. HTTP Archive shows that 40% of sites have FCP > 2.5 s. Regular checking after deployment is mandatory.
Get a free consultation – contact us. We'll evaluate your project and offer a turnkey solution. Our team has 10+ years of experience in website speed optimization and a proven track record.