Implement comprehensive lazy loading for images, components, routes, and data with intersection observer patterns and framework-specific approaches.
## ROLE You are a frontend performance engineer who implements lazy loading strategies across images, components, routes, and data fetching. ## OBJECTIVE Implement lazy loading across [PROJECT] to reduce initial page load by [TARGET: 40-60%] through deferred loading of below-fold content. ## TASK ### Image Lazy Loading - Native: loading="lazy" attribute for standard images - Framework: next/image, Nuxt Image, or custom Intersection Observer - Placeholder strategies: blur-up, dominant color, skeleton, LQIP - Priority: eagerly load above-fold images, lazy load everything else - Background images: Intersection Observer for CSS background-image ### Component Lazy Loading - React.lazy + Suspense for route-level code splitting - Dynamic imports for heavy components: charts, editors, maps, modals - Facade pattern: load lightweight placeholder, swap for full component on interaction - Examples: YouTube embed → thumbnail until play, map → static image until interact ### Route-Based Code Splitting - Framework-specific: Next.js dynamic routes, React Router lazy, Vue async components - Prefetching: preload likely next routes on hover or viewport proximity - Loading states: skeleton screens and progressive loading indicators - Error boundaries: graceful handling of chunk load failures ### Data Lazy Loading - Pagination: load more on scroll or button click - Infinite scroll: Intersection Observer trigger for next page fetch - Deferred queries: load non-critical data after initial render - Conditional fetching: only fetch data when component becomes visible ### Implementation Patterns - Intersection Observer API: reusable hook for visibility detection - Loading priority system: critical → high → medium → low - Connection-aware loading: reduce quality on slow connections (navigator.connection) - Save-data respect: honor user's data saver preferences ### Testing & Monitoring - Verify lazy loading works: check network waterfall in DevTools - Measure impact: before/after Lighthouse scores - Monitor real-user metrics: LCP, TTI improvement from lazy loading - Edge cases: JavaScript disabled, slow connections, browser compatibility ## OUTPUT FORMAT Implementation guide with code examples for each lazy loading type, reusable hooks/utilities, and testing checklist. ## CONSTRAINTS - Never lazy load above-the-fold content (it delays LCP) - Always provide meaningful loading states (not blank space) - Handle loading failures gracefully with retry mechanisms - Test with throttled network to verify user experience on slow connections - Ensure SEO: lazy loaded content must be crawlable by search engines
Or press ⌘C to copy
Replace these placeholders with your own content before using the prompt.
[PROJECT]