When you use multiple plugins, they can decide to either enqueue css or js files in the header or footer. Furthermore, they can enqueue files which are mobile only, printing only, or general css files.
Those 3 css files have a reason.
You have 2 header files:
One is your general css code, that plugins are enqueueing in the header.
The other one is /wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css which loads only, on mobile.
Those two css files, serve different purposes, so they cannot be merged automatically.
Woocommerce defined that specific file to load separate from the others, so that’s why FVM obeys the developer guideline and loads it separately too, as intended by the author.
As for the footer css file, it’s merging 3 css files into that footer file.
That’s the same principle… authors, specifically chosen to enqueue them in the footer, therefore FVM creates a group for them.
They usually do this, for css that is not so important to be render blocking.
In your specific case, the minimum amount of css files is 3, because you have 2 places (header and footer) where plugins are injecting files, plus woocommerce mobile only css file, creating a third file.
While you cannot merge those further, you can inline them… so head over to the plugin options and mark the inline css code for both the header and footer.
If your css code is too big, it may trigger another warning about prioritizing visible content… however, the score impact is lower.
That’s the reason people hire developers to either shrink their css code or merge these files by shifting the orders around, or coding files in a way they can me merged.
