Image Lazy Loading

Lazy loading is a performance optimization feature that improves page load times by loading images only when they become visible to users. Instead of loading all images at once, lazy loading delays image loading until users scroll to view them.

Note:
Lazy loading can significantly improve page speed and Core Web Vitals scores, especially on image-heavy websites.

---

Accessing Lazy Loading Settings #

To configure lazy loading in Omniverse:

1. Go to WordPress Dashboard → Theme Settings → Performance
2. Locate the Lazy Loading section
3. Configure the available options according to your needs

Important:
Running multiple lazy loading systems simultaneously (e.g., theme + 3rd party plugin) can cause conflicts and reduce performance.

---

Lazy Loading Configuration Options #

1. Lazy Loading for Images #

Controls lazy loading for standard images throughout the site.
Behavior: Images load only when they enter the user’s viewport while scrolling.

---

2. Lazy Loading for Background Images #

Enables lazy loading specifically for background images used in Gutenberg blocks or other elements.
Benefit: Improves performance by delaying background image loading until visible.

---

3. Offset #

The offset determines how many pixels before an image enters the viewport it should start loading.

• 0 pixels – Loads images exactly when they appear in the viewport
• 100–200 pixels (recommended) – Starts loading images slightly before they are visible

Note:
An offset of 100–200 pixels typically provides the smoothest experience and avoids blank spaces during scrolling.

---

4. Appearance Effect #

Choose how images appear when they finish loading:

• None – Images appear immediately
• Fade – Images fade in smoothly

Tip: Fade effect provides a polished visual experience.

---

5. Custom Placeholder Image #

You can upload a custom placeholder to display while images are loading. This prevents layout shifts and maintains visual consistency.

Steps to add a placeholder:

1. Click Upload in the placeholder image section
2. Select an image from the Media Library
3. Save your settings

Note:
Keep placeholders small (under 10KB) and design them to match your site’s style.

---

6. Disable Native WordPress Lazy Loading #

This option disables WordPress’s built-in lazy loading by removing the loading="lazy" attribute from images.

---