How To Speed Up Elementor? Elementor is a great page and theme builder. However, as with any page builder, the pages developed can become bloated. Bloated pages lead to slow load times and slow load times can cause your site to not rank as well as it should. Plus, from a user standpoint, slow loading pages can be frustrating for, especially on slower connections often associated with phones and other mobile devices.
How to speed up an Elementor website
In this post I’ll outline some of the best ways to keep your Elementor developed website loading quickly on any device.
- Optimize your images! On today’s image heavy websites, it’s crucial to make sure your images a as small as possible. That means opting for more efficient image formats where possible. For example, .png images are usually larger then the same images saved as a .jpg. In many cases you can save a lot of space by simply saving the .png as a .jpg. Be careful with this if the image has an empty or invisible background, .jpg can’t generate that type of file so you will need to stick with .png here.
- Ensure your images are the correct sizes! Another big speed hog is when an image that is too large needs to be resized (shrunk down) by the browser. This is especially true if the image was purchased as a stock photo. Stock photos are usually very large (much larger the will be displayed on a website), if you simply use that huge image on the site in a space where a small thumbnail is required, the browser will first have to download the image, then resize it to fit the page properly. All of this is just wasted time. Opening you large image in a photo editor and simply resizing it to something smaller can prove to be a huge savings in space and in load time. Just remember to resize the image proportionately, you can’t resize a rectangular image into a square as this will result in ugly pixelated images.
- Don’t go crazy with animations and other special effects. One of the things that make Elementor great is that virtually any element can be animated. Each image, paragraph and icon can be set to “bounce in” or fade out or dozens of other cool little flourishes. The problem is besides getting annoying after a while (from a user standpoint) they also tend to bloat the code and slow the pages down. I always recommend using these flourishes but use them sparingly. Highlight important messages with a cool effect but don’t use them everywhere.
- Always Cache! Use a good cache plugin for any WordPress website (regardless of the builder that was used). WordPress sites tend to need to do a large number of database queries and a good cache plugin will allow you to cut down on these, saving you a huge amount of time.
- Use a third party plugin optimization plugin to help optimize the site. Doing things like code minifying (css, javascript and html) can really increase the page load times. You should use a plugin to help you do this but don’t rely on the plugin to work 100% of the time. Some installations won’t behave properly when you start playing with these things. You should make changes incrementally here. Minify the CSS, then cruise the site to ensure everything still works the same. Then move on to the next optimization, set it and test again.
- Defer with caution! Defering javascript and CSS can also have a huge impact on site performance. However, these are also the optimizations that can cause the most trouble on the site. Luckily if deferring does cause an issue, it can be corrected by simply turning it off. It’s crucial you experiment with each setting here and test the site after each setting change.
One last tip, add page caching last, after all of the other optimizations have been installed and fully tested. This will save you a lot of headaches when you’re debugging.
