Web performansı, kullanıcı deneyimini ve SEO’yu doğrudan etkiler.

Core Web Vitals

1. LCP (Largest Contentful Paint)

En büyük içeriğin yüklenmesi: < 2.5s

<!-- Image optimization -->
<img 
  src="hero.jpg" 
  loading="lazy"
  width="1200" 
  height="600"
  alt="Hero image"
/>

<!-- Modern formats -->
<picture>
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero.avif" type="image/avif">
  <img src="hero.jpg" alt="Hero">
</picture>

2. FID (First Input Delay)

İlk etkileşim gecikmesi: < 100ms

// Code splitting
const HeavyComponent = lazy(() => 
  import('./HeavyComponent')
);

// Debounce input handlers
const debouncedSearch = debounce((query) => {
  fetchResults(query);
}, 300);

3. CLS (Cumulative Layout Shift)

Layout kayması: < 0.1

/* Reserve space for images */
.image-container {
  aspect-ratio: 16 / 9;
  background: #f0f0f0;
}

/* Font loading */
@font-face {
  font-family: 'Custom';
  font-display: swap;
  src: url('custom.woff2');
}

Bundle Optimization

// Tree shaking
import { debounce } from 'lodash-es';

// Dynamic imports
const module = await import('./heavy-module.js');

// Code splitting (Webpack)
const routes = [
  {
    path: '/admin',
    component: () => import('./Admin.vue')
  }
];

Caching Strategies

// Service Worker
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

// HTTP caching
Cache-Control: public, max-age=31536000, immutable

Lighthouse Score

Hedef: 90+ her metrikte

• Performance
• Accessibility
• Best Practices
• SEO

Performans optimizasyonu sürekli bir süreçtir!