If you're looking for a protocol or step by step guide to increase your Elementor websites speed, this resource is for you.
These are the same steps used when our agency creates sites with Elementor or runs a SpeedOpp Service. Follow them in the same order as listed, and your website will be loading quicker in no time.
Before even beginning your optimization, get educated! Post your site in the groups and get professional feedback. Read the book and understand exactly what Google PageSpeed is telling you.
This section reviews the tools and services that we use before even logging into our Elementor site. Use off site optimization to ensure a strong foundation.
Elementor needs a high quality web host to load quickly. Budget and shared hosting plans just don't cut it. Companies that offer this style of hosting are Bluehost, GoDaddy, Hostgator and more. Basically, if you're paying under $5/month for hosting, that's your biggest problem.
Moving to cloud hosting will offer much more power at a similar price point. We recommend the $10 month-to-month plan offered by Cloudways. (Get 30% off 1 month with the promo code "ISOTROPIC".) It offers more then enough power to make your Elementor site load much faster (here are stats to back that up).
Optional, but free, Cloudflare offers you many tools to speed up the delivery of your site. They offer a free CDN, SSL, DDoS Protection, Brotli compression, and play nice with other plugins used in this checklist. All you need to do is change your name servers, and everything else is handled automatically. We use them on all client websites, as well as our own.
It's also great for DNS management. TTL happens in seconds, not hours, and Coudflare is the fastest DNS provider in the world, with the fastest speed overall for any DNS provider.
To figure out exactly what's wrong with your site, run it through an auditing tool. We like Google PageSpeed or GTMetrix. Enter your domain and run a test. The tools will isolate exactly what is wrong with your site. From there, you'll know exactly what deserves the majority of your focus.
Now we're going to take a look at on-site optimization, which requires the installation of plugins and speed optimization tools to make Elementor load as fast as possible.
The caching solution is the most important plugin to install in your site. For this, we recommend WPRocket. This is a paid plugin, but blows all free solutions out of the water.
Install it, and caching is automatically preloaded and integrated into your site.
In WP Rocket, under "File Optimization", simply activate HTML Minificaiton, and then activate "Merge" and "Minify" for both CSS and JS.
This works well with Elementor, reduces HTTP requests, and Eliminates Render Blocking resources.
To make the most of WP Rocket (a crazy powerful tool), follow this guide: Commonly Failed PageSpeed Audits And How To Fix Them
There are a few steps to do this, but this article should simplify it:
How To Preload Elementor Fonts
Basically, find the URL of the font file, and paste it into the respective field in WP Rocket or Asset Clean Up.
We use a plugin called ShortPixel. After installing, you can bulk optimize all images in one go. What this does is automatically compress and resize them to ensure maximum quality, but minimum file size.
This also comes with an image CDN which is automatically configured. This has a noticeable impact on image loading times (measured by Fast Or Slow) for visitors who are geographically distant from your server.
With ShortPixel, you can automatically convert JPG/PNG to WebP for free. These images are served on browsers that support them, while the optimized fallback images are served on legacy browsers.
Serving images in WebP format can cut seconds off the loading time of your website.
Using Asset Cleanup or Plugin Organizer, disable plugins on pages where they are not used. This reduces requests, limits the load on your server, and transfers less data when your page loads.
As an example, only allowing Gravity Forms to load on a contact page means less data transferred when loading the homepage or blog page.
This is especially helpful if you're running WooCommerce on your site.
Using Asset Cleanup "unload" all CSS Files, JavaScript and Fonts that aren't required to load the individual page (or range of content, like blog posts). This decreases the amount of data transferred, and minimizes the requests the browser needs to make to the server.
Learn more here: How To Identify And Remove Unused CSS for WordPress Websites
Using Flying Scripts, delay the loading of third party scripts like Stripe, HubSpot, FB Pixel and more. This speeds up the initial loading time of your Elementor page.
Learn More: How Do I Speed Up Scripts Like GA and FB Pixel On WordPress?