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 > Nexter Blocks > 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 > Nexter Blocks > Settings and switch Lazy Rendering on.
- Select the block you want to defer.
- Add the class
nxt-lazy-loadto it, in the Advanced tab’s additional CSS class field.
- 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-loadrendered as<div class="tpgb-lazy-render" data-bid="…">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.
