---
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-04-14
author: "Aditya Sharma"
description: "Do you want to lazy load content on your WordPress site? Adding a lazy load can be a great option to improve the page load time and improve the user..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-SEO-Friendly-Lazy-Loading-in-WordPress_-1024x519.jpg
word_count: 280
---

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

## Key Takeaways

- Nexter Blocks features Lazy Rendering (SEO Friendly) that allows web crawlers to index content not fully rendered on the front end.
- Activating Lazy Rendering requires enabling the option in Nexter u2192 Extra Options u2192 Settings.
- Using the nxt-lazy-load CSS class in the parent container allows content to load as it enters the viewport, enhancing SEO.

Do you want to lazy load content on your WordPress site? Adding a lazy load can be a great option to improve the page load time and improve the user experience. Normal lazy loading can negatively impact SEO since web crawlers may not index the entire content. 

With the Lazy Rendering (SEO Friendly) feature from Nexter Blocks, you can lazy load the content in an SEO friendly manner, i.e. the web crawlers can see the entire content even when the content is not fully rendered in the front end. This way, you get faster load times without affecting your SEO.

## Activate the Lazy Rendering (SEO Friendly)

To use the lazy rendering feature, you have to enable the Lazy Rendering option.

To do so, go to

- **Nexter **→ **Extra Options **→ **Settings.**

- Go to the **Lazy Rendering (SEO Friendly)** section and enable the toggle.

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

## How to Use the Lazy Rendering Feature?

To load content on the viewport using the Lazy Rendering (SEO Friendly) feature, you have to add **nxt-lazy-load** CSS class in the parent container of that content.

To do this, select the parent container and go to the Advanced tab, and add the **nxt-lazy-load** class name in the **ADDITIONAL CSS CLASS(ES)** field.

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

> *Note: In the example, we are using the Container block from Nexter Blocks.*

This will add a *noscript* tag in the container and it will not load in the initial page load instead, it will load as it enters the viewport.

The advantage of using a *noscript* tag, while the entire content is not rendered in the front end on the initial page load the web crawlers can see the entire content, making it a very SEO-friendly process.

## Frequently Asked Questions

**Q: What should I do if the Lazy Rendering feature doesn't seem to activate?**
A: If the Lazy Rendering feature isn't activating, ensure you're navigating to Nexter u2192 Extra Options u2192 Settings and that the toggle for Lazy Rendering (SEO Friendly) is enabled. Sometimes, caching plugins can interfere with settings changes, so clear your cache after making adjustments. This feature is crucial for SEO as it allows web crawlers to index content that isn't immediately visible.

**Q: Can I use the Lazy Rendering feature with other page builders?**
A: The Lazy Rendering feature is specifically designed for use with Nexter Blocks, which is built for Gutenberg. While it supports Elementor and Bricks, the lazy loading functionality is optimized for Gutenberg. If you're using another page builder, you may not achieve the same SEO-friendly lazy loading benefits as with Nexter Blocks.

**Q: What is the best practice for adding the nxt-lazy-load class?**
A: When adding the nxt-lazy-load class, ensure it is applied to the parent container of the content you want to lazy load. This is done in the Advanced tab by entering the class name in the ADDITIONAL CSS CLASS(ES) field. This practice ensures that a noscript tag is added, allowing web crawlers to see the content, which is essential for maintaining SEO integrity.

**Q: Does lazy loading affect my site's performance?**
A: Implementing lazy loading can significantly enhance your site's performance by reducing initial load times. Since content is only loaded as it enters the viewport, users experience faster page loads. However, ensure you use the SEO-friendly lazy loading from Nexter Blocks to avoid negatively impacting SEO, as traditional lazy loading can prevent crawlers from indexing content.

**Q: What happens if I forget to add the nxt-lazy-load class?**
A: If you forget to add the nxt-lazy-load class to the parent container, the content may load normally without the benefits of lazy loading. This means that the content will be rendered during the initial page load, potentially slowing down your site and affecting user experience. Additionally, web crawlers may not index this content properly, which could harm your SEO efforts.

**Q: Is there a limit to how much content I can lazy load?**
A: There is no specific limit mentioned for how much content you can lazy load using the Lazy Rendering feature in Nexter Blocks. However, it's best to apply lazy loading strategically to larger images or sections of content that are not immediately visible to users. This ensures optimal performance and SEO benefits without overwhelming the page load process.