Pages with a lot of content can feel slow because the browser tries to prepare everything at once—even sections visitors haven't scrolled to yet.
Smart Rendering fixes this by letting the browser skip that work for below-fold content and handle it just before the visitor scrolls there. This speeds up the initial page load and makes the page more responsive while the visitor is reading and scrolling.
📌 Plan Availability: Smart Rendering is available on the Plus plan and above.
When It Helps Most
Smart Rendering works best when your page has a lot of content that visitors need to scroll to reach:
Long landing pages and marketing pages
Shop pages with many products
Long blog posts and guides
Pages built with page builders like Elementor, Divi, or WPBakery
Note: If your pages are short, enabling Smart Rendering won't cause any problems, but it might not improve their speed.
How to Enable It
Smart Rendering is disabled by default. To turn it on:
Log in to your NitroPack dashboard.
Go to Cache Settings > HTML & CSS.
Locate Smart Rendering and switch the toggle to ON.
How It Works
Imagine a long hallway where the lights are motion-activated—they turn on just before you reach each room. Smart Rendering works the same way: the browser only prepares each section as the visitor scrolls toward it.
Everything stays on the page. Nothing is removed or hidden.
Under the hood, Smart Rendering uses
content-visibility: auto.
For technical details, see the web.dev documentation on content-visibility.
How to Verify It's Working
If you want to confirm Smart Rendering is active on a specific page, you can check using your browser's developer tools:
Open the optimized page in your browser.
Right-click on a section below the fold and select Inspect. This opens the browser's developer tools with that element selected.
In the Elements panel, look for the class
nitro-lazy-renderon the selected element or one of its parent elements.
If you find this class, Smart Rendering is active on that section.
Frequently Asked Questions (FAQ)
When is Smart Rendering not applied?
Smart Rendering only applies when a page has eligible content below the fold. If the page is short, uses non-standard element types, or has not been optimized by NitroPack yet, the feature will not activate. This is expected behavior.
How is this different from HTML Lazy Loading?
HTML Lazy Loading and Smart Rendering solve a similar problem, but work very differently:
HTML Lazy Loading: Removes sections from the page entirely and adds them back as the visitor scrolls. You need to configure which sections to target. It reduces the initial page file size.
Smart Rendering: Keeps everything on the page, but tells the browser to skip the work of preparing below-fold sections until they are needed. Nothing is removed. It is fully automatic once enabled.
Both features can be active at the same time and complement each other.
Can search engines and screen readers see the deferred content?
Yes. All content stays on the page at all times. Search engines see the full page for SEO purposes, and screen readers can access deferred content normally. Your SEO and accessibility are not affected.
Does Smart Rendering work on all browsers?
Yes. Smart Rendering works in all major browsers: Chrome, Firefox, Safari, and Edge. The CSS property it relies on became a web standard in September 2024. On older browsers that do not support it, nothing breaks—the page loads normally without the optimization.