Elementor 3.18 Developers Update – Elementor Developers

Elementor 3.18 includes updates that improve your websites performance, enhance accessibility, provide more mobile design options, upgrade experiment to stable features, enhance PHP 8.2 compatibility, and much more. Read through these updates carefully as some of these changes could affect existing websites and Elementor addons. Performance Improvements Elementor continues to focus on improving the website’s speed by reducing the loading times. In this version Elementor boosts the core mechanisms that generates the page, making the process more efficient. Controls Rendering Engine The website consists of different pages, each page consists of different elements, each element consists of different controls. By loading building blocks efficiently Elementor can improve loading time. To further improve the website’s loading speed, Elementor focused on the server side rendering process of controls. Although the change happens in the server, it affects the Time To First Byte (TTFB) metric and improves the general Core Web Vitals (CWV) score. Boosting Controls Loading To generate pages, Elementor loads all the values in controls set by users. This control loading process is very intensive, as it loads all the controls and all the data. To improve this process, Elementor won’t be loading all the controls when rendering the frontend anymore. When generating the frontend page, it will load only the information relevant to the frontend. For example, Elementor has UI controls that only add elements to the Editor, some controls have arguments that style the Editor like the control label, description, separator etc. have no effect on the frontend. Removing these controls from the frontend rendering process reduces the server-side computation required to render the page. Internal benchmarking tests show reduction on server-side computation time and memory usage, this leads to faster loading time, decreasing the frontend TTFB, which improves the page CWV. We measured 3%-8% faster server time and 3%-5% better TTFB score with the new control rendering process. But, in production websites it may be higher – the more elements the page has, the greater the impact. Editor Performance Elementor users spend most of their time in the Editor building and tweaking websites. To improve the general user experience, Elementor 3.18 allows users to clean the elements panel removing unused widgets, speeding up the Editor’s performance. Elements Manager The new Elements Manager allows users to customize their work area, removing unused elements, to allow a distraction-free working environment. To avoid breaking existing pages, there is an option to check whether the widget is used in any of the site pages. Faster Editor Please note that disabling unused widgets will not improve frontend performance as Elementor has a smart rendering mechanism that only loads widgets in use. Therefore, Elementor does not load unused widgets in the first place. However, the Editor uses a different mechanism for widgets loading. In theory, the more addons a website has, the slower the Editor, as each developer adds its own JS and CSS. Disabling unused widgets has the potential to speedup the Editor performance as the Editor is no longer required to load all the additional JS and CSS. Accessibility Improvements Elementor continues improving your website’s accessibility to enable users using assistive technologies to navigate easily within your website, and provide more customization options for web creators when building a website. Video Playlist Headings structure ( h1 – h6 ) has a vital importance on your page accessibility and SEO. In version 3.15, Elementor added the ability to change the “HTML Tag” in 5 different widgets that give you the ability to customize your page’s content hierarchy. Elementor 3.18 adds new controls to the Video Playlist widget. Previously, the widget had three types of hardcoded heading elements: h2 for the list title/name, h3 for video sections and h4 for video titles/names. The newly added “HTML Tag” controls give you the ability to change the HTML tags for each heading type. Elementor keeps backwards compatibility by setting the previously hard-coded tags as default values for the new controls default values. Progress Bar Progress bars must have accessible names to refer to the element by its name. When a progress bar doesn’t have an accessible name, people who use assistive technologies have no way of knowing its purpose. The Progress Bar widget always had the ability to set the progress bar title but it was not associated with the progress bar using ARIA attributes. Elementor 3.18 adds unique id attributes to progress bar titles, and each progress bar now references its title using the aria-labelledby attribute. This will help screen readers announce the progress bar. Note that this functionality is implemented conditionally to Progress Bars that have titles. Users are responsible for updating titles on all of the Progress Bars for better accessibility. Search Form & Taxonomy Filter To make the page semantic, HTML offers the ability to use generic elements like

or together with role attributes containing one of the eight ARIA landmark roles. Alternatively, you can use landmark elements like

,

,
,