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,

[…]

 



This article was written by Tom Dupuis and originally published on Tom Dupuis.

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

You have to agree to the comment policy.

Scroll to Top