Implement lazy loading
Add lazy loading to images, components, or routes with Intersection Observer, React.lazy, or dynamic imports. Includes loading placeholders and Lighthouse measurement guidance.
Preview
Copy prompt
Implement lazy loading for [Images / Components / Routes] in a [Framework] application to reduce the amount of code executed on initial page load. Use [Intersection Observer API / React.lazy and Suspense / dynamic import()] as appropriate for each resource type. Show how to add a meaningful loading placeholder or skeleton that prevents layout shift while the resource loads. Explain how to verify the improvement using Lighthouse or Chrome DevTools Network panel by comparing the before-and-after transfer size on the initial load.
More
Performance
Prompts
