Optimizing JavaScript Applications with Web Performance Metrics

{
  "title": "Optimizing JavaScript Applications with Web Performance Metrics",
  "description": "Techniques for measuring and improving JavaScript application performance using metrics like LCP, FID, and CLS.",
  "category": "JavaScript Cursor Rules",
  "rules": [
    {
      "id": "optimize-lcp",
      "description": "Ensure the Largest Contentful Paint (LCP) occurs within 2.5 seconds to provide a good user experience.",
      "recommendations": [
        "Optimize and compress images using modern formats like WebP.",
        "Implement lazy loading for off-screen images to improve initial load times.",
        "Minify CSS and JavaScript to reduce file sizes and improve load times.",
        "Defer non-critical JavaScript to prevent render-blocking during page load."
      ]
    },
    {
      "id": "reduce-fid",
      "description": "Achieve a First Input Delay (FID) of less than 100 milliseconds to ensure quick responsiveness to user interactions.",
      "recommendations": [
        "Minimize JavaScript execution by deferring non-essential scripts.",
        "Break up long-running JavaScript tasks into smaller, asynchronous tasks.",
        "Limit the number of third-party scripts to reduce their impact on FID.",
        "Utilize Web Workers to offload heavy computations from the main thread."
      ]
    },
    {
      "id": "improve-cls",
      "description": "Maintain a Cumulative Layout Shift (CLS) score of less than 0.1 to ensure visual stability.",
      "recommendations": [
        "Set explicit width and height attributes on images and videos to prevent layout shifts.",
        "Reserve space for dynamic content to avoid unexpected layout changes.",
        "Preload fonts to prevent layout shifts caused by font loading.",
        "Avoid inserting new content above existing content unless in response to user interaction."
      ]
    }
  ]
}