Elementor and Other Page Builders
Hey there fancy pants, I see you installed Elementor and followed it by either designing your own fabulous high vibe site or seek out one of the templates offered to you with your subscription. Bravo! ???? ???? ????
But, hold up, google is dinging you left and right and your healing rumors of this new google thing called “Core Web Vitals”. Well, shoot. I guess there is more to this whole website design thing after all.
Google Web Core Vitals
I want to do a little explanation of this because I did some research when this first came out and I started throwing huge sites like Amazon into the Google Page Speed Insight Checker (you can test your own page speed here). And this is my final conclusion, if huge names like Amazon aren’t passing the Google test, then it’s not something to worry about just yet.
Plus there are about a million different measurements BESIDES page speed that go into getting a passing grade on the Google Web Core Vitals, so chill. Worry about getting your load time under control 1st!
So back to the question,
Does Elementor slow down your site?
Yes, any page builder will be harder to optimize for speed since they make your site load quite a bit bigger. So I’m going to give you my favorite tips on how to increase the speed on your Elementor site!
Optimize Your Images → Lead magnet
Resize your images! You have no idea how many sites I’ve opened just to find an image that is 5 MB when you should have images no larger than 200 kb!
First I want to talk about the three things that create these giant image files.
#1 Obviously having a giant image!!!
If you open your image to full size and it’s larger than the screen or you have to push the ???? to view the entire thing in your browser. It’s too big.
Recommendation: Resize your image to the EXACT size it is on the screen.
#2 Compression.
There is lossy and lossless image compression that is offered through the extra plug-ins you can use for compression. Double-check your images and adjust to the right level utilizing your plug-in or use image compression software like Photoshop or Compressjpeg.com.
My rule of thumb is as long as it doesn’t look pixelated to someone with the excellent vision you are okay. Most of the time that means not dropping below a 60% compression level when using an optimization software like Photoshop or Canva.
Recommendation: Compress to no less than 60% or lossless level
#3 Watch the Number of Colors
Woah Woah Woah. Huh? Right, that’s what I said but after testing numerous photos, it makes a HUGE difference. Black and white photos have tiny file sizes while rainbows have huge file sizes!
Recommendations: Keep images simple with no a single color background or with a gradient when possible.
Install an Optimization Plug-In
There are always up and coming “fantastic” optimization plug-ins showing up so do a google search and see what’s currently trending. These plug-ins do things like combine the code to be a lighter load, put your site on a CDN (you can do this for free on Cloudflare but it is super helpful)
Recommendation: Install a plug-in to combine the code on your site for a lighter site size
Tools: Hummingbird, SG Optimizer (Siteground hosting) or WP Rocket
Good Hosting
Nothing beats GREAT hosting that is fast and reliable. Things like Godaddy and Bluehost have nothing but rotten reviews and are sooooooo slow. Ideally, cloud hosting is where you will see the highest speed or something like WPEngine but for those who are looking for quality alternatives, this is what I recommend.
Recommendation: Use GreenGeeks or Siteground
Pre-Load Fonts
This is easy but intimidating. Find the place where your google analytics live on your site, it’s usually an extra plug-in like Insert Headers and Footers or the code area in Elementor, and add this code, except with your fonts.
<head>
<!– … –>
<link rel=”preload” href=”/assets/Pacifico-Bold.woff2” as=”font” type=”font/woff2” crossorigin>
</head>
Just replace the bolded area with the font info and file type! Now do that for all the fonts you use on your site and your all set. For reference when you look at the Google Page Speed Insights it usually lists the fonts you need to preload. So double-check in there if you need a little more info.
Avoid excessive plug-ins
Always ask yourself… can I find another plug-in that does EVERYTHING I need. Like Elementor Pro? I’ve gone into countless sites that have 50+ plug-ins and they wonder why they are getting errors and having pages break. It’s because every single plug-in has to play well with the rest. The more plug-ins the less stable a site will be and the slower it will be. It’s that simple.
Recommendation: Use plug-ins like Elementor Pro to minimize the number of plug-ins you need to operate your site. Or even better download my 6-figure tech stack “Just the Tech” and get the exact tech stack I use in my six-figure launches. (Hint: These plug-ins play well together! I even have a totally free tech stack recommendation!)
Decrease the dom
You might see this warning when checking your page speed. If you have an Elementor site, this is an ongoing issue! I’m going to send you to another site to get a detailed tutorial on this because I think they do an excellent job at explaining how to go about it.
Recommendation: Follow this tutorial
That’s it for today! I hope these tips help you speed up and optimize your Elementor site!