---
title: "How to Add SEO-Friendly Lazy Loading in WordPress?"
url: https://nexterwp.com/docs/add-seo-friendly-lazy-loading-in-wordpress/
date: 2024-12-19
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "Ordinary lazy loading holds content back until the visitor scrolls to it. That helps the page load, and it can hurt you in search, because a crawler that does not..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-SEO-Friendly-Lazy-Loading-in-WordPress_-1024x519.jpg
word_count: 640
---

# How to Add SEO-Friendly Lazy Loading in WordPress?

## Key Takeaways

- Nexter Blocks Lazy Rendering (SEO Friendly) lets WordPress sites lazy load content while web crawlers can still see the entire content, even when it is not fully rendered in the front end.
- Nexter → Extra Options → Settings includes a Lazy Rendering (SEO Friendly) section where the toggle is enabled to activate the feature.
- nxt-lazy-load is added in the parent container’s ADDITIONAL CSS CLASS(ES) field, and the content loads as it enters the viewport instead of during the initial page load.

Ordinary lazy loading holds content back until the visitor scrolls to it. That helps the page load, and it can hurt you in search, because a crawler that does not scroll may never see it.

Lazy Rendering takes a different route: the content is in the HTML from the start, inside a `noscript` tag, so crawlers read it — and the browser swaps it in when the reader arrives.

## Before You Start

- **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **The Lazy Rendering setting must be switched on first**, under **Nexter > Extra Options > Settings**. Please read the warning below before adding the class.- A block heavy enough to be worth deferring — a long listing, a gallery, an embed.

> *Switch the setting on before you add the class to any block. Measured on Nexter Blocks 5.0.6: adding the class while the setting is off still wraps your content in a noscript tag, but the script that reveals it is never loaded, so visitors with JavaScript enabled see nothing at all.*

## Steps

- Go to **Nexter > Extra Options > Settings** and switch **Lazy Rendering** on.

![Enabling the Lazy Rendering setting](https://nexterwp.com/wp-content/uploads/2024/12/lazy-rendering-activation-new.png)

- Select the block you want to defer.

- Add the class `nxt-lazy-load` to it, in the Advanced tab's additional CSS class field.

![Adding the nxt-lazy-load class](https://nexterwp.com/wp-content/uploads/2024/12/lazy-rendering-feature.gif)

- Publish, then scroll the real page to the block.

- Check the page source to confirm the content is present for crawlers.

## How It Behaves

The class changes how the block is written into the page, and a small script swaps the real content in as the reader approaches.

- **Measured on a published page:** a block carrying `nxt-lazy-load` rendered as `<div>` with the whole of its normal output inside a `<noscript>` tag. Without the class the block rendered normally.- **That is what makes it SEO friendly.** The content is in the HTML the crawler receives; it is not fetched later.- **The reveal script is separate.** Measured: with the setting enabled the page loaded `tpgb-ajax-load.min.js`; with the setting off that script was absent.- **It is free** — measured with Nexter Blocks Pro deactivated, the wrapper still rendered.- **It is a class, not a toggle**, so it can be applied to any block that supports additional CSS classes.

## Limitations

- **The setting and the class are two separate steps**, and getting only the second one done hides your content. See the warning above — this is reported to the development team.- **Do not use it above the fold.** Deferring the first thing on the page delays what every visitor sees and can hurt your loading metrics rather than help them.- **The content still downloads with the page.** This defers *rendering*, not the transfer, so it saves layout and paint work rather than bandwidth.- **Anything inside relying on load-time JavaScript may need care**, because it is not in the live document until the swap happens.- **Check the swap on a slow connection.** A visible flash as content appears is worse than not deferring at all.

## Troubleshooting

### My content has disappeared

Almost certainly the class is on the block but the Lazy Rendering setting is off. Measured: the content is wrapped in a noscript tag with no script loaded to reveal it. Switch the setting on, or remove the class.

### It is not deferring anything

Check the class is spelled exactly `nxt-lazy-load` and sits in the additional CSS class field of a Nexter block.

### Will search engines still see the content?

Yes. Measured, the full output is present in the HTML inside a `noscript` tag, which is the point of this feature. View the page source to confirm on your own site.

### There is a flash as the content appears

The swap is happening too late. Apply it further down the page, where the reader has more scrolling to do before reaching it.

## Related Docs

- [Add on scroll animation in WordPress](https://nexterwp.com/docs/add-on-scroll-animation-in-wordpress/)- [Add equal column height in WordPress](https://nexterwp.com/docs/add-equal-column-height-in-wordpress/)- [Add display rules in WordPress](https://nexterwp.com/docs/add-display-rules-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)