Kapsamlı Rehber

Teknik + SEO + UX + ISO Odaklı Büyük Web Performans Rehberi

Web sitesi performansını dört temel alanda optimize etmek için adım adım kılavuz. Modern web geliştirme standartlarına uygun, pratik ve uygulanabilir çözümler.

12 Kapsamlı Bölüm

ISO & WCAG Uyumlu

Pratik Çözümler

1. Giriş

Performans = SEO + UX + Dönüşüm + Güven

Modern web ekosisteminde, bir web sitesinin başarısını belirleyen en kritik faktörlerden biri performans yani hızdır. Artık yalnızca estetik bir tasarım sunmak yeterli değil; kullanıcılar, işletmeler ve arama motorları yüksek performanslı, hızlı ve erişilebilir deneyimler talep ediyor.

Günümüzde web site hızı üç büyük alanı doğrudan etkiler:

SEO – Arama Motoru Performansı

Google, hız kriterlerini (Core Web Vitals) resmi sıralama faktörleri arasına dahil etti.

Daha düşük sıralamalar,
Daha zayıf tarama bütçesi,
Daha az organik trafik anlamına gelir.

UX – Kullanıcı Deneyimi

Kullanıcıların sabrı, mobil internet hızları gibi kısıtlıdır. Performans artık doğrudan psikolojik kullanıcı deneyimi ile ilişkilidir.

                            Kritik Veriler:
                            3 saniyeden uzun süren açılışlar → %53 terk oranı
1 saniyelik gecikme → %7 dönüşüm kaybı

                        

İşletme & Gelir Performansı (CRO)

Hız, bir sitenin "ilk izlenimi"dir. İlk izlenim kötü olursa; Sepet terkleri artar, Güven azalır, Kullanıcı görevleri tamamlanamaz.

Amazon'un dev studiolarınca yapılan klasik çalışmaya göre: Her 100 ms yavaşlama yıllık milyonlarca dolar kayıp yaratıyor.

Web Site Optimizasyonu Neden Sadece SEO Değildir?

Web site performansı, üç bileşenin kesişim noktasındadır:

SEO (Google Lighthouse / PageSpeed Insights)

UX (ISO 9241 & WCAG 2.1 insan-merkezli tasarım standartları)

Teknik altyapı performansı (TTFB, CDN, sunucu, JS yükü)

Performans bu yüzden ekiple yapılır:

Geliştirici

UX Tasarımcı

SEO Uzmanı

İşletme Sahibi

Hepsi aynı hedef için çalışır: Daha hızlı, daha erişilebilir ve daha dönüşüm odaklı bir web sitesi.

Bu Rehberde Seni Ne Bekliyor?

Bu yazı; geliştiriciler, UX tasarımcıları, SEO uzmanları ve site sahipleri için hazırlanmış interaktif, bilimsel ve tamamen uygulamaya dönük bir rehberdir.

Web performansının temel bileşenleri

Google'ın ölçtüğü metrikler (Core Web Vitals)

Web siteni test etmek için kullanabileceğin en iyi araçlar

En sık yapılan 15 performans hatası ve çözümleri

Hızlandırmak için görsel, kod, sunucu ve SEO optimizasyon adımları

ISO 9241 ve WCAG standartlarına göre performans tasarımı

Kendi siteni adım adım analiz edebileceğin interaktif akış

Modern web teknolojileri ve geleceğin hız kriterleri

Sonunda 40 maddelik final kontrol listesi

Web güvenliği ve performansın birbirini nasıl desteklediği

Gerçek hayattan başarılı vaka analizleri ve örnekler

Sonunda 40 maddelik final test listesi (İnteraktif)

Bu rehber tamamlandığında:

Hem teorik hem de pratik anlamda en kapsamlı web optimizasyon kaynağına sahip olacaksın.
Bu yazıyı LinkedIn, Medium veya şirket web sitesinde premium bir içerik olarak kullanabileceksin.

Bölüm 1 tamamlandı

2. Web Performansının Temel Bileşenleri

Hızın arkasındaki bilim: SEO, UX, teknik altyapı ve standartlar. Web site optimizasyonu, tek bir parçadan oluşmaz; bir yap-boz gibidir.

Gerçek performans, bu dört ana bileşimin aynı anda iyileştirilmesiyle ortaya çıkar:

Kullanıcı Deneyimi (UX)

ISO 9241-11

Görsel Ergonomi

ISO 9241-302/303/304

Teknik Performans

Core Web Vitals & Web Performance Metrics

Mobil Performans

Mobile-First Dünya

2.1. Kullanıcı Deneyimi (UX) — ISO 9241-11 Perspektifi

ISO 9241-11 der ki: Bir sistem ancak kullanıcıların hedeflerine etkili, verimli ve memnun olarak ulaşmasını sağlıyorsa kullanılabilirdir.

Web performansında bu üç kavram şöyle karşılık bulur:

Etkililik (Doğru bilgiye hızlı ulaşma)

Kullanıcı 3 saniyeden önce sayfanın ana içeriğini görebilmeli.
Lazy-load yanlış kullanıldığında içerik bulma zorlaşır → Etkililik düşer.

Verimlilik (Hızlı etkileşim, düşük bekleme süresi)

Sunucu yanıt süresi (TTFB) kısa olmalı.
Gereksiz animasyon, büyük JS dosyaları Verimliliği düşürür.

Memnuniyet (Psikolojik kullanıcı deneyimi)

Spinner, loading skeleton gibi "algısal hız" teknikleri memnuniyeti artırır.
Kırmızı hatalar, bozuk tasarım memnuniyeti düşürür.

Sonuç: Hız, UX'in temelidir. Yavaş site ≠ iyi UX.

2.2. Görsel Ergonomi — ISO 9241-302 / 303 / 304 Standartları

Görsel ergonomi, performansı sessizce etkileyen alanlardan biridir. Bir sayfa hızlı yüklense bile görsel ergonomi kötü ise performans "algılanmaz".

Kontrast (ISO 9241-303 / WCAG 2.1)

Düşük kontrastlı metinler okuma hızını düşürür ve kullanıcı daha fazla zaman harcar. Google'ın PageSpeed skorlarında bile kontrast ihlalleri performans kategorisine etki eder.

Performans = teknik hız + algılanabilir hız

Renk Kullanımı ve Semantik Hatalar

Yanlış renk seçimi kullanıcı karar hızını düşürür (Örn: Masum bir uyarıyı kırmızıyla göstermek bilişsel yükü artırır).

Yeşil = Başarı Kırmızı = Hata / Tehlike Sarı = Uyarı Mavi / Gri = Nötr Bilgi

Font Büyüklüğü ve Okunabilirlik (ISO 9241-302)

Okunabilir bir site daha hızlı kullanılır. 12px altı font veya yetersiz satır aralığı bilgi bulma süresini uzatır.

Görsel Hiyerarşi ve Taranabilirlik (ISO 9241-304)

Sayfa çok hızlı yüklense bile taranamıyorsa performans düşüktür. İyi bir hiyerarşi, kullanıcı gözünü yönlendirerek görev tamamlama süresini kısaltır.

2.3. Teknik Performans — Core Web Vitals / PageSpeed kriterleri

Google'ın teknik performans ölçümü 3 temel, kullanıcı merkezli metriğe dayanır:

LCP (Largest Contentful Paint)

Amaç: Sayfanın ana içeriği en geç 2.5 saniyede görünmeli.

Neden Yavaşlar: Büyük görseller, yavaş sunucu (TTFB), Render-blocking CSS.

INP (Interaction to Next Paint)

Amaç: Kullanıcının butona tıkladığında sitenin tepki verme hızı (Tepkisellik).

Neden Yavaşlar: Aşırı büyük JS dosyaları, çok fazla event listener, Framework optimizasyon eksikliği. (2024 itibarıyla en kritik UX metriği.)

CLS (Cumulative Layout Shift)

Amaç: Sayfa yüklenirken elemanların kaymaması.

Neden Kötüdür: Yanlışlıkla tıklamalar, kayıp dönüşümler, kötü kullanıcı memnuniyeti.

Ek Teknik Metrikler: TTFB (Sunucu yanıt süresi), FCP (First Contentful Paint), TBT (Total Blocking Time).

2.4. Mobil Performans — Mobile-First Dünya

Google'ın verilerine göre web trafiğinin %65'i mobil cihazlardan geliyor. Bu yüzden mobil performans teknik performanstan bile daha kritiktir.

Daha yavaş CPU

Mobil cihazlar masaüstünün %30–40 işlem gücüne sahiptir. Ağır JS yükleri mobilde sistemi hemen kilitler.

Daha düşük internet kalitesi

Mobil kullanıcılar genelde 4G / zayıf Wi-Fi kullanır. Bu, yüksek boyutlu görsellerin ölüm fermanıdır.

Responsive tasarım + performans ilişkisi

Masaüstü için yüklenen JS paketleri veya sıkıştırılmamış görseller mobilde büyük performans kaybına yol açar. Mobil optimizasyon artık opsiyon değil: zorunluluktur.

Bölüm 2 tamamlandı

3. Web Sitesi Performansı Nasıl Ölçülür?

Doğru analiz = Doğru optimizasyon. Bir web sitesinin hızını artırmanın ilk adımı, sitenin gerçek sorunlarını tespit etmektir. Doğru araçlar kullanılmadan yapılan her optimizasyon "kör kurşun" gibidir.

Bu bölümde, hem geliştiricilerin hem SEO uzmanlarının hem de UX araştırmacılarının kullandığı tüm analiz araçlarını adım adım öğreneceksin.

3.1. Google PageSpeed Insights (PSI)

Google'ın resmi performans ölçüm aracıdır. Gerçek kullanıcı verilerini (CrUX) ve laboratuvar verilerini birlikte gösterir. Mobil ve masaüstü performansını ayrı ayrı ölçer.

PageSpeed Neyi Ölçer? (Core Web Vitals ve Metrikler)

LCP

INP

CLS

TTFB

TBT

PageSpeed'e Göre "Kırmızı – Sarı – Yeşil" Skorlar

Skor	Durum	Açıklama
0–49	Kötü	Acil iyileştirme gereklidir.
50–89	Orta	İyileştirme potansiyeli yüksek.
90–100	İyi	Google için yeterince hızlı.

Önemli Not: 90+ almak gerçek dünyada "çok hızlı" bir site olduğun anlamına gelmez. Bu sadece "Google için yeterince hızlı" demektir.

3.2. Google Lighthouse (Chrome DevTools içinde)

Lighthouse, PageSpeed'in "daha gelişmiş sürümüdür". Geliştiriciler için ağır kaynakları, bloklayan elementleri ve kod problemlerini tek tek listelemesi açısından hayati bir araçtır.

Performans

Erişilebilirlik (A11y)

SEO

Best Practices

PWA uygunluğu

3.3. GTmetrix

Kanada merkezli gelişmiş performans analiz aracı. GTmetrix'in en benzersiz özelliği, sitenin nerede takıldığını anlamak için en iyi yöntem olan Waterfall (su şelalesi) görünümüdür.

GTmetrix'in Öne Çıkanları:

Farklı ülkelerden test etme
Farklı tarayıcılar ve cihazlar
Yüklenme zaman çizelgesi ve Video ile yüklenme kaydı

Waterfall ile Neler Görülür? (Sorun Tespiti)

Belirti	Sorun	Etkisi
İlk isteğin geç başlaması	DNS / TTFB sorunları	Sunucu veya ağ gecikmesi
CSS dosyalarının sıra beklemesi	Render-blocking CSS	Ekran geç açılır (FCP gecikmesi)
JS dosyalarının yükün çoğunu alması	Fazla JS kullanımı	INP ve TBT problemi (etkileşim gecikmesi)
Görsellerin çok büyük yüklenmesi	Optimize edilmemiş JPG/PNG	LCP problemi

3.4. WebPageTest

Profesyonel seviye analiz aracıdır. Netflix, Amazon, Google mühendisleri dahil herkesin kullandığı, en gerçekçi hız analizini sunan platformdur.

Farklı kıtalardan test yapma imkanı.

Farklı hız simülasyonları (3G, 4G, 5G, broadband).

Otomatik film şeridi (filmstrip) görünümü.

AI-based optimizasyon önerileri.

3.5. Chrome DevTools – Performance Panel

Bu araç, performansın röntgenini çeker ve geliştiriciler için altın değerindedir.

DevTools ile anlık olarak şunlar analiz edilir:

CPU yükü ölçülür ve optimize edilir.
JavaScript bloklamaları tespit edilir (TBT'nin nedeni).
Layout ve paint işlemleri analiz edilir.
Ekran donma anları ve FPS düşüşleri görülür.

Mobil performans optimizasyonunun kalbi buradadır.

3.6. CrUX – Google Chrome Kullanıcı Deneyimi Verisi

PageSpeed'in gerçek kullanıcı verisidir. CrUX verileri, tüm kullanıcıların en az %75'inin yaşadığı gerçek hızı gösterir (75. yüzdelik dilim).

Kullanıcıların gerçek hız deneyimi.
Mobil/masaüstü farkları.
LCP, INP, CLS medyan değerleri.

3.7. Sonuç: Analiz İçin En Doğru Kombinasyon

En verimli analiz akışı, profesyonel ekiplerin kullandığı standart sıralamadır:

PageSpeed Insights Testi (PSI)

Genel durum + yönlendirme (Ne durumdayız?)

Lighthouse

Teknik detay (İlk kod problemi ne?)

GTmetrix

Waterfall ve yük sırası (Kaynaklar nasıl sıralanıyor?)

WebPageTest

Farklı konum ve hız testleri (Gerçek dünya performansı ne?)

DevTools

Son dokunuşlar, CPU ve JS analizi (En küçük JS bloğunu kim oluşturuyor?)

CrUX

Gerçek kullanıcı verisi (Kullanıcılar gerçekten ne hissediyor?)

Bölüm 3 tamamlandı

4. Sık Yapılan 15 Performans Hatası

Bir web sitesini yavaşlatan tüm gizli düşmanlar ve bunları yok etmenin yolları. Bu bölüm hem geliştiriciler hem SEO uzmanları hem UX ekipleri için altın değerinde pratik bilgiler içerir.

Optimize Edilmemiş Görseller ▼

Neden Oluşur?

Görseller çoğu sitenin yükün %60-80'ini oluşturur. Yanlış format (Büyük PNG), sıkıştırma yapılmaması veya boyut tanımlanmaması.

Performansa Etkisi:

LCP yükselir: Ana içerik yavaş yüklenir.
Mobil yükleme dramatik şekilde yavaşlar.
CLS riski (Boyut tanımlanmazsa).

Nasıl Çözülür?

Format Dönüşümü: JPG → sıkıştır; PNG → yalnızca şeffaflık için kullan; WebP/AVIF → modern formatları tercih et.
Yükleme: Fold altı görsellerde Lazy-load kullan.
CLS Önleme: "width" ve "height" özniteliklerini mutlaka tanımla.

Render-Blocking CSS ve JS ▼

Neden Oluşur?

Tarayıcı, sayfayı işleyebilmek için bu dosyaları bekler. Sonuç: "beyaz ekran" veya "geç açılan hero görseli".

Performansa Etkisi:

FCP ve LCP gecikir.
Total Blocking Time (TBT) artar.

Nasıl Çözülür?

CSS: Dosyaları küçült (minify). Sayfanın görünmesi için Kritik CSS'i inline olarak ekle.
JS: Dosyalarda defer veya async özniteliklerini kullan.

Yüksek TTFB (Sunucu Yanıt Süresi) ▼

Neden Oluşur?

TTFB (Time To First Byte), sunucunun yanıt vermeye başlaması için geçen süredir. Başlıca sebepleri: Yetersiz hosting, ağır dinamik sorgular, CDN kullanılmaması.

Performansa Etkisi:

Tüm metriklerin (FCP, LCP) başlangıç noktası gecikir.
Sunucu ilk izlenimi zayıflatır.

Nasıl Çözülür?

İyi bir hosting (VPS/Cloud) seç.
CDN kullan.
Sunucu/Sayfa Cache mekanizması kur.
Veritabanı sorgularını ve işlem yoğun backend kodunu optimize et.

Zayıf Caching Stratejisi ▼

Neden Oluşur?

Önbellek (cache) yoksa veya yanlış yapılandırılmışsa, kullanıcı her ziyaret ettiğinde tüm statik dosyalar (CSS, JS, Resim) yeniden indirilir.

Performansa Etkisi:

Tekrarlanan ziyaretlerde hız sıfırlanır.
Sunucu yükü artar.

Nasıl Çözülür?

Browser Caching: cache-control başlıklarını uzun süreler için ayarla.
Server Caching: Redis, Memcached gibi nesne önbelleklerini kullan.
CDN caching ve HTML caching (reverse proxy) kullan.

Çok Fazla HTTP İsteği ▼

Neden Oluşur?

Gereksiz CSS, JS, icon, font ve API çağrıları. Tarayıcı her kaynak için yeni bir bağlantı açmak zorundadır.

Performansa Etkisi:

Gecikme (latency) süresini katlar.
Sayfa yükünü uzatır.

Nasıl Çözülür?

Kod Birleştirme (Bundling): CSS ve JS dosyalarını tek bir dosyada topla.
Gereksiz kütüphaneleri (Slick slider, jQuery) kaldır.
Font kullanımını sınırla (Tek font ailesi + 2-3 ağırlık yeterli).
SVG ikon kullan.

Kullanılmayan Kod (Unused CSS/JS) ▼

Neden Oluşur?

PageSpeed'in "Remove unused JS/CSS" uyarısı. Tüm sitede kullanılan genel kütüphanelerin sadece bir sayfada kullanılması.

Performansa Etkisi:

Gereksiz indirme süresi.
Tarayıcı gereksiz kodu ayrıştırmak için zaman harcar.

Nasıl Çözülür?

Kullanmadığın kütüphaneleri sil.
Modern bundler (Vite, Webpack) ile Tree-shaking aktif et.
CSS için Purge işlemi yap (Tailwind/PurgeCSS).

CDN Kullanılmaması ▼

Neden Oluşur?

CDN (Content Delivery Network) yoksa, kullanıcı ile sunucu arasındaki fiziksel mesafe artar → gecikme (latency) artar.

Performansa Etkisi:

TTFB ve FCP küresel olarak yavaşlar.

Nasıl Çözülür?

Cloudflare, Bunny CDN, AWS CloudFront gibi bir hizmet kullan.
Statik dosyaları (Resimler, CSS, JS) CDN üzerinden sun.

Mobil Performansın İhmal Edilmesi ▼

Neden Oluşur?

Mobil cihazların CPU'su masaüstüne göre daha yavaştır. Masaüstü için yüklenen ağır JS paketleri mobilde ciddi sorun yaratır.

Performansa Etkisi:

Daha yavaş CPU nedeniyle TBT ve INP patlar.
Kullanıcı bağlılığı düşer.

Nasıl Çözülür?

Mobil-first CSS kullan.
Mobilde dev JS paketlerini dinamik olarak kaldır veya boyutunu küçült.
Tüm dokunma hedefleri 44px üzeri olmalı (UX/ISO standardı).

Yavaş Veritabanı ve Ağır Sorgular ▼

Neden Oluşur?

Özellikle WordPress, e-commerce ve dinamik içerik sitelerinde kötü yazılmış SQL sorguları veya eksik indeksler.

Performansa Etkisi:

Sunucu yanıt süresi (TTFB) artar.
Sayfa oluşturma süresi uzar.

Nasıl Çözülür?

Tablolara indeksler ekle.
Gereksiz sorguları temizle ve JOIN'leri azalt.
Query caching aktif et.

Üçüncü Parti Script Patlaması ▼

Neden Oluşur?

Google Ads, Facebook Pixel, Hotjar, chat widget'ları gibi harici kaynaklar sunucunuzdan bağımsız olarak yüklenir ve genellikle render-blocking yapar.

Performansa Etkisi:

TBT ve INP üzerinde kontrol edilemez bir yük oluşturur.
Güvenlik ve gizlilik riskleri artar.

Nasıl Çözülür?

Gereksiz scriptleri kaldır.
Scriptleri async ile yükle veya Partytown gibi araçları kullan.
Birleştirilmiş Google Tag Manager (GTM) container kullan.

Çok Büyük JavaScript Paketleri ▼

Neden Oluşur?

React, Vue, Angular projelerinde veya tek sayfalık uygulamalarda (SPA) tüm kodun tek bir pakette toplanması.

Performansa Etkisi:

Yüksek TBT, uzun ayrıştırma ve derleme süresi.
INP ve mobil performans çöküşü.

Nasıl Çözülür?

Kod bölme (Code Splitting) ile kodu mantıksal parçalara ayır.
Component'leri Lazy-load et.
Next.js / Nuxt gibi SSR frameworkleri kullan.

Layout Shift (CLS) Sorunları ▼

Neden Oluşur?

Sayfa yüklenirken elemanların aniden kayması (özellikle yükseklik belirtilmemiş resimler veya dinamik olarak yüklenen reklamlar).

Performansa Etkisi:

Kullanıcı memnuniyeti (UX) sıfıra düşer.
Yanlışlıkla tıklamalar ve kayıp dönüşümler oluşur.

Nasıl Çözülür?

Resimlere ve iFrame'lere width/height veya CSS aspect-ratio ekle.
Dinamik içerikler için (reklamlar) yükseklik rezervasyonu yap (placeholder).
Web fontları için font-display: swap kullan.

Büyük Font Dosyaları ▼

Neden Oluşur?

Çok fazla font ailesi, gereksiz font ağırlıkları veya eski dosya formatları (TTF/OTF).

Performansa Etkisi:

FCP ve LCP gecikir (fontlar yüklenene kadar metin görünmez).
Felt (Flash of Unstyled Text) veya FOIT (Flash of Invisible Text) yaratır.

Nasıl Çözülür?

Google Fonts yerine yerel font kullan ve önbellekle.
Modern, sıkıştırılmış WOFF2 formatina geç.
Gereksiz font ağırlıklarını kaldır.

JavaScript ile Render Edilen İçerikler ▼

Neden Oluşur?

React/Vue gibi frameworklerde içeriğin sunucu tarafında değil, istemci (client) tarafında işlenmesi (CSR).

Performansa Etkisi:

Tarayıcı önce JS'i indirip çalıştırmak zorundadır → TBT artar.
SEO botları için tarama bütçesi zorlanır.

Nasıl Çözülür?

SSR (Server Side Rendering) veya Static Rendering kullan.
React 18'deki "Selective Hydration" gibi yeni mimarileri benimse.

Performans Testi Yapılmaması ▼

Neden Oluşur?

Performansın subjektif olarak "hızlı" hissedilmesi, ölçülmemesi.

Performansa Etkisi:

Gerçek sorunlar tespit edilemez.
Optimizasyonlar körü körüne yapılır.

Nasıl Çözülür?

Haftalık PSI testi yap.
Aylık GTmetrix analizi yap.
Yeni özellik ekledikçe Lighthouse testi yap.
Mobil testleri kesinlikle ihmal etme.

Bölüm 4 tamamlandı

5. En İyi Optimizasyon Teknikleri

Hız, tutarlılık ve verimlilik için modern web optimizasyon stratejileri. Optimizasyon tekniklerini 6 ana başlıkta topluyoruz.

Görsel Optimizasyonu

Kod Optimizasyonu

Sunucu & Network

SEO Odaklı Performans

Mobil Performans

UX & ISO Standartları

🔵 5.1. Görsel Optimizasyonu

Görseller, bir sitenin yükünün %70'ine kadar çıkabilir. Bu nedenle görsel optimizasyonu, hızlandırmanın 1 numaralı adımıdır.

Modern Görsel Formatları

WebP: İdeal, hafif, yüksek kalite. AVIF: WebP'den bile daha küçük (Mümkünse tercih edilir). SVG: İkonlar ve basit grafikler için en iyisidir.

Görseller İçin Zorunlu 4 Teknik

Görsel Sıkıştırma

ImageOptim, TinyJPG, Squoosh gibi araçları kullanarak boyutları küçült.

Kayıpsız / Kayıplı

Responsive Görseller

srcset ve sizes kullanarak cihaza göre doğru çözünürlük yükle. (Yükü %40–60 azaltır.)

%40-60 Azaltma

Lazy-Loading (Gecikmeli Yükleme)

Fold altı görsellerde gecikmeli yükleme kullan:

<img src="image.webp" loading="lazy" alt="örnek" />

Width & Height Belirt (CLS Koruması)

Bu iki özellik CLS'yi (kayma sorununu) %90 azaltır.

CLS Önleyici

🟢 5.2. Kod Optimizasyonu (CSS, JS, HTML)

Kod optimizasyonu, özellikle Lighthouse ve PageSpeed skorlarını doğrudan yükseltir.

JavaScript İçin En Güçlü 6 Teknik

async ve defer kullan (Ana içeriği bloklamasın).
Kod bölme (code splitting) ve Lazy-load component kullan.
Ağır kütüphaneleri çıkar (Örn: Moment.js yerine Day.js).
TBT (Total Blocking Time) düşür.
Minify + Tree Shaking ile gereksiz kodları temizle.
Kullanılmayan JS'i kaldır (Slider kütüphaneleri, eski scriptler…).

CSS ve HTML Teknikleri

Minify ve Unused CSS'i temizle (PurgeCSS).
Kritik CSS'i inline koy.
Büyük CSS frameworklerinden kaçın (Örn: Bootstrap yerine Tailwind).
CSS dosyalarını böl (Sadece gereken sayfalarda yüklensin).
Gereksiz DOM elemanlarını kaldır (1500 element altı hedef).

🟡 5.3. Sunucu & Ağ Optimizasyonu (TTFB, CDN, Cache)

Performansın yarısı sunucuda kazanılır. En hızlı web sitesi bile yavaş bir sunucuda çöker.

TTFB'yi (Sunucu yanıt süresi) düşürmek için 6 adım

Hızlı Hosting Seçimi

VPS/Cloud gibi hızlı bir barındırma hizmeti seçmek, TTFB süresinin düşmesinde %50 etkili olur. Yavaş hosting en hızlı kodu bile yavaşlatır.

CDN Kullanımı

CDN (Content Delivery Network) ile statik dosyalar (resim, CSS, JS) kullanıcının coğrafi konumuna en yakın sunucudan dağıtılır. Bu, global gecikmeyi (latency) sıfırlar.

Cache Mekanizması

Sunucu (Redis/Memcached), Sayfa (Reverse Proxy) ve Tarayıcı (Browser Caching) seviyesinde katmanlı önbellekleme kurarak TTFB'yi minimuma indirin.

HTTP/3 Protokolü

HTTP/3 (QUIC), bağlantı kurma süresini kısaltır ve mobil ağlarda bağlantı kopmalarını engeller. Modern sunucularda zorunludur.

Kaynak Önceliği (Preload/Preconnect)

Tarayıcıya kritik kaynakları önceden bildirme komutlarıdır:

            
                <link rel="preload" href="hero.webp" as="image">
                <link rel="preconnect" href="https://fonts.googleapis.com">

Veritabanı Optimizasyonu

Ağır SQL sorgularını indeksleme ve temizleme, sunucunun ilk yanıt verme süresini (TTFB) hızlandırır.

🔴 5.4. SEO Odaklı Performans Optimizasyonu

Performans artık SEO'nun temelidir. Google'ın Core Web Vitals metrikleri sıralama faktörü olarak çalışır.

LCP Odaklanması

Ana görsel optimizasyonu ve sunucu hızlandırma ile sağlanır.

INP Azaltma

JS yükünü ve Event listener sayısını düşürerek etkileşim hızını artır.

CLS Sorunları

Görsellere width/height, reklamlara placeholder ver.

Mobil Hız

Google sıralamayı mobil üzerinden yapar, mobil hızı zorunludur.

Tarama Bütçesi

Daha hızlı site → Daha fazla sayfa taranır (E-ticaret siteleri için kritik).

🟣 5.5. Mobil Performans Optimizasyonu

Mobil kullanıcılar daha sabırsızdır ve cihazları daha yavaştır (daha düşük CPU ve zayıf internet kalitesi).

Mobil İçin 8 Altın Kural

Mobil-first kodlama

Hafif görseller (düşük çözünürlük)

Touch hedefleri 44px+

Yüksek kontrast (UX/ISO)

JS paketlerinin %50 küçültülmesi

Lazy-loading agresif kullanılabilir

Şişkin menülerden kaçın

"Scroll donması" olmamalı

🟤 5.6. UX & ISO Standartlarına Uygun Hız Tasarımı

UX hız demektir. ISO 9241 standartları performansı insan-merkezli açıdan ele alır.

"Algılanan Hız" Teknikleri (UX Tarafı)

Skeletal loading: Gerçekten hızlı algılatır.
Progress bar / loading indicator: Beklemeyi daha "anlamlı" kılar.
İçeriği parça parça yükle: Kullanıcı boş ekran görmesin.
Hero alanını en önce yükle: Psikolojik hızın temelidir.

Bölüm 5 tamamlandı

6. Adım Adım Web Sitesi Performans İyileştirme Rehberi

Aşağıdaki akış, gerçek bir UX/SEO geliştiricisinin iş akışıdır. Bu metodoloji 3 aşamalı bir süreç üzerine kurulmuştur.

1. Aşama: Analiz & Veri Toplama

Optimizasyon yapmadan önce sitenin tüm röntgenini çekmemiz gerekir. Aşağıdaki 6 araç ve verisi kullanılır:

PageSpeed Insights Testi (PSI)

Mobil ve masaüstü için ayrı ayrı LCP, INP, CLS değerleri alınır. Hangi elementin LCP olarak tanımlandığı işaretlenir.

Lighthouse Gelişmiş Test

Render-blocking kaynaklar, Aşırı JS yükü, Aşırı DOM boyutu ve Teknik SEO/Erişilebilirlik sorunları toplanır.

GTmetrix Testi

Özellikle Waterfall görünümü, TTFB, Sayfa boyutu ve Üçüncü parti script gecikmeleri incelenir.

WebPageTest – Filmstrip ve Konum Analizi

Farklı ülkelerden test yapılarak coğrafi gecikme ölçülür. Filmstrip ile sayfanın ilk 5 saniyesi kare kare analiz edilir.

DevTools Performance Panel

Geliştiricilerin yaptığı en kritik analiz: JS bloklamaları, Reflow/Paint yoğunluğu ve CPU kullanımı bulunur.

CrUX – Gerçek Kullanıcı Verileri

Gerçek kullanıcıların LCP, INP, CLS medyan değerleri ölçülür. Bu veriler laboratuvar verisinden her zaman daha önemlidir.

2. Aşama: Teşhis (Sorunların Kaynağını Bulma)

Analizden sonra veriler, 5 ana başlık altında toplanır ve sorunlar ayrıştırılır:

Görsel Kaynaklar

LCP'nin büyük görsel olması, 1MB üzeri hero, yanlış format veya Width/height eksikliği (CLS sebebi).

Render-Blocking CSS/JS

Lighthouse uyarısı incelenir: Kritik CSS/JS inline mi? Dosyalar defer/async mi? Framework'ün JS bundle boyutu nedir?

Sunucu & TTFB Problemleri

GTmetrix'te ilk isteğin bekleme süresi incelenir: Sunucu yavaş mı? CDN kullanılıyor mu? Dinamik sorgular ağır mı?

Üçüncü Parti Scriptler

Waterfall'da Hotjar, Facebook Pixel, Chat widget'ları gibi tehlikeli scriptlerin neden olduğu gecikmeler tespit edilir.

Mobil Performans Zayıflıkları

4G hız simülasyonunda ağır kaynaklar, yüksek CLS veya yavaş cihaz CPU'su nedeniyle yüksek INP sorunları belirlenir.

3. Aşama: Optimizasyon Uygulama Süreci

Bu aşama, sitenin gerçekten hızlandığı, öncelik sırasına göre yapılan teknik müdahaleleri içerir (LCP en yüksek önceliktir).

LCP Optimizasyonu ( En Yüksek Öncelik)

LCP görselini WebP/AVIF'e çevir ve boyutu küçült.
Prefetch / Preload ile öncelik ver.
Hero alanındaki CSS/JS'leri böl ve hafiflet.

INP Optimizasyonu ( Etkileşim Gecikmesi)

Kullanılmayan JS'leri kaldır ve Code splitting yap.
Aşırı etkileşimli bileşenleri late-load yap.
JS'i async yükle. (React: UseTransition, Vue: Lazy routes).

CLS Optimizasyonu ( Kayma Sorunu)

Tüm görseller için width/height tanımla.
Web fontları için display: swap kullan.
Reklam alanlarına ve dinamik widget'lara sabit yükseklik (placeholder) ver.

4-5

Görsel & Kod Optimizasyonu ( Global)

Görselleri sıkıştır, ikonları SVG yap, srcset ile responsive yüklet.
CSS: Unused CSS temizle, Minify, Kritik CSS'i inline koy.
JS: Async/defer, Gereksiz kütüphaneleri kaldır.

Sunucu & Cache Optimizasyonu ( TTFB Düşürme)

Sunucuyu yükselt (LiteSpeed/Cloud önerilir).
Redis cache ve CDN aktif et.
HTTP/3 kullan ve veritabanı optimizasyonu yap.

7-10

Mobil, UX ve Final Testi ( Kapanış)

Mobil görseller düşük çözünürlükle yüklenmeli ve 44px+ dokunma hedefleri sağlanmalı.
UX: Skeletal loading ve Hero alanını öncelikli yükle.
SEO: Tarama bütçesi optimizasyonu (Hızlı site → daha çok sayfa).
Final Testi: Tüm işlemlerden sonra sonuçları karşılaştır.

Bölüm 6 tamamlandı

7. Web Performansında Derin Teknikler (Advanced Level)

Modern web teknolojilerinin sınırlarını zorlayan optimizasyon teknikleri. Bu bölümde HTTP/3, Edge Computing, render pipeline ve framework'lere özel teknikleri inceliyoruz.

🟢 7.1. HTTP/3 & QUIC ile Ultra Düşük Gecikme

QUIC Protokolü (%30-60 Daha Hızlı)

HTTP/3, Google'ın QUIC protokolünü temel alır ve önceki sürümlere göre %30–60 daha hızlıdır.

✔ Avantajları:

UDP kullanır → bağlantı gecikmesini azaltır (özellikle mobil).
Mobil cihazlarda sinyal zayıfladığında bağlantı kopmaz.
Aynı anda birden fazla isteği engellemeden iletebilir (Head-of-Line Blocking sorunu çözülür).
CDN'ler ile çok uyumludur (Cloudflare, Fastly, BunnyCDN).

🟡 7.2. Prefetch, Preload, Preconnect Stratejileri

Tarayıcıya "şimdiden hazırlan" komutu vermek LCP ve FCP sürelerini dramatik şekilde düşürür.

preload (Önemli Kaynak)

Önemli kaynak hemen yüklensin (CSS, kritik görsel).

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

preconnect (Bağlantı Kur)

Tarayıcıya "hemen bağlantıyı kur" der (Örn: Font sunucuları).

<link rel="preconnect" href="https://fonts.googleapis.com">

prefetch (Sonraki Sayfa)

Bir sonraki sayfa için önceden veri indirmek için kullanılır (SPA'larda etkilidir).

<link rel="prefetch" href="/hakkimizda">

⭐ prerender (Agresif Yükleme)

Tüm sayfayı arka planda yükler (Çok agresif ama hızlıdır).

🔵 7.3. Edge Computing & Serverless Rendering

Modern web projeleri artık içeriği kullanıcıya en yakın lokasyonda render ediyor (Cloudflare Workers, Vercel Edge Functions, Fastly).

Sunucuya En Yakın Render: Edge Computing

TTFB inanılmaz derecede düşer.
Dinamik içerik bile hızlı render edilir.
Cache katmanı dünya çapında yayılır.

Bu teknikler özellikle e-ticaret, haber siteleri ve global platformlar için oyun değiştiricidir.

🔴 7.4. Render Pipeline Optimizasyonu (Tarayıcı Seviyesinde Hız)

Tarayıcının işleme sırasını (Parse → CSSOM → Layout → Paint → Composite) optimize etme süreci.

✔ İleri Düzey Çözümler:

DOM 1500 elemanın altında olmalı (Büyük DOM yükten kaçın).
Animasyonlar için `will-change: transform` kullan.
`transform: translate()` animasyonları daha hızlıdır (Position animasyonlarından kaçın).
`opacity` animasyonları GPU hızlandırmalıdır.
Scroll sırasında çalışan JS kaldırılmalı, Intersection Observer tercih edilmeli.

🟣 7.5. Font Optimizasyonunda Profesyonel Teknikler

Fontlar, fark edilmeyen en büyük performans düşmanlarındandır (WOFF2 zorunlu).

Advanced Teknikler

Font Subset: Font dosyasının içinden yalnızca gerekli karakterleri ayıklayarak ekstra %70 kazanç sağlanabilir (Örn: Türkçe karakter seti için özel subset).
`display: swap` (en hızlı) veya `display: optional` (en agresif hız) gibi stratejiler kullan.
Local Storage Font Cache (Yüksek trafikli siteler için).

🟠 7.6. CDN Edge Cache Katmanı ile Ultra Performans

Modern CDN'ler artık sadece statik dosya dağıtımı değil, dinamik içerik caching bile yapabilir (Fastly Full-Page Cache, Cloudflare APO).

CDN Edge Cache Avantajları:

TTFB %70 azalır.
Trafik yükü minimize edilir.
Saldırılara karşı ekstra güvenlik.

Özellikle dinamik içerikler için CDN Edge Cache katmanı kullanılmalıdır.

🟢 7.7. Modern Framework Performansı

React / Next.js

Concurrent rendering, UseTransition ile INP düşürme, Incremental Static Regeneration (Next.js).

Vue / Nuxt

Auto code-splitting, Suspense ile async bileşenler, Nuxt server routes ile hızlı API.

Svelte / SvelteKit

En küçük bundle boyutu, minimum JS üretimi ve ultra hızlı client-side etkileşim.

🟫 7.8. Ölçeklenebilir Cache Stratejileri (Profesyonel Seviyede)

Stale-While-Revalidate (SWR)

Kullanıcıya eski içerik hemen sunulur → arka planda yenisi güncellenir. Modern optimize edilmiş sitelerin neredeyse hepsi bunu kullanır.

Multi-Level Cache:

Browser → CDN → Server → Redis/Application-level cache katmanlarının koordineli kullanımı.

Bölüm 7 tamamlandı

8. ISO 9241 & WCAG Standartlarına Uygun Performans Tasarımı

Hız + Kullanılabilirlik + Erişilebilirlik = Gerçek Performans. ISO 9241 ve WCAG, performansın insan merkezli boyutunu ortaya koyar.

🟦 8.1. ISO 9241-11: Etkililik, Verimlilik ve Memnuniyet

ISO 9241-11, bir sistemin kullanılabilirliğini 3 temel ölçütle tanımlar. Bunlar, teknik performansın kullanıcı üzerindeki yansımasıdır.

✔ 1) Etkililik

Kullanıcının hedefe ulaşabilme başarısıdır. LCP hızlı açılmalı, butonlar gecikmemeli, görev akışında "bekleme" yaşanmamalı.

✔ 2) Verimlilik

Kullanıcının görevi tamamlama süresi. Yavaş sayfa → görev süresi uzar. Verimlilik = Hız × Arayüz Kalitesi.

✔ 3) Memnuniyet

Deneyimden duyulan psikolojik tatmin. Kayma (CLS) ve boş ekranlar memnuniyeti düşürür. Algılanan hız burada kritiktir.

🟩 8.2. ISO 9241-302/303/304: Görsel Ergonomi

Performans sadece yükleme süresi değil, aynı zamanda ekrandaki içeriğin ne kadar rahat algılandığıyla ilgilidir.

Kontrast (WCAG ile İlişkili)

Düşük kontrast okunma hızını düşürür ve göz yorgunluğunu artırır.
Minimum WCAG kontrast oranı: Normal metin: 4.5:1 / Büyük metin: 3:1.

Taranabilirlik (Scannability)

Kullanıcıların %70'i sayfaları taramalı okur. Taranabilir bir site daha hızlı algılanır ve kullanılır.

Kısa paragraflar, Başlık hiyerarşisi, Kart tasarımları.
İkon + renk kullanımı, Etkili boşluk (whitespace) dengesi.

🟨 8.3. WCAG 2.1 (Erişilebilirlik) & Performans İlişkisi

WCAG, evrensel hız ve performans prensipleri içerir.

1. Algılanabilirlik

Görseller için alt etiketi, Metin kontrastı, Mobil uyum. İçeriğin hızlı algılanmasını sağlar.

2. Operasyonellik

Dokunma hedefi 44px, Klavye ile gezinilebilirlik. Kullanıcı siteyi hızlı kullanabilmelidir.

3. Anlaşılabilirlik

Basit dil, Tutarlı tasarım, Beklenmeyen animasyon olmaması. Dönüşüm odaklı sayfalarda performansı artırır.

4. Sağlamlık

HTML semantiği doğru, Tarayıcı uyumluluğu. Sitenin farklı cihazlarda tutarlı performans göstermesini sağlar.

🟧 8.4. Algılanan Hız (Psychological Speed) Tasarımı

Gerçek hız değil, kullanıcının hissettiği hız önemlidir. Bu, UX performansının en kritik parçasıdır.

Algısal Hız Teknikleri:

Skeletal Screen (İskelet Yükleme): Boş ekran yerine iskelet yükleme → kullanıcı siteyi daha hızlı algılar.
Hero Alanının Öncelikli Yüklenmesi: İlk görünen ekran hızlı açılmalı.
Progress Bar / Loader Tasarımı: "Bekliyorsun ama işler ilerliyor" hissi verir.
İçeriği Parça Parça Yüklemek: Algısal olarak daha hızlı bir süreç sunar.

🟫 8.5. ISO + WCAG + Core Web Vitals Üçgeni

Performansı en üst seviyeye çıkaran, birbirini destekleyen üçlü şudur:

Performansın Kesişim Noktası:

ISO 9241 (Kullanıcı): Deneyimin Etkililiği.
WCAG 2.1 (Erişilebilirlik): Evrensel Kullanılabilirlik.
Core Web Vitals (Teknik Performans): Ölçülebilir Metrikler.

Bölüm 8 tamamlandı

9. Gelişen Web Teknolojileri ve Performans Trendleri

Modern web, hız ve kullanıcı deneyimini optimize etmek için sürekli evrim geçiriyor. Geleceğin performans trendlerini inceliyoruz.

🟦 9.1. Single Page Application (SPA) & Framework Performansı

SPA'lar (React, Vue, Svelte) hız avantajı sunar, ancak optimizasyon gereklidir.

İleri Düzey SPA Teknikleri:

Code-splitting: JS paketlerini sayfa veya route bazında bölerek initial load düşürülür.
Lazy-loading komponentler: Kullanıcı görmeden bileşeni yükleme.
Concurrent rendering (React 18 / Vue 3): INP ve TBT'yi ciddi şekilde düşürür.
Server Side Rendering (SSR) + Hydration optimizasyonu: İlk sayfa hızlı, etkileşim minimal gecikmeli.

🟩 9.2. Lazy Loading & Dynamic Imports

Uzun sayfalar veya görsel ağırlıklı sitelerde performansı dramatik şekilde artırır.

Görsel/Video Lazy-Load

Görseller ve videolar: <img loading="lazy"> kullanımı ile fold altındaki yük kaldırılır.

Dynamic Imports (JS)

Dynamic imports (JS): import('module').then(...) → JS paketi sadece gerektiğinde yüklenir.

Intersection Observer API

Scroll ile görünürlük tetiklemeli yüklemeler → CPU yükü minimum tutulur.

🟨 9.3. SSR (Server-Side Rendering) vs CSR (Client-Side Rendering)

SSR (Server-Side Rendering)

HTML server'da render edilir. Avantajları: TTFB düşük, SEO dostu, ilk render hızlı.

CSR (Client-Side Rendering)

Tarayıcı JS ile render eder. Avantajları: SPA avantajı, kullanıcı etkileşimi hızlı.

Optimal Çözüm: Hibrit Mimari (Next.js, Nuxt, Svelte). Kritik içerik SSR, interaktif içerik CSR ile yüklenir.

🟪 9.4. Gelecek Trendleri: Edge Computing & AI

CDN & Edge Computing

İçerik kullanıcıya en yakın lokasyonda render edilir. Edge Functions ile dinamik içerik bile global hız avantajı sağlar. Edge caching TTFB'yi düşürür.

AI Destekli Optimizasyon

AI tabanlı WebP/AVIF dönüştürme, JS bundle küçültme ve kullanıcı davranışı tahminine dayalı prefetch/preload stratejileri geleceğin standardıdır.

5G & Yeni Nesil Mobil

5G'nin düşük gecikmesi ve yüksek bant genişliği, mobil cihazlarda "yüksek hız"ı standart hale getiriyor. Progressive Web Apps (PWA) + Edge AI ile mobil deneyimi devrim yaratacak.

Bölüm 9 tamamlandı

10. Web Güvenliği ve Performans İlişkisi

Web güvenliği, site performansını doğrudan etkileyen kritik bir faktördür. Güvenlik zafiyetleri sadece veri ihlallerine yol açmakla kalmaz, aynı zamanda sitenin hızını ve kullanıcı deneyimini de olumsuz etkiler.

🟦 10.1. HTTPS ve SSL/TLS Optimizasyonu

HTTPS, hem güvenlik hem de performans açısından olmazsa olmazdır. Google, HTTPS'i bir sıralama faktörü olarak kabul eder.

HTTPS'in Güvenlik ve SEO Avantajları

Veri Bütünlüğü ve Gizlilik: Veri transferi şifrelenir.
SEO Avantajı: Güvenli siteler Google'da daha iyi sıralanır.
HTTP/2 ve HTTP/3 Desteği: Modern protokoller sadece HTTPS ile çalışır, bu da hız artışı sağlar.
Güven İmzası: Kullanıcılara sitenin güvenilir olduğu mesajını verir.

SSL/TLS Optimizasyon İpuçları

SSL/TLS Sertifikası Seçimi: EV veya OV sertifikaları tercih edilebilir.
TLS 1.3: En güncel ve hızlı TLS protokolüdür, sunucuda aktif edilmelidir.
HSTS (HTTP Strict Transport Security): Tarayıcıların siteye her zaman HTTPS üzerinden bağlanmasını zorlar, ek güvenlik ve hız sağlar.

🟩 10.2. Güvenlik Başlıkları ve Performans

HTTP güvenlik başlıkları, tarayıcının kötü niyetli saldırılara karşı nasıl davranacağını belirler ve bazıları performans üzerinde dolaylı etkilere sahiptir.

Önemli Güvenlik Başlıkları:

Content-Security-Policy (CSP): XSS saldırılarını önler. Doğru yapılandırıldığında, yüklenen kaynakları kısıtlayarak beklenmedik script yüklemelerinin neden olduğu performans düşüşlerini engeller.
X-Content-Type-Options: MIME-sniffing saldırılarını engeller.
X-Frame-Options: Clickjacking saldırılarını önler.
Referrer-Policy: Yönlendirme bilgilerini kontrol ederek gizliliği artırır.

🟨 10.3. DDOS Koruması ve CDN

DDoS saldırıları, sunucu kaynaklarını tüketerek sitenin performansını tamamen durdurabilir. CDN'ler burada kritik bir rol oynar.

CDN'in Güvenlik ve Performans Faydaları:

DDoS Saldırılarını Filtreleme: Saldırı trafiğini dağıtarak ana sunucuya ulaşmasını engeller.
Bot Koruması: Kötü niyetli botları tanır ve engeller.
WAF (Web Application Firewall): Web uygulaması güvenlik açıklarına karşı koruma sağlar.
Performans Avantajı: Güvenlik katmanı sunarken aynı zamanda içerik dağıtımını hızlandırır.

Cloudflare, Akamai gibi CDN hizmetleri, hem güvenlik hem de performans açısından entegre çözümler sunar.

Bölüm 10 tamamlandı

11. Başarılı Vaka Analizleri ve Gerçek Dünya Örnekleri

Teorik bilgileri ve teknikleri, gerçek dünya uygulamalarıyla birleştiren vaka analizleri. Büyük markalar ve küçük işletmelerin performans optimizasyonu yolculuklarından ilham alın.

🟦 11.1. Amazon: Her 100ms Gecikme Milyonlarca Kayıp

Amazon: 100ms Kayıp Kuralı

Problem:

Amazon, 2000'li yılların başında her 100 milisaniye gecikmenin satışlarda ciddi düşüşlere neden olduğunu tespit etti. Bu, web performansının iş gelirleri üzerindeki doğrudan etkisini gösteren ilk büyük ölçekli çalışmalardan biriydi.

Çözüm & Sonuç:

Mikroservis Mimarisi: Her bir bileşeni ayrı ayrı optimize edebilme.
Edge Caching & CDN: İçeriği kullanıcılara en yakın noktalardan sunma.
Sürekli Performans Testi: Her kod değişikliğinde hız testleri yapma.

Bugün Amazon, dünyanın en hızlı e-ticaret sitelerinden biri olmaya devam ediyor ve performans odaklı kültürü bu başarının temelinde yatıyor.

🟩 11.2. Google Arama Motoru: Core Web Vitals ve Etkisi

Core Web Vitals'ın SEO Üzerindeki Etkisi

Problem:

Kullanıcıların yavaş sitelerde arama sonuçlarından geri dönmesi, Google'ın UX kalitesini düşürüyordu.

Çözüm & Sonuç:

Metriklerin Tanımlanması: LCP, INP, CLS gibi ölçülebilir metriklerle site sahiplerine yol gösterme.
PageSpeed Insights & Lighthouse: Ücretsiz araçlarla analiz ve öneriler sunma.
SEO Sıralamasına Etki: Hızlı siteleri ödüllendirerek genel web kalitesini artırma.

Bu hamle, sadece SEO'yu değil, aynı zamanda web geliştirme pratiklerini de derinden etkiledi ve hızın önemini bir kez daha kanıtladı.

🟨 11.3. E-Ticaret Siteleri: Sepet Terk Oranları ve Hız

E-ticaret siteleri için performans, doğrudan gelir anlamına gelir. Yavaş açılan sayfalar, yüksek sepet terk oranlarına yol açar.

1 Saniyelik Gecikme = %7 Dönüşüm Kaybı

Problem:

Ortalama bir e-ticaret sitesinde 1 saniyelik gecikme, %7'ye kadar dönüşüm kaybına neden olabilir.

Temel Çözümler:

Görsel Optimizasyonu: Ürün görsellerini WebP/AVIF formatına dönüştürme, lazy-loading.
Sunucu ve Veritabanı Optimizasyonu: Hızlı hosting, Redis cache, optimize edilmiş SQL sorguları.
Mobil-First Tasarım: Mobil kullanıcıların satın alma alışkanlıklarına uygun, hızlı ve erişilebilir bir deneyim sunma.

Başarılı e-ticaret siteleri, performans optimizasyonunu bir pazarlama stratejisi olarak benimser ve sürekli iyileştirme yapar.

🟣 11.4. Vaka Analizi: AS Bilim Danışmanlık – Kendi Sitemizdeki Mükemmeliyet Yolculuğu

Giriş Vurgusu: Performans Artık Bir Seçenek Değil, Bir Zorunluluktur.

Bu rehberin en somut kanıtı olarak, AS Bilim Danışmanlık web sitesini, en katı standartlara göre optimize ettik. Elde ettiğimiz %100 Mobil ve Masaüstü 95+ PageSpeed skorları, performansın teknik karmaşıklıktan ziyade, doğru strateji ve uygulama gerektiren yönetilebilir bir disiplin olduğunu kanıtlamaktadır.

*Web Sitesi Hızı = SEO + UX + Gelir* formülümüzün gerçekliğini gösterdik. Optimizasyon öncesindeki kod şişkinliği ve gereksiz yükler gibi sorunları rehberimizdeki en iyi tekniklerle çözdük.

1. Teknik İyileştirmeler: LCP, INP ve CLS Odağı

Metrik Uygulanan Vurucu Çözüm Elde Edilen Teknik Sonuç

LCP Fold-Üstü görsellere `rel="preload"` önceliği verildi. TTFB 200ms altına indirildi. < 2.5 sn render

INP Non-kritik JS `async/defer` ile yüklendi. Intersection Observer temelli Lazy Loading uygulandı. < 100ms etkileşim

CLS Tüm görsellerde `width/height` zorunlu kılındı. Web fontları için `font-display: swap` kullanıldı. Sıfır kayma (CLS ≈ 0)

2. Kod ve Altyapı Mükemmeliyeti

Kod Şişkinliğinin Giderilmesi: Modern Tree-Shaking ve Code-Splitting yöntemleriyle gereksiz JavaScript paketleri (Dead Code) tamamen elimine edildi.
Görsel Devrim: Tüm görseller WebP/AVIF formatına çevrildi ve CDN üzerinden dağıtımı sağlandı. Bu, mobil ağlarda bile sayfa yükünü minimize etti.
Ağ Protokolü: HTTP/3 (QUIC) protokolüne geçiş yapılarak ağ gecikmesi (latency) en aza indirildi.

3. Kapanış: Kazançlarımız ve Vizyon

CRO Desteği: İyileşen yükleme hızı sayesinde potansiyel müşteri terk oranları düşürüldü.
SEO Üstünlüğü: Hız, erişilebilirlik (WCAG) ve teknik uyumluluk ile arama motorlarında daha yüksek görünürlük ve tarama bütçesinde artış sağlandı.
Kullanıcı Güveni: Herkes için ulaşılabilir ve tutarlı bir kullanıcı deneyimi (ISO 9241) yaratarak marka güveni pekiştirildi.

Bu rehberde sunulan her teknik, sitemizin canlı bir kanıtıdır. Bizim için bu, bir başlangıçtır; dijital varlığımızı sürekli optimize etmeye ve geliştirmeye devam edeceğiz.

Web Sitemizi Ziyaret Edin

Bölüm 11 tamamlandı

12. Sonuç & Performans Kontrol Listesi

Bu rehber ile web siteniz artık Hız + UX + Erişilebilirlik = Gerçek Performans formülünü tamamlamış oluyor.

Teknik Optimizasyon

Core Web Vitals (LCP, INP, CLS) optimize edildi.
HTTP/3 ve Edge Computing ile altyapı güçlendirildi.

Kullanıcı Deneyimi

ISO 9241 standartlarına uygun "etkili ve verimli" bir yapı kuruldu.
Skeleton loading ile bekleme süreleri yönetildi.

Erişilebilirlik

WCAG standartları ile herkes için ulaşılabilir oldu. Mobil uyumluluk zorunluluktur.

🟩 12.1. 40 Maddelik Önceliklendirilmiş Performans Checklist

Aşağıdaki tablo, rehber boyunca anlatılan tüm tekniklerin önem derecesine göre (Kritik, Önemli, Opsiyonel) sıralanmış tam listesidir.

Öncelik	Kontrol Maddesi	Amaç / Açıklama
KRİTİK	HTML, CSS, JS minify edildi mi?	Dosya boyutunu küçültür, yüklemeyi hızlandırır.
KRİTİK	GZIP veya Brotli sıkıştırma aktif mi?	Sunucu taraflı sıkıştırma ile ağ transferini hızlandırır.
KRİTİK	HTTP/3 kullanılıyor mu?	Bağlantı gecikmesini (latency) düşürür.
KRİTİK	CDN ile içerik dağıtımı var mı?	Global kullanıcılar için sunucu yanıt süresini düşürür.
KRİTİK	Image lazy-loading uygulanmış mı?	Görünmeyen resimleri yüklemeyerek açılışı hızlandırır.
KRİTİK	Responsive ve mobil uyumlu mu?	Google SEO ve mobil kullanıcı deneyimi için zorunludur.
KRİTİK	Critical CSS inline mı?	İlk ekranın (above-the-fold) anında render edilmesini sağlar.
KRİTİK	LCP, INP, CLS değerleri optimize mi?	Google Core Web Vitals metriklerini karşılar.
KRİTİK	İlk görünen ekran hızlı mı?	Kullanıcının algıladığı hızı maksimize eder.
KRİTİK	UX + ISO 9241 + WCAG testi yapıldı mı?	Sadece hız değil, kullanılabilirlik testi.
ÖNEMLİ	Edge caching stratejisi doğru mu?	Dinamik içeriği kullanıcıya yakın sunar.
ÖNEMLİ	WebP/AVIF formatları kullanılıyor mu?	Görsel boyutlarını %30-50 oranında düşürür.
ÖNEMLİ	JS sadece gerekli sayfada mı yükleniyor?	Gereksiz kod yükünü (bloat) engeller.
ÖNEMLİ	Dynamic imports ve code-splitting var mı?	JavaScript paketlerini böler ve yönetir.
ÖNEMLİ	Preload, prefetch, preconnect var mı?	Tarayıcıya kritik kaynakları önceden bildirir.
ÖNEMLİ	Font subset yapıldı mı?	Font dosyasından kullanılmayan karakterleri atar.
ÖNEMLİ	JS re-render'lar minimize edildi mi?	Gereksiz işlemci (CPU) kullanımını önler.
ÖNEMLİ	Intersection Observer kullanılmış mı?	Scroll olaylarında performansı korur.
ÖNEMLİ	Skeleton loading uygulanmış mı?	Bekleme sırasında algılanan hızı artırır.
ÖNEMLİ	Animasyonlar GPU hızlandırmalı mı?	FPS düşüşlerini ve takılmaları önler.
ÖNEMLİ	Scroll sırasında JS minimal mi?	Kaydırma performansını akıcı tutar.
ÖNEMLİ	Dokunma hedefleri min. 44px mi?	Mobil kullanım kolaylığı (ISO standardı).
ÖNEMLİ	WCAG kontrast oranları uygun mu?	Okunabilirlik ve erişilebilirlik sağlar.
ÖNEMLİ	ARIA etiketleri doğru mu?	Ekran okuyucular için hız ve anlam sağlar.
ÖNEMLİ	Semantik HTML mevcut mu?	Tarayıcıların sayfayı daha hızlı işlemesini sağlar.
ÖNEMLİ	Reflow ve repaint minimize mi?	Görsel güncellemelerin tarayıcıyı yormasını engeller.
ÖNEMLİ	Bundle boyutu minimal mi?	İlk yükleme ve ayrıştırma (parse) süresini düşürür.
ÖNEMLİ	SSR + CSR hibrit optimizasyonu var mı?	Hem SEO hem etkileşim hızı sağlar.
ÖNEMLİ	AI tabanlı optimizasyon araçları var mı?	Otomatik iyileştirmeler için kullanılır.
ÖNEMLİ	Analytics script'leri non-blocking mi?	Takip kodlarının siteyi yavaşlatmasını engeller.
ÖNEMLİ	Multi-level cache stratejisi var mı?	Sunucu ve tarayıcı tarafında çok katmanlı hız.
ÖNEMLİ	Stale-while-revalidate var mı?	Kullanıcıya beklemeden içerik sunar.
ÖNEMLİ	CDN purging doğru yapılandırılmış mı?	Eski içeriğin hemen temizlenmesini sağlar.
ÖNEMLİ	Browser cache TTL doğru mu?	Tekrar gelen ziyaretçiler için anında açılış.
ÖNEMLİ	JS throttling/debouncing var mı?	Aşırı olay tetiklemeyi (input, resize) engeller.
ÖNEMLİ	Büyük DOM yapıları küçültülmüş mü?	Bellek kullanımını ve render süresini iyileştirir.
OPSİYONEL	Loader/progress bar bilgi veriyor mu?	Bekleme süresini anlamlı kılar.
OPSİYONEL	Formlar ve menüler operable mı?	Kullanıcı etkileşim hızını artırır.
OPSİYONEL	Error handling ile yavaşlık engelleniyor mu?	Hatalı API çağrılarının arayüzü kilitlemesini önler.
OPSİYONEL	Font ailesi sayısı minimal mi?	Tasarım yükünü hafifletir.
OPSİYONEL	Arama motoru tarama bütçesi optimize mi?	SEO için daha fazla sayfa taranır.
OPSİYONEL	Kullanılmayan CSS/JS temizlenmiş mi?	Gereksiz indirme ve parse süresini engeller.
OPSİYONEL	Veritabanı sorguları optimize mi?	TTFB'yi sunucu tarafında düşürür.
OPSİYONEL	GPU hızlandırmalı kaydırma aktif mi?	Kaydırma akıcılığını (FPS) artırır.
OPSİYONEL	Mobil ağ koşulları test edildi mi?	Gerçek kullanıcı deneyimini ölçer.

⭐ 12.2. Performansınızı Test Edin: İnteraktif Checklist

Yukarıdaki tablodan seçilmiş 40 KRİTİK ve ÖNEMLİ maddeyi sitenizde uygulayıp uygulamadığınızı dürüstçe işaretleyin ve anında performans skorunuzu görün!

Tüm Bölümler Tamamlandı