Web Performans Optimizasyonu: Hizli Siteler Olusturma

Web Performansi Neden Onemlidir?

Web performansi, bir web sitesinin ne kadar hizli yuklendigini, ne kadar akici calistigini ve kullanicilarin etkilesimlerine ne kadar hizli yanit verdigini ifade eder. Performans, kullanici deneyimini, donusum oranlarini ve arama motoru siiralamalarini dogrudan etkileyen kritik bir faktordur.

Arastirmalar, sayfa yukleme suresindeki her 1 saniyelik artisin donusum oraninda %7'lik bir dususe, sayfa goruntulenme sayisinda %11'lik bir azalmaya ve musteri memnuniyetinde %16'lik bir gerillemeye yol acitigini gostermektedir. Google'in Core Web Vitals metrikleri 2021'den bu yana siralama faktoru olarak kullanilmakta ve 2026 itibariyle onemi giderek artmaktadir. Bu rehberde, web performansini olcme ve iyilestirme konusunda kapsamli bir yol haritasi sunacagiz.

Core Web Vitals: Temel Metrikler

Core Web Vitals (CWV), Google'in kullanici deneyimini olcmek icin belirleedigi uc temel metriktir. Bu metrikler hem arama siralaamasini hem de gercek kullanici deneyimini dogrudan etkiler.

LCP (Largest Contentful Paint)

Sayfadaki en buyuk gorsel veya metin blogunun gorunur hale gelmesi icin gecen sureyi olcer. Kullanicinin "sayfa yuklendi" algisini temsil eder.

• Iyi: 2.5 saniyenin altinda
• Iyilestirme gerekli: 2.5 - 4 saniye arasi
• Kotu: 4 saniyenin uzerinde

LCP'yi iyilestirmek icin: sunucu yanit suresini kIsaltin, render-blocking kaynaklari optimize edin, buyuk gorselleri sikistirin ve CDN kullanin.

INP (Interaction to Next Paint)

Kullanicinin sayfayla etkilesime girdigi andan (tiklama, dokunma, klavye) tarayicinin gorsel guncellemeyi tamamlamasina kadar gecen sureyi olcer. FID'in yerini alan bu metrik, sayfanin genel yanit verme hizini daha kapsamli degeerlendirir.

• Iyi: 200 milisaniyenin altinda
• Iyilestirme gerekli: 200 - 500 milisaniye arasi
• Kotu: 500 milisaniyenin uzerinde

INP'yi iyilestirmek icin: uzun JavaScript gorevlerini parcalayin, ana is parcacigini mesgul eden kodlari optimize edin, gereksiz yeniden renderlamalari onleyin.

CLS (Cumulative Layout Shift)

Sayfa yuklenirken ogelerin beklenmedik sekilde yer degistirmesini olcer. Kullanici yanlis yere tikladiiginda veya okuduugu metin kaydiginda yasanan sinir bozucu deneyimi ifade eder.

• Iyi: 0.1'in altinda
• Iyilestirme gerekli: 0.1 - 0.25 arasi
• Kotu: 0.25'in uzerinde

CLS'yi iyilestirmek icin: gorsellere boyut tanimlayiin, dinamik icerikler icin alan ayirin, font yuklemesini optimize edin ve reklamlari sabit alanlara yerlestirin.

Lighthouse ile Performans Olcumu

Google Lighthouse, web sayfalarinizin performans, erisilebilirlik, SEO ve en iyi uygulamalar acisindan degerlendirilmesini saglayan acik kaynak bir aractir.

Lighthouse Kullanim Yollari

• Chrome DevTools: F12 ile DevTools'u acin, Lighthouse sekmesine gidin ve analiz baslaatin.
• PageSpeed Insights: pagespeed.web.dev adresinde URL girerek hem lab hem de saha verilerini gorun.
• CLI: npx lighthouse https://siteniz.com komutu ile terminal uzerinden analiz yapin.
• CI/CD Entegrasyonu: Lighthouse CI ile her deploy oncesi performans puanlarini otomatik kontrol edin ve regresyonlari yakalayiin.

Lighthouse Metrikleri

Kod Bolumleme (Code Splitting)

Kod bolumleme, JavaScript bundle'inizi daha kucuk parcalara ayirarak yalnizca o sayfada ihtiyac duyulan kodun yuklenmesini saglayan bir optimizasyon tekniigidir.

• Rota Bazli Bolumleme: Next.js ve React Router gibi framework'ler, her sayfa icin otomatik kod bolumleme yapar. Kullanici yalnizca ziyaret ettigi sayfanin kodunu yukler.
• Dinamik Import: import() fonksiyonu ile bilesenleri veya kutuphaneleri ihtiyac aninda yukleyin. Ornegin, bir modal bilesen ancak kullanici butona tikladiiginda yuklenebilir.
• Ucuncu Parti Kutuphane Izolasyonu: Buyuk kutuphaneleri (chart, harita, editör) ana bundle'dan ayirarak asenkron yukleyin.
• Tree Shaking: Kullanilmayan kodlarin bundle'a dahil edilmemesini saglayin. ES modules kullanin ve side-effect'i olmayan import'lari tercih edin.

Onbellekleme (Caching) Stratejileri

Dogru onbellekleme stratejileri, tekrar eden ziyaretlerde sayfa yukleme suresini dramatik sekilde azaltir.

Tarayici Onbellegi

• Cache-Control Bassliklari: Statik dosyalar (CSS, JS, gorseller) icin uzun sureli onbellekleme (max-age=31536000) tanimlayiin. Dosya adi hash'leri ile cache busting uygulayin.
• ETag: Dosya icerigine dayali benzersiz kimlik ile degismemis dosyalarin yeniden yuklenmesini engelleyin.
• Service Worker: Progressive Web App (PWA) yaklasimi ile kritik kaynaklari offline erissim icin onbellekleyin.

Sunucu Tarafli Onbellekleme

• Redis/Memcached: Veritabani sorgularini ve API yanitlarini bellek icinde onbellekleyerek sunucu yanit suresini kisaltin.
• Full Page Cache: Dinamik olmayan sayfalar icin tum HTML yanittini onbelleekleyin.
• Stale-While-Revalidate: Eski onbellek yanitini sunarken arka planda yeni versiyonu yukleyen strateji.

CDN (Content Delivery Network)

CDN, web sitenizin statik ve dinamik iceriklerini dunya genelindeki sunuculara dagitarak kullanicilara fiziksel olarak en yakin sunucudan icerik sunmayi saglar.

• Cloudflare: Ucretsiz plani bile guuclu CDN, DDoS korumasi ve otomatik gorsel optimizasyonu sunar. Workers ile edge computing imkani saglar.
• Vercel Edge Network: Next.js uygulamalari icin optimize edilmis, otomatik CDN dagitimi ve edge fonksiyonlari.
• AWS CloudFront: Genis POP (Point of Presence) agi, Lambda@Edge destegi ve granüler onbellekleme kontrolleri.
• Fastly: Gercek zamanli onbellek temizleme, VCL ile gelismis kurallar ve yuksek performans.

Gorsel Optimizasyonu

Gorseller, tipik bir web sayfasinin toplam boyutunun %50'sinden fazlasini olusturur. Gorsel optimizasyonu, performans iyilestirmesinin en buyuk etkiyi yaratan alanidir.

• Modern Formatlar: WebP formatini varsayilan olarak kullanin; JPEG'e kiyasla %25-35 daha kucuk dosya boyutu saglar. AVIF ise WebP'den bile %20 daha verimlidir ancak tarayici destegi daha sinirlidir.
• Responsive Images: srcset ve sizes ozellikleri ile farkli ekran boyutlarina uygun gorsel versiyonlari sunun.
• Lazy Loading: loading="lazy" ile gorunur alan disindaki gorsellerin yuklenmesini ertelein. LCP gorseli icin lazy loading kullanmayin.
• Boyut Belirleme: Tum gorsellere width ve height ozellikleri ekleyerek CLS'yi onleyin.
• Sikistirma: Kayipli sikistirmada kalite %80-85 seviyesi genellikle gorsel kaliteyi korurken dosya boyutunu onemli olcude azaltir.
• Otomatik Optimizasyon: Next.js Image bilesen, Cloudinary veya imgix gibi araclar ile gorselleri otomatik optimize edin.

JavaScript Optimizasyonu

JavaScript, web performansinin en buyuk darbogazlarindan biridir. Ana is parcacigini bloke eden agir JavaScript, sayfanin etkilesime hazir olma suresini uzatir.

• Defer ve Async: Kritik olmayan script'leri defer veya async ozellikleri ile yukleyin. defer sirali yukleme, async bagimsiz asenkron yukleme saglar.
• Bundle Boyutu Analizi: webpack-bundle-analyzer veya next/bundle-analyzer ile JavaScript bundle'inizi inceleyin. Gereksiz buyuk bagimliliklari tespit edin.
• Ucuncu Parti Script'ler: Analitik, reklam ve sosyal medya widget'lari gibi ucuncu parti script'lerin performans etkisini olcun. Partytown gibi araclar ile bu script'leri web worker'a tasiyabilirsiniz.
• Minification: Tum JavaScript ve CSS dosyalarini minify edin. Modern bundler'lar (webpack, esbuild, Turbopack) bunu otomatik yapar.

CSS Optimizasyonu

• Kritik CSS: Sayfa yuklendiginde gorunur alani (above the fold) render etmek icin gereken CSS'i inline olarak HTML'e yerlestirin. Kalan CSS'i asenkron yukleyin.
• Kullanilmayan CSS: PurgeCSS veya Tailwind CSS'in JIT modu ile kullanilmayan CSS kurallarini temizleyiin.
• CSS Containment: contain ozelligi ile tarayicinin yeniden hesaplama ve boyama alanini sinirlandirin.
• will-change Kullanimi: Animasyon uygulanacak ogeler icin will-change ile tarayiciyi onceden bilgilendirin ancak asiri kullanmaktan kacinin.

Performans Izleme ve Surekli Iyilestirme

Performans optimizasyonu tek seferlik bir is degildir. Surekli izleme ve iyilestirme gerektirir:

• RUM (Real User Monitoring): Google Analytics, Vercel Analytics veya SpeedCurve ile gercek kullanici verilerini toplayin.
• Performans Butcesi: Sayfa boyutu, JavaScript boyutu ve yukleme suresi icin sinirlar belirleyin ve CI/CD surecinde kontrol edin.
• Web Vitals API: web-vitals kutuphanesi ile LCP, INP ve CLS degerlerini gercek zamanli izleyin.
• A/B Testi: Performans iyilestirmelerinin donusum oranina etkisini A/B test ile olcun.

Sonuc: Web performansi, kullanici deneyimi, donusum oranlari ve arama motoru siralamasi uzerinde dogrudan etkiye sahiptir. Core Web Vitals metriklerini takip ederek, kod bolumleme, onbellekleme, CDN, gorsel optimizasyonu ve JavaScript/CSS optimizasyonu tekniklerini uygulayarak sitenizin performansini surekli iyilestirebilirsiniz. Megis olarak, gelistirdigimiz projelerde performansi en ust oncelik olarak ele alarak kullanicilaraa hizli ve akici bir deneyim sunuyoruz.