Web performansında görselleri tasarımdan vazgeçmeden iyileştirmek

Örnek bir iş senaryosu

Masaüstünde bin iki yüz piksel genişlikte görünen bir ekran görüntüsünü dört bin piksel kaynakla sunmak her zaman anlamlı değildir. Buna karşılık küçük metinler içeren ürün ekranını aşırı sıkıştırmak da okunabilirliği bozar. Görseli gerçek kullanım boyutunda inceleyin. Boyut bilgisini HTML'de vermek, görsel yüklenirken sayfanın zıplamasını azaltır; alt bölümlerde gecikmeli yükleme kullanılabilir.

Dört adımda çalışma düzeni

İlk bakışta görünmeyen noktalar

Ürün ekranlarında görselin mobilde nasıl inceleneceğini de tasarlayın. Çok geniş bir paneli dar ekrana küçültmek bütün metinleri okunmaz hale getirebilir. Tam boy görsel bağlantısı, açıklayıcı yakın görünüm veya metinle desteklenen modül özeti kullanılabilir. Görsel dosya adı anlamlı olmalı, alternatif metin ekranda anlatılan işlevi tarif etmelidir. Aynı büyük görseli sayfada birkaç kez yüklemek yerine gerekli görünümleri seçin. Ölçüm sırasında önbelleğin etkisini ayırmak için ilk ziyaret ile tekrar ziyareti ayrı değerlendirin. Hızlı bir tekrar açılışı, ilk kez gelen ziyaretçinin deneyiminin de iyi olduğunu kanıtlamaz.

Sayfayı ziyaretçinin görevi üzerinden kontrol etme

Bir ziyaretçi görevi seçin: uygun yazılımı bulmak, bir rehber okumak veya teklif istemek. Siteyi ilk kez gören bir kişiden bu görevi yerine getirmesini isteyin ve açıklama yapmadan izleyin. Hangi bağlantıyı aradığını, nerede duraksadığını ve hangi bilgiyi eksik bulduğunu not edin. Masaüstü ile dar ekran deneyimini ayrı deneyin. Kullanıcının bir sayfaya arama sonucundan doğrudan gelebileceğini unutmayın; her sayfa temel bağlamı ve sonraki adımı kendi başına sunmalıdır. Ana sayfayı görmeden ürün veya yazı sayfasına gelen kişi de sitede yönünü bulabilmelidir.

İçerik kontrolünde başlıkların sırasını, bağlantı metinlerini ve görsellerin açıklamalarını inceleyin. “Buraya tıklayın” yerine hedefi anlatan bağlantılar kullanmak gezinmeyi kolaylaştırır. Uzun metinleri anlamlı ara başlıklarla bölün; her paragraf tek bir düşünceyi geliştirsin. Görsel ve şemalar metinde anlatılan süreci desteklemelidir. Dekoratif bir görsel uğruna önemli bilgiyi sayfanın çok altına itmeyin. Aynı kontrolü açık ve koyu temada yapın. Kontrast, form etiketi, odak göstergesi ve hata mesajı gibi ayrıntılar her iki görünümde de okunabilir kalmalıdır.

Yayın sonrasında ölçüm için gerçek kullanıcı sorunlarına odaklanın. Bir sayfanın ziyaret edilmesi ile görevin tamamlanması farklı şeylerdir. Form gönderiminde hata varsa ziyaret sayısının artması tek başına başarı değildir. Teknik tarama, mobil etkileşim ve içerik güncelliği düzenli gözden geçirilmelidir. Arama görünürlüğünde sonuçlar zaman alabilir ve birçok etkene bağlıdır; tek bir değişiklik için kesin sıra sözü verilmemelidir. İçerik üretirken insanların sorusunu yanıtlamayı esas alın. Faydasız tekrarlar ve gizli anahtar kelimeler yerine açık bilgi, sağlam bağlantı yapısı ve erişilebilir sayfalar daha sürdürülebilir bir yaklaşım oluşturur.

Ekibinize sorabileceğiniz sorular

• İlk ekranda hangi dosya en geç geliyor?
• Görseller yüklenirken içerik kayıyor mu?
• Mobilde metinler okunabiliyor mu?

Bu soruları seçtiğiniz örnek kayıt üzerinde yanıtlayın. Her açık nokta için sorumlu kişiyi, yapılacak düzeltmeyi ve yeniden kontrol tarihini not edin. Böylece görüşme, uygulanabilir bir iş listesiyle tamamlanır.