How to improve Elementor website speed effectively?

Elementor editor is a Wordpress website editor, after the website backend is enabled, it may appear to open the Elementor editor slower, lagging, can not be opened. As shown in the picture below:

Here are 9 ways to fix speed issues with Elementor editor provided in this post.

1. Activate the Elementor function

Log in to your Wordspress dashboard and go to Elementor → Settings , then activate Lazy Load Background Images, Inline Font Icons:

Inline font icons
Load font icons (such as Font Awesome and eicons) inline as SVGs instead of loading the entire library. This reduces CSS requests and render-blocking CSS issues.

Delayed loading of background images
Use the optimization plugin with the "lazy-bg" helper class to delay the loading of background images. This makes loading background images easier and more efficient.

Optimizing DOM Output
Reduce DOM size and improve performance by removing unnecessary div wrappers such as elementor-inner, elementor-row, and elementor-column-wrap.

Improved resource loading
Reduce the JavaScript burden on your site by loading lightboxes, fullscreen libraries, dialog libraries, and shared link libraries only when needed.

Improved CSS loading
Load only the widget CSS and animations that are in use and load them at the same time, reducing the amount of CSS and render-blocking resources on your site.

Disable data sharing
Sharing data with plugin developers requires some server resources. Therefore, it is recommended to disable this feature in all plugins.

2,Change the CSS print method to "external file".

While there are pros and cons to this approach, using external CSS files is usually better because each external CSS file can be cached and they don't increase the size of the HTML. It is recommended that you test the results on your own site, but I usually recommend using external files.

3,Disable default Google fonts

In the next steps, we will preload only the fonts you need and use the woff2 format locally.

existAdvancedDisable Google Fonts Font Awesome in

existGeneralDisable Font Awesome in

When changing font/CSS settings, regenerate the data in CSS and CSS Elementor's tool settings, and then test the results in a waterfall chart (e.g., GTmetrix or Chrome Developer Tools).

4,Set Google font loading to "Swap".

Set Google Fonts loading to "swap" ensures that text remains visible during web font loading. However, Font Awesome recommends using font-display: blockbecause it makes icon loading non-blocking. It's also possible to change the font-display Properties.

To add font-display: swapIf you can't find the location, please find the CSS file for the font, or use the string locator to search for the font location. If you can't find the location, just set the font-display: swap Just add it to the CSS code of the font.

Disable Gutenberg's wp-block-library

Since Elementor is used, Gutenberg can be disabled and it will add extra CSS files to the site (/wp-includes/css/dist/block-library/style.min.css). It is possible toUsing Asset CleanUp plug-in (software component)Cancel the Gutenberg Block Library CSS queue::

Disable the Gutenberg editor
Gutenberg can be disabled using the Disable Gutenberg plugin or the Script Manager in Perfmatters. If Gutenberg is only used in certain parts of your site, both options allow you to control where it loads, thus optimizing site performance.

5,Use transform + translate in animations

Animation is not exactly recommended, but it is possible to use transform to prevent layout changes (CLS).

These effects can be achieved using the Happy Addons plugin, where CSS transforms allow the width and height of the animation to be changed, and CSS translations move elements around without causing the layout to change. This improves page stability while maintaining the animation.

6,Disable unused plug-ins

Be sure to control the number of plugins used on your WordPress site. Too many plugins lead to a very laggy backend that is difficult to maneuver.

The following are recommendations:

1. Limit the number of plug-ins: Try to keep the number of plug-ins under 15.
2. Avoid Duplicate Function Plugins: Use only one plugin for the same functionality, e.g. for the SEO plugin, choose to install one of SEO Yoast, Rank Math or All in One SEO.
3. Avoid duplicate functions: Avoid installing plugins with duplicate functionality if you already have a full-featured plugin.
4. Disable unused plug-ins: Always disable plug-ins that you can't use.

If certain plugins are only needed on specific pages or posts, you can use Perfmatters or Asset CleanUp to uninstall them and reduce CSS and JavaScript.

Here are the steps to use Perfmatters:

1. Enable Script Manager: Go to Settings → Perfmatters → Add-ons → Script Manager to enable the Script Manager.
2. Enable Test Mode: Enable test mode in the Script Manager settings so that you can test the Script Manager without breaking the site. When publishing changes, remember toDisable test modeThe

View the Script Manager and uninstall unused plugins (all locations except pages, posts, current URL, regular expressions, etc.).

7,Using WebP Images

In order to optimize images, there are three things to keep in mind:

1. Control image size: Make sure to keep the image size under 200KB.
2. Adding Alt Attributes: Add Alt attributes to images for SEO optimization.
3. Using the WebP Format: The WebP format is optimal for reducing file size and maintaining high quality.

It is recommended to process images in WebP format locally before uploading them to a WordPress site. There are several WordPress Image Optimizer PluginThis can be resolved and automatically shrinks the image down to a small enough size that it won't affect the performance of the site or lose too much quality or resolution.

8,Use a lightweight theme

Choosing a lightweight theme is one of the effective ways to improve the speed of your website. Here are some of the advantages of choosing a lightweight theme and the importance of avoiding the use of too many child themes:

1. Simple code structure: Lightweight themes usually employ clean code that avoids excessive redundancy and unnecessary functionality. This makes the page load more quickly and reduces unnecessary resource consumption.
2. Optimized performance: The Lightweight theme focuses on performance optimization, including sensible CSS and JavaScript compression, delayed loading, and minimizing HTTP requests. This helps to reduce the burden on the server and increase page load speeds.
3. Avoid too many subtopics: Too many child themes may increase the complexity of the page and lead to performance degradation. Using too many sub-themes may also introduce unnecessary code and styles, increasing page load time. Therefore, try to avoid using too many sub-themes at the same time in one website.
4. Easy maintenance: Lightweight themes are usually easier to maintain because they have a simpler and clearer code structure. This helps to reduce problems that may arise when the theme is updated and customized, and improves the stability of the site.
5. responsive design: Many lightweight themes focus on responsive design so that the website provides a great user experience on different devices. This helps to attract more visitors and boost the SEO ranking of your website.

When choosing a lightweight theme, you should select the right lightweight theme based on the needs and performance goals of your website to ensure that it performs well in every aspect.

9,Increase Speed with CDNs

CDNs help web pages load faster by storing the static content of a website such as images and videos on servers around the world. The benefit of this is that no matter where a visitor is, they will be able to fetch the content from the server closest to them, which reduces wait times and makes websites load faster. Here are the steps to set up Cloudflare CDN:

Create a Cloudflare account:

1. Visit Cloudflare: Visit the official Cloudflare website Cloudflare and create a free account.
2. Add your website: Follow the instructions to add your website and complete the domain setup.

Modify the domain name resolution settings:

1. Login to domain registrar: Log in at your domain name registrar and find the domain name resolution settings.
2. Modify Nameservers: Change your domain's Nameservers to those provided by Cloudflare so that your traffic will be routed and optimized through Cloudflare.

Select CDN Settings:

1. Log in to your Cloudflare account: Select your site.
2. Enable "Auto Minify": In the Speed tab, enable Auto Minify to reduce the size of CSS, JavaScript, and HTML files to improve loading speed.
3. Enable "Rocket Loader": In the Speed tab, enable the Rocket Loader to delay loading JavaScript and optimize page loading.

Enable HTTPS:

1. Select SSL Mode: In the Crypto tab, select "Full (strict)" as the SSL mode to ensure that your site transmits data encrypted over HTTPS.

Configure the cache:

1. Enable "Cache Everything": In the "Caching" tab, enable "Cache Everything" to cache the entire page for faster loading.
2. Setting the cache expiration time: Ensure that new content is updated in a timely manner.

Set up firewalls and security:

1. Enabling Web Application Firewall (WAF): In the Firewall tab, enable WAF to protect your site from malicious attacks.
2. Configure additional security settings: For example, Bot management and IP blacklisting.

Monitor and analyze:

1. Enabling the Cloudflare Analysis Tool: In the Analytics tab, monitor site performance and traffic.

Testing and optimization:

1. Test website loading speed: Ensure significant performance gains with Cloudflare CDN.
2. Optimization based on test results: For example, compressing images, merging CSS and JavaScript files, and so on.

Summary:

When opening the Elementor editor lags and other problems, you need to improve the speed and performance of the site. Key measures include using Cloudflare CDN acceleration, choosing a lightweight theme, optimizing images for WebP format, disabling unused plugins, and setting up Elementor and CSS appropriately.With these optimizations, not only will page load times be reduced, but user experience and SEO rankings will also be improved. Regularly monitoring and optimizing your website to ensure that it is always in tip-top shape is key to maintaining a high-performance website.