📚 📈 Developers: Optimize Your Widgets DOM for Better Performance

[nicholaszein]

Hey there Devs! 👋

Did you know Elementor widgets use two wrapper <div> elements by default? While great for styling flexibility, they can increase DOM size and affect performance on large documents.

📈 Streamline your Custom Widgets and improve page performance by optimizing their structure with the new Optimized Markup experimental feature!

With the has_widget_inner_wrapper() method, you can:

• ✨ Reduce DOM size with a single wrapper.
• ♻️ Retain the inner wrapper for backward compatibility when needed.

⚠️ This feature will soon be merged to Core by default, and eventually the backward compatibility method will be removed. The earlier you make the switch the better!

🧩 Learn how to implement it here:

https://elemn.to/widget-inner-wrapper

---

Make sure you have read our Developers Documentation, followed our Best Practices guide, our Recent Deprecations list, and subscribed to our Developers Newsletter:

• 📚 Developers Center: Learn how to leverage the wide-range of tools and options Elementor has to offer.
  https://developers.elementor.com

• 🛠️ Best Practices: Follow our Best Practices Guide to align your addons with Elementor's standards and optimize performance.
  https://developers.elementor.com/docs/getting-started/best-practices/

• 🚨 Recent Deprecations: Stay informed about Recent Deprecations to update your code accordingly and maintain compatibility.
  https://developers.elementor.com/recent-deprecations/

• 📬 Developer Updates: Subscribe to the Developers Newsletter to receive the latest updates, feature releases, and important announcements directly in your inbox.
  https://elementor.com/pages/addon-developers-corner/