Looking to improve first contentful paint in WordPress?
Google says FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Google scores a “green” FCP if it’s 0–2 seconds.
Run your website through Lighthouse or PageSpeed Insights and look for high-impact opportunities, then reference those specific items in this guide. All should help improve FCP.
- Eliminate Render-Blocking Resources
- Take Advantage Of Preload And Preconnect
- Test Cloudflare’s Rocket Loader
- Reduce TTFB
- Use Server-Level Caching
- Generate Critical CSS and Inline It
- Fix Failed In GTmetrix Waterfall
- Hard Code Your Header And Menu
- Use Lightweight Themes And Page Builders
- Use A Performant CDN
- Add Font-Display Swap
- Use A Longer Cache Expiration
- Remove Heavy Scripts Above The Fold
- Exclude Above The Fold Images From Lazy Load
1. Eliminate Render-Blocking Resources
- In Autoptimize, enable “optimize + aggregate CSS/JS.”
You can even unload assets from Elementor and other page builders.
First, choose an asset unloading plugin (here’s a comparison of Asset CleanUp vs. Perfmatters). The Perfmatters UI/UX is better but it’s also a premium plugin (it’s what I use). Asset CleanUp Pro can remove custom CSS while Perfmatters (and the free version of Asset CleanUp) do not.
- Disable WooCommerce scripts and styles and non-eCommerce content.
- Enable optimized DOM output and improved asset loading in Elementor.
- Remove unused CSS using RapidLoad (premium plugin from Autoptimize).
- Remove unused CSS using tools (PurifyCSS, Unused-CSS, UnCSS, PurgeCSS).
3. Take Advantage Of Preload And Preconnect
Preload and preconnect are browser resource hints that speed up third-party code, fonts, scripts, styles, and other resources.
Preload can be done in WP Rocket but it only lets you preload fonts (the most common resource for preloading). Preloading other resources can be done in Perfmatters, browser resource hints plugins like Pre* Party Resource Hints, or through manual code. Google will usually tell you which fonts to preload in the preload key requests report of PageSpeed Insights (or check the “fonts” tab in GTmetrix Waterfall). Always use crossorigin when preloading fonts.
Preconnect is typically only done with important third-parties domains like Google Fonts (https://fonts.gstatic.com) and CDNs (https://cdn.domain.com). This establishes an early connection to the origin and as Google mentions in your PSI report, should be used sparingly.
4. Test Cloudflare’s Rocket Loader
5. Reduce TTFB
TTFB and hosting go hand-in-hand.
Google flags TTFBs over 500ms but they actually recommend 200ms.
Cheap, shared hosting is almost always the cause of slow TTFBs. GoDaddy, Bluehost, HostGator are all budget hosting with slow TTFBs Even SiteGound has slow TTFBs. This affects first contentful paint because your server is what serves your content (obviously). I always recommend joining the WordPress Hosting Facebook Group to get unbiased opinions.
It’s a good idea to skip shared hosting and go straight to cloud. Many hosts offer free trials so you can test your TTFB against your previous host. Many cloud hosts also offer free migrations.
6. Use Server-Level Caching
Many hosts (Cloudways, SiteGround, LiteSpeed, Kinsta and others) use server-level caching which can be activated in your hosting account.
This is faster than the file-based caching done by most cache plugins and you should be taking advantage of it. Your host may have other types of caching (e.g. Redis, memcached) which can speed up first contentful paint while improving both scores + load times in speed testing tools.
7. Generate Critical CSS and Inline It
Some plugins like WP Rocket generate critical CSS and inline it for you.
Otherwise, you can use a free critical CSS generator tool which prevents FOUC (flash of unstyled text). The next step would be to inline it. Because the browser doesn’t have to wait for the CSS, it can start rendering your page sooner which will also improve first contentful paint.
Sometimes, CSS delivery doesn’t work even if it’s enabled in your cache plugin. Search for “rocket-critical-css” in your source code (or similar) to make sure it’s working. You may need to regenerate critical CSS or set fallback critical CSS which you can use PurifyCSS for. If it causes things to break on your site, exclude files from CSS delivery using WP Rocket’s helper plugin.
8. Fix Errors In GTmetrix Waterfall
4xx and 5xx errors in GTmetrix Waterfall indicate an error.
Browsers aren’t able to retrieve these requests, but they can still cause blocking time and continued attempts to complete them. These will affect your first contentful paint, total blocking time, and overall load times, so you should fix these immediately if you have them.
9. Hard Code Your Header And Menu
When talking about first contentful paint, headers and menus are some one of the first things your visitors see.
Creating menus using page builders, heavy plugins, or hamburger menus will take a hit on your FCP. In the next section, I talk about how I hired a developer to remove Elementor and replace it with Gutenberg. Well, the way he started is by hard coding the header, menu, footer, and blog sidebar. This made an enormous improvement in web vitals and when clicking through my pages. Even if you don’t want to remove your page builder completely, hard code these areas.
10. Use Lightweight Themes And Page Builders
There’s a large trend of people moving away from heavy page builders (specifically Elementor and Divi) to more lightweight alternatives like Gutenberg, Oxygen Builder, and GeneratePress. Below are page builder migrations and polls on the “fastest themes” (click on image to enlarge):
Sure it’s cliché to “use a lightweight theme” but I paid over $3,000 for a developer to remove Elementor and replace it with Gutenberg blocks. Do yourself a favor and do it from the start.
In addition to WP Rocket’s list, you should also consider delaying your comments (e.g. Gravatars and wpDiscuz) as well as //cdnjs.cloudflare.com if you’re using Cloudflare’s CDN.
12. Use A Performant CDN
Your CDN and it’s configuration can impact first contentful paint.
Cloudflare and StackPath (also RocketCDN) can sometimes have a negative impact on performance. That’s why you should test their impact and only use a CDN if your visitors are geographically far away from your origin server.
13. Add Font-Display Swap
To ensure text remains visible during webfont load, first make sure you’re hosting fonts locally from your server instead of third-party domains like fonts.gstatic.com. Next, edit your font’s CSS file and use font-display: swap. You may have it set to auto, block, etc. When using swap, it should fix this item in PageSpeed Insights. Eliminating FOIT can improve first contentful paint.
You can also use the Swap Google Fonts Display plugin.
14. Use A Longer Cache Expiration
Serving static assets with an efficient cache policy is an easy one to fix.
Google wants the cache expiration set to 180 days (around 6 months) for it to be green. However, chances are your fonts, images, and possibly other files have a short cache expiration. Where you tweak your cache expiration depends on your cache plugin, CDN, and hosting setup.
- View your PSI report and see which files need a longer expiration.
- If using Cloudflare, adjust your Browser Cache TTL setting to 6 months.
- If using another CDN, also set your browser cache expiration to 6 months.
- If using WP Rocket, edit .htaccess and adjust cache expirations to 6 months.
- If using NGINX or Apache, adjust static cache expiry (or similar) to 6 months.
15. Remove Heavy Scripts Above The Fold
Loading heavy files above the fold should be avoided.
16. Exclude Above The Fold Images From Lazy Load
Above the fold images should be excluded from lazy loading since visitors should see these right away. This applies to your logo and other images that appear above the fold.
Retest Your First Contentful Paint
Run your WordPress site through Lighthouse (ideally), PageSpeed Insights, or GTmetrix and view your first contentful paint. Remember, it should be 0–2 seconds if you want it to be green.
If you didn’t find what you’re looking for, here are suggestions from Facebook Groups:
Frequently Asked Questions
How do I improve first contentful paint in WordPress?
Improving first contentful paint can be done by eliminating render-blocking resources, reducing TTFB, optimizing CSS, using preload and preconnect, and reducing page size.
Which WordPress plugins improve first contentful paint?
How do I improve first contentful paint when using Elementor?
Disable unused Elementor assets using Asset CleanUp or Perfmatters, then enable optimized DOM output and improved asset loading in Elementor's settings to improve FCP.
Hope this helped!