Core Web Vitals optimization - LCP, INP, CLS praktyczny przewodnik

Core Web Vitals to ranking factor od 2021 roku. Ten przewodnik pokazuje praktyczne techniki optymalizacji LCP, INP i CLS.

Co to Core Web Vitals

Core Web Vitals to zestaw metryk user experience mierzonych przez Google:

LCP Optimization

Co wpływa na LCP

• Hero image / video
• Duże bloki tekstu
• Background images w CSS
• SVG lub canvas elements

Techniki optymalizacji

1. Preload critical resources

   <link rel="preload" href="hero.webp" as="image">

2. Optimize images
   • Użyj WebP/AVIF
   • Responsive images (srcset)
   • Lazy load below-fold images
3. Server response time
   • Użyj CDN
   • Enable compression (gzip/brotli)
   • Cache static assets
4. Eliminate render-blocking

   <script defer src="script.js"></script>
   <link rel="preload" href="critical.css" as="style">

"Optymalizacja LCP to najszybszy sposób na poprawę Core Web Vitals - często jedna zmiana daje duży efekt." - Web.dev

INP Optimization

Co wpływa na INP (dawniej FID)

INP mierzy responsywność na interakcje:

• Click handlers
• Keyboard input
• Touch events

Techniki optymalizacji

1. Break up long tasks

   // Zamiast jednego długiego task
   setTimeout(() => { /* część 1 */ }, 0);
   setTimeout(() => { /* część 2 */ }, 0);

2. Use requestIdleCallback

   requestIdleCallback(() => {
     // Non-critical work
   });

3. Defer third-party scripts
   • Analytics, chat widgets, ads
   • Użyj facade pattern dla video embeds
4. Optimize event handlers
   • Debounce scroll/resize listeners
   • Use passive event listeners

CLS Optimization

Przyczyny CLS

• Obrazy bez dimensions
• Dynamicznie wstrzykiwany content
• Web fonts (FOIT/FOUT)
• Ads i embeds bez reserved space

Techniki optymalizacji

1. Zawsze podawaj dimensions

   <img src="photo.jpg" width="800" height="600" alt="...">

2. Aspect ratio boxes

   .video-container {
     aspect-ratio: 16 / 9;
   }

3. Font loading strategy

   @font-face {
     font-family: 'MyFont';
     font-display: swap;
   }

4. Reserve space dla ads

   .ad-slot {
     min-height: 250px;
   }

Narzędzia do testowania

Priority framework

1. Fix "Poor" - najpierw czerwone metryki
2. Focus on mobile - Google używa mobile CWV
3. LCP first - największy wpływ na user experience
4. CLS second - najczęstszy problem
5. INP last - najtrudniejszy do fixowania

Podsumowanie

Core Web Vitals to nie tylko ranking factor - to realna poprawa user experience. Inwestycja w performance zwraca się w wyższych konwersjach.