Web Tasarım

Web Sitesi Hızı Neden Önemli? Yükleme Süresini Düşürme Yolları

Ahmet Efe Çakır · 3 dakika okuma · 542 kelime

Bir sayfanın açılmasını üç saniye bekleyen ziyaretçi genellikle vazgeçer ve geri döner. Bu davranış Google tarafından da ölçülür ve sıralamanıza yansır.

Site hızı, yalnızca kullanıcı konforu meselesi değildir: doğrudan bir sıralama faktörüdür ve satış rakamlarını etkiler. Bu yazıda hızın neden önemli olduğunu ve somut olarak nasıl iyileştirileceğini anlatıyorum.

Hız Neden Bu Kadar Önemli?

Üç sebep var:

  • Sıralama: Google, Core Web Vitals adı verilen ölçütlerle sayfa deneyimini değerlendirir ve bunu sıralama sinyali olarak kullanır.
  • Dönüşüm: Yavaş açılan sayfada ziyaretçi formu doldurmadan, ürünü sepete atmadan çıkar.
  • Mobil gerçeği: Ziyaretçilerin çoğu telefondan ve değişken şebeke hızıyla giriyor. Masaüstünde hızlı görünen site, mobilde sürünüyor olabilir.

Core Web Vitals Nedir?

Google'ın ölçtüğü üç temel metrik vardır:

  • LCP (Largest Contentful Paint): Sayfadaki en büyük içeriğin görünme süresi. Hedef: 2,5 saniyenin altı.
  • INP (Interaction to Next Paint): Kullanıcı tıkladığında sayfanın tepki verme süresi.
  • CLS (Cumulative Layout Shift): Sayfa yüklenirken içeriğin zıplaması. Yazı okumaya başlarken metnin kayması bu sorundur.

1. Görselleri Sıkıştırın

Görseller çoğu sitenin en ağır unsurudur — genellikle toplam sayfa ağırlığının yüzde 50-70'i.

Yapılacaklar:

  • Kaliteyi makul seviyeye çekin — 100 yerine 75-80 arası gözle fark edilmez
  • Görseli gösterildiği boyutta sunun — 4000 piksel genişliğindeki fotoğrafı 400 piksellik alanda göstermeyin
  • Gereksiz meta verileri temizleyin

Tek başına bu adım sayfa ağırlığını yarıya indirebilir.

2. Modern Görsel Formatları Kullanın

WebP ve AVIF formatları, JPEG ve PNG ile aynı görsel kaliteyi çok daha küçük dosya boyutunda sunar. WebP tipik olarak JPEG'den yüzde 25-35 daha küçüktür.

3. Gecikmeli Yükleme (Lazy Loading)

Ekranın altında kalan görsellerin sayfayla birlikte yüklenmesine gerek yoktur. loading="lazy" özelliğiyle bunlar ancak ziyaretçi o bölüme kaydırdığında yüklenir.

Bu, ilk açılış hızını belirgin biçimde iyileştirir. Ancak ilk ekranda görünen görsellere lazy loading uygulamayın — bu ters etki yapar.

4. Kod Ağırlığını Azaltın

  • Kullanılmayan CSS ve JavaScript dosyalarını kaldırın
  • Kalanları sıkıştırın (minify)
  • İhtiyaç duymadığınız eklentileri silin — her eklenti ek yük demektir
  • Üçüncü taraf betikleri gözden geçirin; her takip kodu sayfayı yavaşlatır

WordPress gibi sistemlerde en yaygın hata, onlarca eklenti kurup hiçbirini kaldırmamaktır.

5. Önbellek (Cache) Ayarları

Siteye ikinci kez giren ziyaretçinin aynı dosyaları baştan indirmesine gerek yoktur. Doğru önbellek başlıklarıyla tekrar ziyaretler neredeyse anında açılır.

Sunucu tarafında Cache-Control başlıkları ayarlanmalı; görsel, yazı tipi ve stil dosyaları için uzun önbellek süresi verilmelidir.

6. Yazı Tiplerini Sınırlayın

Her yazı tipi ailesi ve her kalınlık ayrı bir indirme demektir. Üç aile ve beş farklı kalınlık kullanan bir site, gereksiz yere yavaşlar.

Çoğu site için iki aile ve üç kalınlık fazlasıyla yeterlidir. Ayrıca font-display: swap kullanarak yazı tipi yüklenene kadar metnin görünmesini sağlayın.

7. Ölçün ve Takip Edin

Ölçmediğiniz şeyi iyileştiremezsiniz. Kullanabileceğiniz ücretsiz araçlar:

  • PageSpeed Insights — Google'ın kendi aracı, mobil ve masaüstü ayrı raporlar
  • Google Search Console — Core Web Vitals raporu, gerçek kullanıcı verisi
  • Tarayıcı geliştirici araçları — hangi dosyanın ne kadar sürede yüklendiğini gösterir

Test ederken mobil sonuçlara bakın. Masaüstü puanı çoğu zaman yanıltıcıdır.

Sık Yapılan Hatalar

  • Ana sayfaya devasa bir video arka planı koymak
  • Sıkıştırılmamış fotoğraf galerisi yayınlamak
  • Görsellere boyut bilgisi vermemek — sayfa zıplamasına (CLS) sebep olur
  • Ölçüm yapmadan "hızlı görünüyor" diye geçmek
  • Sadece masaüstünde test etmek

Sonuç

Hız bir rekabet avantajıdır. Rakibinden bir saniye hızlı açılan site hem daha üst sırada çıkar hem daha çok müşteriye dönüşür.

İyi haber şu: yukarıdaki adımların çoğu teknik uzmanlık gerektirmez. Sadece görselleri sıkıştırmak ve gereksiz eklentileri kaldırmak bile çoğu sitede gözle görülür fark yaratır.