Web Sitesi Hız Optimizasyonu: Görsel, Font, Script

Bir sayfanın toplam ağırlığının büyük bölümü çoğunlukla görsellerden gelir. Bir zemin kaplama üreticisinin ürün galerisini düşünün: elli megabaytlık bir sayfa, kullanıcının cihazına ve bağlantısına göre saniyeler süren bir bekleme demektir. Görsel doğru boyutta ve doğru formatta sunulmadığı sürece bu yük ortadan kalkmaz.

Çözüm iki adımdır. Önce görsel, ekranda gösterileceği gerçek boyuta göre kırpılır; telefon ekranında dört yüz piksel genişliğinde görünecek bir görsel iki bin piksel olarak gönderilmemelidir. Sonra format seçilir: AVIF ve WebP, eski JPEG'e göre aynı görsel kalitesinde daha küçük dosya üretir (web.dev, Optimize LCP). Next.js gibi bir çatı bu işi otomatikleştirir, geliştiricinin elle birden çok versiyon hazırlamasına gerek kalmaz.

Özel bir font markanın kimliğinin parçasıdır ama yanlış yüklendiğinde sayfanın görünür hale gelmesini geciktirir. Tarayıcı font dosyasını indirene kadar metni gizli tutuyorsa ziyaretçi birkaç saniye boş bir ekranla karşılaşır; buna «görünmez metin yanıp sönmesi» denir.

font-display: swap ayarı bu bekleme süresini ortadan kaldırır: tarayıcı sistem fontuyla metni hemen gösterir, özel font indiğinde yerini alır (web.dev, Best practices for fonts). Bir spa zincirinin randevu sayfasında iki font ağırlığı (normal ve kalın) yeterliyken, tasarım dosyasından beş altı ağırlık aynen siteye taşınmış olabilir; her ek ağırlık ayrı bir indirme demektir.

Analitik araçları, canlı sohbet kutuları, reklam pikselleri, sosyal medya gömme kodları: bunların her biri sayfaya harici bir JavaScript dosyası ekler. Bu dosyalar genelde ekip fark etmeden birikir; bir yıl içinde beş altı farklı araç eklenmiş bir site sık görülür.

Sorun, bu script'lerin tarayıcının ana iş parçacığını meşgul etmesidir; tarayıcı bu kodu çalıştırırken ziyaretçinin tıklamasına yanıt veremez, bu da INP metriğini doğrudan kötüleştirir (web.dev, INP). Üç ayda bir kullanılan araçların listesi gözden geçirilir; artık bakılmayan bir analitik panel ya da kullanılmayan bir sohbet aracı silinir.

Üç kaynağın hepsini aynı anda düzeltmek gerekmez; sıralama işi kolaylaştırır.

• PageSpeed Insights ya da Search Console ile mevcut durum ölçülür
• İlk ekranda görünen en büyük görseller doğru boyut ve formata getirilir
• Font sayısı ve ağırlığı azaltılır, font-display: swap eklenir
• Kullanılmayan üçüncü taraf script'ler kaldırılır, kalanlar gerektiğinde yüklenir
• Değişiklik sonrası aynı araçla yeniden ölçülür

Hız, ziyaretçinin siteyle ilk teması olduğu için bir pazarlama kararıdır da. Bir jeneratör üreticisinin acil durum sayfası yavaş açılıyorsa ziyaretçi arama sonucuna geri dönüp bir sonraki firmayı dener; bu kayıp fark edilmeden gerçekleşir.

Bu yüzden hız optimizasyonu bir kerelik proje değil, düzenli bakımın parçasıdır; yeni bir araç eklendiğinde ya da yeni bir görsel yüklendiğinde aynı disiplin uygulanır.

2026'da yaygınlaşan Next.js 16 ve React 19, sunucu bileşenlerini daha da öne çıkarıyor; sayfanın büyük kısmı sunucuda hazırlanıp tarayıcıya bitmiş halde gönderiliyor, tarayıcının indirmesi gereken JavaScript miktarı azalıyor. Bu, INP metriğini doğrudan iyileştiren bir mimari tercih.

Bir üretici firmanın ürün kataloğu gibi yüzlerce sayfalık bir yapı için bu fark somut: eski bir React kurulumunda her sayfa tarayıcıda yeniden işlenirken, yeni mimaride sayfa sunucuda hazır gelir, tarayıcı yalnız etkileşimli parçaları (filtre, sepete ekleme gibi) devreye alır. Geçiş kararı verirken bu mimari fark, yalnız görünüm değil, hız bütçesinin bir parçası olarak değerlendirilmeli.

Bir sayfa her ziyaret için sıfırdan üretilmek yerine, bir kez üretilip belirli bir süre önbellekte tutulursa sonraki ziyaretçilere çok daha hızlı ulaşır. Bu, özellikle içeriği sık değişmeyen sayfalar (hakkımızda, hizmet açıklaması gibi) için doğrudan uygulanabilir bir kazanç.

Bir dernek sitesinin etkinlik takvimi gibi sık güncellenen bir sayfada önbellek süresi kısa tutulur, değişmeyen bir kurumsal sayfada ise saatlerce hatta günlerce aynı önbellek kullanılabilir. Doğru süre, içeriğin ne sıklıkla değiştiğine bakılarak belirlenir.

Önbellekleme yanlış kurulursa da sorun çıkar: bir fiyat güncellemesi yapıldığında eski fiyatın önbellekte kalıp bir süre gösterilmeye devam etmesi gibi. Bu yüzden içerik güncellemesi sonrası önbelleğin ne zaman ve nasıl temizleneceği baştan planlanmalı.