[Support request] Impressive amount of inline styles in pages

[Daniel]

Although I selected the External file in the “Dynamic CSS Print Method” menu of themes customize settings, I have many inline styles on each page. How can I deactivate inline styles and scripts forever and transfer all of them to external style and js files?

I also tried both two solutions mentioned in the following post, but there was no result:

https://generatepress.com/forums/topic/how-to-disable-generate-style-inline-css/#post-1525914

Could you please help me with this issue?

Thanks

[David]

Hi there,

The only way to do that is to use a Cache/Optimiztion plugin to scrape any inline CSS and get it to move those to cached file.

[Daniel]

Hi David and thanks for your reply
According to what you said, I used wp-rocket to cache, but it couldn’t transfer inline styles and scripts to external files. Of course, when inline styles and scripts have used in theme backend codes, we cannot have this request from the cache plugin. Also, many times, when we ask the cache plugin to merge all style files, we will see a disarrangement visual on the website.
For example, we can see these inline styles:

<style>img.wp-smiley,...
<style id='global-styles-inline-css'>
<style id='woocommerce-inline-inline-css'>

and also many inline styles in some tags that I set in the Gutenberg page builder.
Thanks for your support in advance

[David]

Unfortunately there isn’t much we can do about that.
The theme itself writes very little inline styles, the ones it does are dynamic and we have yet to find a stable way to move them to the external file. But we are constantly looking at to improve that.

The three inline styles you list above, are not theme related. They are generated by WP or Woocommerce. I can’t tell you how to move them to an external styles, but below are where they come from and how to remove:

<style>img.wp-smiley,... from WP for Emojis
If you don’t need emojis then this post explains removing them:
https://kinsta.com/knowledgebase/disable-emojis-wordpress/

<style id='global-styles-inline-css'> – WordPress global styles.
There’s a function here to remove those:
https://github.com/WordPress/gutenberg/issues/36834#issuecomment-1048923664

<style id='woocommerce-inline-inline-css'> – Woocommerce.
Which can be removed with this function:

add_action('wp_enqueue_scripts', function(){
    wp_deregister_style( 'woocommerce-inline' );
},11);

The Inline HTML styles from Gutenberg come from WordPress core or 3rd party block plugins. Theres no way to remove those without effectively writing your own blocks, or not using those blocks or their inspector controls.

With GenerateBlocks ( our block plugin ) the only inline styles it adds is if the user has added dynamic background images to a Container. Then it writes the necessary URL as an inline CSS variable.

[Author]

Posts