Automatic Lazy Rendering

The Automatic Lazy Rendering feature delays the rendering of distant elements from the fold, in order to display the above the fold elements faster.

Those below the fold elements will be rendered only when visitors scroll down the page.

This optimization is automatically enabled upon WP Rocket activation, therefore, it doesn't have any option or button in the settings page.

Heads up! The process of detecting which elements need to be lazily rendered is automatic but not immediate, it's asynchronous.

To make sure the whole process happens as automatic and as fast as possible, use the Remove Unused CSS option.

The lazily rendered elements are part of the Priority Elements of WP Rocket.

In this article, you can find more information about this feature, how to check if it's working, how to fix common issues, and other relevant information.

Feature overview

The Automatic Lazy Rendering option automatically detects the elements distant from the fold, then uses CSS to instruct the browser to delay their rendering until the visitor scrolls down the page and the elements are within the viewport.

This optimization is applied only to the following HTML elements:

div
main
footer
section
article
header

Different lazily rendered elements for mobile and desktop

To provide an accurate delaying of the elements, the mobile and desktop versions of a page are processed, and their specific elements are optimized independently.

This behavior depends on the Mobile Cache option, which creates a mobile-specific version of the cache by default. Therefore, the Mobile Cache option, and its mobile-specific behavior, should not be deactivated.

Asynchronous approach

The Automatic Lazy Rendering option works asynchronously this way:

An identifier will be added to the elements of a page.
Also, a script will be injected to the page.
Upon a visit, WP Rocket executes the script that detects which of the identified elements are distant from the fold.
The next time the page is cached, the markup of below the fold elements will be modified, and they will be lazily rendered.

Feature benefits

The goal of the Automatic Lazy Rendering feature is to speed up the process of rendering the page, providing users a faster perceived loading time, and give better chances to respond faster to interaction.

Elements which are not critical on a page, such as the footer, will only be rendered if the user scrolls down the page and really needs to see them.

Benefits for PageSpeed/Lighthouse

With this feature, you can expect certain improvements around these metrics and audits:

Note! The improvements are especially noticeable on pages that contain several elements that had been lazily rendered.

How to check if Automatic Lazy Rendering is working

Here's how you can tell if the elements of a page are still being processed, or if they are already optimized by the Automatic Lazy Rendering feature.

The page is being processed

If the optimization of a page has started, the HTML elements of the page will use the data-rocket-location-hash attribute, with a unique value, like this:

<div data-rocket-location-hash="aa11bb22" class="wp-block-group" style="padding-top:0" >

The aa11bb22 unique value is a hash that identifies each element.

Also, the wpr-beacon.min.js script will be present in the source code.

The script can be found with following markup:

<script data-name="wpr-wpr-beacon" src='https://yoursite.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script>

If the elements of a page use the data-rocket-location-hash attribute, or a page contains the wpr-beacon.min.js script, it means the optimization has started.

The page is already processed

Then, you can tell if the page was already processed when the HTML elements, which are effectively located below the fold, use the data-wpr-lazyrender="1" attribute.

An element that is lazily rendered has the following markup:

<footer data-wpr-lazyrender="1" class="wp-block-group">

Additionally, this inline CSS block will be added to the page, which is used for the browser to execute the lazy rendering:

<style id="rocket-lazyrender-inline-css">[data-wpr-lazyrender] {content-visibility: auto;}</style>

Elements with the data-wpr-lazyrender="1" attribute have been correctly lazily rendered.

Automatic clearing of lazily rendered elements

WP Rocket will automatically clear the lazily rendered elements:

When permalinks are changed, all the elements will be purged.
When the theme is switched, all elements will be cleared.
When updating the post, the post-specific elements will be cleared. This doesn't apply for the elements in the related pages.

Manual clearing of lazily rendered elements

When you make manual changes to the content of your pages, you should manually clear the elements via the WP Rocket toolbar menu.

To clear the elements of all your site, from the top menu you can click on the button called Clear Priority Elements, this one:

clear-priority-elements-button

To clear the elements of a specific post, you can click on the Clear Priority Elements of this URL, like this:

clear-priority-elements-of-this-url-button

Note: This action will clear the lazily rendered elements, as well as the other Priority Elements.

How to exclude elements from this feature

In case you need to exclude certain elements from this optimization because they are being negatively affected by it, you can use the following helper plugin:

📥 Download (.zip): WP Rocket | Exclude specific elements from Automatic Lazy Rendering
Developers: You can find the code for this plugin on GitHub.

Heads up! Manual code edit required before use!

After downloading the plugin zip file, unzip it and open the PHP file in a text editor.
Look for the attributes of the HTML tag you want to exclude, and choose any attribute that's unique.

Replace this line with the real element attribute you want to exclude:
```
$exclusions[] = 'main-footer"';
	
```
If you need to exclude more elements, you may keep adding as many lines as necessary.
After making your edits, save the PHP file and re-zip the plugin.
In your WordPress site, go to Plugins > Add New > Upload Plugin and upload the zip file.
Activate it and clear the cache.

How to deactivate this feature

If this optimization causes problems, and you want to deactivate it, please install and activate the following helper plugin:

📥 Download (.zip): WP Rocket | Disable Automatic Lazy Rendering
Developers: You can find the code for this plugin on GitHub.

Alternatively, you can add to your site the following snippet:

add_filter( 'rocket_lrc_optimization', '__return_false' , 999);

Known conflicts

Additional layers of cache that don't differentiate between device type

If the site is using additional layers of cache that don't differentiate between mobile and desktop devices, this optimization may have problems when detecting and optimizing the below the fold elements.

As a result, it's possible that the mobile-specific elements appear optimized in the desktop version of the page, or the other way around.

Solution: The only known solution is to deactivate any layers of cache that don't use specific cache for device type.
Lazily rendered elements are mixed up for mobile and desktop

This problem can happen if the Mobile Cache option, and/or its mobile-specific cache feature, are deactivated.

Solution: Ideally, enable the Mobile Cache option again. However, if the Mobile Cache, or its mobile-specific cache feature, need to be kept deactivated on a site, the Automatic Lazy Rendering feature should be deactivated too. You can do this with this helper plugin.

Troubleshooting

If the wpr-beacon.min.js script is correctly added to a page, but the elements are not optimized yet, a common solution is to clear the cache of WP Rocket and any other cache layer(s) running on the site.

If clearing the cache doesn't help, it could be that the script wasn't executed yet. In this case, make sure a visit is being made within the required dimensions.

Technical notes

The data collected by this feature is stored in the wpr_lazy_render_content table.
The HTML elements will be processed when their depth is maximum 3 starting from the body element.
The HTML elements will be lazily rendered if they are located at a 1800px distance below the fold.
The Action Scheduler task, called rocket_job_warmup, will be created to fetch the mobile homepage and send each of the 10 URLs to the pre-warmup process.
You can find more technical details here.

If you have additional questions, you can contact WP Rocket's support team.