Istemci tarafi performans

Modern web uygulamalarinda kullanıcı deneyiminin büyük bolumu tarayicida, sunucu yanitindan sonra baslar. Istemci tarafi performans; sayfanin ne kadar hızlı görünür hale geldigi, ne kadar erken etkilesime acildigi ve görsel kararliligin ne zaman saglandigi gibi sorularla olculur. Google Core Web Vitals metrikleri bu alanda endustri standardi haline gelmistir ve arama siralamasi ile kullanıcı memnuniyeti dogrudan bu olculere baglidir.

Core Web Vitals nedir?

Core Web Vitals uc temel metrikten olusur: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) ve Cumulative Layout Shift (CLS). LCP, sayfadaki en büyük içerik ogelerinin ne zaman görünür oldugunu olcer. INP, kullanıcı etkilesimlerine verilen yanıt suresini temsil eder. CLS ise beklenmedik layout kaymalarini sayisal olarak ifade eder.

LCP optimizasyonu

LCP genellikle hero gorseli, büyük baslik metni veya video posterinden kaynaklanir. Bu ogelerin yuklenmesini geciktiren faktorler arasinda render-blocking CSS, gec yuklenen fontlar, ag uzerindeki yüksek gecikme ve istemci tarafinda agir JavaScript calismasi yer alir.

• Hero gorselini fetchpriority="high" ile isaretleyin ve boyutlarini onceden belirtin.
• Kritik CSS inline veya erken yuklenen stylesheet olarak sunun.
• Font yuklemesinde font-display: swap kullanarak metin gorunurlugunu koruyun.
• CDN uzerinden gorselleri WebP veya AVIF formatinda servis edin.

INP ve ana thread yuku

INP düşük tutmak icin ana thread uzerindeki uzun gorevleri parcalamak gerekir. Uzun JavaScript gorevleri tiklama, klavye ve kaydirma gibi etkilesimleri geciktirir. Chrome DevTools Performance panelinde uzun tasklari tespit edebilir, hangi fonksiyonlarin 50 milisaniyeyi astigini gorebilirsiniz.

function processChunk(items, index = 0) {
  const end = Math.min(index + 100, items.length);
  for (let i = index; i < end; i++) transform(items[i]);
  if (end < items.length) requestIdleCallback(() => processChunk(items, end));
}

requestIdleCallback ve scheduler.postTask gibi APIler, düşük öncelikli isleri kullanıcı etkilesimlerinin dışında calistirmaya yardımcı olur. React 18 concurrent rendering özelliği de benzer bir felsefeyi bilesen seviyesinde uygular.

Rendering pipeline ve kritik yol

Tarayici bir HTML belgesi aldiginda once DOM agacini oluşturur, ardindan CSSOM ile birlestirip render tree üretir. Layout ve paint asamalari tamamlandiktan sonra compositing ile ekrana yansitilir. Bu zincirdeki her gecikme, kullanıcının algiladigi hizi dogrudan etkiler.

Render-blocking kaynaklar

Script etiketleri varsayilan olarak parseri durdurur. defer ve async nitelikleri farklı yükleme davranislari sağlar. Modül scriptleri otomatik olarak defer davranisi gösterir.

1. Kritik olmayan scriptleri sayfa sonuna veya dynamic import ile yukleyin.
2. CSS dosyalarini route bazli code splitting ile bolun.
3. Third-party scriptleri gec yükleme veya onay sonrasi yükleme ile sinirlayin.

JavaScript bundle optimizasyonu

Buyuyen JavaScript bundlelari hem indirme hem parse ve compile hem de execution maliyeti üretir. Tree shaking, dead code elimination ve modül bazli bolme bu maliyeti dusurmenin temel araclaridir.

Code splitting stratejileri

Route-level splitting en yaygın yaklasimdir: her sayfa yalnizca kendi ihtiyaç duydugu kodu yukler. Component-level lazy loading ise modal, grafik kutuphanesi gibi nadiren kullanilan parcalari ayirir.

const ChartPanel = lazy(() => import('./ChartPanel'));
function Dashboard() {
  return (<Suspense fallback={<Skeleton />}><ChartPanel /></Suspense>);
}

Bundle analiz araclari hangi paketlerin agirlik merkezi oldugunu gösterir. Lodash gibi kutuphanelerde tam import yerine spesifik fonksiyon importu yapmak önemli fark yaratir.

Görsel ve medya optimizasyonu

Görseller çoğu web sayfasinin toplam agirliginin yüzde altmisindan fazlasini olusturabilir. Responsive images, modern formatlar ve lazy loading bu yuku azaltir.

• srcset ve sizes ile cihaz cozunurlugune uygun görsel seçimi.
• loading="lazy" ile viewport disindaki gorsellerin gec yuklenmesi.
• Video icin poster gorseli ve kullanıcı kontrollu baslatma.
• SVG ikonlari sprite veya inline kullanarak HTTP istek sayisini dusurme.

Font yükleme stratejileri

Web fontlari FOIT veya FOUT sorunlarina yol acabilir. font-display: swap metnin hemen gorunmesini saglarken, font subsetting yalnizca kullanilan karakterleri icerir. Variable fontlar tek dosyada birden fazla agirligi tasiyarak istek sayisini azaltir.

Ag katmanı ve istemci tarafi cache

HTTP/2 ve HTTP/3 çoklu istek maliyetini dusurur ancak toplam transfer boyutu hala önemlidir. Service Worker ile precache stratejisi, tekrar ziyaretlerde aninda yükleme sağlar. Stale-while-revalidate ise güncel içeriği arka planda cekerken cacheden hızlı yanıt verir.

Olculme ve sürekli izleme

Performans optimizasyonu olculemeden yapilamaz. Lighthouse CI, Web Vitals kutuphanesi ve Real User Monitoring araclari field data ile lab datayi birlestirir.

import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log); onINP(console.log); onCLS(console.log);

Her deploy sonrasi performans regresyonu kontrolu yapmak erken uyarı sağlar. Performans butcesi tanimlayarak bundle boyutu, LCP esigi ve third-party script sayisi gibi metrikleri CI pipelineina entegre edebilirsiniz.

Pratik kontrol listesi

1. LCP ogelerini erken yükleme ve onceliklendirme ile optimize edin.
2. JavaScript bundleini route ve component bazli bolun.
3. Gorselleri modern format ve responsive tekniklerle sunun.
4. Third-party script sayisini sinirlayin ve gec yukleyin.
5. Core Web Vitals metriklerini production ortaminda RUM ile izleyin.
6. Her releasete performans regresyon testi calistirin.

Istemci tarafi performans tek seferlik bir optimizasyon degil, sürekli izlenmesi gereken bir muhendislik disiplinidir. Olculen metrikler uzerinden küçük ama tutarlı iyilestirmeler yapmak, büyük yeniden yazimlardan daha sürdürülebilir sonuç verir.

Third-party script yönetimi

Analitik, reklam, chat ve sosyal medya widgetlari sayfa performansini ciddi şekilde etkiler. Her third-party script ek ana thread yuku, ek DNS lookup ve ek TLS handshake demektir. Facade pattern ile agir widgetlarin yerine hafif placeholder gosterip kullanıcı etkilesiminde gerçek scripti yuklemek etkili bir tekniktir.

Partytown gibi araclar third-party kodlari web workerda calistirarak ana threadi korur. Script onceliklendirme ve async yükleme ile kritik yol uzerindeki etki minimize edilir. Tag manager uzerinden yuklenen scriptlerin sayisi ve sıra onceligi duzenli audit edilmelidir.

Prefetch ve preconnect

Kullanıcının bir sonraki sayfaya gecme olasiligi yuksekse rel=prefetch ile kaynaklar onceden indirilebilir. Font ve API originleri icin preconnect DNS ve TLS handshake maliyetini dusurur. Ancak asiri prefetch bant genisligini tuketir; veri odaklı karar verilmelidir.

CLS ve layout kararliligi

Cumulative Layout Shift genellikle boyutsuz görseller, gec yuklenen reklamlar ve dinamik içerik enjeksiyonundan kaynaklanir. Gorsellere width ve height attribute eklemek, font metriklerini onceden rezerve etmek ve reklam alanlarina minimum yukseklik vermek CLS skorunu iyilestirir. Transform animasyonlari layout tetiklemeden görsel hareket sağlar.

Performans kulturu

Performans sadece frontend ekibinin sorumlulugu degildir. Backend API yanıt suresi, veritabanı sorgu optimizasyonu ve CDN yapilandirmasi istemci metriklerini dogrudan etkiler. Cross-functional performans review toplantilari ve paylasilan dashboardlar takım genelinde farkindalik oluşturur. Her yeni özellik icin performans kabul kriteri tanımlamak regresyonlari onler.

Mobil cihaz ve düşük güç modu

Mobil cihazlar daha zayif CPU ve bellek kaynaklarina sahiptir. JavaScript parse ve compile suresi masaustune gore daha uzundur. Ag throttling altinda test yapmak gerçek kullanıcı kosullarini yansitir. Save-Data basligi ve prefers-reduced-motion medya sorgusu ile hafif alternatif deneyimler sunulabilir. Bu yaklaşım hem erisilebilirlik hem performans acisindan kapsayici bir deneyim oluşturur.