Image lazy loading

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

Note

Lazy loading can significantly reduce initial page load times and improve Core Web Vitals scores, especially on image-heavy websites

Accessing lazy loading settings

To configure lazy loading options in WoodMart:

Navigate to WordPress dashboard -> WoodMart -> Performance
Locate the Lazy loading section
Configure the available options according to your needs

Important

Running multiple lazy loading (e.g., from the theme and 3rd party plugin) systems simultaneously can cause conflicts and negatively impact performance

Configuration options

Lazy loading for images

This setting controls lazy loading for regular images throughout your website. When enabled, images load only when they enter the user’s viewport during scrolling.

Lazy loading for background images

This feature enables lazy loading specifically for background images used in Gutenberg blocks and other elements. It helps improve performance by loading background images only when they become visible.

Offset

The offset value determines how many pixels before an image enters the viewport it should start loading. This setting helps prevent users from seeing loading placeholders or empty spaces.

0 pixels – Images load exactly when they enter the viewport
100-200 pixels – Images start loading before becoming visible (recommended)

Note

Setting an offset of 100-200 pixels typically provides the smoothest user experience by preventing loading delays

Appearance effect

You can choose how lazy loaded images appear when they finish loading:

None – Images appear immediately without visual effects
Fade – Images fade in smoothly when loaded

The fade effect provides a more polished appearance during the loading process.

Upload a custom placeholder image

This feature allows you to upload a custom placeholder image that displays while actual images are loading. The placeholder helps maintain visual consistency and prevents layout shifts during the loading process.

To add a custom placeholder:

Click the “Upload” button in the placeholder image section
Select your desired placeholder image from the media library
Save the settings

Note

Keep placeholder images small in file size (under 10KB) and choose designs that match your website’s visual style

Disable native WordPress lazy loading

This setting controls WordPress built-in lazy loading functionality. It removes the native loading=”lazy” attribute from images.