<h2>The Importance of Web Performance</h2>
    <p>Every 100ms delay in load time can result in 1% drop in conversion rates. Web performance directly impacts user experience, search engine rankings, and business metrics.</p>

    <h3>Core Web Vitals &amp; Metrics</h3>
    <p>Google's Core Web Vitals measure the user experience:</p>
    <ul>
      <li><strong>Largest Contentful Paint (LCP):</strong> Load speed of the largest visible element</li>
      <li><strong>First Input Delay (FID):</strong> Responsiveness to user interaction</li>
      <li><strong>Cumulative Layout Shift (CLS):</strong> Visual stability during loading</li>
    </ul>

    <h3>Code Splitting &amp; Lazy Loading</h3>
    <p>Reduce initial bundle size by splitting code strategically:</p>
    <pre><code>

// Next.js dynamic imports for code splitting import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./heavy-component'), { loading: () => <div>Loading...</div>, });

// Route-based code splitting const Dashboard = dynamic(() => import('./pages/dashboard'), { ssr: false, }); </code></pre>

    <h3>Image Optimization</h3>
    <p>Images typically account for 50% of page weight:</p>
    <ul>
      <li>Use modern formats (WebP, AVIF) with fallbacks</li>
      <li>Responsive images with srcset</li>
      <li>Lazy loading with loading="lazy"</li>
      <li>Image compression and CDN delivery</li>
    </ul>

    <h3>Server-Side Caching</h3>
    <p>Implement caching at multiple levels:</p>
    <pre><code>

// Next.js caching strategies export const revalidate = 3600; // ISR - revalidate every hour

// On-demand revalidation import { revalidatePath } from 'next/cache';

export async function updatePost(id, data) { // Update database await db.posts.update(id, data);

// Revalidate specific path revalidatePath(/posts/[id]/); } </code></pre>

    <h3>Frontend Performance Optimization</h3>
    <p>Optimize JavaScript and CSS delivery:</p>
    <ul>
      <li>Minification and tree-shaking</li>
      <li>Critical CSS inlining</li>
      <li>Async script loading</li>
      <li>Resource hints (preload, prefetch, preconnect)</li>
    </ul>

    <h3>Database Query Optimization</h3>
    <p>Slow queries impact overall application performance:</p>
    <pre><code>

// Query optimization strategies // 1. Indexing frequently searched fields db.posts.createIndex({ userId: 1, createdAt: -1 });

// 2. Projection - select only needed fields db.posts.find({ userId }, { title: 1, content: 1 });

// 3. Pagination instead of fetching all data db.posts.find({}).limit(20).skip(offset);

// 4. Aggregation pipeline for complex queries db.posts.aggregate([ { $match: { status: 'published' } }, { $group: { _id: '$category', count: { $sum: 1 } } }, { $sort: { count: -1 } } ]); </code></pre>

    <h3>API Response Optimization</h3>
    <p>Reduce API response times and payload size:</p>
    <ul>
      <li>GraphQL over REST for flexible querying</li>
      <li>API request batching</li>
      <li>Compression (gzip, brotli)</li>
      <li>Field-level authorization</li>
    </ul>

    <h3>Performance Monitoring</h3>
    <p>Measure and track performance metrics:</p>
    <pre><code>

// Browser Performance API const performanceMetrics = { navigationTiming: performance.getEntriesByType('navigation')[0], paintTiming: performance.getEntriesByType('paint'), resourceTiming: performance.getEntriesByType('resource'), };

// Web Vitals measurement import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

getCLS(console.log); getFID(console.log); getFCP(console.log); getLCP(console.log); getTTFB(console.log); </code></pre>

    <h3>Best Practices Checklist</h3>
    <ul>
      <li>✓ Keep JavaScript bundles under 100KB gzipped</li>
      <li>✓ Serve images in modern formats with responsive sizes</li>
      <li>✓ Implement strategic caching with appropriate TTLs</li>
      <li>✓ Use CDN for static assets and APIs</li>
      <li>✓ Monitor Core Web Vitals continuously</li>
      <li>✓ Optimize third-party scripts</li>
      <li>✓ Implement service workers for offline support</li>
    </ul>

    <h2>Conclusion</h2>
    <p>Web performance is not a one-time optimization but a continuous process. By implementing these techniques and monitoring your metrics, you'll create faster, more reliable experiences that delight users and improve business outcomes.</p>