Inline dynamic style scripts - Is there a way to move all of them to one <style> snippet?

Technical Q&A
1

Hi!

One of the things we often see from various speed tests, especially Yslow, is to combine our inline style tags. They often contain 1-3 css classes that can get altered in the theme editor.

I assume this means they cannot simply be moved into the inline styles I have in my footer due to the dynamic nature of how they are set up.

But is there a way I can achieve this? For example by capturing the content of the section they are from first, and then adding the styles from that section?

I really appreciate all help in this :slightly_smiling_face:

2

I would recommend just using the single CSS properties that are going to be overridden with Theme Customizer, and move the rest of the CSS to the head. This way, you reduce the amount of CSS that’s scattered inline in the body.

As for web performance tools, I would not recommend using YSlow, as its a defunct unmaintained measurement tool that’s no longer relevant to the modern web (it hasn’t been updated in 7 years). Lighthouse is a much better choice.