Core Web Vitals Optimalizálás

<!-- 1. Képek optimalizálása és preload -->
<link rel="preload" as="image" href="/hero-image.webp">

<img 
  src="/hero-image.webp" 
  alt="Hero kép"
  width="1200" 
  height="600"
  loading="eager"
  fetchpriority="high"
>

<!-- 2. Kritikus CSS inline, többi defer -->
<style>
  /* Kritikus above-the-fold CSS */
  .hero { display: flex; }
</style>

<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles.css"></noscript>

// 3. Lazy loading nem-kritikus képekre
document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = document.querySelectorAll('img[loading="lazy"]');
  
  if ('IntersectionObserver' in window) {
    const imageObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          img.classList.remove('lazy');
          imageObserver.unobserve(img);
        }
      });
    });

    lazyImages.forEach(img => imageObserver.observe(img));
  }
});

# 4. Szerver válaszidő javítása (nginx config)
http {
    # Gzip tömörítés
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/css application/javascript image/svg+xml;

    # Cache headers
    location ~* \.(jpg|jpeg|png|webp|svg|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

<!-- 1. JavaScript defer/async használata -->
<!-- Defer: HTML parsing után fut, sorrend megmarad -->
<script defer src="/main.js"></script>

<!-- Async: amint letöltődik, fut (sorrend nem garantált) -->
<script async src="/analytics.js"></script>

// 2. Long tasks felosztása
// Rossz példa: blokkoló long task
function processLargeArray(items) {
  items.forEach(item => {
    // Időigényes művelet
    processItem(item);
  });
}

// Jó példa: felosztás kisebb taskokra
async function processLargeArrayOptimized(items) {
  const chunkSize = 100;
  
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize);
    
    // Feldolgozás
    chunk.forEach(item => processItem(item));
    
    // Yield vissza a main thread-nek
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

// 3. requestIdleCallback használata nem kritikus feladatokra
function sendAnalytics(data) {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
      fetch('/analytics', {
        method: 'POST',
        body: JSON.stringify(data)
      });
    }, { timeout: 2000 });
  } else {
    // Fallback régebbi böngészőkre
    setTimeout(() => {
      fetch('/analytics', {
        method: 'POST',
        body: JSON.stringify(data)
      });
    }, 1000);
  }
}

// 4. Event handler optimalizálás
// Rossz példa: szinkron, lassú handler
button.addEventListener('click', (e) => {
  // Szinkron, blokkoló művelet
  const result = heavyComputation();
  updateUI(result);
});

// Jó példa: nem blokkoló handler
button.addEventListener('click', async (e) => {
  // Immediate feedback
  button.classList.add('loading');
  
  // Async művelet
  const result = await heavyComputationAsync();
  
  // UI update
  requestAnimationFrame(() => {
    button.classList.remove('loading');
    updateUI(result);
  });
});

<!-- 1. Képeknek MINDIG add meg a méretet! -->
<!-- Rossz példa: méret nélküli kép -->
<img src="/image.jpg" alt="Kép">

<!-- Jó példa: explicit width/height -->
<img 
  src="/image.jpg" 
  alt="Kép"
  width="800" 
  height="600"
>

<!-- Vagy CSS aspect-ratio használata -->
<style>
  .responsive-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
</style>
<img src="/image.jpg" alt="Kép" class="responsive-img">

<!-- 2. Reklámok és beágyazások számára hely foglalása -->
<div class="ad-container" style="min-height: 250px;">
  <!-- Reklám betöltődik ide -->
  <div id="ad-slot"></div>
</div>

<style>
  .ad-container {
    min-height: 250px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .ad-container::before {
    content: 'Hirdetés betöltése...';
    color: #999;
  }
</style>

/* 3. Font loading optimalizálás - FOUT/FOIT elkerülése */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap; /* Fallback font azonnal, custom font swap */
  font-weight: 400;
  font-style: normal;
}

/* Vagy font-display: optional a CLS 0 értékért */
@font-face {
  font-family: 'OptionalFont';
  src: url('/fonts/optional.woff2') format('woff2');
  font-display: optional; /* Ha nem tölt be 100ms-en belül, fallback marad */
}

<!-- 4. Preload kritikus fontokra -->
<link 
  rel="preload" 
  href="/fonts/custom.woff2" 
  as="font" 
  type="font/woff2" 
  crossorigin
>

/* 5. Animációk transform/opacity használatával (nem layout tulajdonságok) */
/* Rossz példa: CLS okozó animáció */
.bad-animation {
  animation: slideIn 0.3s;
}

@keyframes slideIn {
  from {
    margin-top: -100px; /* Layout shift! */
  }
  to {
    margin-top: 0;
  }
}

/* Jó példa: transform használata */
.good-animation {
  animation: slideInGood 0.3s;
}

@keyframes slideInGood {
  from {
    transform: translateY(-100px); /* Nincs layout shift */
  }
  to {
    transform: translateY(0);
  }
}

// 6. Dinamikus tartalom betöltése helyőrzővel
// Rossz példa: tartalom hirtelen megjelenik
fetch('/api/content')
  .then(res => res.json())
  .then(data => {
    document.getElementById('container').innerHTML = data.html;
  });

// Jó példa: placeholder, smooth transition
const container = document.getElementById('container');
container.innerHTML = '<div class="skeleton-loader"></div>'; // Placeholder

fetch('/api/content')
  .then(res => res.json())
  .then(data => {
    // Méret már ismert a placeholder miatt
    container.style.minHeight = container.offsetHeight + 'px';
    container.innerHTML = data.html;
  });

# Parancssori használat (ha API key-ed van)
curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://example.com&key=YOUR_API_KEY"

// Performance mérés JavaScript-ben
performance.mark('start-task');

// ... valamilyen művelet ...

performance.mark('end-task');
performance.measure('task-duration', 'start-task', 'end-task');

const measures = performance.getEntriesByType('measure');
console.log(measures[0].duration); // milliszekundum

<!-- NPM: npm install web-vitals -->
<script type="module">
  import {onCLS, onFID, onLCP} from 'https://unpkg.com/web-vitals@3?module';

  function sendToAnalytics({name, value, id}) {
    // Küldés analytics rendszerbe
    gtag('event', name, {
      value: Math.round(name === 'CLS' ? value * 1000 : value),
      metric_id: id,
      metric_value: value,
      metric_delta: value,
    });
  }

  onCLS(sendToAnalytics);
  onFID(sendToAnalytics);
  onLCP(sendToAnalytics);
</script>

// LCP mérése PerformanceObserver-rel
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  
  console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime);
  console.log('LCP element:', lastEntry.element);
});

observer.observe({type: 'largest-contentful-paint', buffered: true});

// CLS mérése
let clsValue = 0;
const clsObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
    }
  }
  console.log('Current CLS:', clsValue);
});

clsObserver.observe({type: 'layout-shift', buffered: true});

# Nginx cache konfiguráció
http {
    # FastCGI cache PHP-hoz
    fastcgi_cache_path /var/cache/nginx levels=1:2 keys_zone=PHPCACHE:100m inactive=60m;
    fastcgi_cache_key "$scheme$request_method$host$request_uri";
    
    server {
        location ~ \.php$ {
            fastcgi_cache PHPCACHE;
            fastcgi_cache_valid 200 60m;
            add_header X-Cache-Status $upstream_cache_status;
        }
    }
}

<!-- Kritikus CSS inline -->
<style>
  /* Above-the-fold critical CSS */
  body { margin: 0; font-family: sans-serif; }
  .header { display: flex; padding: 1rem; }
</style>

<!-- Nem-kritikus CSS async betöltése -->
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles.css"></noscript>

<!-- Modern image formátumok és responsive -->
<picture>
  <source 
    srcset="/image-800.webp 800w, /image-1200.webp 1200w" 
    type="image/webp"
    sizes="(max-width: 600px) 100vw, 800px"
  >
  <img 
    src="/image-800.jpg" 
    alt="Responsive kép"
    width="800"
    height="600"
    loading="eager"
    decoding="async"
  >
</picture>

// Code splitting - csak a szükséges kód betöltése
// Webpack/Vite automatikus code splitting
const HeavyComponent = () => import('./HeavyComponent.js');

// Lazy loading komponensek (React példa)
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Betöltés...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

/* Rossz: nincs hely foglalva */
.announcement {
  background: #ff0;
  padding: 1rem;
}

/* Jó: előre lefoglalt hely */
body {
  padding-top: 50px; /* Announcement bar magassága */
}

.announcement {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #ff0;
  z-index: 1000;
}