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 deactivate 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
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.
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 deactivate 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.