Elementor 3.21 introduces several features for advanced users and developers, and is heavily focused on performance improvements that improve your website’s speed. It continues merging features and experiments as well as improving frontend accessibility. Lastly, this version adds the option to query taxonomies on top of existing options to query post types.
Performance Improvements
Elementor engineers are determined to make your website run faster, introducing an additional performance boost. Focusing on another aspect of the server’s control rendering process, your website will serve pages faster compared to previous versions. In addition, this release removes widgets’ unused HTML elements when they contain no content, which reduces the DOM size. Finally, this release also improves the lazy load of background images.
Faster TTFB
To improve the Time To First Byte (TTFB) on the frontend, Elementor is constantly optimizing and improving the Controls Rendering Engine. The engine consumes many server resources, impacting the frontend TTFB.
The previous release, Elementor 3.20, focused on optimizing the Controls Rendering Engine by conditionally removing controls that are not required in the frontend.
This release, Elementor 3.21, optimizes the engine’s aspect that merges the data from controls in the widgets’ “Advanced” tab. Merging these huge data JSONs is time consuming. By splitting them into content and style controls, and loading them selectively, the engine reduces server compute time, leading to a 20%-30% reduction in the frontend TTFB.
To put things into perspective, we consider a 100 millisecond TTFB reduction a significant improvement. Our internal tests on basic pages with the new engine optimization show a reduction of TTFB from 1.1 seconds to 700 milliseconds. Larger pages, with more data show even better results.
Smaller DOM Size
The DOM represents the structure of your pages’ HTML. The larger the DOM, the longer the page rendering process. Pages with many HTML elements tend to load more slowly and may affect animation and other user interactions.
To reduce the impact of unused DOM elements on page performance, Elementor 3.21 stops rendering markup for widgets that have no content. Widgets without content should not be rendered and generate empty HTML elements.
Previously, the image, maps, video, and other widgets didn’t render any markup when there was no content. This release stops rendering empty content for 16 additional widgets, making the behavior more consistent across all Elementor widgets. Furthermore, this change reduces server computation and improves TTFB, as widgets without content escape early and don’t render the inner logic of the widget.
This fix primarily impacts users that don’t have permissions to remove widgets, rather only to update widget content. These users usually remove the content to hide certain elements on the page. The fix stops displaying empty HTML on the page, reducing DOM size and boosting page performance.
Lazy Load Background Images
Background images are among the largest assets Elementor websites load. To lazy load them will significantly improve page performance. However, the HTML loading attribute can be applied on <img> tags not on <div> tags. This is why Elementor 3.9 introduced the “Lazy Load Background Images” experiment, which used JS to lazy load background images.
Over time, metrics collected by Google’s big query showed that the implementation of this alpha stage experiment didn’t improve performance and in some edge cases it reduced page performance.
Note that alpha stage experiments are considered early stage features that may require additional development and issue resolution. Nevertheless, this was one of the rare cases our performance experiments had a negative effect on page performance.
We need to take responsibility and admit we failed in this particular case. That is why the entire experiment was simplified and re-written, adopting a different approach to lazy-load background-images. We should also note that the new experiment applies only to container background images, not to sections/columns.
Accessibility Improvements
We want to thank the Elementor community for helping us prioritize accessibility issues. In this release, Elementor addressed accessibility issues in three widgets affecting your website’s frontend, thereby improving navigation for users using assistive technologies.
Keyboard Accessible Portfolio widget
The “Portfolio” widget allows you to display posts, pages, and custom post types in an attractive, filterable grid. Users using a keyboard to navigate through the posts had no visual hint of which post is currently being focused on. Elementor 3.21 changes the focus ring around the current element, adding a focus ring only for keyboard users. The change is applied to both the filter bar and the post items.
Profile image ALT in Post Info and Author widgets
Both the “Author” and the “Post info” widgets have the option to display a profile picture of the post author. However, the ALT attribute on the image had the same text as the user name. This confused screen reader users as the text occurred twice. The new ALT text no longer uses the same text, deleting the clutter.
Experiments and Features
Just like the previous release, Elementor 3.21 introduces a significant number of features that have reached maturity. Four features have been merged into the core, and an additional three features have had their status upgraded. One of these features can now be disabled from the settings page.
Upgraded Features
There are three experimental features that were upgraded. The “Editor Top Bar” feature was upgraded from alpha to beta status. The “Lazy Load Background Images” was upgraded from alpha to beta status and will now be active by default on new installations. The “Grid Container”, a beta status feature that was previously active by default on new installations, will now be active on existing websites, too.
Merged Features
Elementor 3.21 merged four features into core: “Improved Asset Loading”, “Optimize Image Loading”, “Optimized Gutenberg Loading”, and “Notes”.
The first three features are performance related, and are now part of Elementor and Elementor Pro by default. And, while “Optimized Gutenberg Loading” is a useful performance feature that reduces unnecessary render-blocking loads by dequeuing unused Gutenberg block editor files (styles and scripts), should you wish, it can be disabled from: WordPress Dashboard > Elementor Settings page > Advanced tab.
Taxonomy Queries
Elementor already offers the ability to query posts, pages, products, and other custom post types, and now, Elementor 3.21 introduces the ability to query taxonomies! The new Taxonomy Query adds the option to display your Categories and Tags as items inside ״Loop Grids״ and ״Loop Carousels״.
Compatibility with 3rd Party Plugins
The new feature has full compatibility with plugins like Advanced Custom Fields (ACF), Custom Post Type UI, and other plugins that offer the ability to register new taxonomies. These taxonomies will be displayed with the default WordPress taxonomies.
Filtering Taxonomies
The new feature lets you filter taxonomy terms from a preset list or choose them manually. You can order them alphabetically or in reverse alphabetical order. You can also filter them by depth.
To Conclude
Elementor 3.21 focused on internal fixes rather than introducing new features, giving you lots of new performance improvements, accessibility improvements, and feature merges.
