LCP is typically one of these elements:
├── Images (hero images, product photos, banners)
├── Video thumbnails
├── Background images
├── Text blocks (headlines, paragraphs)

OPTIMIZATION STRATEGIES:

1. Optimize Images
   - Compress images (WebP format, modern compression)
   - Implement lazy loading for below-the-fold images
   - Use responsive images with srcset
   - Preload critical images with <link rel="preload">

2. Improve Server Response Time
   - Upgrade hosting (dedicated/VPS over shared)
   - Implement caching (CDN, browser caching)
   - Optimize database queries
   - Reduce Time to First Byte (TTFB) under 200ms

3. Remove Render-Blocking Resources
   - Defer non-critical JavaScript and CSS
   - Inline critical CSS
   - Minify and combine CSS/JS files

// Defer non-critical JavaScript
<script src="analytics.js" defer></script>
<script src="non-critical.js" async></script>

// Use requestIdleCallback for non-critical tasks
requestIdleCallback(() => {
    // Load non-critical resources
    loadComments();
    loadWidgets();
});

// Split code bundles (Webpack example)
import(/* webpackChunkName: "chat" */ './chat')
    .then(module => {
        module.init();
    });

// Set dimensions for images
<img src="hero.jpg" width="1200" height="800" loading="lazy">

// Use CSS aspect-ratio for dynamic content
.ad-container {
    aspect-ratio: 16 / 9;
    min-height: 180px;
}

// Reserve space for fonts
@font-face {
    font-family: 'CustomFont';
    font-display: swap;
    /* Use swap to show fallback immediately */
}

// Use transform for animations (no layout shift)
.element {
    transform: translateX(20px);
    /* vs left: 20px - which causes shift */
}

LCP OPTIMIZATION:
☐ Optimize and compress all images
☐ Convert images to WebP format
☐ Implement lazy loading for below-fold images
☐ Preload critical hero images
☐ Upgrade hosting for faster TTFB
☐ Implement CDN
☐ Reduce server response time (<200ms)
☐ Minify CSS/JS
☐ Remove render-blocking resources

FID OPTIMIZATION:
☐ Break up long JavaScript tasks (<50ms)
☐ Defer non-critical JavaScript
☐ Minimize third-party script impact
☐ Use browser caching
☐ Optimize JavaScript execution time
☐ Use web workers for heavy computations
☐ Implement code splitting

CLS OPTIMIZATION:
☐ Set dimensions on all images and videos
☐ Reserve space for dynamic content
☐ Use font-display: swap
☐ Avoid inserting content above existing content
☐ Use CSS aspect-ratio for responsive elements
☐ Animate using transform properties only

GENERAL PAGE EXPERIENCE:
☐ Ensure mobile-responsive design
☐ Implement HTTPS
☐ Remove intrusive popups
☐ Check safe browsing status
☐ Test on real mobile devices