This guide not only reveals the best settings for Elementor but also provides a step-by-step approach to optimize it for maximum performance. However, even with a well-optimized website and multiple plugins, an unoptimized builder can still hold you back from achieving the best results. Therefore, follow along to ensure your Elementor setup is fully optimized for a faster, more efficient site.
Step-by-Step Guide to Optimizing Elementor Settings
1) Go to Elementor > Settings > Advanced.
- Switch Editor Loader Method: Set this to Disable to resolve any potential server configuration conflicts. Read more
- Enable Unfiltered File Uploads: This setting allows SVG file uploads. If you don’t use SVGs, I recommend setting it to Disable to avoid potential security risks. Read more
- Google Fonts: To reduce loading times, minimize the number of font requests. Instead of Google Fonts, consider using custom fonts hosted locally to improve performance. Read more
- Load Font Awesome 4 Support: To optimize performance, avoid relying on the Font Awesome icon library. Instead, upload only the specific icons you need directly to your media library. This reduces unnecessary requests and speeds up your site.
- Generator Tag: One of the methods used to identify web technologies is the basic generator meta tag . It's a standard way used by many platforms to list the technologies running the site so we will "Enable" it
2) Go to Elementor > Settings > Performance.
- CSS Print Method: External File is recommended for better performance as it loads CSS from an external file. Internal Embedding places CSS within the of the page, which is useful for troubleshooting but can affect performance. Opt for External File to enhance site speed.
- Optimized Image Loading: Enable this feature to improve performance, reducing load times and improving user experience.
- Optimized Gutenberg Loading: Enable to reduce unnecessary, render-blocking resources by dequeuing unused Gutenberg block editor scripts and styles, helping your page load faster.
- Lazy Load Background Images: Enable to improve initial page load speed by lazy-loading all background images except the first one. This ensures that images below the fold are only loaded when needed.
- Element Cache Expiration: This setting determines how long cached elements are stored before being refreshed. Adjusting the expiration time helps manage site performance and content updates efficiently.
3) Go to Elementor > Settings > Features.
- Optimized Markup It’s recommended to keep this set to Default to avoid potential issues with the site’s layout or functionality.
- Element Caching: Activate element caching to reduce loading times by storing frequently used elements in memory.
- Inline Font Icons Active The “Inline Font Icons” will render the icons as inline SVG
- Optimized Control Loading Active and Use this experiment to improve control loading.
4) Go to Elementor > Element Manager and click on the “Scan Element Usage” button. This will show you which widgets are being used on your site. If you’re certain that you won’t need the unused widgets, you can click on “Deactivate Unused Elements” to disable them, improving performance by reducing unnecessary resources.
5) Go to Elementor > System Info
- PHP Version: The PHP Version determines the version of PHP running on your server, which directly impacts the performance, security, and compatibility of your website. It’s recommended to use the latest stable PHP version.
- PHP Memory Limit: Setting the PHP memory limit to 1024M ensures your site has enough memory to handle complex tasks and large files without running into errors. It's recommended for websites with heavy plugins or large content.
- PHP Max Post Size: The PHP Max Post Size setting defines the maximum size of data (such as file uploads or form submissions) that can be sent in a single POST request.
- Max Upload Size: Setting the Max Upload Size to 1 GB allows your website to handle very large file uploads, such as high-resolution images, videos, or large theme and plugin installations.
- Memory Limit: Setting the Memory Limit to 1024M (1GB) ensures that your website has enough memory to run resource-intensive operations, such as processing large images, handling complex plugins, or running heavy scripts.
- Max Memory Limit: Setting the Max Memory Limit to 1024M (1GB) provides your website with ample memory to handle heavy tasks, such as large media uploads, resource-intensive plugins.
This is the approach that I, along with many professional developers, use to optimize websites. In fact, it’s one of the safest and most effective ways to enhance your site’s performance. So, if you’ve followed these steps, 🎉 congratulations! You’ve successfully optimized your Elementor builder.
That said, if you have any questions or encounter any issues, feel free to leave a comment—I’m here to help! Furthermore, if you’re looking for more personalized support, check out my services on this site.
If you have any questions or encounter any issues, feel free to leave a comment—I’m here to help! And if you’re looking for more personalized support, check out my services on this site.
