16 Easy Ways To Improve First Contentful Paint In WordPress

16 Easy Ways To Improve First Contentful Paint In WordPress

Looking to improve first contentful paint in WordPress?

For WordPress sites, improving first contentful paint (FCP) starts with fixing high-impact opportunities in your Lighthouse report. This can include optimizing fonts, TTFB, images, CSS, JavaScript, and third-party code. A few plugins that can improve FCP are: Autoptimize, Asset CleanUp, Perfmatters, and cache plugins. As you optimize these, your FCP should also improve.

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.

 

1. Eliminate Render-Blocking Resources

Eliminating render-blocking resources is the first thing Google recommends to improve first contentful paint, and that usually starts with deferring JavaScript.

Autoptimize and Async JavaScript can do a better job at deferring JavaScript than cache plugins. I already had load JavaScript deferred enabled in WP Rocket but still had many render-blocking issues in PageSpeed Insights. After installing the Autoptimize and Async JavaScript plugins, this item was green and only 1 resource on my WordPress website is render-blocking.

WordPress Solutions

  • Install Autoptimize and Async JavaScript.
  • In Autoptimize, enable “optimize + aggregate CSS/JS.”
  • In Async JavaScript, click “apply defer” and set the JavaScript method to async.

 

2. Removed Unused CSS And JavaScript

Large CSS and JavaScript files can slow down the first contentful paint.

Contact forms, sliders, and other things can load across your entire WordPress site even if they’re not being used. Asset unloading plugins like Asset CleanUp and Perfmatters let you view CSS and JavaScript files on each page/post then disable them where they’re not used.

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.

WordPress Solutions

  • Minify CSS and JavaScript.
  • Avoid heavy page builders that add lots of extra CSS and JavaScript.
  • Remove unused CSS and JavaScript using an asset unloading plugin.
  • 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).
Disable Elementor ScriptsRemoving unused Elementor CSS/JS (Perfmatters)

 

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

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.

Preload Fonts

Preconnect

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.

Preconnect Third-Party Services

 

4. Test Cloudflare’s Rocket Loader

If you’re using Cloudflare, Rocket Loader can sometimes improve your site’s first contentful paint. I say “sometimes” because it can also have a negative effect – you might use it for weeks then one day, your website breaks. Use with caution and keep it in your list of possible issues when testing your speed. This will defer the loading of all your JavaScript until after rendering.

Cloudflare Rocket Loader - First Content Paint

 

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.

Cloudways is who most people recommend in that group and was the #1 host in 18 Facebook polls. You can also see plenty of people who moved to Cloudways and posted faster load times.

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.

WordPress Hosting 2020 Pingdom TestIdentical Astra Starter Sites with no caching or CDN (see full speed test)

 

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.

SiteGround NGINX Delivery

 

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.

WP Rocket fallback critical CSS

 

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.

GTmetrix Canceled Errors

 

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):

Many page builders got crushed when core web vitals came out. They can add quite a bit of CSS and JavaScript and slow down your entire site. Some have speed optimizations you can enable in the settings (optimize DOM output and improved asset loading in Elementor, as well as minify/combine CSS and JavaScript in Divi). But this usually doesn’t make a large improvement.

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.

 

11. Delay JavaScript

Delaying JavaScript was recommended by Gijo Varghese to improve first contentful paint. Gijo is the developer for many speed plugins and admin of the WP Speed Matters Facebook Group.

This can be done using his Flying Scripts plugin or using WP Rocket’s delay JavaScript execution setting. Whichever method you choose, you can use this default list of delayed JavaScript as a baseline. However, if there is other heavy JavaScript that can be delayed, consider adding it too.

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.

How to improve first contentful paint - Facebook

 

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.

I generally recommend BunnyCDN which is highly recommended in Facebook Groups. If using Cloudflare, using their APO, page rules, firewall, and tweaking the speed settings can also help.

 

13. Add Font-Display Swap

FOIT (flash of invisible text) is a common issue with fonts and adds to your CLS.

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.

font-display swap

 

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.

WordPress Solutions

  • 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.

WP Rocket Efficient Cache Policy

 

15. Remove Heavy Scripts Above The Fold

Loading heavy files above the fold should be avoided.

Advertisements, social sharing buttons, and other files can really slow down your first contentful paint. By placing heavy files below the fold, you are usually able to delay their JavaScript, use defer attributes, and optimize them better than you would above the fold.

 

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.

You shouldn’t delay files that are above the old (images, JavaScript, etc). Many caching and image optimization plugins allow you to exclude specific images from lazy load in the settings.

Exclude Images From Lazy Load

 

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.

First Contentful Paint WordPress - PageSpeed Insights

If you didn’t find what you’re looking for, here are suggestions from Facebook Groups:

Improve First Contentful Paint WordPress - Facebook

 

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?

Autoptimize, Async JavaScript, Perfmatters, Asset CleanUp, RapidLoad, and WP Rocket are all WordPress plugins that can 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!

Cheers,
Tom

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Keep reading the article at Tom Dupuis. The article was originally written by Tom Dupuis on 2021-03-28 20:55:32.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top