SEO ve Performans Optimizasyonu: Kapsamlı Bir Vaka Analizi

Teknik SEO ve web performansı, başarılı herhangi bir web uygulaması için kritik faktörlerdir. Bu vaka analizi, portföy web sitemin arama motoru görünürlüğünü ve yükleme performansını optimize etmek amacıyla uyguladığım stratejileri ve teknikleri incelemektedir.

Core Web Vitals Değerlerini Anlamak

Core Web Vitals (Önemli Web Verileri), Google'ın gerçek dünya kullanıcı deneyimini ölçmek için kullandığı metriklerdir. Şunları içerir:

Largest Contentful Paint (LCP) - En Büyük Zengin İçerikli Boyama

LCP, yükleme performansını ölçer. İyi bir kullanıcı deneyimi sunmak için LCP'nin 2.5 saniye içinde gerçekleşmesi gerekir.

// Kritik kaynakları önceden yükleyerek LCP'yi optimize edin
<link rel="preload" href="/fonts/main-font.woff2" as="font" crossorigin />
<link rel="preconnect" href="https://images.unsplash.com" />

First Input Delay (FID) - İlk Giriş Gecikmesi

FID, etkileşimi ölçer. Sayfaların FID değerinin 100 milisaniyeden az olması gerekir.

// Ana thread (iş parçacığı) yükünü azaltmak için kod bölme
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />
});

Cumulative Layout Shift (CLS) - Kümülatif Düzen Kayması

CLS, görsel kararlılığı ölçer. Sayfalar 0.1 değerinden daha düşük bir CLS oranına sahip olmalıdır.

/* Düzen kaymasını önlemek için görsellere yer ayırın */
img {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

Teknik SEO Uygulaması

Meta Etiketlerinin (Meta Tags) Optimizasyonu

Doğru meta etiketleri, arama motorlarının içeriğinizi anlamasına yardımcı olur:

export const metadata: Metadata = {
  title: {
    default: "Sayfa Başlığı | Marka Adı",
    template: "%s | Marka Adı"
  },
  description: "Özgün, açıklayıcı meta açıklaması",
  keywords: ["ilgili", "anahtar", "kelimeler"],
  robots: {
    index: true,
    follow: true,
  },
  openGraph: {
    type: "website",
    locale: "tr_TR",
    url: "https://example.com",
    siteName: "Marka Adı",
  },
};

Sitemap & Robots.txt

İyi yapılandırılmış bir sitemap (site haritası), arama motorlarının sayfalarınızı keşfetmesini kolaylaştırır:

<!-- robots.txt -->
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml

<!-- sitemap.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com</loc>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>

Yapılandırılmış Veri (Schema Markup)

Arama sonuçlarını zenrichleştirmek için yapılandırılmış veri ekleyin:

{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Adınız Soyadınız",
  "url": "https://example.com",
  "jobTitle": "Yazılım Mühendisi",
  "sameAs": [
    "https://github.com/kullaniciadi",
    "https://linkedin.com/in/kullaniciadi"
  ]
}

Performans Optimizasyonu Teknikleri

Görsel Optimizasyonu

Görseller genellikle indirilen bayt miktarının büyük kısmını oluşturur:

// Next.js Image bileşenini kullanın
import Image from 'next/image';

<Image
  src="/hero-image.jpg"
  alt="Açıklayıcı alternatif metin"
  width={800}
  height={600}
  priority // Ekranın üst kısmında kalan (above-the-fold) görseller için
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

Yazı Tipi (Font) Optimizasyonu

Yorumlamayı engelleyen (render-blocking) kaynakları ortadan kaldırmak için yazı tiplerini kendi sunucunuzda barındırın:

/* font-display: swap görünmez metin oluşmasını engeller */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

JavaScript Paket (Bundle) Optimizasyonu

JavaScript paket boyutunuzu analiz edin ve küçültün:

# Paket boyutunu analiz edin
npm run build --analyze

# Büyük kütüphaneler için dinamik içe aktarma kullanın
const Chart = dynamic(() => import('react-chartjs'), {
  ssr: false,
  loading: () => <ChartSkeleton />
});

Sonuçlar

Bu optimizasyonlar uygulandıktan sonra web sitesi şu değerlere ulaştı:

| Metrik | Öncesi | Sonrası | İyileşme Oranı | |--------|--------|-------|------------| | LCP | 4.2s | 1.8s | %57 daha hızlı | | FID | 150ms | 45ms | %70 daha hızlı | | CLS | 0.25 | 0.05 | %80 azalma | | Performans Skoru | 67 | 94 | +27 puan |

Sonuç

Teknik SEO ve performans optimizasyonu sürekli devam eden süreçlerdir. Google PageSpeed Insights, Lighthouse ve WebPageTest ile yapılan düzenli izlemeler, yüksek skorların korunmasına yardımcı olur ve sürekli iyileştirme için yeni fikirler sunar.

Unutmayın: Hızlı, erişilebilir ve iyi optimize edilmiş bir web sitesi yalnızca arama motorlarında üst sıralarda yer almakla kalmaz, aynı zamanda ziyaretçileri sadık kullanıcılara dönüştüren üstün bir kullanıcı deneyimi sunar.