“Also aggregate inline CSS” causes cache to fill up quickly

  • Resolved Selah

    (@tubescreamer)


    2 years, 10 months ago

    Hey,

    I’ve been configuring settings in AO to help with my page load times. So far, i’ve gotten everything to work fine, nothing on my site is broken. Here’s a screenshot of my current “JS, CSS & HTML” settings: https://imgur.com/5grinbf

    At the time of taking this screenshot, the size of the cache is 313.36mb and 360 files as you can see and my cache size is already at like 62%. I noticed this started happening ever since I turned on the setting “Also aggregate inline CSS” but I did it, because it helped with my page load time a little and made the size of the HTML smaller, which is a good thing. I’m not sure why the cache is constantly growing though. It even got to 100% and I got a warning, but I cleared the cache since then and now it’s growing again.

    What can I do to keep the cache size down while still keeping this setting enabled?

    Edit: I have similar settings (including the “Also aggregate inline CSS” setting) on another site of mine and that site has A LOT more CSS in “Additional CSS” which counts as Inline CSS of course and the cache size is constantly very low, at about 9% and 41.54mb..

    • This topic was modified 2 years, 10 months ago by Selah.
    • This topic was modified 2 years, 10 months ago by Selah.
Viewing 15 replies - 1 through 15 (of 20 total)
1 2
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    2 years, 10 months ago

    Hey Selah;
    The only alternative is ‘hunting’ for the inline CSS that is different between pages (so not the “additional CSS”) but something that is likely added by a plugin or your theme; the cache size increases not due to the amount of inline CSS, but because of differences between the inline CSS. Once you know what inline CSS is doing that, you can add it to the exclusion list.

    hope this clarifies,
    frank

    Thread Starter Selah

    (@tubescreamer)

    2 years, 10 months ago

    Ah, I think I understand now. That makes sense. I am using WP Bakery Page Builder, and there is an option to add Custom CSS per page, which I did initially when I built the site like 3 years ago lol. So i’m guessing for this feature to work better in AO, I should move all that custom CSS per page to the “Additional CSS” in WP Customizer, so that the inline CSS is the same per page, throughout the entire site, right?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    2 years, 10 months ago

    indeed, or try excluding just that WP Bakery custom CSS from being aggregated?

    Thread Starter Selah

    (@tubescreamer)

    2 years, 10 months ago

    How would I be able to exclude WP Bakery custom inline CSS from being aggregated?

    Thread Starter Selah

    (@tubescreamer)

    2 years, 10 months ago

    I also noticed, on one of the other sites where I have the
    “Also aggregate inline CSS” and “Optimize CSS Code” options enabled, the inline CSS I have in WP Customizer > Additional CSS isn’t optimized or aggregated. It still shows up line by line as I typed it in Additional CSS and makes my HTML a lot longer. Any reason this could be happening?

    EDIT: Apparently it’s because I had “wp-content/uploads/” in the Exclude CSS list? That’s strange because I had “wp-content/uploads/” in the list for the other site that is in question in this thread and it seemed to aggregate and optimize the Additional CSS in WP Customizer. Is it best to remove “wp-content/uploads/” from being excluded if the “Also aggregate inline CSS” option is enabled with CSS in the Additional CSS section of WP Customizer?

    • This reply was modified 2 years, 10 months ago by Selah.
    • This reply was modified 2 years, 10 months ago by Selah.
    • This reply was modified 2 years, 10 months ago by Selah.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    2 years, 10 months ago

    How would I be able to exclude WP Bakery custom inline CSS from being aggregated?

    does WP Bakery inline CSS come with an ID of it’s own? if so, use that, if not try adding a dummy selector to all such CSS and exclude that, e.g. dontaggregate{whatever:happens;} and exclude dontaggregate ? 🙂

    Is it best to remove “wp-content/uploads/” from being excluded if the “Also aggregate inline CSS” option is enabled with CSS in the Additional CSS section of WP Customizer?

    wp-content/uploads is excluded by default to avoid pagebuilder CSS stored there (which often is page-specific) being aggregated. you can remove it if you want off course 🙂

    Thread Starter Selah

    (@tubescreamer)

    2 years, 10 months ago

    Ah I see. Well, it seems that only when I remove wp-content/uploads, the inline CSS is being aggregated and optimized on one of my sites, so I guess i’ll have to remove it from the exclusion list to achieve what I want. This shouldn’t affect anything in the long run right?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    2 years, 10 months ago

    well, it might impact cache size growth rate ..

    Thread Starter Selah

    (@tubescreamer)

    2 years, 10 months ago

    Hmm okay. I’ll keep an eye on it then. It’s been a few hours since I removed wp-content/uploads from the exclusion list and the cache size still seems low (at 5%) so maybe all will be fine. Just confused as to why it aggregated and optimized the Additional CSS on one of my sites with wp-content/uploads excluded, but on my other site, it had to be removed from the exclusion list for it to work. All good though!

    I did as you said and moved all the inline CSS I had for my different pages in WP Bakery Page Builder, to Additional CSS in WP Customizer and so far it seems to have done the trick with keeping the cache size down, but i’ll keep monitoring it and let you know!

    If there’s anything else I can do to troubleshoot why the inline Additional CSS isn’t being aggregated/optimized on my other site when wp-content/uploads is excluded, please let me know!

    Thanks again for the help! (:

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    2 years, 10 months ago

    If there’s anything else I can do to troubleshoot why the inline Additional CSS isn’t being aggregated/optimized on my other site when wp-content/uploads is excluded, please let me know!

    check the contents of the inline CSS; if it contains e.g. a background-image it is likely to contain the string wp-content/uploads as well, resulting in it being excluded. if the string is not there, it is aggregated.

    Thread Starter Selah

    (@tubescreamer)

    2 years, 10 months ago

    Ah okay, gotcha. That’s why then. Thanks!
    It’s been a few hours and it seems the cache size for my site is a bit steady and somewhat low now at like 28% and 140mb. Not sure if that’s still considered too large, considering all my other sites are still down below 10%, but at least it’s not 100% anymore.
    Thanks again for the help! If I run into anymore issues, i’ll reach out.

    Thread Starter Selah

    (@tubescreamer)

    2 years, 10 months ago

    So after 24 hours, even though I moved all the inline CSS for each of my ~90 pages in WP Bakery Page Builder into Additional CSS in “Appearance -> Customize” the cache is still somehow growing quite large, with this option on. It was at a crazy value of 2gb when I woke up this morning until I just cleared it.. I’m not sure what else I can do, honestly. If possible, can you check it out? Maybe you would be able to tell what else is wrong. Here’s another screenshot of my current settings after clearing the cache: https://imgur.com/XEzoVCV

    Maybe this has something to do with WP Bakery Page builder? The other sites I use Autoptimize on uses Elementor page builder and even though one of the other sites is larger (like 800 products and a lot more inline CSS) the cache size is nowhere as high as on this site.. They’re all less than 10% in cache size, but this site somehow gets to 100% in one day when the aggregate inline CSS option is on.. I have disabled the option for now.

    • This reply was modified 2 years, 10 months ago by Selah.
    • This reply was modified 2 years, 10 months ago by Selah.
    • This reply was modified 2 years, 10 months ago by Selah.
    • This reply was modified 2 years, 10 months ago by Selah.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    2 years, 10 months ago

    it’s probably the wp bakery inline CSS, try also adding .vc_custom_ to the comma-separated CSS optimization exclusion list maybe?

    Thread Starter Selah

    (@tubescreamer)

    2 years, 10 months ago

    Ok i’ll try that. I just checked through all my plugins as well as my theme options to confirm that there is no additional inline CSS that I added there, so no plugins should be loading extra inline CSS on the page.

    Thread Starter Selah

    (@tubescreamer)

    2 years, 10 months ago

    I’ll wait another day and see if it grows to 100% again. Hopefully it doesn’t, lol. As you have the link to the site now, I also see an error in the console: https://imgur.com/6lSpruo when I have the option for JS “Do not aggregate but defer?” enabled.

    Disregard

    • This reply was modified 2 years, 10 months ago by Selah.
    • This reply was modified 2 years, 10 months ago by Selah.
Viewing 15 replies - 1 through 15 (of 20 total)
1 2
  • The topic ‘“Also aggregate inline CSS” causes cache to fill up quickly’ is closed to new replies.