WP + Elementor Passing Core Vitals

Page load speed has a significant impact on your conversion rates. If you have run a Lighthouse page speed test, you have probably seen these stats:

“Walmart saw 1% increase in revenue for every 100ms improvement in page load.”

Source: WPO Stats

“Rebuilding Pinterest pages for performance increased conversion rates by 15%.”

Source: WPO Stats

These stats clearly show how page speed affects your conversion rate and, ultimately, your bottom line. Decreasing page load times can garner immediate results. As of 2020, Google incorporated “User Experience” as a factor into its search algorithm. Google Core Web Vitals scores pages on their mobile-friendliness, security, and intrusive interstitial guidelines, to provide a holistic picture of page experience.

We develop on many platforms, and no “one size fits all” CMS exists. Our clients want to control every aspect of their websites. With the popularity of WordPress and the fact that 90% of website administrators and content contributors have experience with WordPress, it is often the go-to solution for many web designers. But WordPress has its disadvantages for sure. It can be bulky and drastically hurt your numbers, especially if your business relies on a steady stream of conversions. This is compounded by the plugins you add to your site. Plugins can make it easy to add a new feature or report on a specific metric, but this “ease” often leads to slow load times and a bad user experience.

In addition to WordPress, many clients want a page builder solution like Elementor. Elementor is a great tool. Recently on-boarded users can use its drag-and-drop interface to create numerous landing or campaign pages with dynamic content, animations, and more. But this, too, adds to the overall bulk of the page and often leads to slow page loads. WordPress and Elementor have significantly improved performance by adding features, including smart asset loading, DOM optimization, and lazy loading. Even with these improvements passing Web Core Vitals is still challenging.

Unfortunately, this typically leads to the web administrators installing numerous optimization plugins and paying for other services that are not only expensive but also tend to do the opposite and drain the site of resources. We had a client install four optimization plugins that all intended to do the same on a single place. The site slowed it to a crawl, and the caching grew so large it triggered auto-scaling.

What we have learned

#1 Don’t skimp on hosting

Is your site running slow? How much do you pay for hosting? $9 a month hosting may seem like a great value, but often these plans will cost you money in the long run, either in lost sales or additional development charges. If you want a fast website and to pass Core Vitals, choose an excellent hosting partner.

#2 Pick the right caching solution

You can have all three:

1. A content-rich site
2. A CMS that is easy to use and create content in
3. A site that loads fast and passes Core Vitals

Many hosting providers have caching systems optimized for different platforms. We recommend WPEngine to our clients that use WordPress. WPEngine is optimized for WordPress and includes features like Advanced Networking, Object Caching, and Page Compression built in.

If you operate a larger site, consider hiring an engineer to design a custom solution, you won’t regret spending the extra money.

What we use for smaller sites running WordPress and Elementor

As mentioned above, we use WPEngine for hosting. We enable Advanced Network that leverages CloudFlare’s CDN and performance features. In addition, we use WPRocket, mainly for file optimization. In the past, we used a combination of 3 plugins, but recent updates made by the WPRocket team have made it unnecessary.

WPRocket setting with Elementor:

1. Enable separate cache for mobile
2. Minify CSS files
3. Combine CSS
4. Optimize CSS delivery (We add our own critical css)
5. Minify JavaScript
6. Combine JavaScript
7. Delay JavaScript execution (Excluding theme scripts)
8. Enable Lazy Load (Excluding images at top of page)
9. Add missing image dimensions
10. Activate preloading
11. URLs to prefetch (any google domains)
12. Preload Fonts (all external fonts)

Elementor performance settings:

1. Improved CSS Loading – ON
2. Inline Font Icons – ON
3. Optimized DOM Output – ON
4. Optimized DOM Output – ON

In addition:

We disable Google Fonts and Fontawesome programmatically

// Disable Google Fonts in Elementor
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' ); 

We add these on our own. For Google Fonts, we strip out unused characters and font weights/styles. For Fontawesome, we download the used icons and load them as SVGs. Web Core Vitals is very picky on fonts, so we try and limit using non-system fonts.

In addition, all content changes are made on a staging server and pushed to production using our StageToProd plugin to push individual pages from staging to production. Working on staging keeps admin traffic off the production server and limits cache rebuilding and preloading. We have noticed that preloading impacts Web Core Vitals overall score. If your site has low traffic, preloading your content multiple times a day will lower the percentage of pages loaded within the Web Core Vitals thresholds.

Ready to talk? Reach out If your company needs help decreasing page load time and passing Web Core Vitals. WWC has helped numerous businesses just like yours.

Not ready to talk? That’s OK. We will post additional articles on how you can improve your WordPress site load times.