Not excluding CSS file

Resolved georgiedavies
(@georgiedavies)

4 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)

1 2 →

Plugin Contributor Marko Vasiljevic
(@vmarko)

4 years, 11 months ago

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)

4 years, 11 months ago

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)

4 years, 11 months ago

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)

4 years, 11 months ago

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)

4 years, 11 months ago

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)

4 years, 11 months ago

Hi @vmarko

How odd. Have added all requested images again below.

Plugin Contributor Marko Vasiljevic
(@vmarko)

4 years, 11 months ago

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)

4 years, 11 months ago

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)

4 years, 11 months ago

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)

4 years, 11 months ago

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)

4 years, 11 months ago

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)

4 years, 11 months ago

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)

4 years, 11 months ago

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)

4 years, 11 months ago

Hi @vmarko

Css minify is disabled and the cache purged
Plugin Contributor Marko Vasiljevic
(@vmarko)

4 years, 11 months ago
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!