- This topic has 13 replies, 4 voices, and was last updated 5 years, 10 months ago by
.
-
Posts
-
How do I move the generated inline css to the footer?
When I crack open my page source (CTRL + U in Chrome) I see tons of styling. I believe, I read in the past that this is something that cannot be removed too. Perhaps it can be moved to the bottom though.
<style id=’generate-style-inline-css’ type=’text/css’>
Lead Developer
It’s possible, but it’s not a good idea.
Websites need the CSS to load in the
<head>section so the site is rendered by the time it loads.If you load CSS in the footer, you will first see the website with no style, and it will flash the style into place once that area of the source is reached – the flash is hard on the eyes.
Either way, while having inline style in the
<head>section like that doesn’t look pretty to us, it’s actually more efficient to search engines than linking to an external stylesheet – so performance-wise, it’s a good thing.However, using this plugin you can pack it up with other stylesheets and remove it from the source: https://wordpress.org/plugins/autoptimize/
Thanks for the kind suggestion, that makes perfectly good sense too.
Forget the flash!
CSS at the top, JS at the bottom 🙂
Glad I could help!
OOo Hey Tom, I did forget to ask one thing.
If I wanted to go ahead and copy / paste all the inline GP style into my child theme css file, could I simply disable the output? I’m trying to use WP Rocket to minify all my junk but this is the only thing being left.
Thanks for helping me cure my Autism.
🙂
I tried something like (and it didn’t work):
style#generate-style-inline-css { display: none !important; }p.s. – the site already fast enough and I may end up stop trying to optimize it, cheers.
Interesting idea..
The inline CSS is using the wp_add_inline_style() function, which attaches to an already enqueued stylesheet.
Unfortunately, there’s no wp_remove_inline_style() function.
However, dequeuing the stylesheet it attaches to, and re-naming it something different may work (keyword there is may..).
add_action( 'wp_enqueue_scripts','generate_rename_styles' ); function generate_rename_styles() { wp_dequeue_style( 'generate-style' ); wp_enqueue_style( 'generate-custom-style', get_template_directory_uri() . '/style.css', false, GENERATE_VERSION, 'all' ); }No idea if that will work, but the speed you’ll gain from it will most likely not be noticeable at all.
thanks!
I tried exactly the same thing recently as an experiment, renaming the main style so that the inline CSS couldn’t be attached to it. It seemed to work fine, though to get all the other CSS files loading in the right order, I also had to dequeue and re-enqueue some other styles.
It might be more effort than it’s worth, and I’m no expert, but here’s how I did it (where generate-parent is the renamed version of generate-style, and customizer.css is where I pasted the inline CSS):
add_action( 'wp_enqueue_scripts', 'generate_replace_inline_css', 100 ); function generate_replace_inline_css() { wp_dequeue_style( 'generate-style' ); wp_dequeue_style( 'generate-mobile-style' ); wp_dequeue_style( 'generate-child' ); wp_enqueue_style( 'generate-parent', get_template_directory_uri() . '/style.css', false, GENERATE_VERSION, 'all' ); wp_enqueue_style( 'generate-mobile-style', get_template_directory_uri() . '/css/mobile.css', false, GENERATE_VERSION, 'all' ); wp_enqueue_style( 'generate-customizer', get_stylesheet_directory_uri() . '/customizer.css', true, filemtime( get_stylesheet_directory() . '/customizer.css' ), 'all' ); wp_enqueue_style( 'generate-child', get_stylesheet_uri(), true, filemtime( get_stylesheet_directory() . '/style.css' ), 'all' ); }Cool! Thanks for sharing 🙂
Sorry for popping up the old tread, but I have almost the same problem:
I use w3tc cache to minify all my my css.
Now the minified css inlined after generate-style-inline-css section.
So in my case GeneratePress styles taking over my styles especially on mobile.So, my question is if there any new ways to remove/disable inlining of theme styles in head ?
Have you considered using a plugin like Autoptimize to merge your CSS? It handles inline CSS as well and does a great job of keeping everything in order.
it’s true, that addon rocks — https://generatepress.com/fastest-wordpress-theme/
Tom and Webmaster, thanks for suggestions, but I prefer to make all CSS work in W3TC.
I can handle each file individually and it also do a good job with different levels of minifying.
So, back to subject:I have tried to dequeue the following styles:
function wp_lk_enqueue_scripts() {
wp_dequeue_style( ‘generate_add_base_inline_css’ );
wp_dequeue_style( ‘generate-style’ );
}
add_action( ‘wp_enqueue_scripts’, ‘wp_lk_enqueue_scripts’, 100);It doesn’t work – I still see inlined CSS in the body.
The only method that helps is to comment wp_enqueue_scripts in the following code.
if ( ! function_exists( 'generate_add_base_inline_css' ) ) : /** * Add our base inline CSS * @since 1.3.42 */ add_action( 'wp_enqueue_scripts','generate_add_base_inline_css', 40 ); function generate_add_base_inline_css() { wp_add_inline_style( 'generate-style', generate_base_css() ); } endif;Really don’t like this solution because I will not be able to update…
Can you please take a look what I have missed ?There’s not a great way to do it, but you could try this:
add_action( 'after_setup_theme','tu_remove_dynamic_css' ); function tu_remove_dynamic_css() { remove_action( 'wp_enqueue_scripts', 'generate_color_scripts', 50 ); remove_action( 'wp_enqueue_scripts', 'generate_spacing_scripts', 50 ); remove_action( 'wp_enqueue_scripts', 'generate_typography_scripts', 50 ); remove_action( 'wp_enqueue_scripts', 'generate_secondary_color_scripts', 80 ); remove_action( 'wp_enqueue_scripts', 'generate_background_scripts', 70 ); }This will change in GP 2.0, which will be coming out before the end of the year.
- You must be logged in to reply to this topic.