Forums » Plugin: W3 Total Cache » Elementor pages show unstyled without any CSS

  • Resolved rd78

    (@rd78)


    Hello,

    I’ve just setup W3 Total Cache on a site that’s been built with Elementor. When I was setting up the plugin, all the pages looked fine. However, when I visit the website a few days later (presumably when the initial caches have expired) the Elementor-generated pages appear completely unstyled without any of their layout.

    I’ve tried searching for Elementor and W3 Total Cache guides or recommended settings but I haven’t found anything. Do you have suggestions of settings to prevent this issue happening?

    Thanks!

    The page I need help with: [log in to see the link]

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

    (@vmarko)

    Hello @rd78

    Thank you for reaching out.
    I’ve checked your website and as I can see everything is looking as expected, and the layout of the website is fine.
    There is a possibility that you’ve updated the theme or some plugin, and in that case, some of the CSS/JS files are also updated. In this case, you should make sure that you purge the W3TC cache after an update to ensure the new files are being served to the users.
    Let me know if the issue occurs again.
    Thanks!

    Thread Starter rd78

    (@rd78)

    Hello,

    After some troubleshooting, I believe the issue is with minify. For Elementor to work correctly, it seems that it’s generated CSS files must be excluded.

    However, when I add the directory to the CSS exclusion list, the files are still minified. It doesn’t work with a regex either. It only works when I add all individual files manually. But that’s not really possible with Elementor as it’s constantly creating new CSS files as you add or edit pages and posts.

    How can I exclude all CSS files in the following directory from minification?

    /wp-content/uploads/elementor/css/

    The files have the following name format:/wp-content/uploads/elementor/css/post-123.css

    The only solution I’ve found is to disable minification entirely or turn it into manual mode, which isn’t really suitable either as auto works just fine except for excluding the Elementor CSS.

    Thanks!

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @rd78

    Thank you for your feedback.
    I’ve checked your website before and everything was working as expected with Minify enabled.
    Can you please re-enable Minify in Performance>General settings, only disable CSS minify in Performance>Minify, save all settings and purge the cache and see if the problem persists?
    You are correct when you say that you can only exclude individual files from minifying, so you cannot exclude the entire folder.
    One thing that I have noticed is that you are also using the option “Prevent caching of objects after settings change” in Performance>Browser Cache, which adds the query string to the files ?xNNNNN. You can also try to click the “Update Media query string ” in Performance>Browser Cache (Just above the General section) which will create a new query string and force the Browser to fetch a new file.
    Also, once the query string is updated, save all settings and purge the cache.

    Thanks!

    Thread Starter rd78

    (@rd78)

    Thanks for your help. I’ve kept experimenting with the settings and I think it’s multiple issues. After disabling minify entirely, things worked for a while until again they didn’t. I’ve now disabled the Object Cache and the Database Cache too – things finally look like they might be working correctly.

    (Note: if you visit the site, you’ll see my minify settings are set to manually include a couple of CSS files but I’ve yet to go through all the CSS and JS files manually yet to get the same result as the auto setting achieved)

    Do you have any advice on how to get these features working with Elementor or should I just leave everything disabled?

    It seems a bit of a shame to have to disable so many features to get Elementor to work properly with W3TC. Given that Elementor is such a popular plugin, I was a bit surprised it didn’t just integrate automatically (eg like the Yoast extension in W3TC).

    • This reply was modified 1 year, 8 months ago by rd78.
    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @rd78

    Thank you for your feedback.
    Object Caching and DB caching can cause problems when the website is hosted on the shared servers and if the caching is set to Disk for those modules.
    So this is not specifically related to W3TC and Elementor compatibility (I’ve tested this and in our environment and everything is working fine), it’s only a problem with the server resources.
    Object Cache allows getting data from the database more efficiently. Its purpose is similar to what Database Cache does. But compared to Database Cache, the Object cache is more efficient as it allows to the process of fewer requests.

    As a rule of thumb, Object Cache is not worth using on shared hosting for the same reason as Database Cache, i.e. database is often not the performance bottleneck, but disk input-output operations.
    However, like Database Cache, it can be beneficial to use if you are on VPS or a dedicated server, get a lot of traffic, and have a lot of comments. Also, if you know that database is the bottleneck of your website performance, then Object Cache (like Database Cache) is beneficial to use. But in this case, it’s recommended to use, Memcached or Redis options.

    I hope this helps!

    Thanks!

    Thread Starter rd78

    (@rd78)

    Hello,

    Apologies for the slow reply.

    Both Object Cache and Database Cache were set up as Memcached and not Disk when the issues were happening.

    However, I know little about the specific host we’re using as I didn’t set it up (I’m working on a site for my employer) so there could be issues there. I’m not sure if we’re on a VPS or shared server.

    I’ve disabled Object Cache and Database Cache. The website appears to be running fine for now.

    Thanks for your help

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Elementor pages show unstyled without any CSS’ is closed to new replies.