If youâre reading this post, youâve probably already started on the journey of acing the popular website speed tests like GTMetrix and Google Page Insights. Finding the perfect combination of host/plugins while not breaking the bank and not breaking your site can be a pain.
Iâve already broken my clientâs sites hundreds of times, so you donât have to break yours.
Iâve found THE combination. When configured properly, you can see under 1-second load times (this one loads in under 500ms on a good day, without a CDN).
Speed Up Elementor With Better Hosting and Caching
A great web host, to me, needs to offset some of the cost and maintenance time of plugins you would otherwise need (staging/backups) while providing the best speed possible. If youâve been around the block, youâre thinking Kinsta! Yes, they are great, but they are also around $30mo per site. Iâve tried many popular choices and found these are the best bang for your buck.
Cloudways Cloudways is my host of choice. Iâll write a whole post in the future on it, but to sum it up, as of the time of writing, it is one of the cheapest, for the least amount of maintenance time required, to get the most amount of tools, and somehow still offer blazing fast servers.
FlyingPress is why weâre here. This is the secret component to getting speed. Itâll likely work well with whatever host youâre currently using, but for this post, Iâve run tests paired with Cloudways VULTR High-Frequency servers.
Cloudways Settings
Cloudways offers several server types, but this guide uses the Vultr High-Frequency servers. The lowest tier plan is around $12mo, and you can host several sites. This guide wonât go over launching an application, but if youâve never done so, itâs a very easy process that even offers a migration tool for importing your site.
- Enable Redis
This can be enabled within the âManage Servicesâ tab located in your serverâs settings. You can read more about Redis on Wikipedia, but in short, itâs another form of caching. - Set Memory Limit to 256MB or greater
This can be changed within the âSettings & Packagesâ tab from the Server Management area within Cloudways. - Use PHP 8.0 or greater
Depending on the size/traffic of the site, this alone can have a significant performance increase, especially if youâre upgrading from earlier than PHP 7. - Use MariaDB 10.4 or greater
If youâve been on Cloudways, youâre probably already using MariaDB 10.4 since itâs the minimum allowed, but if youâre migrating a site over, this may change for you.
FlyingPress Settings
FlyingPress offers similar optimizations and improvements as the more popular WPRocket, without bloating/upselling you on the backend. The âDelay Scripts on User Interactionâ is the star here, but weâll get into it further down.
Cache Settings
- Enable Cache Pages
In most cases, you will want this enabled, but if youâre using a CDN that is performing its own caching, it may be best to leave this disabled. - Additional Auto Purge â All Posts and Pages
Additional Auto Purge will determine what gets an automatic cache clear whenever you update content. I manually clear pages as I update them, but I wouldnât recommend it. - Cache Lifespan â Never
If youâre updating content daily, you may want a lower amount here, but if youâre only updating every few days/weeks, itâs best to leave with never.
CSS Settings
- Enable Minify & Optimize CSS Files
This will reduce the CSS file sizes. - Generate Critical and Used CSS
This one takes some work to perfect but can have a HUGE impact on load speeds. - Load Unused CSS
Remove will give you the lowest file size, but it may cause display issues.
On-user interaction is the next step to try if Remove breaks your site.
Asynchronously is the safest bet. I usually go with this unless Iâm trying to push the limits. - Lazy Render HTML Elements
This is where youâll want to enter CSS selectors to lazy load in. A great example of this is usually your footer. I use it on home pages that have a few blogs featured at the bottom of the page.
JavaScript Settings
- Enable Minify JavaScript
This will reduce the JS file sizes. - Enable PreLoad Links â Optional
This is good for page speed but can wreak havoc on a web server if you have tons of images and content. Run a test for a few days if you enable it. - Enable Defer JavaScript
This defers the loading of JavaScript after HTML is parsed. It can help with CLS issues. - Defer Inline JavaScript
- Load Scripts on User Interaction
This is the secret sauce. This is where you can delay loading anything that is not needed above the fold of the website. Usually, tracking scripts or any JS that isnât in the header.
Font Settings
- Enable Optimize Google Fonts
I try to avoid using Google Fonts, but in the rare case you start using them, this can load every font and style locally, so you donât have to do that manually. - Enable Display Fallback Fonts
Prevents font from loading slowly or flashing while your Google font is downloaded.
Image Settings
- Enable Lazy Load Images
You may be lazy loading images another way already or by default, but Iâve found leaving this checked gets the best results. Be sure to add any above-the-fold images to the Exclude Images from Lazy Load box. - Enable Width and Height Attributes
- Enable Preload Critical Images
- Enable Disable Emoji
When optimizing a website, itâs important to adjust the base settings based on the complexity of the site and the other plugins and services being used. This may involve disabling certain features, adding custom code, or changing settings in the caching plugin.
Additionally, additional tweaks may be needed based on the type of content being served, the hosting environment, and the specific performance goals of the site. Itâs important to continually monitor the websiteâs performance and make adjustments as needed.
