lazy-loading

Implement lazy loading for images, components, and routes.

1|Updated Jul 15, 2026

Search Tags:#performance #frontend #react #optimization #nextjs #lazy-loading

Ready to run

npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill lazy-loading-dzakiamriz22

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: lazy-loading
Source: https://github.com/Dzakiamriz22/frontend-pack/tree/main/skills/lazy-loading
Command: npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill lazy-loading-dzakiamriz22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses slow initial page load times and excessive bandwidth usage by deferring the loading of non-critical assets until they are actually needed by the user.

Core Features & Use Cases

Asset Deferral: Implements native and Intersection Observer-based lazy loading for images to ensure only visible content consumes resources.
Code Splitting: Facilitates dynamic component imports and route-based loading to reduce the initial JavaScript bundle size.
Infinite Scroll: Provides patterns for efficient data fetching as users scroll through long lists or feeds.

Quick Start

Activate the lazy-loading skill to optimize the current page by implementing intersection observers for images and dynamic imports for heavy components.

Frequently Asked Questions about lazy-loading

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement lazy loading for images using Intersection Observer in React?▼

Implement lazy loading for images in React by configuring an Intersection Observer to detect viewport visibility and defer asset downloads until visible. This defers non-critical resource loading, reducing initial page load times and saving bandwidth.

What's the best way to reduce initial JavaScript bundle size with Next.js?▼

Reduce initial JavaScript bundle size in Next.js by applying code splitting through dynamic component imports and route-based loading. This defers heavy UI component execution until required, significantly improving frontend performance and perceived load times.

How do I build an infinite scroll list with efficient data fetching in frontend development?▼

Build an infinite scroll list by integrating Intersection Observer patterns to trigger efficient data fetching as users scroll. This ensures complex UI components and long feeds load dynamically without overwhelming initial page resources.

Does lazy loading work with skeleton placeholders to improve perceived load times?▼

Lazy loading works with skeleton placeholders by rendering temporary UI structures while dynamic imports and deferred assets load. This combination maintains visual stability during component loading and improves perceived web performance for heavy media.

When should I not use dynamic imports for component loading in frontend optimization?▼

Avoid dynamic imports for component loading when dealing with above-the-fold UI elements critical to initial render. Deferring these critical components harms perceived load times, whereas lazy loading should target below-the-fold content and heavy media.