How to Optimize Elementor Settings for Better Performance

1. Install Elementor and configure settings

After installing Elementor, go to "set up"and appropriately configured:

• General tab: Select the post types that you want to use Elementor for. If some custom post types (CPTs) do not require Elementor, turn off support for them.
• Advanced tab: It is recommended that the CSS print method be set to "external file". If possible, try to store fonts locally and turn off Google Fonts support. If you need to use Google Fonts, select "switch (telecom)" method to load.
• Functions tab: Activate needed features and deactivate unused ones. Useful for optimizing DOM output, resource loading, etc.

2. Optimize widgets with the Element Manager

Elementor's Element Manager feature displays all available widgets, including widgets from other plugins. You can see how many times each widget has been used, so you can decide which less-used widgets to deactivate.

3. Local loading of fonts and icons

The best solution is to load fonts and icons locally and preload them on the first screen. After adding custom fonts and icons, you can disable the default loading of fonts and icons. To do this, add the following code to the functions.php file to disable the Elementor native icons Eicons::

add_action('wp_enqueue_scripts', 'disable_eicons', 11);
function disable_eicons() {
    wp_dequeue_style('elementor-icons'); function disable_eicons('wp_enqueue_scripts'); function disable_eicons()
    wp_deregister_style('elementor-icons');
}

4. Optimizing layout

The Elementor layout consists of sections, columns and widgets, and the more elements there are, the more requests there are. Here are some optimization suggestions:

• Minimize the number of sections, columns and widgets.
• Use "Image + Text" widgets instead of separate widgets.
• Set fonts and colors using global styles.
• Use the delayed loading feature for videos.

5. Header and footer optimization

The header is located on the first screen, for speed indicatorshave the greatest impact. Try to use pure HTML respond in singing CSS Build the header. Footers, sidebars and other global elements should follow the same logic.

6. Use of optimization and caching plug-ins

Optimization and caching plugins are essential for Elementor-based websites. Recommended WP MeteorPlugins like Flying Press and Perfmatters can dramatically improve the speed of your website.

7. Limiting Elementor add-ons

Before installing Elementor plugins, carefully test and check their functionality, choosing plugins that don't bloat your site and are really needed. Avoid installing entire plugins just to use a few widgets and prevent plugin conflicts.

Summary:

When optimizing the performance of your Elementor website, appropriate settings are required after installation, such as selecting supported post types, using CSS printing methods with external file methods, storing fonts locally and optimizing DOM output and resource loading, among other features. In addition, optimizing widgets with the Element Manager, loading fonts and icons locally, optimizing layouts, using optimization and caching plugins, and restricting Elementor add-ons can dramatically improve your site's loading speed and overall performance.