"I ran into a situation where some CSS files from Elementor were breaking when optimization/minification was applied globally. Instead of disabling optimization completely, I used a small snippet to exclude only specific CSS files while allowing others to remain optimized. I added this using the Code Snippets plugin and ran it everywhere. Here is the code: add_action('wp_enqueue_scripts', 'bhavin_remove_unused_elementor_css', 100); function bhavin_remove_unused_elementor_css() { // Check if Elementor is active if (!did_action('elementor/loaded')) { return; }"
"function bhavin_remove_unused_elementor_css() { // Check if Elementor is active if (!did_action('elementor/loaded')) { return; } $post_id = get_queried_object_id(); // Check if page is built with Elementor $document = \Elementor\Plugin::$instance->documents->get($post_id); if (!$document || !$document->is_built_with_elementor()) { wp_dequeue_style('elementor-frontend'); wp_dequeue_style('elementor-icons'); wp_dequeue_style('elementor-pro'); wp_dequeue_style('elementor-global'); } } This helped me prevent layout issues while still keeping optimization active for other styles. Curious how others handle selective CSS optimization, especially with page builders like Elementor"
Global CSS minification can break Elementor layouts. A conditional snippet can dequeue Elementor styles on pages not built with Elementor. The snippet hooks into wp_enqueue_scripts with priority 100 and checks that Elementor is loaded. The snippet obtains the queried post ID and checks the document via \Elementor\Plugin::$instance->documents->get($post_id) and ->is_built_with_elementor(). When a page is not built with Elementor, the snippet dequeues elementor-frontend, elementor-icons, elementor-pro, and elementor-global. Running the snippet via the Code Snippets plugin preserves optimization for other styles while preventing layout issues.
Read at SitePoint Forums | Web Development & Design Community
Unable to calculate read time
Collection
[
|
...
]