[Support request] No External CSS File (Inline instead)

[Markus]

Hello!

I just noticed, that on my https://journal.markusthoma.com/ Website the WP-Custom-CSS (from the Customizer) is still being loaded inline.

I activated following settings in customizer:
– External CSS File
– Flexbox
– SVG Icons
– Dynamic Cache (on)

I already deactivated all plugins (especially WPFC) on my staging site. I also hit the recreate CSS file button.

And another question, as I want to improve my Pagespeed and Render Blocking:
Would it make sense to copy the Customizer CSS to an external file and link it in a header hook? So I could make a single desktop css and a single mobile css? I think the best would be to include the critical CSS to create the above the fold inline, and linking two CSS external CSS files for the rest. What do you think?

With kind regards,
Markus

[David]

Hi there,

The Customizer CSS is controlled by WordPress and that is always output inline. The GP settings only apply to the CSS that IT creates.

Moving the customizer CSS to child theme stylesheet or external file is the best option.

Critical CSS is tricky to set-up – considering that there maybe different CSS requirements for different templates or content. You also have to consider server side page caching when it comes to separate Desktop and Mobile CSS. Unless the server supports separate caches for different devices you may find that Desktop CSS gets cached and loaded for a mobile device.

Personally i would avoid tampering too much with the Themes CSS – its lightweight anyway.

[Author]

Posts