Sayfa Deneyimi ve Web Performansı

Açılış sahnesi

Bir kadın, annesinin doğum gününü unuttuğunu akşamüstü fark ediyor ve otobüste telefonundan bir çiçekçinin sitesini açıyor. Sayfa uzun süre beyaz kalıyor; sonra ekranı kaplayan büyük bir fotoğraf yavaş yavaş, satır satır beliriyor. Kadın aşağı kaydırıp bir buketi seçiyor ve sepete ekle düğmesine dokunmak üzereyken, sayfanın üstünde bir kampanya şeridi yükleniyor ve bütün sayfayı aşağı itiyor. Parmağı düğmeye değil, şeridin altındaki başka bir bağlantıya dokunuyor.

Sayfa bu kez kampanyalar sayfasına gidiyor ve o da yavaş açılıyor. Kadın geri dönüyor, buketi yeniden buluyor ve bu kez düğmeye doğru dokunuyor; ama ekran birkaç saniye hiçbir tepki vermiyor. Düğmenin çalışıp çalışmadığını anlamak için bir kez daha dokunuyor, sepete iki buket ekleniyor. O noktada telefonu kapatıp başka bir çiçekçiyi arıyor.

Çiçekçinin buketleri güzeldi ve fiyatları uygundu. Ama kadın, sayfayla geçirdiği birkaç dakikanın her birinde, sayfanın ona değil kendisine ait bir sorunla meşgul olduğunu hissetmişti.

Bu derste ne olacak

Çiçekçi, müzik okulu, kozmetik markası ve dersin öbür işletmeleri benim uydurmam; performans ölçülerini de belirli bir aracın ekranından değil, sektörde yaygın kabul gören genel kavramlar olarak anlatıyorum.

Kadının otobüste yaşadığı üç ayrı sıkıntı vardı: sayfanın geç görünmesi, düğmenin geç tepki vermesi ve sayfanın parmağının altından kayması. Bu ders, bu üç sıkıntıyı ölçülebilir kavramlara çeviriyor. Önce bir sayfanın ana içeriğinin ne zaman göründüğüne bakacağım. Sonra bir dokunuşa ne zaman tepki verildiğine ve sayfanın yüklenirken ne kadar yerinden oynadığına geçeceğim. Ardından bu ölçülerin bir test aracında mı yoksa gerçek kullanıcıların telefonlarında mı ölçüldüğünün neden bu kadar önemli olduğunu konuşacağım. Son olarak performansın arama sıralamasındaki yerini abartmadan, onun okurun kararına ve işletmenin sonucuna etkisine bakacağız.

Sıfır noktası

Bu akademinin ilk kursunda sayfa içi temelleri konuşurken, çok büyük görsellerin bir portfolyo sitesini telefonda boş bıraktığını görmüş; site yapısı dersinde de birçok arama motorunun siteleri telefondaki halleriyle değerlendirdiğinden söz etmiştik. Metin yazarlığı akademisinde ise ürünün içindeki küçük metinlerin, kullanıcının bir karar anında yaşadığı sürtünmeyi azalttığını görmüştük.

Sayfa deneyimi, sürtünmenin teknik yüzü. Açık bir metin de kurtaramaz: sayfa geç açılıyorsa, dokunuşlara geç cevap veriyorsa ya da okurun parmağının altından kayıyorsa, okur o metni okumadan ayrılıyor. Arama motorları da sayfa deneyimini, sıralamayı etkileyen pek çok işaretten biri olarak hesaba katıyor; ama bu işaret, aramanın niyetine gerçekten cevap veren bir içeriğin yerini tutmuyor. Performansın asıl önemi, arama sıralamasından çok, sayfaya gelmiş okurun o sayfada kalıp kalmamasında ve bir karar verip vermemesinde.

Mekanizma — sayfa ne zaman görünüyor

Okurun bir sayfanın açıldığına karar verdiği an, ekranın bir şeylerle dolduğu an değil; sayfanın asıl içeriğinin, yani büyük görselin, başlığın ya da ana metnin göründüğü an.

Arka planda oynayan videolar, sayfaya bir atmosfer katıyor; ama ana içeriğin görünmesini de çoğu kez geciktiriyor.

Mekanizma — dokunuşa ne zaman cevap veriliyor

Bir sayfa görünür olduktan sonra, okur ona dokunmaya başlıyor: bir düğmeye basıyor, bir menüyü açıyor, bir tarih seçiyor. Okurun beklediği şey, dokunduğu anda bir şeyin olması.

Bir sitenin üzerine yıllar içinde eklenen dış kodlar, çoğu kez kimsenin fark etmediği bir yük oluşturuyor.

Mekanizma — sayfanın kayması

Bir sayfa yüklenirken bazı öğeler geç geliyor ve geldiklerinde yerlerini açmak için öteki öğeleri itiyor. Okur okumaya ya da dokunmaya başlamışken sayfanın kayması, açılıştaki kadının yaşadığı gibi yanlış bir bağlantıya dokunmaya yol açıyor.

Özel yazı tipleri bir sitenin kimliğinin parçası; ama geç yüklendiklerinde metnin görünmesini geciktirebiliyor ya da yüklendikleri anda metnin yerini değiştirebiliyor.

Mekanizma — ölçünün nerede alındığı

Bir sayfanın performansı, bir geliştiricinin güçlü bilgisayarında ve hızlı ofis bağlantısında ölçüldüğünde çoğu kez iyi görünüyor. Oysa okurların önemli bir kısmı sayfayı daha eski telefonlardan ve daha yavaş bağlantılardan açıyor.

Sayfanın performansı, sunucunun yükü arttığında da değişiyor. Bir kampanya ya da bir satış anı, sayfayı normal günlerden çok daha yavaş hale getirebiliyor.

Usta katmanı — performansın yeri

Performans önemli, ama tek başına bir sayfayı arama sonuçlarında öne çıkarmıyor. Hızlı ama okurun sorusuna cevap vermeyen bir sayfa, yavaş ama tam cevap veren bir sayfanın önüne geçemiyor.

Performansın asıl etkisi, sayfaya gelmiş okurun karar verip vermemesinde görünüyor. Bu etkiyi ölçmek, performans çalışmasının önceliğini belirliyor.

Telefonda açılır açılmaz ekranı kaplayan bir abonelik penceresi, okurun geldiği içeriği saklıyor. Birçok arama motoru da telefonda içeriği örten bu tür pencerelere olumsuz bakıyor.

Belge biçiminde yüklenmiş menüler ve kataloglar, telefonda en ağır ve en kullanışsız sayfalar arasında.

Performans çalışmasının büyük kısmı teknik ekibin işi; pazarlama ekibinin işi ise hangi sayfanın, hangi sorunun ve hangi okur grubunun öncelikli olduğunu söylemek.

Bir sayfanın ağırlığı, çoğu kez tek bir büyük öğeden geliyor.

Yaygın hatalar

Aklında kalsın

Sayfa deneyimi, sürtünmenin teknik yüzüdür. Okur bir sayfanın asıl içeriğini ne zaman gördüğünü, dokunuşlarına ne zaman cevap verildiğini ve sayfanın yerinden oynayıp oynamadığını hisseder.

Görünür yüklenme, ana içeriğin tamamen göründüğü ana kadar geçen süredir; büyük görseller, ağır gösteriler ve yavaş sunucular onu uzatır. Etkileşim gecikmesi, bir dokunuşla sayfanın tepkisi arasındaki süredir; birikmiş dış kodlar onu uzatır. Düzen kayması, öğelerin beklenmedik biçimde yer değiştirmesidir; yerleri önceden ayrılmayan öğeler ona yol açar.

Saha verisi, gerçek kullanıcıların gerçek cihazlarında yaşadığını gösterir; laboratuvar verisi teşhis içindir. İkisi birbirini tutmadığında, okurun gerçeği saha verisidir.

Performans arama sıralamasında hesaba katılan işaretlerden biridir, ama aramanın niyetine cevap veren içeriğin yerini tutmaz. Asıl etkisi okurun karar verip vermemesindedir; bu yüzden öncelik, okurun karar verdiği sayfalara ve okurların çoğunun kullandığı cihazlara verilir.

Sonraki derse köprü

Bu derste bir sayfanın okur için ne kadar hızlı ve kararlı açıldığına baktık. Ama bazı sitelerde sorun daha derinde: sayfanın içeriği, tarayıcıda çalışan kodlarla sonradan oluşturuluyor ve arama motorunun bu içeriği görebilmesi, o kodların çalışmasına bağlı kalıyor.

Sıradaki ders JavaScript ve dinamik içeriği ele alıyor. İçeriğin arama motoru tarafından keşfedilme ve işlenme risklerini teknik ekiple birlikte nasıl teşhis edeceğimizi orada göreceğiz.