RAIL, performans hakkında düşünmek için bir yapı sağlayan kullanıcı odaklı bir performans modelidir. Model, kullanıcının deneyimini önemli işlemlere (ör. dokunma, kaydırma, yükleme) ayırır ve her biri için performans hedefleri belirlemenize yardımcı olur.
RAIL, web uygulaması yaşam döngüsünün dört farklı yönünü temsil eder: yanıt, animasyon, boşta kalma ve yükleme. Kullanıcıların bu bağlamların her biri için farklı performans beklentileri vardır. Bu nedenle performans hedefleri, bağlama ve kullanıcıların gecikmeleri nasıl algıladığına dair kullanıcı deneyimi araştırmasına göre tanımlanır.
Kullanıcıya odaklanma
Performans çalışmalarınızın odak noktasına kullanıcıları yerleştirin. Aşağıdaki tabloda, kullanıcıların performans gecikmelerini nasıl algıladığına dair temel metrikler açıklanmaktadır:
Kullanıcının performans gecikmeleriyle ilgili algısı| 0-16 ms | Kullanıcılar hareketleri takip etme konusunda son derece başarılıdır ve animasyonların akıcı olmamasından hoşlanmazlar. Her saniye 60 yeni kare oluşturulduğu sürece animasyonlar akıcı olarak algılanır. Bu, tarayıcının yeni kareyi ekrana çizmesi için gereken süre de dahil olmak üzere kare başına 16 ms'dir. Bu durumda, uygulamanın kare oluşturması için yaklaşık 10 ms süre kalır. |
| 0 - 100 ms | Kullanıcı işlemlerine bu zaman aralığında yanıt verdiğinizde kullanıcılar sonucu anında görür. Daha uzun sürerse eylem ile tepki arasındaki bağlantı kopar. |
| 100-1.000 ms | Bu pencerede, görevler doğal ve sürekli bir ilerlemenin parçası gibi görünür. Web'deki çoğu kullanıcı için sayfaları yüklemek veya görünümleri değiştirmek bir görevdir. |
| 1.000 ms veya daha fazla | 1.000 milisaniyeden (1 saniye) sonra kullanıcılar yaptıkları göreve odaklanamaz. |
| 10.000 ms veya daha fazla | 10.000 milisaniyeden (10 saniye) sonra kullanıcılar hayal kırıklığına uğrar ve görevleri bırakma olasılıkları artar. Daha sonra geri dönebilir veya dönmeyebilirler. |
Hedefler ve kurallar
RAIL bağlamında, hedefler ve yönergeler terimlerinin belirli anlamları vardır:
Hedefler: Kullanıcı deneyimiyle ilgili temel performans metrikleri. Örneğin, 100 milisaniyeden kısa sürede boyamak için dokunun. İnsan algısı nispeten sabit olduğundan bu hedeflerin yakın zamanda değişmesi pek olası değildir.
Yönergeler. Hedeflerinize ulaşmanıza yardımcı olan öneriler. Bunlar mevcut donanım ve ağ bağlantısı koşullarına özel olabilir ve bu nedenle zaman içinde değişebilir.
Yanıt: Etkinlikleri 50 ms'den kısa sürede işleme
Hedef: Kullanıcı girişinin başlattığı geçişi 100 ms içinde tamamlayarak kullanıcıların etkileşimlerin anında gerçekleştiğini hissetmesini sağlayın.
Yönergeler:
100 ms içinde görünür bir yanıt sağlamak için kullanıcı girişi etkinliklerini 50 ms içinde işleyin. Bu, düğmeleri tıklama, form kontrollerini açma/kapatma veya animasyonları başlatma gibi çoğu giriş için geçerlidir. Bu durum, dokunarak sürükleme veya kaydırma işlemleri için geçerli değildir.
Kulağa mantıksız gelse de kullanıcı girişine hemen yanıt vermek her zaman doğru bir karar değildir. Bu 100 ms'lik süreyi diğer maliyetli işlemleri yapmak için kullanabilirsiniz ancak kullanıcıyı engellememeye dikkat edin. Mümkünse arka planda çalışın.
Tamamlanması 50 ms'den uzun süren işlemler için her zaman geri bildirim sağlayın.
50 ms mi yoksa 100 ms mi?
Hedef, girişe 100 ms'nin altında yanıt vermekse bütçemiz neden yalnızca 50 ms? Bunun nedeni, genellikle giriş işlemenin yanı sıra başka işlerin de yapılması ve bu işlerin, kabul edilebilir giriş yanıtı için mevcut sürenin bir kısmını almasıdır. Bir uygulama, boşta kalma süresi boyunca önerilen 50 ms'lik parçalar halinde çalışıyorsa giriş, bu çalışma parçalarından biri sırasında gerçekleşirse 50 ms'ye kadar sıraya alınabilir. Bu durum hesaba katıldığında, gerçek giriş işleme için yalnızca kalan 50 ms'nin kullanılabileceğini varsaymak güvenlidir. Bu etki, boşta kalma görevi sırasında alınan girişin nasıl sıraya alındığını ve kullanılabilir işlem süresini azalttığını gösteren aşağıdaki şemada gösterilmiştir:
Animasyon: 10 ms'de bir kare oluşturma
Hedefler:
Animasyondaki her kareyi 10 ms veya daha kısa sürede oluşturun. Teknik olarak her kare için maksimum bütçe 16 ms'dir (1.000 ms / saniyede 60 kare ≈ 16 ms). Ancak tarayıcıların her kareyi oluşturması yaklaşık 6 ms sürer. Bu nedenle, kare başına 10 ms kuralı geçerlidir.
Görsel akıcılığı hedefleyin. Kullanıcılar kare hızlarındaki değişiklikleri fark eder.
Yönergeler:
Animasyonlar gibi yüksek baskı noktalarında, mümkün olduğunca hiçbir şey yapmamak ve yapamadığınızda da mutlak minimumu yapmak önemlidir. Mümkün olduğunda, 100 ms'lik yanıtı kullanarak pahalı işleri önceden hesaplayın. Böylece 60 fps'ye ulaşma şansınızı en üst düzeye çıkarabilirsiniz.
Çeşitli animasyon optimizasyon stratejileri için Oluşturma Performansı bölümüne bakın.
- Giriş ve çıkışlar, ara kareler ve yükleme göstergeleri gibi görsel animasyonlar.
- Kaydırma. Buna, kullanıcının kaydırmaya başlayıp ardından bırakması ve sayfanın kaydırılmaya devam etmesi olan hızlı kaydırma da dahildir.
- Sürükleme. Animasyonlar genellikle haritayı kaydırma veya yakınlaştırmak için sıkıştırma gibi kullanıcı etkileşimlerini takip eder.
Boşta: Boşta kalma süresini en üst düzeye çıkarma
Hedef: Sayfanın kullanıcı girişine 50 ms içinde yanıt verme olasılığını artırmak için boşta kalma süresini en üst düzeye çıkarın.
Yönergeler:
Ertelenen işleri tamamlamak için boş zamanları kullanın. Örneğin, ilk sayfa yüklemesi için mümkün olduğunca az veri yükleyin, ardından geri kalanını yüklemek için boşta kalma süresini kullanın.
Boşta kalma süresi boyunca 50 ms veya daha kısa sürede işlem yapın. Daha uzun sürerse uygulamanın kullanıcı girişine 50 ms içinde yanıt verme yeteneğini etkileme riskiyle karşı karşıya kalırsınız.
Bir kullanıcı, boşta kalma süresi çalışması sırasında bir sayfayla etkileşime girerse kullanıcı etkileşimi her zaman en yüksek önceliğe sahip olmalı ve boşta kalma süresi çalışmasını kesintiye uğratmalıdır.
Yükleme: İçeriği 5 saniyeden kısa sürede sunma ve etkileşimli hale gelme
Sayfalar yavaş yüklendiğinde kullanıcıların dikkati dağılır ve kullanıcılar görevin bozuk olduğunu düşünür. Hızlı yüklenen sitelerde ortalama oturum süresi daha uzun, hemen çıkma oranı daha düşük ve reklam görüntülenebilirliği daha yüksektir.
Hedefler:
Kullanıcılarınızın cihaz ve ağ özelliklerine göre hızlı yükleme performansı için optimizasyon yapın. Şu anda, ilk yüklemeler için iyi bir hedef, yavaş 3G bağlantılarına sahip orta seviye mobil cihazlarda sayfanın 5 saniye veya daha kısa sürede yüklenmesi ve etkileşimli olmasıdır.
Sonraki yüklemeler için iyi bir hedef, sayfanın 2 saniyeden kısa sürede yüklenmesidir.
Yönergeler:
Yükleme performansınızı, kullanıcılarınız arasında yaygın olan mobil cihazlarda ve ağ bağlantılarında test edin. Kullanıcılarınızın bağlantı dağılımını öğrenmek için Chrome User Experience Report'u kullanabilirsiniz. Siteniz için veri yoksa The Mobile Economy 2019, Moto G4 gibi orta seviye bir Android telefon ve yavaş bir 3G ağının (400 ms RTT ve 400 kb/sn aktarım hızı olarak tanımlanır) iyi bir küresel referans olduğunu belirtir. Bu kombinasyon WebPageTest'te kullanılabilir.
Tipik mobil kullanıcılarınızın cihazları 2G, 3G veya 4G bağlantısı kullandığını iddia etse de paket kaybı ve ağ varyansı nedeniyle etkin bağlantı hızının genellikle çok daha yavaş olduğunu unutmayın.
Tam yükleme algısı oluşturmak için her şeyi 5 saniyeden kısa sürede yüklemeniz gerekmez. Resimleri geç yükleme, JavaScript paketlerini kod bölme ve web.dev'de önerilen diğer optimizasyonları kullanabilirsiniz.
RAIL'i ölçmek için kullanılan araçlar
RAIL ölçümlerinizi otomatikleştirmenize yardımcı olacak birkaç araç vardır. Hangisini kullanacağınız, ne tür bilgilere ihtiyacınız olduğuna ve ne tür bir iş akışını tercih ettiğinize bağlıdır.
Chrome Geliştirici Araçları
Chrome Geliştirici Araçları, sayfanız yüklenirken veya çalışırken gerçekleşen her şeyle ilgili ayrıntılı analiz sağlar. Performans panelinin kullanıcı arayüzünü tanımak için Çalışma Zamanı Performansını Analiz Etmeye Başlama başlıklı makaleyi inceleyin.
Aşağıdaki Geliştirici Araçları özellikleri özellikle önemlidir:
Daha az güçlü bir cihazı simüle etmek için CPU'nuzu kısıtlayın.
Daha yavaş bağlantıları simüle etmek için ağı sınırlayın.
Kayıt sırasında ana iş parçacığında gerçekleşen her etkinliği görüntülemek için Ana iş parçacığı etkinliğini görüntüleyin.
Etkinlikleri en çok zaman alanlara göre sıralamak için ana iş parçacığı etkinliklerini bir tabloda görüntüleyin.
Animasyonlarınızın gerçekten sorunsuz çalışıp çalışmadığını ölçmek için saniyedeki kare sayısını (FPS) analiz edin.
Performans İzleyici ile CPU kullanımı, JS yığın boyutu, DOM düğümleri, saniye başına düzen sayısı ve daha fazlasını gerçek zamanlı olarak izleyin.
Ağ bölümüyle kayıt yaparken gerçekleşen ağ isteklerini görselleştirin.
Sayfanın yüklendiği veya bir animasyonun tetiklendiği andaki görünümünü tam olarak oynatmak için kayıt sırasında ekran görüntüleri yakalayın.
Kullanıcı bir sayfayla etkileşim kurduktan sonra sayfada neler olduğunu hızlıca belirlemek için etkileşimleri görüntüleyin.
Sorunlu olabilecek bir dinleyici her tetiklendiğinde sayfayı vurgulayarak kaydırma performansı sorunlarını gerçek zamanlı olarak bulun.
Animasyonlarınızın performansına zarar verebilecek maliyetli boyama etkinliklerini belirlemek için boyama etkinliklerini gerçek zamanlı olarak görüntüleyin.
Deniz Feneri
Lighthouse; Chrome Geliştirici Araçları'nda, PageSpeed Insights'ta, Chrome uzantısı olarak, Node.js modülü olarak ve WebPageTest'te kullanılabilir. Bir URL girersiniz, yavaş bir 3G bağlantısına sahip orta seviye bir cihazı simüle eder, sayfada bir dizi denetim çalıştırır ve ardından yükleme performansıyla ilgili bir rapor ve iyileştirme önerileri sunar.
Aşağıdaki denetimler özellikle önemlidir:
Yanıt
Maksimum Potansiyel İlk Giriş Gecikmesi. Ana iş parçacığının boşta kalma süresine göre uygulamanızın kullanıcı girişine ne kadar sürede yanıt vereceğini tahmin eder.
Kaydırma performansını iyileştirmek için pasif işleyiciler kullanmıyor.
Total Blocking Time. Bir sayfanın fare tıklamaları, ekrana dokunma veya klavye tuşlarına basma gibi kullanıcı girişlerine yanıt vermesinin engellendiği toplam süreyi ölçer.
Etkileşime Hazır Olma Süresi. Kullanıcının tüm sayfa öğeleriyle tutarlı bir şekilde etkileşime girebildiği zamanı ölçer.
Yükleme
Sayfayı ve start_url'yi kontrol eden bir hizmet çalışanı kaydetmiyor. Hizmet çalışanı, kullanıcının cihazındaki yaygın kaynakları önbelleğe alarak ağ üzerinden kaynak getirmek için harcanan süreyi azaltabilir.
Ekran dışındaki resimleri geciktirin. Ekran dışındaki resimlerin yüklenmesini, gerekene kadar geciktirin.
Görselleri uygun şekilde boyutlandırın. Mobil görüntü alanında oluşturulan boyuttan önemli ölçüde daha büyük resimler yayınlamayın.
DOM'un aşırı büyümesini önleyin. Yalnızca sayfayı oluşturmak için gereken DOM düğümlerini göndererek ağ baytlarını azaltın.
WebPageTest
WebPageTest, web sayfalarına erişmek ve zamanlama metriklerini toplamak için gerçek tarayıcıları kullanan bir web performansı aracıdır. Yavaş bir 3G bağlantısına sahip gerçek bir Moto G4 cihazda sayfanın yükleme performansıyla ilgili ayrıntılı bir rapor almak için webpagetest.org/easy adresine bir URL girin. Ayrıca, Lighthouse denetimi içerecek şekilde de yapılandırabilirsiniz.
Özet
RAIL, bir web sitesinin kullanıcı deneyimini farklı etkileşimlerden oluşan bir yolculuk olarak görmenizi sağlayan bir mercektir. Kullanıcı deneyimi üzerinde en büyük etkiye sahip performans hedefleri belirlemek için kullanıcıların sitenizi nasıl algıladığını anlayın.
Kullanıcıya odaklanma
Kullanıcı girişine 100 ms'den kısa sürede yanıt verme
Animasyon veya kaydırma sırasında 10 ms'den kısa sürede bir kare oluşturun.
Ana iş parçacığının boşta kalma süresini en üst düzeye çıkarın.
Etkileşimli içeriği 5.000 ms'den kısa sürede yükleyin.