Google’ın arama sıralamalarında kullanıcı deneyimini doğrudan ölçtüğü Core Web Vitals (LCP, INP, CLS) metrikleri, modern web geliştirmede teknik başarının en somut göstergesi haline geldi. Ancak günümüzde basit bir web sayfası dahi megabaytlarca JavaScript paketi, dış font dosyaları ve onlarca üçüncü taraf betikle dolduruluyor.

Özellikle kamu kurumları, kurumsal VPN'ler ve adliye ağları gibi yüksek güvenlikli ve bant genişliği sınırlı ortamlarda bu ağır yapılar ciddi erişim gecikmelerine veya kilitlenmelere yol açıyor. Bu yazıda, bu portfolyoda da uyguladığım sıfır harici bağımlılık (Zero External Dependency) ilkelerini inceliyoruz.

1. Core Web Vitals Metriklerini Anlamak

Google'ın 2024 sonrasında güncellediği üç kritik metrik sayfanın gerçek hızını tanımlar:

  • LCP (Largest Contentful Paint): Sayfanın ana görsel veya başlık içeriğinin ekrana gelme süresi. İdeal değer 2.5 saniyenin altıdır; sıfır harici kaynakla bu süre 200-400 ms bandına indirilebilir.
  • INP (Interaction to Next Paint): Kullanıcı bir düğmeye tıkladığında tarayıcının arayüzü güncelleme tepki süresi (eski FID yerine geçti). 200 ms altında olmalıdır.
  • CLS (Cumulative Layout Shift): Sayfa yüklenirken öğelerin zıplaması ve kayması. Düzen kaymalarını engellemek için görsellere ve bloklara sabit en-boy oranları verilmelidir.

Neden Vanilla CSS ve Vanilla JS? Basit bir menü veya filtreleme için yüzlerce kilobaytlık bir framework yüklemek yerine saf JavaScript ve CSS kullanıldığında, tarayıcı JS ayrıştırma (parse & compile) sürecini neredeyse sıfır zamanda tamamlar.

2. Dış CDN'leri Sıfırlamanın Stratejik Önemi

Pek çok geliştirici fontları Google Fonts'tan, ikonları FontAwesome CDN'den, kütüphaneleri ise unpkg veya cdnjs üzerinden çağırır. Ancak kurumsal ağlarda (örneğin UYAP, MEB veya banka intranetleri):

  1. DNS Çözümleme Gecikmesi: Her ayrı alan adı için yeni bir DNS sorgusu ve TLS el sıkışması yapılır.
  2. Güvenlik Duvarı Engelleri: Kurum güvenlik duvarı ilgili CDN'i veya IP bloğunu kısıtladığında sayfa o kaynağın zaman aşımına uğramasını bekler ve beyaz ekranda kalır.
  3. Sistem Font Yığını Çözümü: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto gibi sistem font yığını kullanıldığında hiçbir dış font indirilmez; cihazdaki hazır fontla sayfa ilk karede mükemmel render edilir.

3. SVG ve Vektörel Varlıkların Gücü

Ağır PNG veya JPEG görseller yerine vektörel SVG'ler tercih edildiğinde dosya boyutları kilobaytların altına düşer. Bu sitedeki tüm ikonlar, grafikler ve hatta Open Graph sosyal paylaşım görseli dahi saf SVG olarak kodlanmıştır. SVG hem her ekranda kristal netliğindedir hem de GZIP sıkıştırmasıyla %70 oranında küçülür.

4. Hız Bir Özellik Değil, Temel Bir Saygıdır

Web performansını sonradan eklenen bir yama olarak değil, projenin ilk mimari kararı olarak ele almak gerekir. Ziyaretçinin kotasına, cihazının işlemcisine ve bulunduğu ağın güvenlik kısıtlarına saygı duyan bir web tasarımı hem SEO sıralamasında hem de gerçek kullanıcı memnuniyetinde daima öne çıkar.

İlgili Kaynaklar

← Tüm yazılara dön