Elementor slow website fix

One common issue with Elementor is that it can sometimes slow down your website’s performance. This can be frustrating for both site owners and visitors. However, there are a few steps you can take to optimize your Elementor website and improve its speed.

First, make sure you have the latest version of Elementor installed. Developers often release updates that include performance improvements, so keeping your plugin up to date is essential.

Next, consider optimizing your images. Large image files can significantly slow down your website. You can use a plugin like Smush or ShortPixel to compress and optimize your images automatically. Alternatively, you can manually compress your images before uploading them to your site.

Another way to speed up your Elementor website is by minifying your CSS and JavaScript files. Minification removes unnecessary characters from your code, reducing file size and improving load times. You can use a plugin like Autoptimize or WP Rocket to minify your files.

Additionally, consider enabling caching on your website. Caching creates static versions of your pages, reducing the need for dynamic content generation and speeding up load times. The most popular caching plugin for WordPress is W3 Total Cache.

Lastly, if you have a lot of custom CSS or JavaScript code in your Elementor pages, it’s a good idea to move that code to external files. This allows the browser to cache those files separately, reducing the amount of code that needs to be loaded on each page visit.

Here’s an example of how you can enqueue an external JavaScript file in WordPress, following the WordPress coding standards:

function wpsnippets_enqueue_scripts() {
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_scripts' );

In this example, we’re using the wp_enqueue_script() function to enqueue a custom JavaScript file named “custom.js”. The file is located in the “js” directory of the current theme. The array() parameter is used to specify any dependencies for the script (in this case, there are none). The ‘1.0’ parameter represents the version number of the script, and the true parameter indicates that the script should be loaded in the footer of the page.

By following these optimization techniques and using the provided code example, you can help improve the speed and performance of your Elementor website.

Examples

Example 1: Defer Parsing of JavaScript in Elementor

This use case demonstrates how to defer parsing of JavaScript in Elementor to improve website speed. The code example below adds a filter to modify the script loading behavior in Elementor.

function wpsnippets_defer_elementor_scripts($url) {
    if (false === strpos($url, 'elementor')) {
        return $url;
    }
    return "$url' defer='defer";
}
add_filter('clean_url', 'wpsnippets_defer_elementor_scripts', 11, 1);

The code snippet above uses the clean_url filter to modify the script URLs loaded by Elementor. It checks if the URL contains the string ‘elementor’ and appends the defer attribute to the script tag, which defers the parsing of JavaScript until after the page has finished loading.

Example 2: Optimize Elementor CSS Delivery

This use case demonstrates how to optimize the delivery of Elementor CSS files to improve website performance. The code example below removes the render-blocking CSS files loaded by Elementor and enqueues them asynchronously.

function wpsnippets_enqueue_elementor_css() {
    wp_dequeue_style('elementor-frontend');
    wp_enqueue_style('elementor-frontend-async', get_stylesheet_directory_uri() . '/elementor-frontend-async.css', array(), '1.0.0', 'all');
}
add_action('wp_enqueue_scripts', 'wpsnippets_enqueue_elementor_css', 999);

The code snippet above dequeues the default Elementor CSS file and enqueues a new CSS file asynchronously. By removing the render-blocking CSS and loading it asynchronously, the website’s performance can be improved.

Example 3: Disable Elementor Font Awesome

This use case demonstrates how to disable the loading of Font Awesome icons by Elementor, which can help improve website speed. The code example below disables the Font Awesome icons from being loaded by Elementor.

function wpsnippets_disable_elementor_font_awesome() {
    wp_deregister_style('elementor-icons');
    wp_dequeue_style('elementor-icons');
}
add_action('wp_enqueue_scripts', 'wpsnippets_disable_elementor_font_awesome', 20);

The code snippet above deregisters and dequeues the Elementor Font Awesome stylesheet. By disabling the loading of Font Awesome icons, unnecessary CSS and font files are not loaded, resulting in a faster website.