Inline combined CSS

Hi,

I have removed the option, because the plugin now does preloading of css files as well, so there is no need to inline css code.

The only benefit would be if your css is under 15Kb in total, which is extremely rare on wordpress. Most themes have multiple Kb of data and if you were to inline that, it would reduce your time to first byte due to server compression needing more time.

The best method is to preload and then render block the CSS file as long as it’s small enough (usually up to 150 Kb or so, if you use a CDN). Else you could load them async and add the critical path css inlined.

Merging inline css code to the external file is also not a solution, because many plugins and page editors load dynamic css code inlined, which sometimes change per pageview. If we were to merge that, it would create a different cache file per pageview as well, thus rendering it inefficient and slower than not using the plugin.

The CLS shift doesn’t come from CSS, it’s likely something else.
The CSS file is preloaded first but render locking later.
That means, the page will not render until all CSS code is downloaded.

If you are Merging Fonts and Icons Separately, then that file will be loading with javascript and it’s async.

If the CLS comes from that file, you can simply disable the option and fonts will also be render blocking. However, obviously your scores will suffer as you are adding them to the critical path, by merging them into the main file.

Can you please explain how this option (Merge Fonts and Icons Separately) works?

Enabling it, will extract the fonts, icons and known animations files and merge them separately and asynchronously. Doing this, reduces the size of your main CSS file, hence if you do not have a CDN, it can load faster and decompress after.

The CLS will decrease with this settings, because animations and fonts also delay the CLS. If you want the shortest CLS possible, you should remove any animations from above the fold as well as heavy webfonts.