Lazy loading

In the Zozonest plugin, Lazy Loading is a performance technique that prioritizes loading only the content currently visible on the user’s screen (the “above-the-fold” area). Instead of downloading every image, map, and script as soon as the page opens, the plugin “defers” the rest until the user actually scrolls down to see them.

This is especially critical for real estate websites, which often feature dozens of high-resolution property photos on a single page.

1. Types of Lazy Loading in Zozonest

• Image Lazy Loading: When a user visits a search results page with 20 listings, the browser only downloads the first 3 or 4 images they see. The rest remain as “placeholders” until the user scrolls, saving significant bandwidth.

• Map Lazy Loading: Interactive maps (like the Full Map or Half Map) are heavy scripts. Zozonest can wait to initialize the map engine until the user reaches that section of the page.

• Video Lazy Loading: If a property has a YouTube or Vimeo tour, the plugin displays a lightweight preview image. The heavy video player only loads when the user clicks “Play.”

2. Technical Implementation

Zozonest typically uses two methods to achieve this:

• Browser-Native Lazy Loading: It adds the loading="lazy" attribute to image tags. Modern browsers (Chrome, Safari, Edge) recognize this and handle the deferral automatically without needing extra JavaScript.

• Intersection Observer API: For more complex elements like sliders or masonry grids, Zozonest uses a script that “watches” the user’s scroll position. Once a property card enters the viewport, the script triggers the high-res image to replace the placeholder.

3. Performance & SEO Benefits

4. Best Practices for Configuration

To ensure Lazy Loading doesn’t accidentally hurt your user experience, follow these rules:

• Exclude the Hero Image: Never lazy load your main homepage banner or the very first image of a property. These should load “Eagerly” so the user sees something instantly.

• Use Aspect Ratios: Always define height and width for your property cards. This prevents “Layout Shift,” where the page jumps around as images finally load.

• Placeholder Choice: Use a simple gray box or a low-quality “blurred” version of the photo as a placeholder to keep the layout stable.