Yüz Milisaniyenin Fiyatı: web performansının ekonomisi üzerineYüz Milisaniyenin Fiyatı: web performansının ekonomisi üzerine

2006'da Amazon mühendisi Greg Linden bir sunumda şirket içi bir deneyin sonucunu paylaştı: sayfalara kasıtlı olarak eklenen her 100 milisaniyelik gecikme, satışları yaklaşık yüzde bir düşürüyordu. Aynı yıl Google'ın arama ürünlerinden sorumlu Marissa Mayer başka bir deney anlattı: kullanıcılar sayfa başına on yerine otuz sonuç istemişti; Google verdi ve trafik yüzde yirmi düştü. Neden, sonuç sayısı değildi; otuz sonuçlu sayfa yarım saniye geç yükleniyordu. İki şirket aynı şeyi ölçmüştü: insan, gecikmeyi para gibi harcar ve geri istemez. Yirmi yıl sonra bu ölçümler bir web sitesinin tasarımında neyin önce geldiğini belirleyen temel sayılardır.

Bilişsel psikolojinin tepki süresi sınırları web için de geçerlidir: Robert Miller 1968'de ve Jakob Nielsen 1993'te yüz milisaniyenin "anında", bir saniyenin "akış içinde", on saniyenin "dikkatin sınırı" olduğunu yazdı. IBM'den Doherty ve Thadani 1982'de 400 milisaniyenin altında üretkenliğin sıçradığını ölçtü. Bu sayılar web sitesini bir yayın değil, bir konuşma olarak tanımlar: karşı taraf geç cevap veriyorsa konuşma kopar. Performans bu yüzden bilgi işlem birimine havale edilecek bir teknik konu değil, deneyimin kendisidir.

2017'de Google, analitik şirketi SOASTA ile 900 bin mobil reklam açılış sayfasını inceledi. Bulgular bir eğri çizdi: sayfa üç saniyeden geç yüklendiğinde mobil ziyaretlerin yüzde 53'ü terk ediliyordu; yükleme süresi bir saniyeden üçe çıktığında terk olasılığı yüzde 32, beşe çıktığında yüzde 90 artıyordu. Aynı yıl Pinterest, mühendislik blogunda algılanan bekleme süresini yüzde 40 kısalttığını ve arama trafiğinin ve üye kaydının yüzde 15 arttığını yazdı. BBC 2018'de her ek saniyenin okurların yüzde 10'unu kaybettirdiğini ölçtü; Walmart 2012'de her bir saniyelik iyileşmenin dönüşümü yüzde 2 artırdığını açıklamıştı.

Bu rakamların ortak noktası, hiçbirinin "güzel tasarım" ile ilgili olmamasıdır. Aynı tasarım, iki saniye geç geldiğinde ziyaretçilerin yarısını kaybeder. Bir web sitesinin ilk tasarım kararı, hangi yazı tipinin kullanılacağı değil, kaç kilobaytla yetinileceğidir.

Google hızı 2010'da masaüstü, 2018'de mobil sıralamaya kattı; 2021'de ölçüyü üç sayıya indirdi. En büyük içerik boyaması (LCP) 2,5 saniyenin altında olmalıdır: ana görsel ya da başlık o sürede görünmelidir. Etkileşim gecikmesi (INP, Mart 2024'te eski FID ölçüsünün yerini aldı) 200 milisaniyenin altında olmalıdır: dokunulan düğme o sürede tepki vermelidir. Birikimli düzen kayması (CLS) 0,1'in altında olmalıdır: sayfa yüklenirken öğeler yer değiştirmemelidir. Üç ölçü de gerçek kullanıcıların yüzde 75'lik diliminde sağlanmalıdır; laboratuvar testi değil, sahadaki telefonlar sayılır.

Bu eşikler psikolojinin sınırlarıyla örtüşür: 200 milisaniye Doherty eşiğinin, 2,5 saniye Nielsen'in "akış" sınırının pratik karşılığıdır. Google yeni bir şey icat etmedi; altmış yıllık tepki süresi literatürünü arama sıralamasına bağladı.

HTTP Archive'ın her ay milyonlarca sayfada yaptığı ölçüme göre ortanca mobil sayfa 2 megabaytı aşar; yarısı görsel, yarım megabaytı JavaScript'tir. Addy Osmani'nin 2018'de yayımladığı "JavaScript'in maliyeti" analizi bu ikisinin eşit olmadığını gösterdi: bir bayt JavaScript, bir bayt görselden çok daha pahalıdır, çünkü görsel yalnızca indirilir; JavaScript indirilir, çözümlenir, derlenir ve çalıştırılır, hepsi telefonun işlemcisinde. Orta sınıf bir Android telefonda yarım megabaytlık bir çerçeve kütüphanesi, içerik görünmeden önce saniyelerce işlemci zamanı yer.

Bu bilgi bir tasarım kararıdır. Kurumsal bir sitenin işi içerik göstermektir; içerik sunucuda HTML olarak üretilip gönderildiğinde tarayıcı onu çözümleyip çizmekten başka iş yapmaz. JavaScript yalnızca gerçekten etkileşim gereken yerde, küçük parçalar hâlinde eklenir. pentograf.com bu ilkeyle kurulmuştur: sayfalar sunucuda üretilir, çerçeve kütüphanesi yoktur, görseller istenen boyutta ve modern biçimde sunulur. Tercih ideolojik değil, aritmetiktir: Linden'in yüz milisaniyesi, yarım megabaytlık bir kütüphaneye harcanmaz.

1954'te Paul Fitts hedefe ulaşma süresinin hedefin uzaklığı ve büyüklüğüyle logaritmik bağını ölçtü; 1952'de William Hick seçeneklerin sayısı arttıkça karar süresinin logaritmik uzadığını gösterdi. İki yasa arayüzün iki temel kuralını verir: dokunulacak şey büyük ve yakın olmalı, seçilecek şey az olmalıdır. Apple'ın arayüz kılavuzu dokunma hedefi için en az 44 punto, Google'ınki 48 piksel ister; nedeni Fitts'tir. macOS'ta menü çubuğunun ekranın en üst kenarına yapışmasının nedeni de aynıdır: kenar, "sonsuz büyüklükte" bir hedeftir, imleç oradan taşamaz.

Hick'in yasasını alışveriş dünyasına Sheena Iyengar ve Mark Lepper taşıdı. 2000'de bir markette reçel tadım standı kurdular: bazı günler altı, bazı günler yirmi dört çeşit. Yirmi dört çeşitli stand daha çok ilgi çekti ama durup tadanların yalnızca yüzde 3'ü reçel aldı; altı çeşitli standda bu oran yüzde 30'du. Seçenek bolluğu kararı felç ediyordu. Web sitesinde dokuz menü başlığı, hizmetler sayfasında on beş madde ve ana sayfada beş ayrı çağrı düğmesi, yirmi dört kavanoz reçeldir.

Jakob Nielsen 2006'da 232 kullanıcının göz hareketlerini kaydetti ve bir F harfi buldu: okur önce üst satırı soldan sağa tarar, sonra biraz aşağıdan daha kısa bir yatay tarama yapar, sonra sol kenardan aşağı iner. Sayfanın sağ alt çeyreğine neredeyse hiç bakılmaz. Harald Weinreich ve arkadaşları 2008'de 25 bin sayfa ziyaretini analiz ettiklerinde kullanıcıların ortalama bir sayfadaki kelimelerin en fazla yüzde 20'sini okuduğunu buldu. Web metni okunmaz, taranır; başlık, ilk kelimeler ve sol kenar sayfanın tamamını taşır.

Tipografi bu taramaya göre kurulur: başlıklar ilk iki kelimede anlamı verir, paragraflar kısa tutulur, satır uzunluğu 45 ilâ 75 karakterde kalır. CSS'in clamp() işlevi yazı boyutunu ekran genişliğiyle sürekli ölçeklemeyi sağlar; böylece 360 piksellik telefonda da 1.440 piksellik ekranda da satır aynı karakter sayısında kalır. Bu, estetik değil, Nielsen'in F harfini koruma işidir.

Sayfanın en pahalı bileşenleri çoğu zaman görünmeyenlerdir. Üç ağırlıkta yüklenen bir web fontu yüz kilobaytı aşar ve yüklenene kadar metin ya görünmez ya da yanlış fontla görünüp sonra atlar; font-display: swap ikincisini seçer, değişken font dosya sayısını bire indirir. Pazarlama etiketleri, sohbet araçları ve analitik kodları ise sayfaya davet edilmiş misafirlerdir: her biri kendi sunucusuna bağlanır, kendi kodunu çalıştırır ve INP ölçüsünü sahipsiz bir şekilde bozar. Sayfaya eklenen her üçüncü taraf, ölçülmüş bir maliyetle eklenmelidir.

Her web projesine bir bütçeyle başlıyoruz: 4G bağlantıda LCP 1,5 saniyenin altında, ilk görünüm için toplam yük 500 kilobaytın altında, çizimi engelleyen JavaScript sıfır, en fazla bir değişken font, görseller AVIF ya da WebP ve istenen boyutta. Bütçe tasarımdan önce yazılır; bütçeye sığmayan tasarım öğesi, "güzel" olsa da değiştirilir. Yayın sonrası ölçü Google'ın saha verisidir (CrUX): üç Core Web Vitals değeri aylık izlenir, eşiği aşan sayfa düzeltilir.

Linden'in yüz milisaniyesi küçük bir sayı değildir; bir web sitesinin bütün kararlarının birimi odur.

• Linden, G. (2006). Make Data Useful. Stanford Üniversitesi sunumu (Amazon 100 ms deneyi).
• Mayer, M. (2006). Web 2.0 Summit konuşması (Google 30 sonuç deneyi).
• Miller, R. B. (1968). Response time in man-computer conversational transactions. AFIPS; Nielsen, J. (1993). Usability Engineering; Doherty, W. J. & Thadani, A. J. (1982). The economic value of rapid response time. IBM.
• An, D. (2017). Find out how you stack up to new industry benchmarks for mobile page speed. Google/SOASTA, Think with Google.
• Pinterest Engineering (2017). Driving user growth with performance improvements. BBC News Labs (2018); Walmart Labs (2012), Velocity konferansı.
• Google (2020–2024). Web Vitals: LCP, INP, CLS eşikleri; INP'nin FID'nin yerini alması (12 Mart 2024).
• HTTP Archive, Web Almanac (sayfa ağırlığı ve JavaScript ölçümleri); Osmani, A. (2018). The cost of JavaScript.
• Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391.
• Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4(1), 11–26.
• Iyengar, S. S. & Lepper, M. R. (2000). When choice is demotivating: Can one desire too much of a good thing? Journal of Personality and Social Psychology, 79(6), 995–1006.
• Nielsen, J. (2006). F-shaped pattern for reading web content. Nielsen Norman Group.
• Weinreich, H., Obendorf, H., Herder, E. & Mayer, M. (2008). Not quite the average: An empirical study of web use. ACM Transactions on the Web, 2(1).
• Apple Human Interface Guidelines (44 pt dokunma hedefi); Material Design (48 dp).