Speed up ELEMENTOR - Build for speed to avoid slow loading Elementor website
Vložit
- čas přidán 11. 11. 2021
- Building fast websites with Elementor can be challenge. Here I am sharing tricks I learned over the years on how to get your website fast, before you start playing with caching and other optimisation.
Used Elementor Version 3.4.7 and Elementor PRO Version 3.5.0
You can download the child theme for Hello theme here:
jcweb.tech/speed-up-elementor...
→ Get reliable hosting with Cloudways with 40% discount
Use code BFCM2021 onthe following link (valid till 1st Dec, 2021)
www.cloudways.com/en/?id=785560
→ Check out current Elementor Pro Offers:
[elementor.com/?ref=23425&camp...](elementor.com/?ref=23425&camp...)
My portfolio: jcweb.tech/
Instagram: / jcweb.tech
Facebook: / jcwebtechcz
---------------------------------------------------------------------------------------------------
MENTIONS
Oooh Boi's channel
/ ooohboi
His explanation of widget stalker and HTML output optimisation
• How to optimize the la...
How to clone your website to Cloudways
support.cloudways.com/en/arti...
Source of most of the code for the child theme:
thinkweb.dev/how-to/create-a-...
---------------------------------
Some of the above links are affiliate links, which means that I earn a commission when you make a purchase via my link, however, you do not pay anything extra.
Music: Here We Go - Imperss Music (Original Mix)
This is the only video that shows whats really important to get the speed up, while using elementor, all the others just shows things about caching or nitropack etc. Keep up the good work brother, Thanks a lot for the tips 💡
Thanks man, unfortunately this video is not getting a lot of views so I assume people want those hot fixes everybody talks about in their "speed up elementor videos".
@@jcwebtech so true, those fixes are like putting a band aid on a deep cut, thats not gonna help.Sadly not a lot of elementor users understands the basic concepts of code.
Also, the clicks may be low, because the thumbnail is not so catchy, may be you could do with a better thumbnail with your face on it and catchy fonts and all. Just a suggestion
@@nikhilsoman870 Thanks for the tips, I will do some AB testing in the future videos. Take care man
@@jcwebtech Sigue asi que vas hacer grande, me encantaria que un dia de estos vieras mi página para tenerta al 99.9% jajaja saludos desde Colombia
Another extremely useful tutorial. Keep up the magnificent work.
This has to be one of the best video i have seen in a long time related to WP speed in general. A lot of things you talked about can be used for other builders or in general web designing.
Kudos to your effort.
Thank you!
Highly underrated channel. Only method where no plugins are needed to achieve higher loading time. Thank you for the tricks. Don't get demotivated by fewer views, eventually you can get lot of advanced viewers.
Thank you for the support! Actually I am belown away with all the positive comments and feedback and I am very grateful for that. Of course would be easier to justify the time I invest in it if I had more views and earned some $$ along the way but it's not the priority.
@@jcwebtech I think almost all channels are focused on using plugins and no code way. If you can focus on custom css for many things, i hope lot of people will be interested and it will be a different set of viewers.
Excellent tutorial…. Cheers 🍻 man 👊🔥🔝
Thanks man 🍻
Thanks for the tutorial. Enjoyed it.
You are welcome!
Very cool and practical tutorial, thanks for it. It's good to know that there are people like you in this world who don't just reach for plugins. Best regards
Thanks Seb, I am glad it is appreciated :)
Just found your channel. Instantly subbed. Big fan already!
Thanks man! I am working on some interesting projects right now, hope to share some cool stuff soon
@@jcwebtech- Looking forward to what you have to share. I love the fact that your channel takes it to the next level. So many people out there are doing the same or similar things; but yours takes a different approach.
By the way, I really enjoyed your extension of the JetEngine slider functionality. If you could out in a request, any tips on enhancing Crocoblock tools would be greatly appreciated.
Good luck with your projects. Cheers!
Very helpful, I rarely see any tips on how to be efficient without caching, thanks so much for explaining this.
Glad you found it helpful!
Great tips, thank you!
Thank you, I will probably do updated version for 2023 so sty tuned :)
Thank you very much for this!
You are very welcome. Stay tuned for 2023 version.
Awesome, you helped me to achieve my goal. I can't thank you enough. But do the functions.php codes work in any theme or is it specifically for the hello theme?
Happy to hear it, feel free to share it with anyone else whom it might help. The code is not specific to Hello theme.
This was so incredibly helpful! thank you! I would love to see a tutorial on the popup menu for the hamburger icon...
Thank you. I will do the menu in some future videos.
Hi, the tutorial for the popup menu for the hamburger icon is live on my channel
Awesome stuff thank you for sharing! Going to have to figure out why my site jumped up to a Jetpack score of 83 on desktop but floats at 47 on mobile... Haha the more you know the less you know
Liked and subbed
Appreciate that. Some really cool stuff is coming!
Hi Jan, really informative content. I am interested by jour point of you on Elementor + JetEngine or Crocoblock plugins. Can we achieve same kind of performance?
Hi Dom, it is a good question. Would give for an extra video probably. I love jet engine, and I don't see it adding much extra weight except when you are using the listing in a carousel view. It is loading slick carousel unlike Elementor that is using swiper JS. So if you have on one page carousel made by JetEngine and also Elementor widget, you are loading 2 different JS libraries, that do essentially the same. Then I would use as little Jet Elements and Tricks as possible. They do add extra weight and screw your score if you use them in the "above the fold" part.
Hi Jan, thank you for sharing your approach. I have been using a similar workflow including Ooohboi, but using custom positioning for widgets in Elementor > Advanced > Positioning, instead of widget stalker. Basically because even after watching the Ooohboi video where he uses Widget Stalker I still could not understand how it works, how to use the settings units, widget order etc. Do you or someone you have seen have a video on this topic on CZcams? Will the upcoming Elementor Container release make the Ooohboi plugin no longer necessary? My main problem when building sites with Elementor is having to duplicate the same element and having them show or hide in responsive mode depending on their location, I think this could be solved with Flex if I knew how to use it properly. Thank you
Hi Denis, with the new container you will be able to set exact order of a widget for each breakpoint (just like you can now with Steroids). But it only works within the same wrapper. You can notice I also have duplicated elements on this website because I wanted to move the text and button bellow the image on mobile. But the image is in different column so there is no way to do it without duplicating it. It would only be possible with Grid but we will have to wait for that one to come to Elementor.
@@jcwebtech Ok, it is taking a long time for Container to arrive so Css Grid will be next year at the earliest. Bricks Builder is already using Container and Css grid on the way, I am considering switching to Bricks once they reach version 2.0 as it was built in Vue. Js that makes it very fast in the backend, as while I can make Elementor fast on the front end it is painfully slow to load on the backend and very slow to switch between the editor and the global settings and back. Webflow would be the other option but not sure how big a learning curve that would be
god
Great info thanks.
I am building landing pages and so i don't have a header or menu.
Can you pls show the best way to not show header
You can have an empty header template or something simple. Just don't include the menu widget, that will have the biggest impact on the speed.
Video is great, but really should tell people that once you put that code in the Function file, that it will block you from locally uploading fonts until you disable it temporarily.
Thanks for pointing that out, I haven't realise that as I do the optimisation only on the end. Sorry if you had some trouble with it. I will probably do an updated version of this guide for 2023 and I will include this information.
Awesome video. Do you offer service to help me do this on my Elementor site? What's your website?
Hi Marc, I believe I just replied your email :)
Bro your Link for the light child theme is not working kindly fix it
Elementor slows down the website and with Ezoic it definitely slows it down. If I remove Elementor, can I keep the pages I’ve already built but then go forward with Gutenberg? Will that speed up my site?
Hi, no you cannot. If you remove Elementor, you loose all the layout and styling. If speed is the number one priority, you can build directly in Gutemberg and keep it simple. Or use something like oxygen or brick. Really depends on the project. There are many options and non of them is perfect.
thank you. all I find when searching for help is "addon advertisements" videos that showcase an addon you need to buy, raising costs. No real advice like yours
I feel you. Thanks for the support!
I think the video was about speed but you talk about design ..
Think from the perspective of people who are beginner ..
You should have focused on coding like the way you taught in your previous video on how to show hide elements with click of button using jqyeery.
Same way you should make video on how to get rid of error like rendering ,Dom size etc by google
Hi Imran, thanks for the comment, I am happy the videos around jQuery are appreciated. However, I don't want to focus only on that as my knowledge of JS is not that great :D. Actually, the main part of this video, that focuses on limiting the number of widgets does solve DOM size issue (unless your page is like very long).
Why is elementor builder SUPER slow for me? It takes 15 seconds for every click to load. The builder itself, working inside the workspace.
If it is this slow, it is not normal. Disable all other plugins. If that does not help, reach out to your hosting or change it. I recommend cloudways - affiliate link is in the description. It runs elementor very well.
@@jcwebtech Thanks. A friend helped me. It was a bunch of stored cache and something else. So I guess the builder doesn't clean itself but needs to be done manually.
@@audunjemtland8287 Glad you figured it out
Thanks a lot ❤️ . Finally found the way to remove bloatware without plugins.