Elementor Addon Components, in conjunction with Elementor, implements best practices in page load optimization to make your website faster and more attractive, whatever the type of device used.
Enable / Disable widgets or features you won’t be using. Implements the necessary attributes to define images adapted to the viewing terminal. Deploys delayed image loading (Lazyload). Implements delayed loading of background images with Elementor. Add feature to preload pages from their links.
Enable / Disable widgets and features
From the plugin’s settings page, you can disable components and features you don’t want to use, thereby limiting the resources that will be loaded. Don’t forget to save your configuration.
For each item you’ll find the count of publications in which the element is used and a link to a help page.
Use the element usage option
If you want to find the pages / posts / CPT in which the components have been added, activate this feature.
This feature uses a lot of server resources, which is why it is disabled by default. To activate it, go to the plugin settings page, tab WordPress and activate the Element usage option.
When activated for the first time, the feature may take some time to load/save information. Saved data are reloaded for subsequent accesses.
After activating the feature, you will see in the list next to each component the count of publications that use at least one occurrence of the component.
You can then click on the counter to view the list of publications and disable unused components.
In the open popup you’ll find the list of publications in the form of links you can click on to open and view their content.
Add feature to preload pages
Lazy loading images
Lazy loading is a strategy for delaying the loading of images that are not yet visible in the viewport, the visible part of the window.
To achieve this, the plugin implements an option for each grid to enable/disable delayed image loading.
Lazy loading background images
The Multiple background images and Ken Burns effect widgets under the ‘Features’ tab are candidates for delayed loading of background images.
To do this, you need to have activated the ‘Lazy Load Background Images’ experiment option in ‘Elementor/Settings/Features’.
For your information, this option is only active with Flex box containers.
Enable inline font icons
The Inline Font Icons experiment allows you to load inline SVGs instead of Font Awesome icons.
As a result, the style files normally loaded to display Font Awesome icons are no longer loaded, and SVG icons are loaded directly into the page’s HTML code, eliminating additional server requests while lightening the page’s weight.
The EAC plugin implements this feature for all components.
For this website, Load Font Awesome 4 support is disabled, while Inline Font Icons is enabled.
srcset and size attributes for images
srcset and size are image attributes that specify the image sources and their sizes and automatically define the best image for the device used (Responsive) and improves the website loading time.
The EAC plugin automatically implements these attributes for all image grids in the distribution.
Loading javascript files to improve page speed
Some Javascript files are not immediately necessary for the display of the web page. They are loaded in order of appearance and analyzed before the page continues to load, sometimes resulting in a poor user experience.
To avoid blockages and improve page loading times, we have deployed a strategy based on the recommendations of WordPress and Elementor, namely to defer the loading of scripts not essential to page display.
To do this, we use the new ‘WP 6.3 wp_register_script’ function signature to apply the ‘defer’ attribute to these scripts.
They are loaded at the bottom of the page and parsed after the DOM is loaded.
This scenario is still compatible with WP versions prior to v6.3.
Minify resources
The reduction, minification and compression of CSS and JavaScript files is one of the many ways of optimizing performance.
All distribution components incorporating CSS and JavaScript have these resources reduced to a minimum.
To comply with the requirements of the GPL license, the source code is of course included in the distribution.
The webp image format
WordPress supports the webp format for images, which can save you up to 30% in image size without too much loss of quality.
To do this, we use the ‘Converter for media’ (Not affiliated) plugin, which generates all the images in the media library in webp format, thereby optimizing the loading of your pages.
Activate and use memory usage component
The Memory usage component displays the most important information about PHP’s average memory usage, the peak memory allocated relative to PHP’s memory limit, its percentage, the number of requests to the server, the page load time and the server/client IP address. Some or all of these data may or may not be displayed with their labels.
With this data, you can evaluate the performance of your server configuration and PHP environment, as well as widgets that consume abnormal system resources for each post.
This component gives a trend and is not as precise as other plugins, such as Query memory (Not affiliated).
For maximum efficiency, especially in terms of page loading time, you should use this component at the bottom of a page, ideally in the footer.
You can also apply display conditions to it using the Display conditions feature, making the results visible only to logged-in users, for example.
To activate the component, go to the plugin settings page, Basic tab and activate the Memory usage option.
Content tab, in the settings section you can activate the display of item labels and enable the options you wish to display.
Style tab, in the general section, you can apply styles to results and data alignment.
System information
On the plugin settings page, under the System info tab, you’ll find important information about the WordPress environment, the server environment and the installed and active plugins.
