Elementor 3.17 includes several important updates. New experiments improve your website’s performance making it load faster. Accessibility enhancements improve user experience for screen-reader users and those using a keyboard to navigate the site. Your site can rank higher on search engines with new SEO additions. Addon developers get new options to configure the URL control. Finally, the minimum required PHP version was upgraded to 7.3.
Performance Improvements
Elementor 3.17 improves your website performance with two new features that decrease loading time. Both features are “beta” stage experiments that when activated will improve the performance of your website.
The two new performance experiments – Optimize Image Loading, and Gutenberg Asset Loading improve your website speed, making it load faster, and improving the Largest Contentful Paint (LCP) in your Core Web Vitals (CWV) metric.
Optimize Image Loading
The optimized image loading feature implements a new optimization strategy during content rendering. It scans each breakpoint separately, detects the assets and their location on the page, applies loading=”lazy” to images that are not displayed above the fold, and then it looks for the largest asset and applies fetchpriority="high" to help the browser prioritize the asset loading.
This initiative was proposed by Google and implemented by 10up. The purpose of this is to boost the performance of the web in general, and in Elementor in particular. When activated, this feature improves LCP by 5-10% depending on the complexity of the page.
Gutenberg Asset Loading
Pages that use Gutenberg, load additional styles and scripts. However even when Guttenberg is not in use, WordPress doesn’t remove these styles. This adds additional overhead, increasing unused CSS, loading unnecessary assets and reduces your website’s performance.
When active, this feature will detect whether the page uses Gutenberg blocks or not. If Gutenberg is not detected on the page, Elementor will avoid loading unnecessary Gutenberg-related styles.
Accessibility Improvements
Over the past year Elementor introduced a multitude of accessibility improvements. This version is no different, it has a few more accessibility fixes, impacting on your website’s frontend.
Popups
Elementor popups have the option to activate an “Accessible Navigation” option. It adds additional features making the popup screen reader-friendly, which prevents focus trapping.
This custom focus management introduced an issue, the first focusable element in the popup received focus, whether it’s a link, a button, a form field, etc. This was not the optimal behavior, therefore it was fixed.
As of this release, the first focusable element is the popup close button. It will allow keyboard users to exit popups, without the need to go through the entire list of focusable elements.
Table of Contents
The Table of Content widget received several updates, including one that improves accessibility when the minimize button is disabled.
This widget has a handful of aria-* attributes on different HTML elements. Yet, when you disable the “Minimize Box” option, all the content is static, and visible to the user. Only when you enable the “Minimize Box” option, your website visitors will be able to minimize the TOC.
This interactivity requires aria-* attributes. In this release, the list of contents received a unique id and the toggle button received aria-controls. These new attributes are added conditionally, only if the “Minimize Box” option is enabled.
Please note that the unique id fixes another issue for pages that had more than one TOC on the page.
SEO Improvements
The nested accordion now supports FAQ Schemas. This feature helps search engines to extract the data from the code to generate rich results and rank higher in search results.
FAQ Schemas
Websites often use a Frequently Asked Questions (FAQ) section to list questions and answers on a particular topic. This content helps users get specific information for specific topics.
The web has a standardized format to expose the FAQ in structured data for external platforms. For example, search engines may display FAQ in the results page.
Accordion FAQ Schema
Version 3.17 adds a “FAQ Schema” control to the Accordion Widget. When enabled, the FAQ Schema feature adds a markup in a structured data format. This improves SEO compatibility as search engines can read this data to generate rich results.
Disabling URL Control Options
Elementor 3.17 fixes the URL control to allow addon developers to disable link options, hiding the options icon that toggles all the additional link options.
Link Options
Elementor widgets are made from different controls. One of them is the URL control. When using this control, developers have the option to allow Elementor users to specify additional parameters like opening the url in a new tab, add nofollow attribute, or add any custom attribute by settings a comma-delimited key|value pairs.
In some cases, developers use the URL control to retrieve the URL, not to use the value for links, rather for creating custom DOM elements like <video>, <audio>, etc. Until now, there was no option to disable link options, which are not relevant for non-link URLs.
Disabling Link Options
To use the URL control without the options, developers could set 'options' => false argument to disable the options functionality. In this case, the options icon should not be displayed in the control, yet it was displayed. This issue forced developers to use the Text control which has no options icon. This is not an ideal situation so we changed it.
$this->add_control(
'external_url',
[
'label' => esc_html__( 'URL', textdomain ),
'type' => \Elementor\Controls_Manager::URL,
'label_block' => true,
'options' => false, /* Add this argument to disable link options */
]
);As of Elementor 3.17, developers can use the URL control with disabled link options. The options icon will not be displayed any more.
Update Minimum Required PHP Version to 7.3
The publication of Elementor’s Roadmap to Upgrade PHP Versions led the ground to continue providing our users secure and performant experiences. Dropping support for older and unsupported technologies is part of Elementor’s evolution process, and in this release Elementor raised the minimum required PHP version from 7.0 to 7.3.
The Current Change
With this move, Elementor is finally dropping the support for PHP 7.0, PHP 7.1 and PHP 7.2. Websites using these PHP versions will no longer be able to upgrade to new Elementor versions. Only websites that use PHP 7.3 or higher will be able to update to new Elementor versions.
Furthermore, in this release Elementor raised the recommended PHP version from PHP 7.3 to PHP 7.4. Please note that the majority (~50%) of all WordPress websites use PHP 7.4.
Future Updates
According to the roadmap, the next change will happen by the end of 2023. The plan is to increase the minimum required version from PHP 7.3 to PHP 7.4.
The final change will happen at some point in 2024, Elementor will stop supporting all PHP 7.x versions by raising the minimum required version to PHP 8.0 or 8.1.
Translate Elementor
Those of you who speak more than one language, you can help translate Elementor to your language. Elementor supports over 60 languages out-of-the-box, however each version adds new translation strings, and you can always improve existing translations.
To translate Elementor visit translate.wordpress.org, for Elementor Pro visit translate.elementor.com. If you are new to WordPress translations, we’ve built a short guide explaining how to translate and localize Elementor.
To Conclude
Elementor 3.17 continues to improve your website’s performance and accessibility. Dropping support for older PHP versions ensures you get secure and performant experiences. New experimental features explore new ways to boost your website. As always, keep upgrading your Elementor version, and we will keep improving your website!
