Skip to main content

Lazy Loading ↔ (Design Pattern) to defer load of Non-Blocking non-critical components, until required, to optimize overall network loading speed

aka Lazy-Load, Lazily-Load

References​

  1. <Suspense> ↔ Suspense API Wrapper to define Suspense Boundary to allow Lazy Load

  2. Lazy() ↔ React API function to Lazy Load FC for Suspense Boundary

  3. fallback ↔ prop to set JSX placeholder for Suspense Boundary when Lazy Loading

  4. <Image> ↔ ( Next 12 ) FC extends <img\> with Prefetch/Lazy Load & ✨img optimization to burn your free quota

  5. @docusaurus/plugin-ideal-image ↔ docu plugin extends <img\> to autogen placeholder for Lazy Load & resized images variants for responsive display - !shit, degrades some images for WORSE size - especially PNG

  6. PRPL ↔ Design Pattern to Prefetch critical Blocking assets Render init Routes ASAP Pre-Cache assets Lazy Load non-essential assets