Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 10, 2022 at 2:16 pm #1364529
    Alwin

    Trying to speed up my sites and get better scores on Google web vitals :) I have 2 questions about removing unused CSS.

    1 – I am using the Classic editor in WordPress. In Google Pagespeed test and GTmetrix I see that there is still some CSS loaded for Gutenberg, which is marks as a render-blocking resource:
    …block-library/style.min.css?

    I have found a solution to block this CSS from loading, by adding tis code im my Enfold Child Theme;s functions.php file:

    // Stop Gutenberg block library CSS from loading.
function remove_wp_block_library_css() {
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
    wp_dequeue_style( 'wc-block-style' ); // Remove WooCommerce block CSS
} 
add_action( 'wp_enqueue_scripts', 'remove_wp_block_library_css', 100 );

    Question: is this a correct way to block this Gutenberg CSS from loading? The above code does not cause any know conflicts within Enfold?

    2 -Then there is a second piece of unused CSS:
    …dynamic_avia/avia-merged-styles-5208a9f…—6311e96e03a09.css

    – Is this really unused CSS and if yes, is there a way to prevent this CSS file from loading?

    Thanks for the help!

    Best Wishes,
    Alwin

    September 10, 2022 at 11:53 pm #1364582
    Mike

    Hey Alwin,
    Thanks for your question, I have not seen any solutions to block the CSS loaded for Gutenberg, so if this works for you then please use. The Block Editor (Gutenberg) is a core WordPress element.
    The file:
    dynamic_avia/avia-merged-styles-5208a9f…
    is created with Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression
    You could disable this since you are using WP Rocket, letting WP Rocket do all of the caching.
    If you do disable also enable the option: Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files to clear the old files.

    Best regards,
    Mike

    September 11, 2022 at 9:50 am #1364593
    Alwin

    Hello Mike,

    Thank you for your hel!

    When I disbale Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression, and enable these options in WP-Rocket instaed, you say I have to enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files .

    However, in the Enfold settings I read that you should not enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files when using a caching plugin.

    Can you please explain why you say I have to enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files? Do I have to enable it once, save to delete the old CSS and JS files, and after that disable this option again, because I use a cache plugin?

    September 11, 2022 at 2:05 pm #1364606
    Mike

    Hi,
    Sorry, that I was not clear, in the theme options that says you should not enable the Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files when using a caching plugin, this assumes that you are going to use the Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression with your caching plugin, in your case you are going to disable Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression to not cache cached files, that is the cache in WP Rocket contains the merged and compressioned theme files.
    Once you disable this option you would want to clear these files so the WP Rocket cache is the only file, you could enable it again but since merging and compression is disabled there should be no files so it would not matter one way or the other.

    Best regards,
    Mike

    September 11, 2022 at 5:13 pm #1364615
    Alwin

    Hello Mike,

    I am getting more confused, sorry…

    Okay, I am using Enfold and WP-Rocket, and therefore I have 2 options for JS & CSS file merging and compression:

    – Option 1: I enable JS & CSS file merging and compression in the Enfold performance settings and disable JS & CSS file merging and compression in WP-Rocket.

    – Option 2: I enable JS & CSS file merging and compression in WP-Rocket and disable it in Enfold performance settings.

    Now with option 1, I need to disable or enable Delete old CSS and JS files in Enfold performnce settings?

    And with option 2, disable or enable Delete old CSS and JS files in Enfold Performance settings?

    Thanks,
    Alwin

    September 11, 2022 at 7:31 pm #1364634
    Mike

    Hi,
    Sorry, I don’t mean to confuse you, let’s go back to the opening post, where you thought from your GTmetrix report that this file was unused and wanted to remove it:
    dynamic_avia/avia-merged-styles-5208a9f…—6311e96e03a09.css
    which is created with Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression
    to remove it please disable Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression
    then to flush this now unused old file from your cache also enable the option: Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files.

    Now going forward all of your caching will be controlled by WP-Rocket, and the GTmetrix report will not show any unused files from dynamic_avia/avia-merged-styles

    Then you asked why there is a message in the Enfold performance that you should not enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files when using a caching plugin.
    This only assumes that you are using Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression with a caching plugin, which you are not going to because it will defeat removing the dynamic_avia/avia-merged-styles file from your GTmetrix report.
    If you want to disable the option: Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files again then please fee free to to also, it should have no effect either way because Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression is disabled.

    Hopefully this makes sense.

    Best regards,
    Mike

    September 11, 2022 at 7:57 pm #1364637
    Alwin

    Mike, thank you again for your fast and great support.

    But… I am back at using the JS & CSS file merging and compression in the Enfold performance settings, and not using it in WP-Rocket, because after a lot of testing tis seems to be the best option after all.

    Now, can you please answer me this (last) question:

    With JS & CSS file merging and compression enabled in the Enfold performance settings, and JS & CSS file merging and compression disabled in WP-Rocket., do I have to enable or disable Delete old CSS and JS files in Enfold performnce settings?

    September 11, 2022 at 8:26 pm #1364642
    Mike

    Hi,
    In that case leave it disabled.

    Best regards,
    Mike

    September 12, 2022 at 8:59 am #1364664
    Alwin

    Hello Mike,

    Great, I think I understand it now :)

    Thanks for your great suport, the thopic can be closed now!

    Best regards,
    Alwin

    September 12, 2022 at 11:46 am #1364718
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Remove unused CSS?’ is closed to new replies.