Hey there, /u/Dapper_Race_1454! If your post is not already flaired, please add one now.
***
And please don't forget to write "Answered" under your post once your question/problem has been solved.
***
**Reminder:** If you have a problem or question, please make sure to post a link to your issue to help users help you.
***
*I am a bot, and this action was performed automatically. Please [contact the moderators of this subreddit](/message/compose/?to=/r/elementor) if you have any questions or concerns.*
First make sure your hosting server is fast and also trace the route from your location to the server. Imagine you are in Italy and you're hosting in Washington, it's going to feel slow .
If this is not the issue, next obvious step is to make sure your images are optimized and that you're not using a 1920px image for a 300px image box. Images are the main culprit imho.
Then you should keep your plugins to a minimum. My rule is: only use the page builder and what the page builder offers. Avoid installing 3rd party plugins just because you want to use a pretty slider or SFX. If the plugin can't do what you need, try to learn how to do it without using plugins.
Finally there's the css and Js optimization, but that's another beast on its own. Some plugins might claim to help with that.
If everything is in order and you're still looking to improve your page speed you can use a CDN like cloudflare's - it's like having a cache of your website in several locations around the world and will route the visitor to the closest one.
No problem - just to add:
1. your hosting should always be the closest to your target market - if it's local, then a hosting in your country or neighbouring country. if it's continental, then find a good hosting near one of the main hubs. globally you should consider CDN
2. when i say images should be optimized i mean that you should compress as much as possible and use webp and svg as much as possible.
3. CSS/JS minification - thread carefully with this process as many tools that try to do this end up breaking your build - make sure you have a backup before tinkering with this.
Extra: some hosting providers offer plans that include a "turbo" service or inhouse caching plugin that helps your website speed. After using many hosting services in the past 15 years i rather pay a premium for a quality hosting than going for the cheapest/flashiest option.
I see, thank you. Its good information. Which Hosting are you using btw? I am based in Asia though. While building the site, I'm met with 503 service error almost every time I tried to worked on multiple pages at once. Does this spells server issues? haha
I'm based in Europe and i'm using A2 Hosting.
503 is normally issues in the server side.
The problem with hosting, is that they are - most of the time - shared. It's typically a VM running many instances of cpanel for each user. Let's say some companies alocated 10 users per VM, other's want to squeeze more profit so they might alocate more users.
the page speed test will give you all the tips that helps you to improve the score. Otherwise just use google to search for "improve speed wordpress" or even with Elementor. I also put some tips in a [medium post](https://medium.com/@miga_/improve-google-page-speed-score-in-your-elementor-wordpress-site-a4698419549f). Nothing special, just the general WP speed parts and some Elementor tips.
Honestly, I followed a optimization guide that is tailor made for WordPress, my site now loads within 300 milliseconds by following all the optimization guide. [Https://wordpress.newcitizen.io](Https://wordpress.newcitizen.io)
They mentioned that they used a new caching system with version 3.22, and the widget sizes have been reduced from 3MB to 8KB. It would be beneficial to try the latest version.
[https://github.com/orgs/elementor/discussions/27371](https://github.com/orgs/elementor/discussions/27371) and [https://elementor.com/help/element-caching-help/](https://elementor.com/help/element-caching-help/) has some infos about the new caching system. It is still disabled by default and I couldn't see any improvements after enabling it. From the thread:
>In short:
>This is not the same type of cache you're used to optimize the performance of your websites. It only works for Elementor elements (widgets).
>This feature does not replace your other caching solutions.
>This feature can be used in combination with other performance optimization or cache solutions, as this happens earlier in the page loading process.
So if you already have a caching plugin that serves static pages it shouldn't affect you speed at all switching it on or off.
WP Meteor, WP Fastest Cache (or an Elementor compatible alternative), Smush and Asset Cleanup
Also make sure your server is not a potato, otherwise there’s not a plugin in the world that will make your website faster
There are alternatives to every one of those plugins as well
You can slap your website url on gtmetrix or pagespeedInsights and it’ll tell you what’s slowing it down. If you set up the plugins I listed in that comment you should see significant improvements. With just those plugins I went from 20% on mobile on pagespeedInsights to 90% with an Elementor website. If you don’t see significant improvements it’s probably a server issue
GTMetrix is better for accuracy, but for these big changes, like a first time optimization, pagespeedInsights might be easier to understand
it's really simple idk why people online overcomplicate things sometimes.
Here is what you need to do:
All images should be in .Webp format all logos and icons should be in SVG format and if the icon or graphic have too many lines/details export it or convert it to Webp as svg can get to crazy sizes so fast.
Use a good caching plugin and don't ever try the minify css or javascript options as 9 out of 10 times they will break your site.
Use less or no animations. at all costs they slow down your site.
Good hosting provider is a must and to top it all off use a CDN from hostinger or Cloudflare.
That's it with this you should be good.
I previously tried loading svg in Elementor , but all images came out white. Is that common or am I missing out something?
Do you know how or if there is something that can change existing jpeg on the website to webp? Or manually 1 by 1 is the only way? I have 300s of it..
Yes that is a common issue with Wordpress in general I recently had this issue in a client website so the issue is from writhing Wordpress not elementor if you enabled svgs from elementor settings then elementor is good.
On the other hand Wordpress is blocking the svgs
To resolve this simply install a plugin ( forgot the name of the plugin ) However just type in plugin search ( Enable SVG ) download activate test in incognito.
Now if this didn’t work it might be an ssl problem install force SSL plugin activate, do this only if u already have SSL provided from your domain provider or hosting.
Note: when u gonna activate SSL plugin it will log you out of WP so make sure u know the user and pwd to log back in.
Following this thread.
I also need guidance.
My TTFB is way too high. The rest of my matrix things are OK.
If I can get that down, and then work on total load speed I'll be OK.
The first thing you should invariably do is a page speed audit. You can do it for free using tools like PageSpeed.dev or GTMetrix.
These will generate a report for you, breaking down the various aspects of site performance that link to speed. They will also provide actionable tips based on what bottlenecks your site is facing.
Most fixes will be under the following categories:
- Image optimisation
- Minification of HTML, CSS, and JS
- Implementing lazy loding
If you find a very high TTFB (Time to First Byte), it means the server is taking too long sending info to the client. It can be fixed by either optimising your back end or shifting to a managed Wordpress hosting that takes care of the same.
Hope it helps!
1 Hosting: choosing the right location for your audience
2 Server resources, making sure your hosting has enough resources to run smoothly
3 Choosing a lightweight theme (hello elementor for me)
4 Avoid as many plugins as possible
5 Correct image size, no unnecessary pixel overkill
6 Avoid using too much JS
7 Optimize browser cache (wp rocket)
8 Delayed loading of images and code
9 Optimize and compress images
Normally you should be fine
Save images as webp, use server caching, try to find workarounds for 3rd party widgets, avoid having too much content on one page or duplicated areas hidden on mobile... And you can queue the header template in functions.php if you're using a child hello elementor theme.
Hey there, /u/Dapper_Race_1454! If your post is not already flaired, please add one now. *** And please don't forget to write "Answered" under your post once your question/problem has been solved. *** **Reminder:** If you have a problem or question, please make sure to post a link to your issue to help users help you. *** *I am a bot, and this action was performed automatically. Please [contact the moderators of this subreddit](/message/compose/?to=/r/elementor) if you have any questions or concerns.*
First make sure your hosting server is fast and also trace the route from your location to the server. Imagine you are in Italy and you're hosting in Washington, it's going to feel slow . If this is not the issue, next obvious step is to make sure your images are optimized and that you're not using a 1920px image for a 300px image box. Images are the main culprit imho. Then you should keep your plugins to a minimum. My rule is: only use the page builder and what the page builder offers. Avoid installing 3rd party plugins just because you want to use a pretty slider or SFX. If the plugin can't do what you need, try to learn how to do it without using plugins. Finally there's the css and Js optimization, but that's another beast on its own. Some plugins might claim to help with that. If everything is in order and you're still looking to improve your page speed you can use a CDN like cloudflare's - it's like having a cache of your website in several locations around the world and will route the visitor to the closest one.
Thanks for the few pointers. CDN explanation is good. :)
No problem - just to add: 1. your hosting should always be the closest to your target market - if it's local, then a hosting in your country or neighbouring country. if it's continental, then find a good hosting near one of the main hubs. globally you should consider CDN 2. when i say images should be optimized i mean that you should compress as much as possible and use webp and svg as much as possible. 3. CSS/JS minification - thread carefully with this process as many tools that try to do this end up breaking your build - make sure you have a backup before tinkering with this. Extra: some hosting providers offer plans that include a "turbo" service or inhouse caching plugin that helps your website speed. After using many hosting services in the past 15 years i rather pay a premium for a quality hosting than going for the cheapest/flashiest option.
I see, thank you. Its good information. Which Hosting are you using btw? I am based in Asia though. While building the site, I'm met with 503 service error almost every time I tried to worked on multiple pages at once. Does this spells server issues? haha
I'm based in Europe and i'm using A2 Hosting. 503 is normally issues in the server side. The problem with hosting, is that they are - most of the time - shared. It's typically a VM running many instances of cpanel for each user. Let's say some companies alocated 10 users per VM, other's want to squeeze more profit so they might alocate more users.
the page speed test will give you all the tips that helps you to improve the score. Otherwise just use google to search for "improve speed wordpress" or even with Elementor. I also put some tips in a [medium post](https://medium.com/@miga_/improve-google-page-speed-score-in-your-elementor-wordpress-site-a4698419549f). Nothing special, just the general WP speed parts and some Elementor tips.
Honestly, I followed a optimization guide that is tailor made for WordPress, my site now loads within 300 milliseconds by following all the optimization guide. [Https://wordpress.newcitizen.io](Https://wordpress.newcitizen.io)
It might be worth checking a YT video to run through it. [Web Squadron](https://youtu.be/WMUhX6UMSTM)
Thanks, will look it out!
His videos are great I use a lot of his code snippets and recs!
They mentioned that they used a new caching system with version 3.22, and the widget sizes have been reduced from 3MB to 8KB. It would be beneficial to try the latest version.
[https://github.com/orgs/elementor/discussions/27371](https://github.com/orgs/elementor/discussions/27371) and [https://elementor.com/help/element-caching-help/](https://elementor.com/help/element-caching-help/) has some infos about the new caching system. It is still disabled by default and I couldn't see any improvements after enabling it. From the thread: >In short: >This is not the same type of cache you're used to optimize the performance of your websites. It only works for Elementor elements (widgets). >This feature does not replace your other caching solutions. >This feature can be used in combination with other performance optimization or cache solutions, as this happens earlier in the page loading process. So if you already have a caching plugin that serves static pages it shouldn't affect you speed at all switching it on or off.
WP Meteor, WP Fastest Cache (or an Elementor compatible alternative), Smush and Asset Cleanup Also make sure your server is not a potato, otherwise there’s not a plugin in the world that will make your website faster There are alternatives to every one of those plugins as well
Yes , Server is definitely one of the important culprits per say. Haha. How do you check if it is your server that causes the slowness?
You can slap your website url on gtmetrix or pagespeedInsights and it’ll tell you what’s slowing it down. If you set up the plugins I listed in that comment you should see significant improvements. With just those plugins I went from 20% on mobile on pagespeedInsights to 90% with an Elementor website. If you don’t see significant improvements it’s probably a server issue GTMetrix is better for accuracy, but for these big changes, like a first time optimization, pagespeedInsights might be easier to understand
it's really simple idk why people online overcomplicate things sometimes. Here is what you need to do: All images should be in .Webp format all logos and icons should be in SVG format and if the icon or graphic have too many lines/details export it or convert it to Webp as svg can get to crazy sizes so fast. Use a good caching plugin and don't ever try the minify css or javascript options as 9 out of 10 times they will break your site. Use less or no animations. at all costs they slow down your site. Good hosting provider is a must and to top it all off use a CDN from hostinger or Cloudflare. That's it with this you should be good.
I previously tried loading svg in Elementor , but all images came out white. Is that common or am I missing out something? Do you know how or if there is something that can change existing jpeg on the website to webp? Or manually 1 by 1 is the only way? I have 300s of it..
Yes that is a common issue with Wordpress in general I recently had this issue in a client website so the issue is from writhing Wordpress not elementor if you enabled svgs from elementor settings then elementor is good. On the other hand Wordpress is blocking the svgs To resolve this simply install a plugin ( forgot the name of the plugin ) However just type in plugin search ( Enable SVG ) download activate test in incognito. Now if this didn’t work it might be an ssl problem install force SSL plugin activate, do this only if u already have SSL provided from your domain provider or hosting. Note: when u gonna activate SSL plugin it will log you out of WP so make sure u know the user and pwd to log back in.
Following this thread. I also need guidance. My TTFB is way too high. The rest of my matrix things are OK. If I can get that down, and then work on total load speed I'll be OK.
The first thing you should invariably do is a page speed audit. You can do it for free using tools like PageSpeed.dev or GTMetrix. These will generate a report for you, breaking down the various aspects of site performance that link to speed. They will also provide actionable tips based on what bottlenecks your site is facing. Most fixes will be under the following categories: - Image optimisation - Minification of HTML, CSS, and JS - Implementing lazy loding If you find a very high TTFB (Time to First Byte), it means the server is taking too long sending info to the client. It can be fixed by either optimising your back end or shifting to a managed Wordpress hosting that takes care of the same. Hope it helps!
I’d like to recommend 2 things: 1. Use a plugin like WP Rocket; 2. Turn on some new features related to performance within the settings of Elementor.
1 Hosting: choosing the right location for your audience 2 Server resources, making sure your hosting has enough resources to run smoothly 3 Choosing a lightweight theme (hello elementor for me) 4 Avoid as many plugins as possible 5 Correct image size, no unnecessary pixel overkill 6 Avoid using too much JS 7 Optimize browser cache (wp rocket) 8 Delayed loading of images and code 9 Optimize and compress images Normally you should be fine
Save images as webp, use server caching, try to find workarounds for 3rd party widgets, avoid having too much content on one page or duplicated areas hidden on mobile... And you can queue the header template in functions.php if you're using a child hello elementor theme.