lazy-loading-strategy

What problem does it solve?

This Skill addresses slow website loading times caused by rendering all content, especially images and large lists, immediately upon page load.

Core Features & Use Cases

• Image Optimization: Implements native lazy loading for images to defer loading until they are in the viewport.
• List Virtualization: Suggests techniques for rendering only visible items in long lists, improving performance.
• Below-Fold Content: Recommends dynamic imports or in-view rendering for heavy components below the fold.
• Use Case: For an e-commerce product listing page with hundreds of items, this Skill ensures only the visible products load initially, making the page load much faster.

Quick Start

Apply the lazy loading strategy to optimize images and long lists on the webpage.