Elementor is written with the strictest code standards to optimize performance. However, some websites may have a configuration that causes slow loading.
Speed test
Run the following test to find the cause of slowness:
- Check your website speed on page speed analyzers such as:
- Google Page
- Speed Insights
- GTmetrix
- Deactivate all plugins besides Elementor and Elementor pro and verify if it improves the page speed.
- Switch to the Hello theme.
- Create a page with the Canvas template and test it for speed again.
- After following these steps run a speed test and check for improvements.
Hosting Servers
Following factors have major effect on the speed:
- Memory limit
- Delete some files (unused themes, plugins, old backups or log files that are no longer needed).
- Upgrade to an account with a larger amount of storage.
- Bandwidth
- Contact your hosting provider to upgrade your package.
- Location of the server in relation to the user
- Use a content delivery network (CDN).
- Choose a hosting service provider who have servers with global reach.
Free or shared hosting services often cause poor speed.
Media (images, videos)
Images slow down the website, especially if placed in areas that are always loaded, like the header and footer. Following are the tips to optimize slowness due to media:
- Do not upload large-sized images.
- Keep the size of images under 1 MB.
- Use images in WEBP format.
- Use Lazy Loading if you have many images on a page. For details, see Lazy Loading.
- Use optimization tools such as Image Optimizer to reduce image sizes. For more details, check out What is the Image Optimizer plugin by Elementor?
- Use CDNs and external links for videos.
- Use the Elementor’s video widget option for loading videos from external sources like YouTube or Vimeo, instead of WordPress library. For details, see Video Widget.
External scripts
Use of external scripts, for example, Google Maps, Facebook share count, Avatar images, considerably slows down a page load.
External fonts
You can deactivate Google Fonts, Font Awesome, and Icons for example, by adding the following lines of code to your functions.php file in your child theme.
| Third-party fonts | Code to add |
|---|---|
| Google Fonts | add_filter( 'elementor/frontend/print_google_fonts', '__return_false' ); |
| Font Awesome | add_action('elementor/frontend/after_register_styles',function() {Note: By default, Font Awesome icons load only on the pages where they are used. This improves performance and site load speed. Only the CSS and fonts of the icon family you actually use are loaded. Dequeue Font Awesome if you do not want to use any Font Awesome icons at all. If you dequeue Font Awesome, the icons will no longer show on any of your pages. |
| Eicons | add_action( 'wp_enqueue_scripts', 'disable_eicons', 11 ); |
Plugins
Plugins make WordPress slower. If you are not using a certain plugin, delete it.
Themes
A well-coded theme uses scripts and methods to reduce its file sizes. Switching between themes and seeing the effect might give you a good indicator if the theme is causing the slowness.
You may disable the themes and check the performance. If you find a third-party theme is causing the slowness, then contact the third-party theme builder support for help.
Using the Hello theme is advisable. For details, see What Is The Elementor Hello Theme?
If you want to write your own code inside the themes, see Elementor Developers.
Speed optimization
- Use a caching plugin like WP Rocket and Autoptimize or any other cache plugin that will meet your needs.
- Use a CDN service like CloudFlare.
- Check with your hosting provider regarding possible causes of the site being slow on the server side.
- Switch editor loader method. For details, see Settings » Elementor.
- Reduce image sizes.
- Check the ping speed of your servers and analyze the various elements’ loading time to pinpoint the cause of the slowness.
To learn about Elementor’s initiative to improve performance, see How Elementor Improved Asset Loading and Made Your Website Run Faster.
