How to make Elementor faster

Avoid Elementor if possible. And if not, use this guide – your site will be fast afterward!

How to Speed Up Your Slow Elementor Website & Pass Core Web Vitals [A Straightforward Guide]
Here you will find a list of the most important settings for Elementor.

Before you begin, it is recommended to check your website in the Chrome DevTools Network report and with the KeyCDN performance test to analyze. I also use GTMetrixto measure website speed.
These tools show you if your website is slow due to CSS/JavaScript, images, fonts or TTFB (Time to First Byte).

1. Activate experimental features

Go to Elementor → Settings → Experiments and activate the following options:

• Inline Font Icons: Icons like Font Awesome are loaded inline as SVGs, resulting in fewer CSS requests and reducing render blocks in PageSpeed Insights.
• Lazy Load Background Images: Allows delayed loading of background images, which was previously only possible via special plugins.
• Optimized DOM Output: Removes unnecessary div wrappers to avoid excessive DOM size.
• Improved Asset Loading: Loads libraries like Lightbox and Screenful only when they are actually used on a page.
• Improved CSS Loading: Loads CSS and animations only where needed, resulting in fewer render-blocking resources.
• Usage Data Sharing: Disable data usage, as sharing data with plugin developers requires some server resources.

2. Method for loading CSS to “External File”

External CSS files can be cached and do not increase the size of the HTML. In most cases, using "External File" is recommended.

3. Disable default fonts and icons

Disable both Google Fonts and Font Awesome Icons. The next step explains how to locally download and preload only the fonts you need.

4. Host fonts locally (& in WOFF2 format)

If your website loads third-party fonts like fonts.gstatic.com, host them locally instead:

• Step 1: Visit the Google Fonts website and download your desired fonts. Choose only the weights you need.
• Step 2: Convert the fonts to WOFF2 format using a tool like CloudConvert, as it is smaller than .ttf.
• Step 3: Upload the fonts as custom fonts in Elementor. If you don't use Elementor Pro, you can use plugins like OMGF to automatically optimize and prepare the fonts.

5. Preload fonts

Preload the fonts visible above the fold to reduce loading time. You can configure this in most optimization plugins. Once the fonts are preloaded, the blocking time (visible as a brown bar in the waterfall chart) should decrease.

With a GTMetrix test you can see which fonts are loaded and when.

6. Allow Google Fonts to load in “swap” mode

Set Google Fonts to "swap" to ensure text remains visible while web fonts load. This resolves the "Ensure text remains visible during webfont load" issue in PageSpeed Insights.

7. Disable the Gutenberg block library

If you use Elementor, you can disable the Gutenberg block library, which loads additional CSS files on your website. Use the plugin "Disable Gutenberg“ or the Script Manager of “Performance Matters“. Both tools allow you to activate Gutenberg only when you really need it.

8. Remove unused CSS with exceptions for Elementor

• With WordPress Cache Plugins With tools like FlyingPress, Perfmatters, or LiteSpeed Cache, you can remove unused CSS from your site, improving loading times. Important: Some files must be excluded from removal for your Elementor pages to display correctly.
• Exceptions for Elementor:
  • /wp-content/plugins/elementor/assets/css/frontend-lite.min.css
  • /wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css
  • Also select the menu selectors that you do not want to remove.

9. Use “Transform” and “Translate” in animations

If you use animations on your website, use CSS properties like "transform" and "translate." This prevents layout shifts that can negatively impact the user experience. Plugins like "Happy Addons" make it easy to add these effects.

10. Design headers and footers with CSS

Your header and footer appear on every page of your website and should therefore be as light as possible.

Instead of creating them with Elementor, use direct CSS. This saves resources and reduces the number of elements generated by Elementor.

11. Delay JavaScript without affecting Elementor

Use cache plugins like WPRocket, Perfmatters or FlyingPress to delay JavaScript loading.

This will prevent your website from loading slowly. However, you'll need to make sure that some Elementor files are excluded from this delay to avoid damaging your pages. Keep an eye on the following files:

• jquery.min.js
• frontend.min.js
• /elementor/
• /elementor-pro/
• You can find the exact settings in the documentation of the plugin you are using.

12. Check all plugins for performance

• Some plugins can slow down your website by using too much CSS, JavaScript, or memory. Use tools like Chrome DevTools, WP Hive, or Query Monitorto identify the “heavyweight” plugins and deactivate them if necessary.

13. Deactivate plugins on unused pages

• Elementor plugins often load across the entire website, even when they're only needed on a few pages. Tools like "Perfmatters" or "Asset CleanUp" allow you to deactivate plugins on specific pages or posts to save resources and reduce loading time.

14. Use fewer Elementor widgets and columns

• The fewer widgets and columns you use, the faster your page will load. Consider whether you really need all the features and reduce the number of elements to keep your code lean. A video by "Oooh Boi" offers helpful optimization tips.

15. Upload images in WebP format

Use the WebP format for your images to reduce their size and speed up loading. You can convert images before uploading and then use Chrome DevTools to verify they display correctly on your website.

16. Use a CDN

• Image CDNs like Optimole or Cloudflare Mirage/Polish automatically optimize your images on demand. This reduces the load on your server and improves loading times. They also offer additional features like AVIF support and mobile image resizing.

17. Preload viewport images & exclude from lazy loading

Images that are visible when the page is first loaded shouldn't be lazy loaded. Preload these "critical" images to display them quickly and improve the LCP (Largest Contentful Paint). Plugins like Perfmatters or FlyingPress allow you to set this up automatically.

18. Use hosting with NVMe SSDs

NVMe SSDs offer a significant performance boost. They're faster than traditional hosting and significantly improve load times. Combine LiteSpeed hosting with a CDN like QUIC.cloud or Cloudflare APO for optimal performance.

19. Use Full Page Caching (from Cloudflare)

This allows you to host the entire website on Cloudflare.

20. The hosting settings

• PHP version: Always use the highest stable PHP version compatible with your plugins for optimal performance.
• Memory limit: Elementor recommends 768 MB for optimal performance. Set this in your hosting dashboard.
• Redis/Memcached: Redis is especially beneficial for dynamic websites. If your hosting supports it, enable it and connect it to your caching plugin.
• OPcache: OPcache improves PHP performance and reduces CPU usage.
• Brotli compression: If your hosting offers it, activate Brotli to speed up data transfer.

21. Consider which optimization plugin you use

• On a LiteSpeed server, LiteSpeed Cache is the best choice. Otherwise, FlyingPress is recommended. Both plugins offer comprehensive optimization options that go beyond WP Rocket.
• A notice: SiteGround Optimizer is good for caching, but performs worse in Core Web Vitals. FlyingPress and LiteSpeed Cache have significantly more features here.

22. Use Lazy Render for Elementor Sections

With FlyingPress or LiteSpeed Cache, you can enable lazy rendering, which means sections are only loaded when they appear in the visible area. To do this, right-click on the desired section, copy the CSS selector, and paste it into the plugin's settings.

23. Remove unnecessary elements and clean the database

• Unnecessary elements: Use plugins like “Perfmatters” or “Debloat” to deactivate unnecessary features on your website.
• Clean up database: With WP-Optimize, you can remove old database entries, such as outdated tables. Be sure to create backups before performing major cleanups.
• Deactivate modules: In some plugins you can turn off certain functions that you do not need in order to minimize resource consumption.

Done! Follow these steps to get the maximum speed out of your Elementor website.
If you need help implementing this, let me know!