How to improve FCP with critical CSS

FCP helps to improve speed of your website and singnificantly boost Core Web Vitals score. Improving FCP also help to reduce the Largest Contentful Paint timings and render blocking resources.

Adding critical CSS is tricky. I will show you methods by which you can add critical CSS easily. 

Add critical CSS to improve FCP

There are paid and free tools to make this happen. I will be using accessible tools for this, as many of you may have limitations to invest in paid options or may not be seeing the desired results.

I will use two tools to generate critical CSS. The first part will be analysing all the CSS files from inlining it. And the second part will be picking the file and uplading back to the plugin.

Tools for adding critical CSS

You are free to use other tools in place of Autoptimize. What you need is a tool that allows you to inline all the CSS files and also allows you to put critical CSS.

Let’s move on the wordpress dashboard.

Step 1: Inlining all CSS

You are free to use other tools in place of Autoptimize. What you need is a tool that allows you to inline all the CSS files and also allows you to put critical CSS.

Let’s move on the wordpress dashboard.


Posted

in

by

Tags:

Comments

Leave a Reply

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

× Contact us on WhatsApp