Constant problems with CSS returning 404 when using "regenerate css" + external file print method & html caching

s60v5 commented 3 weeks ago

Prerequisites

[X] I have searched for similar issues in open and closed tickets and cannot find a duplicate.
[X] I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.

Description

Hi Elementor Team! First of all, thanks for all your work on the Elementor plugin.

We noticed an issue with the Elementor regenerate CSS functionality. Even though it's called "Regenerate CSS" it doesn't actually regenerate CSS, but just removes the content of the wp-content/uploads/elementor/css directory and the actual regeneration happens on the next visit. If this is designed like this purposely, it should be renamed to something like "Purge CSS", otherwise I noticed that a lot of people including me use this hoping that it will preregenerate css for their site.

I have noticed that many people on the Elementor GitHub repository and WordPress forum who have this problem, use some kind of caching like Varnish, a plugin, or a CDN html caching (Azure, Cloudflare, Kinsta etc), so my guess is that there is some conflict and the actual CSS generation never happens because request never hits the server.

I think this function needs to be renamed to "Purge" or the Elementor team should consider adding an actual "Warm Up/Generate CSS" option. I believe this would make life easier for many people, as we currently have constant problems with missing CSS on our sites. To address this issue I temporarily wrote my custom plugin to purge Elementor CSS using Elementor API, and then regenerate CSS for every post that is created with Elementor, this includes posts, pages, header, footer etc.

// Purge Elementor
Plugin::$instance->files_manager->clear_cache();

// Regenerate CSS
$posts = get_posts(array(
    'post_type' => get_post_types(),
    'posts_per_page' => -1,
));

foreach ($posts as $post) {
    $post_id = $post->ID;
    $document = Plugin::$instance->documents->get_doc_for_frontend($post_id);
    if ($document && $document->is_built_with_elementor()) {
        $css_file = Post_CSS::create($post_id);
        $css_file->update();
    }
}

For a medium-sized site, this code takes around 1-2 seconds to finish, but of course, there might be performance concerns with bigger sites, so perhaps there is a better way to implement this.

The main point of this whole thing is to allow people to use caching mechanisms like Varnish or CDN, and the external file print method, because this provides better performance, and at the same time ensure that we NEVER see 404 CSS errors. I saw that in previous GitHub issues, someone from Elementor suggested switching to the CSS embed method, but for us, this is not good as we are always aiming for the best speed and optimization.

Thanks!

Steps to reproduce

Go to the Elementor -> Tools tab.
Click on the "Regenerate CSS & Data" button.
CSS will be missing on frontend if you use caching like Varnish or any other plugins for HTML caching.

Expected behavior

After clicking on "Regenerate CSS & Data" the CSS should be regenerated not only purged.

Isolating the problem

[X] This bug happens when only the Elementor (and Elementor Pro) plugins are active.
[X] This bug happens with the Hello Elementor theme active.
[X] I can reproduce this bug consistently by following the steps I described above.

Elementor System Info

== Server Environment ==
    Operating System: Linux
    Software: Apache/2.4.57 (Debian)
    MySQL version: mariadb.org binary distribution v11.0.3-MariaDB-1:11.0.3+maria~ubu2204
    PHP Version: 8.2.15
    PHP Memory Limit: 1024M
    PHP Max Input Vars: 1000
    PHP Max Post Size: 64M
    GD Installed: Yes
    ZIP Installed: Yes
    Write Permissions: All right
    Elementor Library: Connected

== WordPress Environment ==
    Version: 6.4.2
    Site URL: http://localhost:8000
    Home URL: http://localhost:8000
    WP Multisite: No
    Max Upload Size: 64 MB
    Memory limit: 40M
    Max Memory limit: 1024M
    Permalink Structure: /%postname%/

== Theme ==
    Name: Skelementor Child
    Version: 1.0.0
    Author: ChildThemeWP.com
    Child Theme: Yes
    Parent Theme Name: Skelementor
    Parent Theme Version: 1.1.4
    Parent Theme Author: Mousebuilt (Konker)

== User ==
    Role: administrator

== Active Plugins ==
    Elementor
        Version: 3.20.3
        Author: Elementor.com

    Elementor Pro
        Version: 3.20.2
        Author: Elementor.com

Agreement

[X] I agree that my issue may be closed without action if it doesn't meet all the requirements.

roymckenzie commented 2 weeks ago

I have noticed this issue, too. A client of mine uses Cloudways to host many of their websites and they have Varnish enabled. If I purge Varnish and then "Regenerate Files & Data" in Elementor, the CSS also returns 404. If I refresh the admin panel, the CSS seems to be regenerated at this point and the site loads as expected on the frontend without missing CSS.

clikitllc commented 2 weeks ago

We are also seeing the same issue as Roy on a few sites. WP Engine sites seem to be fine, only Cloudways (and we use CloudFlare).

nicholaszein commented 1 week ago

Hi @s60v5.

We appreciate your involvement in our community. For efficient troubleshooting, please remember to include the
FULL, and essential System Info with each issue reported. We'll need it to help you effectively.

⚠️ As a gentle reminder, issues without it may need to be closed without troubleshooting. Providing this information upfront aligns with our guidelines, saves time, and ensures swift resolution. Thank you for understanding.

elementor / elementor