0

WP Rocket Elementor: How To Make The Most Out Of This Powerful Combination

Brian Bojan Dordevic
About The Author

Brian Decoded

President at Alpha Efficiency

Join me at the forefront of web design and digital marketing innovation. I am obsessed with web design, business philosophy and marketing performance.
I write Conversion Insider newsletter.

You’ve crafted a beautiful website using Elementor, but there’s a problem – it’s slow. This can be a big roadblock standing between you and your website’s full potential.

Integrating WP Rocket with Elementor sounds like the next logical step. But do WP Rocket and Elementor even work well together? What are the best WP Rocket settings for Elementor?

If you’ve already tested this combination and weren’t impressed by the results, don’t give up. 

My 7-figure Chicago web design agency has been using WP Rocket and Elementor together for years to deliver fast, beautiful websites to clients. The key? Finding WP Rocket settings that work best for your Elementor site.

In this guide, I will take you step by step through the process of successfully combining WP Rocket and Elementor. You’ll learn how to speed up your site, enhance user experience, and climb up Google’s ranks. I’ll also cover common WP Rocket and Elementor problems and how to solve them quickly.

You’ll finally achieve top site speeds and make the most out of the WP Rocket Elementor combo.

Table of Contents:
WP Rocket Elementor

Slow Website Speed Can Ruin Your SEO And Push Visitors Away

Before exploring the best Elementor WP Rocket settings, it’s crucial to understand why achieving fast loading times is important in the first place. The benefits go beyond providing a smooth user experience.

Ever since the Core Web Vitals update, Google has considered page speed a significant ranking factor. If your website takes longer than three seconds to load for users, chances are it won’t rank on the first page of search results for too many queries. Even if you manage to attract visitors, you’re likely to face high bounce rates due to frustration caused by slow site speed.

While it’s now evident that site speed and SEO go hand in hand; unfortunately, too many factors affect loading times: the quality of your website code, the number of images on your pages, and much more.

But don’t worry, you didn’t make a mistake by choosing Elementor as your page builder. Due to its design flexibility, Elementor is one of the best no-code solutions out there.

But to truly harness its potential, you might need to take additional steps.

Installing a reliable cache plugin such as WP Rocket is one of the first things to consider.

Using WP Rocket and Elementor Is A Tested Combination To Improve Page Speed

Combining WP Rocket with Elementor has become a trusted strategy to elevate page speed.

But why does the Elementor WP Rocket combination work so well?

To get a clear answer, let’s first learn more about the individual strengths of both Elementor and WP Rocket.

Why Is Elementor A Great Platform For Creating Fast-Loading Websites?

Elementor is the most popular WordPress website builder for several reasons. Many designers love Elementor because it provides drag-and-drop design flexibility for crafting WordPress sites – with no coding knowledge needed.

But Elementor has become a popular choice because it also provides you with multiple features to improve page speed. And if you’re wondering, ‘Is Elementor Pro worth it? – it definitely is due to the additional flexibility it gives you for creating professional websites.

Built-in widgets minimize the need for additional plugins

Too many plugins can choke your Elementor page speed due to additional CSS scripts, JavaScript, etc. – especially if you choose a plugin that’s not optimized for performance.

Elementor solves the problem of having to install too many plugins by providing you with various built-in widgets for key features. For example, there are widgets for:

  • Forms
  • Galleries
  • Sliders
  • Social share buttons

Remember, you only want to have essential addons for Elementor installed. If built-in widgets can solve your needs, I recommend avoiding untested third-party plugins.

Lightweight foundation for your website

If you decide to use Elementor to design a whole website from scratch (or even if you’re performing Figma to Elementor conversion), it’s good to know about the Hello theme this platform provides. It is a lightweight canvas for your designs, ensuring your website isn’t burdened with superfluous CSS or JavaScript. This theme is designed to be lean and efficient, allowing your Elementor creations to shine without being weighed down by unnecessary code.

You Can Use WP Rocket To Make Elementor Sites Load Even Faster

You can make your Elementor site even faster by pairing it with WP Rocket – the most popular cache plugin.

Let’s break down how the WP Rocket Elementor combination works to boost your page speed:

Streamlining Backend Performance with Page Caching

One of WP Rocket’s first actions upon activation is implementing page caching. This feature is a game-changer for backend performance.

Traditionally, each visitor’s request forces your server to process PHP dynamically, which can be time-consuming.

WP Rocket changes this by storing a static HTML version of your pages in its cache. When a page is requested, it’s served directly from this cache, significantly reducing server workload and speeding up page load times.

WP Rocket Offers CDN Integration

WP Rocket also facilitates easy integration with Content Delivery Networks (CDNs).

By using a CDN, your site’s static assets, like images and CSS files, are served to your visitor from the nearest server.

This reduces delivery times dramatically, especially for a global audience. WP Rocket even offers its own dedicated CDN, RocketCDN, optimized for seamless integration and performance enhancement.

Frontend Optimization Features

WP Rocket also offers a suite of frontend optimization features to refine your Elementor designs:

  • Remove Unused CSS: This feature lets you strip away any CSS not needed on a specific page, ensuring that only essential styles are loaded.
  • Delay JavaScript Execution: WP Rocket can delay loading JavaScript files until users interact with the site. This reduces the initial load, speeding up the time it takes for your page to become interactive, including improving metrics like Largest Contentful Paint.
  • Code Minification: By minifying code, WP Rocket removes unnecessary whitespace and characters, streamlining your JavaScript, CSS, and HTML.
Best WP Rocket settings for Elementor

Best WP Rocket Settings For Elementor: A Detailed Guide To Achieving Premium Speeds

Installing WP Rocket for your Elementor site is enough to notice a performance improvement. However, the key to maximizing page speed is experimenting with various web performance optimization techniques and tweaking your Elementor WP Rocket settings to find a perfect combination.

In this section, I’ll share some WP Rocket settings that worked well for my agency. Use these WP Rocket settings for Elementor as a starting point to discover a combination that best suits your unique website.

Cache

Caching is the cornerstone of WP Rocket’s performance-boosting capabilities. Let’s explore how to best configure these settings for optimal results.

Enable caching for mobile devices:

You should always set this to ‘Enabled.’ Mobile traffic is on the rise, and ensuring your site loads quickly on mobile devices is paramount. WP Rocket’s mobile caching feature ensures that mobile users receive the same fast experience as desktop users.

Enable Caching for Logged-in WordPress Users:

This setting is particularly relevant if your site has a user login area. Enabling this option can improve the experience for logged-in users, but it’s crucial to test it thoroughly. If your site includes dynamic user-specific content or complex interactions, enabling this setting might cause issues. In such cases, it’s best to proceed cautiously and monitor the site’s performance closely.

Cache Lifespan:

The Cache Lifespan setting determines how often WP Rocket clears and rebuilds the cache. A value of ‘0’ means the cache is cleared every time you make changes to your site, ensuring that updates are immediately reflected. This is ideal for most sites, especially during development or frequent updates.

However, if your site experiences periodic issues, particularly with dynamic features like AJAX in e-commerce setups, setting this to ’10’ could be more beneficial. It balances performance with reliability, ensuring that your site’s cache is refreshed regularly enough to accommodate dynamic content without overburdening the server.

File Optimization

File optimization in WP Rocket plays a crucial role in enhancing your Elementor site’s performance. It involves tweaking settings for CSS and JavaScript files, which, if done correctly, can significantly speed up your site.

Minify CSS Files

Always enable this option. Minifying CSS files reduces their size by removing unnecessary characters without affecting functionality. It’s rare for this to cause issues, but if something does break, you can easily revert this setting.

Combine CSS Files

Contrary to what you might think, it’s best to keep this disabled. With HTTP/2, combining CSS files isn’t necessary and can actually slow down load times. Additionally, it’s known to cause issues in some cases.

Excluded CSS Files

Generally, you can leave this section empty unless you encounter specific issues with certain CSS files after minification.

Optimize CSS Delivery

This is a setting worth experimenting with. Try both ‘Remove unused CSS’ and ‘Load CSS asynchronously’ to see which yields better performance. Check that your site’s appearance remains unchanged after enabling these. Removing unused CSS can lead to good results, but be aware that optimizing CSS delivery might cause issues with Cumulative Layout Shift (CLS), one of the Core Web Vitals. If you’re skilled in adjusting critical path CSS, you can mitigate this by using the Fallback Critical CSS field. Otherwise, you might want to keep it disabled if it leads to significant CLS issues.

Minify JavaScript Files

Enable this setting, as it’s generally safe and effective. It works similarly to CSS minification, reducing file size and load times. If any issues arise, they’re rare and can be addressed individually.

Combine JavaScript Files

As with CSS, disable this setting. Combining JavaScript files is not beneficial with HTTP/2 and can introduce slowdowns and complications.

Excluded JavaScript Files

If minification causes issues with specific JavaScript files, list them here instead of turning off minification for all files.

Load JavaScript Deferred

Enable this setting. It’s highly compatible with Elementor and shouldn’t cause problems in most cases. If your site uses many plugins and addons, some conflicts might occur. Keep it enabled and exclude problematic JavaScript files as needed.

Delay JavaScript Execution

This is a crucial feature for performance. Enable it for compatibility with Elementor. The fewer exclusions to this rule, the better, especially for elements like jQuery. However, be mindful of JavaScript-dependent elements like sliders or carousels in your hero section, as they may not function properly with this feature enabled. If essential elements rely on JavaScript, you can turn off this feature for specific pages where these elements are used.

Media

Optimizing media, such as images and videos, is crucial to speeding up your Elementor site. WP Rocket offers several features that help in this regard.

LazyLoad

  • Enable LazyLoad for Images: Always turn this on. It ensures that images are only loaded when they’re about to enter the viewport, significantly reducing initial load time.
  • Enable LazyLoad for Iframes and Videos: Similarly, activate this for iframes and videos. It applies the same logic as images, loading this content only when needed.
  • Replace YouTube Iframe with Preview Image: This feature is handy, especially for sites that embed YouTube videos. Replacing the iframe with a preview image reduces the initial load burden, as the full video only loads when the user interacts with it.

Excluded Images or Iframes

This setting is particularly important for your site’s Largest Contentful Paint (LCP), a critical web vital. You need to exclude images that are immediately visible above the fold, such as your logo. These images should load instantly for a better user experience.

For Elementor sites, identifying these images can be a bit tricky since Elementor often adds class names to a parent element rather than directly to the <img> tag. However, it’s crucial to manually identify and exclude these above-the-fold images on all your pages. Remember, if your above-the-fold images are set as background images, they won’t be lazy-loaded, so you don’t need to exclude these.

Add Missing Image Dimensions

If you’re encountering CLS (Cumulative Layout Shift) issues related to image dimensions, enabling this feature can help. It automatically adds width and height attributes to your images, stabilizing the layout during loading. However, if your CLS score is already zero, it’s better to leave this feature disabled to avoid unnecessary modifications to your images.

Preload

By preloading pages and resources, WP Rocket ensures that users don’t have to wait for content to load, especially for key pages and elements. Here are the best WP Rocket settings for Elementor in this regard:

Preloading is another powerful feature in WP Rocket that can significantly improve the performance of your Elementor website. Let’s delve into how you can optimally configure these settings.

Activate Preloading

Always enable this. Preloading kickstarts the caching process by generating the cache starting with your homepage and then following links found within. This ensures that the first visitors to your site after cache clearance experience fast load times.

Activate Sitemap-Based Cache Preloading

Enabling this option allows WP Rocket to use your sitemap to identify and preload important pages on your site. If you’re using an SEO plugin like Rank Math, which generates a sitemap for you, be sure to enable the corresponding option (e.g., ‘Rank Math XML sitemap’).

Enable Link Preloading

This setting should be enabled as a standard. Link preloading anticipates the user’s next move by preloading pages when a user hovers over a link. This can significantly reduce load times when navigating your site.

URLs to Prefetch

Here, you can add external domains that your site frequently interacts with. Prefetching these URLs can slightly boost performance, but it’s a nuanced feature. If you’re unsure about what to add here, it’s safe to leave it empty, as the performance gains are generally modest.

Fonts to Preload

Preloading your primary above-the-fold fonts can significantly improve how quickly text content is visually ready. Identify these fonts using Chrome’s Developer Tools in incognito mode, filtering for fonts in the ‘Network’ tab. Add the URLs for these fonts to WP Rocket’s preload list, focusing on WOFF2 formats for their balance of performance and compatibility.

Advanced Rules

The ‘Advanced Rules’ section in WP Rocket is a bit like a toolbox for specific scenarios that require a tailored approach. This feature allows you to set up custom rules for caching, which can be essential for certain types of websites or specific functionalities.

What you’ll need to input here largely depends on the unique characteristics and needs of your Elementor site. For most standard websites, especially those using Elementor for straightforward content delivery, you don’t need to make any changes in this section.

However, there are scenarios where ‘Advanced Rules’ become crucial. For example, if your site includes:

  • Dynamic content: Areas of your site that change frequently or are user-specific, like a custom user dashboard.
  • E-commerce functionalities: Particularly for shopping carts, checkout pages, or user-specific product recommendations.
  • Membership areas: Where content is exclusive to logged-in users.

In these cases, you may need to set up rules to exclude certain pages from being cached or to handle cookies differently.

Incorrect configurations can lead to unexpected behaviors, such as caching issues or content not displaying as intended. If you’re unfamiliar with how caching exceptions work, it might be wise to consult with a professional or contact WP Rocket’s support for guidance specific to your website’s setup.

CDN

The Content Delivery Network (CDN) setting in WP Rocket is a strategic feature for optimizing your Elementor site’s global reach and performance. Understanding when and how to use a CDN can significantly affect your site’s load times, especially for a diverse, geographically spread audience.

A CDN works by caching your site’s static content (like images, CSS, and JavaScript files) on a network of servers around the world. When visitors access your site, the CDN serves this content from the server closest to them. This drastically reduces load times, as the data has less distance to travel.

I highly recommend implementing a CDN if your website caters to an international audience.

Heartbeat

If your website is hosted on a server with limited resources, or if you’ve noticed high CPU usage, which you suspect might be related to the Heartbeat API, enabling WP Rocket’s ‘Control Heartbeat’ feature can be beneficial. This feature allows you to manage the frequency of the Heartbeat API’s pulses, reducing their impact on server resources.

For most Elementor sites, sticking with the default settings provided by WP Rocket is a good starting point. These defaults are designed to balance functionality with performance.

While controlling the Heartbeat API can improve server performance, it can also affect WordPress functionalities like autosave and user session management. If you’re unsure about the best settings for your site, start with the defaults and closely monitor your site’s performance and functionality.

Addons

Each addon in WP Rocket serves a particular purpose, and it’s important to enable only those you truly need. Overloading your site with unnecessary addons can lead to complications or even hinder performance, so it’s crucial to choose wisely.

Image Optimization

While WP Rocket doesn’t offer built-in image optimization, it’s compatible with various image optimization tools and plugins. One such tool is Imagify, which was developed by the same team behind WP Rocket.

When using an image optimization tool like Imagify, you can expect features such as:

  • Automatic Compression: Reduce the file size of your images without manual intervention.
  • Bulk Optimization: Optimize all existing images on your site in one go.
  • Adaptive Sizing: Resize images based on the dimensions in which they are displayed on your website.
  • WebP Conversion: Convert images to the WebP format, which offers better compression and quality characteristics compared to traditional formats like JPEG and PNG.
  • Lazy Loading Integration: Combine image optimization with lazy loading (a feature already present in WP Rocket) for even faster load times.

I recommend using image optimization, regardless of whether your Elementor site contains many images or not. It’s an excellent way to gain additional page speed without sacrificing quality.

Tools

One of the primary uses of the ‘Tools’ section is to back up and import WP Rocket Elementor settings.

If you’re optimizing a staging version of your Elementor site, you can perfect your WP Rocket settings in this controlled environment.

And if you manage multiple websites with similar optimization needs, the ability to export and import settings can be a massive time-saver. However, always review and test settings after importing them to ensure they are fully optimized for each unique Elementor site.

While the backup and import functionality is the highlight, the ‘Tools’ section may also include other utilities, like clearing the cache or checking file permissions. These tools can be helpful for routine maintenance and troubleshooting.

Potential problems this combination might cause and how to solve them

Potential WP Rocket Elementor Problems And How To Fix Them

While WP Rocket Elementor work together perfectly in most cases, there are several WP Rocket Elementor problems some users report.

Luckily, it’s easy to fix them. In this section, I’ll go over potential WP Rocket problems and show you how to resolve them within minutes.

Delay JavaScript problems in WP Rocket Elementor Combination

A common challenge when using WP Rocket with Elementor is the ‘Delay JavaScript execution’ feature, which can sometimes interfere with the loading of Elementor modules. Understanding how to address this issue can ensure your website’s smooth, seamless operation.

When enabled, the ‘Delay JavaScript execution’ feature can occasionally cause layout issues or delay the loading of certain Elementor modules. This is because the feature prevents JavaScript files from loading until there’s user interaction, which can affect dynamic elements like navigation icons or tables of content.

Elementor nav icon needs two clicks on mobile devices

A specific issue you may encounter when using WP Rocket and Elementor is related to navigation icons on mobile devices. Typically, this manifests as the navigation icon requiring two clicks instead of one to function correctly. This can frustrate your mobile visitors, but fortunately, there’s a straightforward fix.

  1. Identify the JavaScript Function: Determine the specific JavaScript function or file that controls the Elementor navigation icon. This might require a bit of digging into Elementor’s code or consulting documentation.
  2. Add a Custom Code Snippet: Once you’ve identified the relevant JavaScript, you can add a custom code snippet to your site that ensures this JavaScript is executed immediately. This code can be added to your theme’s functions.php file or using a plugin like Code Snippets for better management.
  3. Adjust the Code for Your Design: Within this script, there might be a need to adjust specific values, such as an offset value (e.g., ’58px’), to align the icon correctly within your site’s design. This value determines the icon’s position relative to the top of the viewport.
  4. Exclude the Custom Function in WP Rocket: To ensure this script runs immediately on mobile devices, add the function name (e.g., ‘ElementorNavFallBackFunction’) to the ‘Delay JavaScript execution’ exclusions in WP Rocket. This ensures the script is not delayed and the navigation icon functions correctly from the first click.
  5. Test Thoroughly: After implementing these changes, it’s crucial to test the navigation icon on various mobile devices to confirm that the issue is resolved and the icon responds to the first click.

Table of contents not being generated

A specific issue that might arise when using WP Rocket with Elementor is the non-generation of the table of contents on page load. This feature is not only beneficial for navigation but also important for SEO, as a properly loaded table of contents can be recognized by search engines, enhancing your content’s discoverability.

Again, the problem typically occurs due to the ‘Delay JavaScript execution’ feature in WP Rocket, which can delay the loading of JavaScript responsible for generating the table of contents.

To resolve this, you can use a custom code snippet that ensures the table of contents loads correctly without needing to exclude numerous JavaScript files related to Elementor and jQuery. Here’s how to approach it:

  1. Add a Custom Code Snippet: Create a custom JavaScript function that explicitly handles the table of contents functionality. This code can be added to your theme’s ‘functions.php’ file or via a Code Snippet plugin. The code should ensure that the table of contents is initialized and displayed as soon as the page loads.
  2. Customize the Selector: Within your custom JavaScript, you may need to adjust the selector to match the one used in your Elementor Table of Contents widget. For example, if the default selector is ‘.content_of_post’, replace it with the one that corresponds to your specific layout or content structure.
  3. Exclude the Function in WP Rocket: In the WP Rocket settings, under ‘Delay JavaScript execution,’ add the identifier of your custom function (e.g., ‘TableofContentContainer’) to the exclusions list. This ensures that the script responsible for the table of contents is executed immediately.
  4. Test Your Table of Contents: After applying these changes, thoroughly test your site to ensure that the table of contents is loading correctly and is visible on page load.

Problem with Elementor sticky effect

A specific issue that might occur when using WP Rocket with Elementor involves the sticky effect – a feature in Elementor that allows elements to stay fixed on the screen while scrolling. This problem can arise mainly due to the ‘Load JavaScript deferred’ feature in WP Rocket, which might interfere with the proper functioning of Elementor’s sticky elements.

The ‘Load JavaScript deferred’ feature in WP Rocket optimizes your website’s performance by delaying the loading of JavaScript files until there’s user interaction. However, this optimization can sometimes disrupt the functionality of certain JavaScript-dependent features in Elementor, such as the sticky effect.

To resolve this issue, you can exclude certain JavaScript files from being deferred. This ensures that the scripts necessary for Elementor’s sticky effect are loaded immediately, maintaining the functionality of your sticky elements. Here’s how to do it:

Step 1: Identify Necessary Scripts – Determine the scripts that are essential for the sticky effect in Elementor. These typically include jQuery scripts and Elementor’s own sticky script.

Step 2: Add Exclusions in WP Rocket: In the WP Rocket settings, navigate to the ‘Load JavaScript deferred’ section. Add the following paths to the deferred exclusions box:

jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js /jquery-migrate(.min)?.js /elementor-pro/assets/lib/sticky/jquery.sticky.min.js

Step 3: Apply the Same Exclusions to Delay JavaScript Execution – If you have the ‘Delay JavaScript Execution’ feature enabled in WP Rocket, add the same exclusions there as well. This ensures consistent behavior across both optimization features.

Step 4: Test Your Sticky Elements – After making these changes, thoroughly test your website to ensure the sticky elements function correctly as you scroll.

The excluded scripts are crucial for the sticky functionality. By ensuring that they load without delay, you preserve the intended behavior of sticky elements on your site. This approach strikes a balance between optimizing your site’s performance and maintaining its interactive features.

Elementor editor doesn’t load when using WP Rocket

A notable issue that may arise when combining WP Rocket with Elementor is the Elementor editor failing to load, often resulting in a blank page. This problem can be particularly frustrating when you’re trying to edit your site.

This issue typically stems from a resource allocation conflict. Essentially, your server might be struggling to handle both WP Rocket’s optimizations and the demands of the Elementor editor simultaneously. When the server’s resources are stretched too thin, it can prevent the Elementor editor from loading properly.

Solution: Increase PHP Memory Limit

I recommend increasing the PHP memory limit for your WordPress site. This provides more resources for WP Rocket and Elementor to function correctly, especially when used together. Here’s how to do it:

  1. Access Your Site’s ‘wp-config.php‘ File: This file is located in the root directory of your WordPress installation. You can access it via FTP or your hosting control panel’s file manager.
  2. Modify the PHP Memory Limit: Look for the line that defines the WP_MEMORY_LIMIT. If it’s not present, you can add it yourself. The line should look something like this: define(‘WP_MEMORY_LIMIT’, ‘256M’); – The ‘256M’ is the memory limit value, which you can adjust based on your needs and server capacity. Increasing it to ‘256M’ (256 megabytes) or higher is often sufficient to resolve the issue.
  3. Save Changes and Test: After making this change, save the ‘wp-config.php‘ file and re-visit your Elementor editor to see if the issue is resolved.

By increasing the PHP memory limit, you’re essentially giving more breathing room for both WP Rocket and Elementor to operate, which should alleviate the issue of the Elementor editor not loading.

If you’re unsure about changing the memory limit or if your hosting environment has specific restrictions, it’s a good idea to consult with your hosting provider.

Remember, be mindful of the balance between performance optimizations and resource usage. Over-optimizing can sometimes lead to issues like this, so finding a middle ground that works for your specific site and hosting setup is essential.

Ready To Master Elementor And Start Building Million-Dollar Websites?

Do you find yourself comfortable with the basics of Elementor but unsure how to leverage it to create truly standout, revenue-generating websites?

You see others creating captivating, high-converting sites and wonder, “What are they doing differently?

I’m excited to invite you to explore my specialized Elementor course designed for ambitious web designers and agency owners.

In this course, you’ll discover advanced techniques and insider secrets that go beyond basic Elementor functionality. I’ll show you how Alpha Efficiency sets up premium Elementor sites for clients, from initial design to hosting.

Whether you’re aiming to boost your freelance career, grow your web design agency, or simply create stunning websites for your portfolio, I’ll show you unique strategies I’ve used during over a decade-long journey to build profitable Elementor sites.

Check out my Elementor course and gain the necessary knowledge to start building million-dollar digital experiences.

Portfolio

Fresh inspiration is a fingertip away,
Download Our Portfolio.

Download Our Portfolio