How to inline CSS to control Content Layout Shift metric

[SuslegStyle]

Prerequisites

• [X] I have written a descriptive issue title
• [X] I have searched existing issues to ensure the issue has not already been raised

Issue

Hi There.

I use Google PageSpeed Insights tool time to time for monitoring our website metrics. It has the Content Layout Shift (CLS) metrics which is poor by default to me.

I'd like to know is any way how to pass minimum critical css styles from Vue components to main layout (client.vue) or even to index.hml to avoid CLS issues ?

As a workaround, right now I have to do the following things:

1. To define manually minimum critical css in client.vue, or any other Page Vue components

const minCriticalCss = {
  style: [{
    type: 'text/css',
    children: '<important content>'
  }]
};

2. To pass minCriticalCss to useHead call.

But, it is obviously akward to maintain. What alternativies can you recommend ?