Animasyon yumuşaklığı metriğine doğru

Animasyonları ölçme, animasyon kareleri hakkında düşünme ve genel sayfa akıcılığı hakkında bilgi edinin.

Behdad Bakhshinategh

Jonathan Ross

Michal Mocny

Kaydırma veya animasyon sırasında "kekelemeye" ya da "donmaya" neden olan sayfalarla karşılaşmış olabilirsiniz. Bu deneyimlerin sorunsuz olmadığını söyleyebiliriz. Chrome Ekibi, bu tür sorunları gidermek için animasyon algılama laboratuvar araçlarımıza daha fazla destek eklemenin yanı sıra Chromium'daki oluşturma işlem hattı teşhislerinde sürekli iyileştirmeler yapmaya çalışmaktadır.

Son zamanlarda kaydettiğimiz ilerlemeleri paylaşmak, somut araç yönergeleri sunmak ve gelecekteki animasyon akıcılığı metrikleriyle ilgili fikirleri tartışmak istiyoruz. Her zaman olduğu gibi geri bildiriminizi almak isteriz.

Bu yayında üç ana konu ele alınacaktır:

• Animasyonlara ve animasyon karelerine hızlı bir bakış.
• Genel animasyon akıcılığını ölçmeyle ilgili şu anki düşüncelerimiz.
• Bugün laboratuvar araçlarında kullanabileceğiniz birkaç pratik öneri.

Animasyonlar nedir?

Animasyonlar, içeriğe hayat verir. İçeriğin hareket etmesini sağlayan animasyonlar, özellikle kullanıcı etkileşimlerine yanıt olarak deneyimin daha doğal, anlaşılır ve eğlenceli olmasını sağlayabilir.

Ancak kötü uygulanmış animasyonlar veya çok fazla animasyon eklemek deneyimi kötüleştirebilir ve hiç eğlenceli olmamasına neden olabilir. Hepimiz, muhtemelen çok fazla "faydalı" geçiş efekti eklenmiş bir arayüzle etkileşimde bulunmuşuzdur. Bu efektler, kötü performans gösterdiklerinde deneyime zarar verir. Bu nedenle, bazı kullanıcılar aslında azaltılmış hareketi tercih edebilir. Bu kullanıcı tercihi dikkate alınmalıdır.

Animasyonlar nasıl çalışır?

Kısa bir özet olarak, oluşturma işlem hattı birkaç sıralı aşamadan oluşur:

1. Stil: Öğelere uygulanan stilleri hesaplayın.
2. Düzen: Her öğenin geometrisini ve konumunu oluşturun.
3. Boya: Her öğenin piksellerini katmanlar halinde doldurun.
4. Birleştirme: Katmanları ekrana çizin.

Animasyonları tanımlamanın birçok yolu olsa da temelde aşağıdaki yöntemlerden biriyle çalışırlar:

• Düzen özelliklerini ayarlama
• Boya özelliklerini ayarlama
• Bileşik özelliklerini ayarlama.

Bu aşamalar sıralı olduğundan, animasyonları işlem hattında daha aşağıda yer alan özellikler açısından tanımlamak önemlidir. Güncelleme ne kadar erken yapılırsa maliyetler o kadar yüksek olur ve sorunsuz bir şekilde tamamlanma olasılığı azalır. (Daha fazla bilgi için Oluşturma performansı bölümüne bakın.)

Düzen özelliklerini canlandırmak pratik olsa da bu işlemin, hemen fark edilmese bile maliyetleri vardır. Animasyonlar mümkün olduğunda bileşik özellik değişiklikleri açısından tanımlanmalıdır.

Bildirim temelli CSS animasyonları tanımlama veya Web Animations kullanma ve bileşik özellikleri canlandırma, sorunsuz ve verimli animasyonlar sağlamak için harika bir ilk adımdır. Ancak yine de bu tek başına sorunsuzluğu garanti etmez. Çünkü verimli web animasyonlarının bile performans sınırları vardır. Bu nedenle ölçüm yapmak her zaman önemlidir.

Animasyon kareleri nedir?

Bir sayfanın görsel temsilinde yapılan güncellemelerin görünmesi zaman alır. Görsel bir değişiklik, yeni bir animasyon karesine yol açar. Bu kare, kullanıcının ekranında oluşturulur.

Güncellemeleri belirli aralıklarla gösterir. Bu nedenle, görsel güncellemeler gruplandırılır. Birçok ekran, sabit bir zaman aralığında (ör. saniyede 60 kez) yenilenir. Bu, 60 Hz'e karşılık gelir. Daha modern bazı ekranlar daha yüksek yenileme hızları sunabilir (90-120 Hz yaygınlaşmaktadır). Bu ekranlar genellikle gerektiğinde yenileme hızları arasında etkin bir şekilde uyum sağlayabilir, hatta tamamen değişken kare hızları sunabilir.

Oyun veya tarayıcı gibi uygulamalarda amaç, tüm bu toplu görsel güncellemeleri işlemek ve her seferinde son tarihe kadar görsel olarak eksiksiz bir animasyon karesi oluşturmaktır. Bu hedefin, içerikleri ağdan hızlı bir şekilde yükleme veya JavaScript görevlerini verimli bir şekilde yürütme gibi diğer önemli tarayıcı görevlerinden tamamen farklı olduğunu unutmayın.

Bir noktadan sonra, tüm görsel güncellemeleri ekran tarafından atanan süre içinde tamamlamak çok zor olabilir. Bu durumda tarayıcı bir kareyi bırakır. Ekranınız kararmıyor, sadece kendini tekrar ediyor. Biraz daha uzun süre aynı görsel güncellemeyi görürsünüz. Bu, önceki kare fırsatında sunulan animasyon karesidir.

Bu durum aslında sıkça yaşanır. Özellikle web platformunda yaygın olan statik veya belge benzeri içeriklerde bu durum fark edilmeyebilir. Kare düşmesi, yalnızca önemli görsel güncellemeler (ör. animasyonlar) olduğunda fark edilir. Bu güncellemeler için akıcı hareket göstermek üzere sabit bir animasyon güncelleme akışına ihtiyaç duyarız.

Animasyon karelerini etkileyen faktörler nelerdir?

Web geliştiriciler, bir tarayıcının görsel güncellemeleri hızlı ve verimli bir şekilde oluşturup sunma becerisini büyük ölçüde etkileyebilir.

Bazı örnekler:

• Hedef cihazda hızlıca çözümlenemeyecek kadar büyük veya kaynak açısından yoğun içerik kullanılması.
• Çok fazla katman kullanılması nedeniyle çok fazla GPU belleği kullanılıyor.
• Aşırı karmaşık CSS stilleri veya web animasyonları tanımlama
• Hızlı oluşturma optimizasyonlarını devre dışı bırakan tasarım anti-pattern'leri kullanma.
• Ana ileti dizisinde çok fazla JS çalışması yapılması, görsel güncellemeleri engelleyen uzun görevlere yol açıyor.

Ancak bir animasyon karesinin zaman sınırını aşıp kare düşmesine neden olduğunu nasıl anlayabilirsiniz?

Olası bir yöntem, requestAnimationFrame() yoklama kullanmaktır ancak bunun çeşitli dezavantajları vardır. requestAnimationFrame() veya "rAF", tarayıcıya animasyon yapmak istediğinizi bildirir ve oluşturma işlem hattının bir sonraki boyama aşamasından önce bunu yapma fırsatı ister. Geri çağırma işleviniz beklediğiniz zamanda çağrılmıyorsa bu, boyama işleminin yürütülmediği ve bir veya daha fazla karenin atlandığı anlamına gelir. rAF'nin ne sıklıkta çağrıldığını anket yaparak ve sayarak bir tür "saniyedeki kare sayısı" (FPS) metriği hesaplayabilirsiniz.

let frameTimes = [];
function pollFramesPerSecond(now) {
  frameTimes = [...frameTimes.filter(t => t > now - 1000), now];
  requestAnimationFrame(pollFramesPerSecond);
  console.log('Frames per second:', frameTimes.length);
}
requestAnimationFrame(pollFramesPerSecond);

requestAnimationFrame() anket özelliğini kullanmak çeşitli nedenlerle iyi bir fikir değildir:

• Her komut dosyasının kendi yoklama döngüsünü ayarlaması gerekir.
• Kritik yolu engelleyebilir.
• rAF yoklaması hızlı olsa bile sürekli kullanıldığında requestIdleCallback()'nin uzun boşta kalma blokları (tek bir kareyi aşan bloklar) planlamasını engelleyebilir.
• Benzer şekilde, uzun süreli boşta kalma bloklarının olmaması, tarayıcının diğer uzun süren görevleri (ör. daha uzun çöp toplama ve diğer arka plan veya spekülatif çalışmalar) planlamasını engeller.
• Yoklama etkinleştirilip devre dışı bırakılırsa kare bütçesinin aşıldığı durumları kaçırırsınız.
• Tarayıcının değişken güncelleme sıklığı kullandığı durumlarda (ör. güç veya görünürlük durumu nedeniyle) yoklama, yanlış pozitif sonuçlar bildirir.
• En önemlisi de tüm animasyon güncelleme türlerini yakalamamasıdır.

Ana iş parçacığında çok fazla işlem yapılması, animasyon karelerinin görülmesini etkileyebilir. Ana iş parçacığında çok fazla iş olduğunda (ör. düzen) rAF tabanlı bir animasyonun nasıl kare düşmesine, daha az rAF geri çağırmasına ve daha düşük FPS'ye yol açtığını görmek için Jank Sample'ı inceleyin.

Ana iş parçacığı yavaşladığında görsel güncellemeler titremeye başlar. That's jank!

Birçok ölçüm aracı, ana iş parçacığının zamanında sonuç verme ve animasyon karelerinin sorunsuz çalışabilme özelliğine yoğunlaşmıştır. Ancak bu, hikayenin tamamı değil. Aşağıdaki örneği inceleyelim:

Yukarıdaki videoda, ana iş parçacığına düzenli olarak uzun görevler yerleştiren bir sayfa gösteriliyor. Bu uzun görevler, sayfanın belirli görsel güncellemeler sunma özelliğini tamamen ortadan kaldırır. Sol üst köşede, requestAnimationFrame() olarak bildirilen FPS'nin 0'a düştüğünü görebilirsiniz.

Ancak bu uzun görevlere rağmen sayfa sorunsuz şekilde kaydırılmaya devam ediyor. Bunun nedeni, modern tarayıcılarda kaydırmanın genellikle iş parçacıklı olmasıdır ve tamamen birleştirici tarafından yönlendirilmesidir.

Bu örnekte, ana iş parçacığında aynı anda birçok bırakılan kare bulunuyor ancak yine de birleştirici iş parçacığında kaydırma işlemiyle ilgili birçok kare başarıyla teslim ediliyor. Uzun görev tamamlandıktan sonra ana iş parçacığı boyama güncellemesinin sunabileceği görsel bir değişiklik yoktur. rAF yoklaması, kare düşüşünün 0'a düşmesini önerdi ancak kullanıcılar görsel olarak bir fark göremez.

Animasyon karelerinde durum bu kadar basit değildir.

Animasyon kareleri: Önemli güncellemeler

Yukarıdaki örnek, hikayenin requestAnimationFrame() ile sınırlı olmadığını gösteriyor.

Peki animasyon güncellemeleri ve animasyon kareleri ne zaman önemlidir? Üzerinde düşündüğümüz ve geri bildirim almak istediğimiz bazı ölçütleri aşağıda bulabilirsiniz:

• Ana ve birleştirici iş parçacığı güncellemeleri
• Eksik boya güncellemeleri
• Animasyonları algılama
• Kalite ve miktar

Ana ve birleştirici iş parçacığı güncellemeleri

Animasyon karesi güncellemeleri boole değildir. Çerçeveler yalnızca tamamen bırakılamaz veya tamamen sunulamaz. Animasyon karelerinin kısmen gösterilmesinin birçok nedeni vardır. Diğer bir deyişle, aynı anda biraz eski içerik ve bazı yeni görsel güncellemeler içerebilir.

Bunun en yaygın örneği, tarayıcının kare son tarihi içinde yeni bir ana iş parçacığı güncellemesi oluşturamaması ancak yeni bir birleştirici iş parçacığı güncellemesine sahip olmasıdır (ör. daha önce verilen iş parçacıklı kaydırma örneği).

Bildirim temelli animasyonları kullanarak bileşik özellikleri canlandırmanın önerilmesinin önemli bir nedeni, bu şekilde ana iş parçacığı meşgul olsa bile animasyonun tamamen birleştirici iş parçacığı tarafından yönlendirilmesini sağlamasıdır. Bu tür animasyonlar, görsel güncellemeleri verimli ve paralel olarak üretmeye devam edebilir.

Diğer yandan, ana iş parçacığı güncellemesinin sunulabilir hale gelmesi birkaç kare son tarihini kaçırdıktan sonra gerçekleşebilir. Tarayıcıda bazı yeni güncellemeler olur ancak bu güncellemeler en son güncellemeler olmayabilir.

Genel olarak, tüm yeni görsel güncellemeleri içermeyen ancak bazı yeni görsel güncellemeleri içeren kareleri kısmi kare olarak değerlendiririz. Kısmi kareler oldukça yaygındır. İdeal olarak, kısmi güncellemeler en azından animasyonlar gibi en önemli görsel güncellemeleri içermelidir. Ancak bu durum yalnızca animasyonlar birleştirme iş parçacığı tarafından yönlendirilirse gerçekleşebilir.

Eksik boya güncellemeleri

Kısmi güncellemenin bir diğer türü de resim gibi medyanın, kare sunumuna yetişecek şekilde kod çözme ve rasterleştirme işlemlerinin tamamlanmamasıdır.

Sayfa tamamen statik olsa bile tarayıcılar, hızlı kaydırma sırasında görsel güncellemeleri oluşturmada geride kalabilir. Bunun nedeni, GPU belleğinden tasarruf etmek için görünür görüntü alanının dışındaki içeriklerin piksel oluşturmalarının atılması olabilir. Piksellerin oluşturulması zaman alır ve parmakla hızlı kaydırma gibi büyük bir kaydırmadan sonra her şeyin oluşturulması tek bir kareden daha uzun sürebilir. Bu durum genellikle damalı desen olarak bilinir.

Her kare oluşturma fırsatında, en son görsel güncellemelerin ne kadarının ekrana ulaştığını takip etmek mümkündür. Bunu birçok kare (veya zaman) boyunca yapabilme yeteneğini ölçmeye genel olarak kare işleme hızı denir.

GPU gerçekten yavaşlarsa tarayıcı (veya platform), görsel güncellemeleri deneme hızını kısıtlamaya başlayabilir ve böylece etkin kare hızları düşer. Bu durum, teknik olarak bırakılan kare güncellemelerinin sayısını azaltabilir ancak görsel olarak kare işleme hızı daha düşük görünmeye devam eder.

Ancak düşük kare hızı çıkışının tüm türleri kötü değildir. Sayfa çoğunlukla boşta duruyorsa ve etkin animasyon yoksa düşük kare hızı, yüksek kare hızı kadar görsel olarak çekicidir (ve pil tasarrufu sağlayabilir!).

Peki, kare işleme hızı ne zaman önemlidir?

Animasyonları algılama

Yüksek kare işleme hızı, özellikle önemli animasyonların olduğu dönemlerde önemlidir. Farklı animasyon türleri, belirli bir iş parçacığındaki (ana, birleştirici veya çalışan) görsel güncellemelere bağlıdır. Bu nedenle, görsel güncellemesi, güncellemesini son tarihe kadar sağlayan iş parçacığına bağlıdır. Belirli bir ileti dizisi, bu ileti dizisi güncellemesine bağlı etkin bir animasyon olduğunda akıcılığı etkiler.

Bazı animasyon türlerini tanımlamak ve tespit etmek diğerlerine göre daha kolaydır. Bildirim temelli animasyonlar veya kullanıcı girişiyle yönlendirilen animasyonlar, animasyon yapılabilir stil özelliklerinde periyodik güncellemeler olarak uygulanan JavaScript ile yönlendirilen animasyonlara kıyasla daha net tanımlanır.

requestAnimationFrame() ile bile her rAF çağrısının mutlaka görsel güncelleme veya animasyon ürettiğini varsayamazsınız. Örneğin, yalnızca kare hızını izlemek için rAF yoklaması kullanmak (yukarıda gösterildiği gibi) görsel güncelleme olmadığı için akıcılık ölçümlerini etkilememelidir.

Kalite ve miktar

Son olarak, animasyonları ve animasyon çerçevesi güncellemelerini algılamak, yalnızca animasyon güncellemelerinin miktarını yakaladığı için kaliteyi değil, hikayenin yalnızca bir kısmını anlatır.

Örneğin, video izlerken 60 FPS'lik sabit bir kare hızı görebilirsiniz. Teknik olarak bu durum tamamen sorunsuz olsa da videonun bit hızı düşük olabilir veya ağ arabelleğe alma ile ilgili sorunlar olabilir. Bu durum, animasyonun akıcılığı metrikleriyle doğrudan yakalanmaz ancak kullanıcı için yine de rahatsız edici olabilir.

Alternatif olarak, <canvas>'dan yararlanan bir oyun (belki de sabit bir kare hızı sağlamak için ekran dışı tuval gibi teknikler kullanılarak) animasyon kareleri açısından teknik olarak mükemmel bir şekilde akıcı olabilir ancak yüksek kaliteli oyun öğelerini sahneye yükleyemeyebilir veya oluşturma yapıtları gösterebilir.

Elbette bir sitede gerçekten kötü animasyonlar da olabilir. 🙂

Yani, zamanlarına göre oldukça havalı olduklarını düşünüyorum.

Tek bir animasyon karesinin durumları

Kareler kısmen sunulabildiği veya kare atlama, akıcılığı etkilemeyecek şekilde gerçekleşebildiği için her karenin bir eksiksizlik ya da akıcılık puanı olduğunu düşünmeye başladık.

Tek bir animasyon karesinin durumunu yorumlama şekillerinin en iyiden en kötüye doğru sıralandığı spektrum aşağıda verilmiştir:

Bu durumları bir puan gibi değerlendirmek mümkündür. Bu puanı yorumlamanın bir yolu da kullanıcı tarafından gözlemlenebilme olasılığı olarak değerlendirmektir. Tek bir kare düşmesi çok fark edilmeyebilir ancak art arda düşen kareler akıcılığı etkilediği için fark edilir.

Tüm unsurların birleşimi: Düşen karelerin yüzdesi metriği

Bazen her animasyon karesinin durumunu ayrıntılı olarak incelemek gerekse de deneyime hızlı bir "göz atma" puanı atamak da faydalı olabilir.

Kareler kısmen sunulabileceğinden ve tamamen atlanan kare güncellemeleri bile akıcılığı etkilemeyebileceğinden yalnızca kareleri saymak yerine, tarayıcının önemli anlarda görsel olarak eksiksiz güncellemeler sağlayamama oranına odaklanmak istiyoruz.

Zihinsel model şu şekilde değişmelidir:

1. Saniyedeki kare sayısı
2. Eksik ve önemli animasyon güncellemelerini tespit etme
3. Belirli bir süre boyunca bırakma yüzdesi.

Önemli olan, önemli güncellemeleri beklerken geçen sürenin oranıdır. Bu yaklaşımın, kullanıcıların web içeriğinin akıcılığını deneyimleme şekliyle uyumlu olduğunu düşünüyoruz. Şu ana kadar başlangıç metrikleri grubu olarak aşağıdakileri kullandık:

• Ortalama bırakılan kare yüzdesi: Tüm zaman çizelgesi boyunca, boşta olmayan tüm animasyon kareleri için
• En Kötü Durumda Düşen Karelerin Yüzdesi: 1 saniyelik kayan zaman aralıklarında ölçülür.
• 95. yüzdelik dilimdeki bırakılan karelerin yüzdesi: 1 saniyelik kayan zaman pencereleri üzerinden ölçülür.

Bu puanları bazı Chrome geliştirici araçlarında bulabilirsiniz. Bu metrikler yalnızca genel çerçeve işleme hızına odaklanırken çerçeve gecikmesi gibi diğer faktörleri de değerlendiriyoruz.

Geliştirici araçlarında kendiniz deneyin.

Performans HUD'u

Chromium'da bir işaretin (chrome://flags/#show-performance-metrics-hud) arkasına gizlenmiş kullanışlı bir Performans HUD'u bulunur. Bu HUD'da, Önemli Web Verileri gibi öğeler için canlı puanların yanı sıra zaman içindeki Düşen Kare Yüzdesi'ne dayalı olarak animasyonun akıcılığıyla ilgili deneysel tanımlar da yer alır.

Çerçeve Oluşturma İstatistikleri

Kısmi güncellemeleri tamamen bırakılan kare güncellemelerinden ayırt etmek için renk kodlu olan yeni animasyon karelerinin canlı görünümünü görmek üzere, Rendering ayarları aracılığıyla DevTools'ta "Frame Rendering Stats"i (Kare Oluşturma İstatistikleri) etkinleştirin. Bildirilen kare hızı yalnızca tamamen sunulan kareler içindir.

Geliştirici Araçları'ndaki performans profili kayıtlarında Frame Viewer

Geliştirici Araçları Performans panelinde uzun süredir Kareler görüntüleyicisi bulunur. Ancak bu, modern oluşturma işlem hattının gerçekte nasıl çalıştığıyla biraz uyumsuz hale gelmişti. En son Chrome Canary'de bile yakın zamanda birçok iyileştirme yapıldı. Bu iyileştirmelerin, animasyon sorunlarının hata ayıklanmasını büyük ölçüde kolaylaştıracağını düşünüyoruz.

Bugün, kare görüntüleyicideki karelerin vsync sınırlarıyla daha iyi hizalandığını ve duruma göre renk kodlu olduğunu göreceksiniz. Yukarıda belirtilen tüm ayrıntılar için henüz tam görselleştirme mevcut değil ancak yakında daha fazlasını eklemeyi planlıyoruz.

Chrome izleme

Son olarak, ayrıntılara derinlemesine bakmak için tercih edilen araç olan Chrome Tracing ile yeni Perfetto UI (veya about:tracing) üzerinden "Web content rendering" (Web içeriği oluşturma) izlemesi kaydedebilir ve Chrome'un grafik işlem hattını ayrıntılı bir şekilde inceleyebilirsiniz. Bu zorlu bir görev olabilir ancak kolaylaştırmak için Chromium'a yakın zamanda birkaç özellik eklendi. Life of a Frame (Bir Çerçevenin Hayatı) dokümanında nelerin mevcut olduğuna dair genel bir bakış elde edebilirsiniz.

İzleme etkinlikleri sayesinde şunları kesin olarak belirleyebilirsiniz:

• Hangi animasyonların çalıştırıldığı (TrackerValidation adlı etkinlikler kullanılarak).
• Animasyon karelerinin tam zaman çizelgesini alma (PipelineReporter adlı etkinlikleri kullanarak).
• Düzensiz animasyon güncellemeleri için animasyonunuzun daha hızlı çalışmasını tam olarak neyin engellediğini (PipelineReporter etkinliklerindeki etkinlik dökümlerini kullanarak) belirleyin.
• Girişe dayalı animasyonlarda görsel güncellemenin ne kadar sürdüğünü (EventLatency adlı etkinlikleri kullanarak) görün.

Sırada ne var?

Web Vitals girişimi, web'de mükemmel kullanıcı deneyimleri oluşturmak için metrik ve rehberlik sağlamayı amaçlar. Total Blocking Time (TBT) gibi laboratuvar tabanlı metrikler, olası etkileşim sorunlarını yakalamak ve teşhis etmek için çok önemlidir. Animasyon akıcılığı için benzer bir laboratuvar tabanlı metrik tasarlamayı planlıyoruz.

Tek tek animasyon karesi verilerine dayalı kapsamlı bir metrik tasarlama fikirleri üzerinde çalışmaya devam ederken sizi bilgilendireceğiz.

Gelecekte, sahada ve laboratuvarda gerçek kullanıcılar için animasyonun sorunsuzluğunu performanslı bir şekilde ölçmeyi mümkün kılan API'ler de tasarlamak istiyoruz. Bu konuda da güncellemeler için bizi takip etmeye devam edin.

Geri bildirim

Chrome'da animasyonun akıcılığını ölçmek için kullanıma sunulan tüm son iyileştirmeler ve geliştirici araçları bizi heyecanlandırıyor. Lütfen bu araçları deneyin, animasyonlarınızı karşılaştırın ve sonuçları bizimle paylaşın.

Yorumlarınızı, konu satırında "[Smoothness Metrics]" ifadesiyle birlikte web-vitals-feedback Google grubuna gönderebilirsiniz. Görüşlerinizi öğrenmek için sabırsızlanıyoruz.