The Performance tab in Elementor settings allows you to enable optimization tools that improve page speed, loading times, and resource efficiency. By adjusting these settings, you can enhance your site's performance and ensure a smoother user experience. This guide explains the available performance features and how to manage them.
Manage performance settings
- Go to WordPress Dashboard > Elementor > Settings > Performance.
- Locate the performance feature you want to modify.
- Click on the dropdown menu next to it and select:
- Enable: Turns on the feature for improved performance.
- Disable: Turns off the feature.
- Click Save Changes to apply your settings.
Important:
Enabling certain performance features may affect styling or script behavior. Test changes before applying them to a live site.
Available performance features
CSS print method
Controls how Elementor loads CSS on your site.
- External File (Recommended): Stores CSS in an external file, improving performance by reducing inline code.
- Internal Embedding: Embeds all CSS inside the <head>, useful for troubleshooting, but may slow down page load.
Optimized image loading
Improves page speed by prioritizing the Largest Contentful Paint (LCP) image and lazy-loading other images.
- Adds fetchpriority="high" to LCP images.
- Applies loading="lazy" to images below the fold, reducing initial load time.
Optimized Gutenberg loading
Reduces render-blocking requests by disabling unused Gutenberg block editor scripts and styles when they are not needed.
Lazy load background images
Enhances initial page load speed by lazy-loading background images, except for the first one (to ensure faster rendering of visible content).
By enabling these performance settings, you can significantly improve loading times and optimize how Elementor handles CSS, images, and scripts. Experiment with different settings to find the best configuration for your site.