Implementing Lazy Loading in JavaScript for Improved Performance

{
  "title": "Implementing Lazy Loading in JavaScript for Improved Performance",
  "description": "Strategies for using lazy loading to defer the loading of non-critical resources, enhancing JavaScript application performance.",
  "category": "JavaScript Cursor Rules",
  "rules": [
    {
      "id": "lazy-loading-native",
      "description": "Utilize the native `loading=\"lazy\"` attribute for images and iframes to defer loading until they are near the viewport.",
      "recommendation": "Add the `loading=\"lazy\"` attribute to `<img>` and `<iframe>` tags to enable native lazy loading.",
      "example": {
        "before": "<img src=\"image.jpg\" alt=\"Description\">",
        "after": "<img src=\"image.jpg\" alt=\"Description\" loading=\"lazy\">"
      }
    },
    {
      "id": "lazy-loading-intersection-observer",
      "description": "Implement the Intersection Observer API to lazily load elements when they enter the viewport.",
      "recommendation": "Use the Intersection Observer API to detect when elements are in the viewport and load them dynamically.",
      "example": {
        "before": "const images = document.querySelectorAll('.lazy');\nimages.forEach(img => {\n  img.src = img.dataset.src;\n});",
        "after": "const images = document.querySelectorAll('.lazy');\nconst observer = new IntersectionObserver((entries, observer) => {\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      const img = entry.target;\n      img.src = img.dataset.src;\n      observer.unobserve(img);\n    }\n  });\n});\nimages.forEach(img => {\n  observer.observe(img);\n});"
      }
    },
    {
      "id": "lazy-loading-code-splitting",
      "description": "Use code splitting to defer the loading of non-essential JavaScript modules until they are needed.",
      "recommendation": "Implement code splitting with dynamic imports to load JavaScript modules on demand.",
      "example": {
        "before": "import { heavyFunction } from './heavyModule';\nheavyFunction();",
        "after": "import('./heavyModule').then(module => {\n  const { heavyFunction } = module;\n  heavyFunction();\n});"
      }
    },
    {
      "id": "lazy-loading-placeholders",
      "description": "Use placeholders to maintain layout stability and prevent content shifts during lazy loading.",
      "recommendation": "Specify dimensions for lazy-loaded elements and use placeholders to reserve space, preventing layout shifts.",
      "example": {
        "before": "<img src=\"image.jpg\" alt=\"Description\">",
        "after": "<img src=\"image.jpg\" alt=\"Description\" width=\"600\" height=\"400\" loading=\"lazy\">"
      }
    },
    {
      "id": "lazy-loading-critical-content",
      "description": "Avoid lazy loading for content that appears above the fold to ensure immediate visibility.",
      "recommendation": "Do not apply lazy loading to elements that are immediately visible when the page loads.",
      "example": {
        "before": "<img src=\"hero.jpg\" alt=\"Hero Image\" loading=\"lazy\">",
        "after": "<img src=\"hero.jpg\" alt=\"Hero Image\">"
      }
    },
    {
      "id": "lazy-loading-seo",
      "description": "Ensure lazy-loaded content is accessible to search engines to maintain SEO performance.",
      "recommendation": "Provide fallback content within `<noscript>` tags for critical lazy-loaded elements to ensure they are indexed by search engines.",
      "example": {
        "before": "<img src=\"image.jpg\" alt=\"Description\" loading=\"lazy\">",
        "after": "<img src=\"image.jpg\" alt=\"Description\" loading=\"lazy\">\n<noscript>\n  <img src=\"image.jpg\" alt=\"Description\">\n</noscript>"
      }
    },
    {
      "id": "lazy-loading-testing",
      "description": "Test lazy loading implementations across various devices and browsers to ensure consistent performance.",
      "recommendation": "Regularly test your lazy loading setup on different devices and browsers to identify and fix any issues.",
      "example": {
        "before": "Implement lazy loading without cross-browser testing.",
        "after": "Test lazy loading functionality on multiple devices and browsers to ensure compatibility."
      }
    }
  ]
}