[Resolved] Move Generate Inline Style to Footer

Home Forums Support Move Generate Inline Style to Footer

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #112988
    maggew

    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’>

    #112997
    Tom
    Lead Developer
    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/

    #112999
    maggew

    Thanks for the kind suggestion, that makes perfectly good sense too.

    Forget the flash!

    #113001
    Tom
    Lead Developer
    Lead Developer

    CSS at the top, JS at the bottom 🙂

    Glad I could help!

    #113015
    maggew

    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.

    #113028
    Tom
    Lead Developer
    Lead Developer

    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.

    #113032
    maggew

    thanks!

    #113460
    Tara

    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' );
    }
    #113482
    Tom
    Lead Developer
    Lead Developer
    #423421
    Michael

    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 ?

    #423655
    Tom
    Lead Developer
    Lead Developer

    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.

    #423667
    maggew

    it’s true, that addon rocks — https://generatepress.com/fastest-wordpress-theme/

    #423928
    Michael

    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 ?

    #424213
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.