DA
Tüm yazılara dön
Sayfa Hızı Optimizasyonu: Web Performansını Artırmanın Etkili Yolları

Sayfa Hızı Optimizasyonu: Web Performansını Artırmanın Etkili Yolları

Web PerformansıSayfa HızıSEOKullanıcı DeneyimiOptimizasyon

Sayfa Hızı Optimizasyonu: Web Performansını Artırmanın Etkili Yolları

Web sitenizin yükleme hızı, hem kullanıcı deneyimi hem de arama motoru sıralaması için kritik önem taşır. Google, sayfa hızını ranking faktörü olarak kullanırken, kullanıcılar da yavaş siteleri terk etme eğilimindedir.

Sayfa Hızı Neden Bu Kadar Önemli?

SEO Etkisi

  • Google 2010'dan beri sayfa hızını ranking faktörü olarak kullanıyor
  • Mobile-First Indexing ile mobil hız daha da kritik hale geldi
  • Core Web Vitals, 2021'den itibaren doğrudan sıralamayı etkiliyor

Kullanıcı Deneyimi

  • 1 saniye gecikme, %7 conversion kaybına neden olur
  • %40 kullanıcı, 3 saniyeden uzun yüklenen siteleri terk eder
  • Amazon, 100ms hız artışının %1 revenue artışı sağladığını tespit etti

İş Etkisi

Yükleme Süresi → Bounce Rate → Conversion Rate
1-3 saniye   → %32 artış   → %12 azalış
1-5 saniye   → %90 artış   → %38 azalış
1-10 saniye  → %123 artış  → %67 azalış

Sayfa Hızını Etkileyen Ana Faktörler

1. Server Response Time (TTFB)

İlk byte'ın kullanıcıya ulaşma süresi:

  • İdeal: 200ms altı
  • Kabul edilebilir: 500ms altı
  • Yavaş: 800ms üstü

2. Render-Blocking Resources

  • CSS ve JavaScript dosyaları
  • External fontlar
  • Third-party scriptler

3. Image Optimization

  • Sıkıştırılmamış görsel dosyaları
  • Uygun format seçimi (WebP, AVIF)
  • Responsive image kullanımı

Sayfa Hızı Test Aracımızı Kullanma

Sayfa Hızı Test Aracımız ile performansınızı detaylı analiz edebilirsiniz:

Aracın Sunduğu Metrikler:

  1. Loading Performance

    • First Contentful Paint (FCP)
    • Largest Contentful Paint (LCP)
    • Speed Index

  2. Interactivity

    • Time to Interactive (TTI)
    • First Input Delay (FID)
    • Total Blocking Time (TBT)

  3. Visual Stability

    • Cumulative Layout Shift (CLS)

Test Sonuçlarını Yorumlama:

Skor Aralığı | Performans Durumu | Aksiyon
90-100      | Mükemmel         | Mevcut durumu koru
50-89       | İyileştirilebilir | Optimizasyon gerekli
0-49        | Kötü             | Acil müdahale gerekli

Praktik Optimizasyon Teknikleri

1. Image Optimization

Format Seçimi:

<!-- Modern format desteği -->
<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Açıklama" loading="lazy" />
</picture>

Lazy Loading:

<img
  src="placeholder.jpg"
  data-src="actual-image.jpg"
  loading="lazy"
  alt="Açıklama"
/>

2. CSS Optimizasyonu

Critical CSS İnline:

<head>
  <style>
    /* Critical CSS - Above the fold içerik için */
    .header {
      ...;
    }
    .hero {
      ...;
    }
  </style>
  <link
    rel="preload"
    href="non-critical.css"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
  />
</head>

CSS Minification:

/* Öncesi */
.button {
  background-color: #3498db;
  border-radius: 5px;
  padding: 10px 20px;
}

/* Sonrası */
.button {
  background-color: #3498db;
  border-radius: 5px;
  padding: 10px 20px;
}

3. JavaScript Optimizasyonu

Code Splitting:

// Route-based splitting
const HomePage = lazy(() => import("./HomePage"));
const AboutPage = lazy(() => import("./AboutPage"));

// Component-based splitting
const HeavyComponent = lazy(() => import("./HeavyComponent"));

Resource Hints:

<!-- DNS prefetch -->
<link rel="dns-prefetch" href="//fonts.googleapis.com" />

<!-- Preconnect -->
<link rel="preconnect" href="https://api.example.com" />

<!-- Prefetch -->
<link rel="prefetch" href="/next-page.html" />

<!-- Preload -->
<link rel="preload" href="critical.css" as="style" />

Server-Side Optimizasyonlar

1. HTTP/2 ve HTTP/3

# Nginx configuration
server {
    listen 443 ssl http2;
    # HTTP/3 için
    listen 443 quic reuseport;
    http3 on;
    http3_hq on;
}

2. Gzip/Brotli Compression

# Apache .htaccess
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/javascript
</IfModule>

3. Browser Caching

<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType image/png "access plus 1 month"
</IfModule>

Core Web Vitals Optimizasyonu

Largest Contentful Paint (LCP) İyileştirme:

  • Hero image'leri optimize edin
  • Server response time'ı azaltın
  • Critical resources'leri preload edin

First Input Delay (FID) İyileştirme:

  • JavaScript execution time'ı azaltın
  • Code splitting uygulayın
  • Web Workers kullanın

Cumulative Layout Shift (CLS) İyileştirme:

  • Image ve video boyutlarını tanımlayın
  • Font loading'i optimize edin
  • Dynamic content insertion'dan kaçının

Mobil Optimizasyon Stratejileri

1. Responsive Images:

<img
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 480px) 100vw,
            (max-width: 800px) 50vw,
            25vw"
  src="medium.jpg"
  alt="Responsive image"
/>

2. AMP (Accelerated Mobile Pages):

<!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
    </style>
  </head>
</html>

CDN ve Edge Computing

CDN Seçimi:

  • Cloudflare: Global network, ücretsiz SSL
  • AWS CloudFront: AWS ecosystem entegrasyonu
  • KeyCDN: Ekonomik seçenek
  • Fastly: Real-time purging

Edge Functions:

// Cloudflare Worker örneği
addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const cache = caches.default;
  const cacheKey = new Request(request.url, request);
  let response = await cache.match(cacheKey);

  if (!response) {
    response = await fetch(request);
    event.waitUntil(cache.put(cacheKey, response.clone()));
  }

  return response;
}

Monitoring ve Sürekli İyileştirme

1. Real User Monitoring (RUM):

// Web Vitals ölçümü
import { getCLS, getFID, getFCP, getLCP, getTTFB } from "web-vitals";

getCLS(console.log);
getFID(console.log);
getFCP(console.log);
getLCP(console.log);
getTTFB(console.log);

2. Performance Budget:

{
  "budget": [
    {
      "path": "/**",
      "timings": [
        {
          "metric": "interactive",
          "budget": 5000
        },
        {
          "metric": "first-meaningful-paint",
          "budget": 2000
        }
      ]
    }
  ]
}

Yaygın Performans Sorunları ve Çözümleri

Problem: Yavaş Database Queries

Çözüm: Query optimization, indexing, caching

Problem: Büyük JavaScript Bundles

Çözüm: Code splitting, tree shaking, lazy loading

Problem: Optimize Edilmemiş Images

Çözüm: Next-gen formats, responsive images, compression

Problem: Third-party Scripts

Çözüm: Async loading, critical script prioritization

Sonuç

Sayfa hızı optimizasyonu, sürekli bir süreçtir. Sayfa Hızı Test Aracımızla düzenli olarak performansınızı ölçerek:

  • Core Web Vitals metriklerinizi takip edin
  • Kullanıcı deneyimini sürekli iyileştirin
  • SEO sıralamanızı güçlendirin
  • Conversion oranlarınızı artırın

Unutmayın: Hız optimizasyonu teknik bir konu olmakla birlikte, asıl amacı kullanıcılarınıza daha iyi bir deneyim sunmaktır. Her optimizasyon kararını bu perspektifle değerlendirin.

Back to all posts