Not excluding CSS file

  • Resolved georgiedavies

    (@georgiedavies)


    3 years, 11 months ago

    Hi, I’m having problems with a layout shift and my theme provider thinks the issue is with W3 Total Cache not excluding a necessary file.

    I have “X/framework/dist/css/site/stacks/icons.css” set to never minify the following CSS files but it is not doing this. When I turn off minification totally the layout shifts back to what it should be.

    Are you able to look into/advise how to ensure X/framework/dist/css/site/stacks/icons.css does actually never minify?

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @georgiedavies

    Thank you for your inquiry and I am happy to assist you with this.
    Can you please share your website URL and the complete URL of the file you wish to exclude from being minified?
    Thanks!

    Thread Starter georgiedavies

    (@georgiedavies)

    Hi. The website is https://yogipod.co.uk/. The part of homepage that has had the layout shift caused by minification is the product categories below the title “discover the full Yogipod range”. I’m not sure how to send the complete URL of this as the content is pulling through Woocommerce categories rather than being a file itself

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @georgiedavies

    I’ve checked the website and I am not seeing any issues and as I can see minify is enabled.
    Can you please sare the screenshot of the specific issue?
    Thanks!

    Thread Starter georgiedavies

    (@georgiedavies)

    Hi Marko

    Two images attached – incorrect layout shows what happens when minify is enabled for entire site. Correct layout is what it should be and this only shows when minify is turned off for the whole site. To have the correct layout I don’t want to have to disable minify for the whole site.

    As said my theme provider said setting “X/framework/dist/css/site/stacks/icons.css” to never minify should solve the problem. I have added this to the settings of W3 cache but it makes no difference.

    Thanks, Georgie

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @georgiedavies

    Thank you, however, the images are not available.
    Can you please also share the screenshot of where you added the X/framework/dist/css/site/stacks/icons.css
    Thanks!

    Thread Starter georgiedavies

    (@georgiedavies)

    Hi @vmarko

    How odd. Have added all requested images again below.

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @georgiedavies

    Thank you for the information.
    Can you please try adding the full path:
    /wp-content/themes/x/framework/dist/css/site/stacks/icons.css
    Make sure to save all settings and purge the cache.
    Thanks!

    Thread Starter georgiedavies

    (@georgiedavies)

    Hi @vmarko. Thanks for that, unfortunately that doesn’t help. Is there anyway of testing if the plugin is actually managing to disable that CSS?

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @georgiedavies

    I’ve tested this and excluding the css files works as expected. Most likely the path is not correct.
    Try disabling the CSS minify in Performance>Minify, save all settings and purge the cache and see if the issue persists.
    Thanks!

    Thread Starter georgiedavies

    (@georgiedavies)

    Hi @vmarko
    Yes disabling the minification works bring the layout back to correct. I don’t want to have minification permanently disabled though. Can you help me figure out the path that needs disabling so this can be fixed?
    Thanks

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @georgiedavies

    Thank you for the info. I’ve checked your website and as I can see the file responsible for this is: https://yogipod.co.uk/wp-content/themes/x/framework/dist/css/site/stacks/icon.css?x26491
    As I mentioned before, the way to exclude the file from being minified, in this case, the CSS file, is adding the path to Performance>Minify>Advanced>”Never Minify following CSS files”
    So it should look like this:

    Now as I can see you enabled the option “Prevent caching of objects after settings change” in Performance>Browser Cache>CSS&JS, which adds the query string to css and js files ?xNNNNN
    Try to disable that option, and add the URL of the file as in the screenshot, save all settings and purge the cache.
    Check the console after that and CSS files and that file should not be minified.
    I hope this helps!

    Thread Starter georgiedavies

    (@georgiedavies)

    Hi @vmarko

    Thanks for this detailed explantation. I have done both of those just now and it is still not working.

    Any other ideas? Or am I doing something wrong?

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @georgiedavies

    Can you please disable CSS minify, save all settings, and purge the cache. So only the CSS minify in Performance>Minify>CSS minification.
    I need to check something on your website.
    Thanks!

    Thread Starter georgiedavies

    (@georgiedavies)

    Hi @vmarko

    Css minify is disabled and the cache purged

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @georgiedavies

    Thanks. I’ve checked your website and I am not quite sure where the problem is.
    Try excluding the following from minify:

    /wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/style.css
/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css
/wp-content/themes/x/framework/dist/css/site/stacks/icon.css
/wp-content/themes/x/framework/legacy/cranium/dist/css/site/icon.css

    Make sure to save all settings and purge the cache and see if the issue persists.
    Thanks!

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Not excluding CSS file’ is closed to new replies.