Skip to main content

Overview

Visual Portfolio includes a sophisticated lazy loading system that defers image loading until they’re needed, significantly improving page load times and performance. The system uses the LazySizes library with custom enhancements.

Lazy Loading Modes

The plugin offers two lazy loading modes:

Visual Portfolio Images Only

Lazy loads only images within Visual Portfolio galleries.

Full Site Lazy Loading

Lazy loads all images across your entire WordPress site.

Implementation

Initialization

Lazy loading is initialized on the wp_loaded hook:

Content Filtering

When full lazy loading is enabled, the plugin filters various content hooks:

Image Processing

Placeholder Generation

The plugin generates SVG placeholders to maintain layout dimensions:

Image Attribute Processing

Images are processed to add lazy loading attributes:

Output Structure

Processed images include a <noscript> fallback:

Exclusions and Blocking

Blocked Attributes

Images with certain attributes are excluded from lazy loading:

Blocked Classes

Images with certain CSS classes are excluded:

Blocked Sources

Specific image sources are excluded:

User-Defined Exclusions

Administrators can define custom exclusions in plugin settings:

JavaScript Integration

No-JS Fallback

The plugin adds CSS to hide lazy images when JavaScript is disabled:

LazySizes Library

The plugin uses the LazySizes library with custom configuration:

WordPress Security

Allowed Protocols

The plugin allows data: URIs for placeholder images:

Allowed Attributes

Lazy loading attributes are whitelisted for wp_kses:

Image Size Management

Custom Image Sizes

The plugin registers custom image sizes for responsive loading:

GIF Handling

Animated GIFs always use full size to preserve animation:

Hooks and Filters

Disable Lazy Loading

Modify Blocked Attributes

Modify Blocked Classes

Skip Specific Images

Modify Image Attributes

Customize Placeholder

Performance Benefits

  • Reduces initial page weight by 50-70%
  • Only loads images in viewport and near-viewport
  • Dramatically improves Time to Interactive (TTI)
  • Users only download images they view
  • Especially beneficial on mobile connections
  • Reduces server bandwidth costs
  • Faster perceived page load
  • Smooth scrolling performance
  • Maintains layout stability with placeholders

Best Practices

  1. Always specify dimensions: Include width/height attributes for proper placeholder generation
  2. Exclude critical images: Use data-skip-lazy on above-the-fold hero images
  3. Test on mobile: Verify smooth scrolling and loading on mobile devices
  4. Use fetchpriority: Add fetchpriority="high" to important images to exclude them
  5. Monitor Core Web Vitals: Check Cumulative Layout Shift (CLS) improvements

Troubleshooting

Images Not Loading

Check if lazy loading is conflicting with other plugins:

Layout Shift Issues

Ensure images have width/height attributes:

Exclude Specific Pages