Web Performansı: Tasarım Kararlarının Hıza Etkisi

Bir web sitesi ağır açılıyorsa yalnız sunucuyu değiştirmek yeterli olmayabilir. İlk ekrandaki video, gereğinden büyük görsel, çok sayıda yazı tipi ve üçüncü taraf araçlar birlikte değerlendirilmelidir. Freelance web tasarım sürecinde performans beklentisi tasarım tamamlandıktan sonra değil, başlangıçta konuşulmalıdır.

Üç farklı sorunu birbirinden ayırın

Güncel Core Web Vitals ölçütleri LCP, INP ve CLS'dir. LCP ana içeriğin görünmesi, INP etkileşime yanıt, CLS beklenmedik yerleşim kaymalarıyla ilgilidir. Eski yazılarda görülen FID güncel üçlüde yer almaz. Web Vitals açıklaması bu ayrımı ve saha ölçümünü tanımlar.

Bir sayfa hızlı görünürken düğmeye basınca takılabilir. Başka bir sayfada resim geç yüklenip metni aşağı itebilir. Bu iki sorun aynı çözümü gerektirmez. Test raporunda yalnız toplam puanı değil, kullanıcının yaşadığı durumu okuyun.

Görseli kullanım alanına göre hazırlayın

Kartta küçük gösterilecek bir görseli tam ekran dosya boyutuyla taşımayın. İçeriği anlatan dosya adı, uygun boyut ve sıkıştırma birlikte düşünülmelidir. Genişlik ve yükseklik için alan ayrılması, yükleme sırasında kartın zıplamasını azaltmaya yardımcı olur.

Sayfanın aşağısındaki görseller gecikmeli yüklenebilir; ilk ekrandaki kritik görseli aynı şekilde ertelemek doğru olmayabilir. Video varsa açılış görseli, oynatma tercihi ve mobil veri yükü için alternatif belirleyin. Süsleme, temel hizmet bilgisinin görünmesini engellemesin.

Kod ve tasarım sorumluluklarını ayırın

Geliştirici gereksiz JavaScript, ağ istekleri ve önbellekleme gibi konuları inceler. Tasarımcı hangi hareketin gerçekten gerekli olduğunu, görsel öncelikleri ve düşük hareket tercihindeki görünümü tanımlar. Her bileşeni animasyonlu yapmak bir kalite ölçütü değildir.

Lighthouse kontrollü bir test sağlar; gerçek ziyaretçi verisi farklı cihaz ve ağ koşullarını yansıtır. İkisini birlikte değerlendirin. Yüksek puan tek başına arama sıralaması veya satış garantisi vermez. Selçuk Aker ile web sitesi tasarımında görsel etkiyi okunabilirlik ve kullanım koşullarıyla birlikte ele alabiliriz.

PageSpeed raporunda INP görünmüyorsa neye bakmalısınız?

Eksik saha verisi, otomatik olarak sitenin bozuk veya hızlı olduğunu göstermez. Chrome'un PageSpeed rehberine göre URL düzeyinde veri bulunmayınca kaynak alanın toplu verisi gösterilebilir; o da yoksa saha verisi sunulamaz. Lighthouse laboratuvar testi yine kullanılabilir. Gösterilen alanın tek sayfa mı yoksa sitenin bütünü mü olduğunu kontrol edin.

CrUX saha verisi son 28 günlük deneyimlerin günlük güncellenen özetidir. Raporu birkaç dakika sonra yeniden çalıştırmanın eksik gerçek kullanıcı verisini mutlaka tamamlayacağını varsaymayın. FID ise güncel Core Web Vitals üçlüsünde değildir.

INP açıklaması, tıklama, dokunma ve klavye etkileşimlerine yanıtı ele alır. İyileştirme için ağır etkileşimi bulmak gerekir: büyük bir listeyi filtreleme, menü açma veya form gönderimi gibi. Yalnız resimleri sıkıştırmak her etkileşim sorununu çözmez; geliştirici işlem süresini ve arayüz güncellemesini incelemelidir.