What is FCP?
First Contentful Paint (FCP) measures the time from when the page starts loading to when any part of the page's content is rendered on screen. This could be text, an image, SVG, or canvas element.
Steps to Improve FCP
1
Eliminate Render-Blocking Resources
Defer non-critical CSS and JavaScript. Inline critical CSS directly in the HTML head.
2
Minify CSS and JavaScript
Remove whitespace, comments, and unused code to reduce file sizes.
3
Preconnect to Required Origins
Use <link rel='preconnect'> for third-party domains you'll need early.
4
Use Text Compression
Enable Gzip or Brotli compression for text-based resources.