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

Animasyonları ölçme, animasyon çerçevelerini nasıl düşüneceğiniz ve genel sayfa düzgünlüğü hakkında bilgi edinin.

Behdad Bakhshinategh

Jonathan Ross

Michal Mocny

Kaydırma veya animasyon sırasında sayfaların "takıldığını" ya da "donduğunu" fark etmiş olabilirsiniz. Bu deneyimlerin sıkıntısız olmadığını belirtmek isteriz. Bu tür sorunları ele almak amacıyla Chrome ekibi, animasyon algılama için laboratuvar araçlarımıza daha fazla destek sağlamanın yanı sıra Chromium'daki oluşturma ardışık düzeni teşhislerini düzenli olarak iyileştirmek için çalışıyor.

Son zamanlarda kaydettiğimiz ilerlemelerden bahsetmek, araç kullanımıyla ilgili net yönergeler sunmak ve gelecekteki animasyon akıcılığı metrikleri için fikirleri tartışmak istiyoruz. Her zaman olduğu gibi geri bildirimlerinizi öğrenmekten memnuniyet duyarız.

Bu yayın üç ana konuyu ele alır:

• Animasyonlara ve animasyon karelerine hızlı bir bakış.
• Animasyonun genel akıcılığının ölçülmesiyle ilgili düşüncelerimiz.
• Laboratuvar araçlarını hemen kullanmaya başlamanız için birkaç pratik öneri.

Animasyonlar nedir?

Animasyonlar içeriğe hayat verir. Animasyonlar, özellikle kullanıcı etkileşimlerine yanıt olarak içeriğin hareket etmesini sağlayarak deneyimi daha doğal, anlaşılır ve eğlenceli hale getirebilir.

Ancak kötü uygulanmış animasyonlar veya yalnızca çok fazla animasyon eklemek deneyimi bozabilir ve hiç eğlenceli hale getirmemesine neden olabilir. Muhtemelen hepimiz, çok fazla "faydalı" geçiş efekti ekleyen bir arayüzle etkileşime geçtik. Bu efektler, kötü performans gösterdiklerinde kullanıcı deneyimini olumsuz yönde etkiler. Bu nedenle bazı kullanıcılar aslında daha az hareket etmeyi tercih edebilir. Bu, kullanıcılarınızın tercih ettiği bir tercihtir.

Animasyonlar nasıl çalışır?

Oluşturma ardışık düzeni, birkaç sıralı aşamadan oluşur:

1. Stil: Öğeler için geçerli olan stilleri hesaplar.
2. Düzen: Her öğenin geometrisini ve konumunu oluşturun.
3. Boya: Her öğenin piksellerini katmanlara doldurun.
4. Kompozit: Katmanları ekrana çizin.

Animasyonları tanımlamanın birçok yolu olsa da bunların tümü temel olarak aşağıdakilerden biriyle çalışır:

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

Bu aşamalar sıralı olduğundan animasyonlar, ardışık düzendeki özellikler açısından tanımlanmalıdır. Güncelleme ne kadar erken yapılırsa maliyetler o kadar artar ve sürecin sorunsuz geçme olasılığı o kadar azalır. (Daha fazla bilgi için Oluşturma performansı bölümüne bakın.)

Sayfa düzeni özelliklerini animasyonlu hale getirmek uygun olsa da bu işlem, maliyetleri hemen fark etmeseniz bile maliyetli olabilir. Animasyonlar, mümkün olduğunda birleşik mülk değişiklikleri açısından tanımlanmalıdır.

Bildirim temelli CSS animasyonları tanımlamak veya Web Animasyonlarını kullanmak ve kompozit özellikleri canlandırmanızı sağlamak, düzgün ve verimli animasyonlar sağlamanın mükemmel bir ilk adımıdır. Ancak verimli web animasyonları bile performans sınırlamalarına sahip olduğundan, tek başına bu durum sorunsuzluğu garanti etmez. 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 ve bu kare sonunda kullanıcının ekranında oluşturulur.

Güncellemeyi belirli aralıklarla gösterir. Böylece görsel güncellemeler toplu olarak yapılır. Birçok ekran saniyede 60 kez (yani 60 Hz) gibi sabit bir zaman aralığında güncellenir. Daha modern ekranlar daha yüksek yenileme hızları sunabilir (90-120 Hz yaygınlaşmaya başlamıştır). Bu ekranlar genellikle gerektiğinde yenileme hızları arasında aktif olarak uyum sağlayabilir veya tamamen değişken kare hızları sunabilir.

Oyun veya tarayıcı gibi uygulamaların amacı, tüm bu toplu görsel güncellemeleri işlemek ve her seferinde son tarihe kadar görsel açıdan eksiksiz bir animasyon karesi oluşturmaktır. Bu hedefin, ağdan hızlıca içerik 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 noktada, tüm görsel güncellemeleri ekran tarafından atanan son tarihe kadar tamamlamak çok zor olabilir. Bu durumda tarayıcı bir çerçeve bırakır. Ekranınız kararmaz, yalnızca kendiliğinden tekrarlanır. Aynı görsel güncellemeyi biraz daha uzun süre görürsünüz. Bu, önceki kare fırsatında sunulan animasyon karesidir.

Bu durum aslında sık karşılaşılan bir durumdur. Özellikle web platformunda yaygın olan statik veya belge benzeri içeriklerde bu durum fark edilmeyebilir. Atlanan kareler yalnızca animasyonlar gibi önemli görsel güncellemeler olduğunda fark edilir. Bu tür güncellemelerde, hareketin sorunsuz şekilde gösterilmesi için istikrarlı bir animasyon güncellemesi akışı gerekir.

Animasyon karelerini etkileyen faktörler nelerdir?

Web geliştiricileri, bir tarayıcının hızlı ve verimli bir şekilde görsel güncellemeler oluşturup sunmasını önemli ölçüde etkileyebilir.

Bazı örnekler:

• Hedef cihazda hızlı bir şekilde kodunu çözmek için çok büyük veya çok fazla kaynak kullanan içeriklerin kullanılması.
• Çok fazla GPU belleği gerektiren çok fazla katman kullanmak
• Aşırı karmaşık CSS stilleri veya web animasyonları tanımlama
• Hızlı oluşturma optimizasyonlarını devre dışı bırakan tasarım anti-kalıpları kullanmak
• Ana iş parçacığında çok fazla JS çalışması, görsel güncellemeleri engelleyen uzun görevlere neden olur.

Ancak bir animasyon karesinin zaman sınırını aştığını ve kare atlamasına neden olduğunu nasıl anlayabilirsiniz?

Olası yöntemlerden biri requestAnimationFrame() anket yapmaktır ancak bu yöntemin birkaç dezavantajı vardır. requestAnimationFrame() veya "rAF", tarayıcıya bir animasyon gerçekleştirmek istediğinizi bildirir ve oluşturma ardışık düzeninin bir sonraki boyama aşamasından önce bunu yapma fırsatı ister. Geri çağırma işleviniz beklediğiniz zamanda çağrılmıyorsa bir boyama işlemi yürütülmemiş ve bir veya daha fazla kare atlanmıştır. rAF'ın 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() anketi kullanmak birkaç nedenden dolayı iyi bir fikir değildir:

• Her komut dosyasının kendi anket döngüsünü oluşturması gerekir.
• Kritik yolu engelleyebilir.
• rAF anketi hızlı olsa bile, sürekli kullanıldığında requestIdleCallback()'nin uzun boş bloklar (tek bir kareyi aşan bloklar) planlamasını engelleyebilir.
• Benzer şekilde, uzun süreli boş blokların olmaması, tarayıcının diğer uzun süreli görevleri (ör. daha uzun çöp toplama ve diğer arka plan veya spekülatif çalışmalar) planlamasını engeller.
• Yoklama etkinleştirilir ve devre dışı bırakılırsa çerçeve bütçesinin aşıldığı durumları kaçırırsınız.
• Anket, tarayıcının değişken güncelleme sıklığı kullandığı (örneğin, güç veya görünürlük durumu gibi) durumlarda yanlış pozitifleri bildirir.
• En önemlisi de, bu metin aslında her tür animasyon güncellemelerini yakalamıyor!

Ana iş parçacığında çok fazla çalışma yapılması, animasyon karelerini görme yeteneğini etkileyebilir. Ana iş parçacığında çok fazla iş olduğunda (düzenleme gibi) rAF destekli bir animasyonun nasıl kare atlamasına, daha az rAF geri çağırmasına ve daha düşük FPS'ye yol açtığını görmek için Takılma Örneği'ne göz atın.

Ana iş parçacığı bir araya getirildiğinde görsel güncellemeler takılmaya başlar. Çok fena!

Birçok ölçüm aracı, ana iş parçacığının zamanında verim sağlaması ve animasyon karelerinin sorunsuz çalışması için yoğun bir şekilde odaklanmıştır. Ancak hikayenin tamamı bu değil. Aşağıdaki örneği inceleyin:

Yukarıdaki videoda, ana iş parçacığına düzenli olarak uzun görevler ekleyen bir sayfa gösterilmektedir. Bu uzun görevler, sayfanın belirli türde görsel güncellemeler sağlama özelliğini tamamen bozar. Sol üst köşede, bildirilen FPS'nin requestAnimationFrame() değerinden 0 değerine düştüğünü görebilirsiniz.

Bu uzun görevlere rağmen sayfa sorunsuz bir şekilde kaymaya devam ediyor. Bunun nedeni, modern tarayıcılarda kaydırma işleminin genellikle iş parçacıklı olması ve tamamen birleştirici tarafından yönetilmesidir.

Bu, aynı anda ana iş parçacığında atlanmış birçok kare içeren ancak birleştirici iş parçacığında yine de başarıyla yayınlanmış birçok kaydırma çerçevesinin bulunduğu bir örnektir. Uzun görev tamamlandığında, ana iş parçacığı boyama güncellemesinde herhangi bir görsel değişiklik yapılamaz. rAF anketinde karenin 0'a düşmesi önerilmiş olsa da görsel olarak kullanıcı herhangi bir farkı anlayamaz.

Animasyon kareleri için durum o kadar basit değildir.

Animasyon kareleri: Önemli güncellemeler

Yukarıdaki örnek, hikayede requestAnimationFrame() dışında başka şeyler de bulunduğunu gösteriyor.

Peki, animasyon güncellemeleri ve animasyon kareleri ne zaman önemlidir? Şu anda üzerinde çalıştığımız ve geri bildirimlerinizi almak istediğimiz bazı ölçütler şunlardır:

• Ana ve kompozitör iş parçacığı güncellemeleri
• Boya güncellemeleri eksik
• Animasyonları algılama
• Nitelik ve nicelik

Ana ve birleştirici ileti dizisi güncellemeleri

Animasyon çerçevesi güncellemeleri boole değildir. Kareler yalnızca tamamen bırakılabilir veya tamamen sunulabilir. Bir animasyon karesi kısmen sunulmasının birçok nedeni olabilir. Diğer bir deyişle, aynı anda biraz eski içerik ve sunulan biraz yeni görsel güncelleme bulunabilir.

Bunun en yaygın örneği, tarayıcı çerçeve son tarihi içinde yeni bir ana iş parçacığı güncellemesi üretememesine rağmen yeni bir oluşturucu iş parçacığı güncellemesi (ör. önceki bölümdeki mesajlı kaydırma örneği) olduğunda ortaya çıkar.

Kompozit mülkleri animasyonlu hale getirmek için açıklayıcı animasyonlar kullanmanın önerilmesinin önemli nedenlerinden biri, ana iş parçacığı meşgul olsa bile animasyonların tamamen birleştirici iş parçacığı tarafından yönlendirilmesini sağlamasıdır. Bu tür animasyonlar, verimli ve paralel şekilde görsel güncellemeler oluşturmaya devam edebilir.

Öte yandan, bir ana mesaj güncellemesinin nihayet sunuma hazır hale gelmesinin ancak birkaç çerçeve son tarihinin kaçırılmasının ardından gerçekleştiği durumlar olabilir. Burada tarayıcıda yeni bazı güncellemeler olacak, ancak bu güncellemeler en yeni olmayabilir.

Genel olarak, tüm yeni görsel güncellemeleri içermeyen, 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çerir ancak bu yalnızca animasyonlar birleştirici iş parçacığı tarafından çalıştırıldığında gerçekleşebilir.

Boya güncellemeleri eksik

Resim gibi medyaların, kare sunumu için zaman içinde kod çözme ve rasterleştirme işlemini tamamlamaması da kısmi güncelleme türlerinden biridir.

Ya da bir sayfa tamamen statik olsa bile, tarayıcılar hızlı kaydırma sırasında görsel güncellemeleri oluşturma konusunda geride kalabilir. Bunun nedeni, içeriğin görünür görüntü alanının dışındaki piksel oluşturma işlemlerinin GPU belleğinden tasarruf etmek için silinebilmesidir. Piksellerin oluşturulması zaman alır ve parmağınızı hızlıca kaydırarak yaptığınız gibi büyük bir kaydırma işleminden sonra her şeyin oluşturulması tek bir kareden daha uzun sürebilir. Bu yöntem genellikle dama tahtası olarak bilinir.

Her kare oluşturma fırsatında, en son görsel güncellemelerin ne kadarının ekrana yansıtıldığını izlemek mümkündür. Bu işlemi birçok kare (veya zaman) boyunca yapabilme yeteneğini ölçmek genel olarak kare aktarım hızı olarak bilinir.

GPU gerçekten tıkanırsa tarayıcı (veya platform) görsel güncelleme deneme hızını bile azaltmaya başlayabilir ve böylece etkili kare hızlarını düşürebilir. Bu teknik olarak atlanan kare güncellemelerinin sayısını azaltabilecek olsa da görsel olarak yine de daha düşük bir kare işleme hızı olarak görünür.

Ancak düşük kare aktarım hızının her türü kötü değildir. Sayfa çoğunlukla boştaysa ve etkin animasyon yoksa düşük kare hızı, yüksek kare hızı kadar görsel açıdan ilgi çekicidir (ve pilden tasarruf sağlayabilir).

Peki kare hızı ne zaman önemlidir?

Animasyonları algılama

Yüksek kare aktarım hızı, özellikle önemli animasyonların olduğu dönemlerde önemlidir. Farklı animasyon türleri, belirli bir iş parçacığındaki (ana, kompozitör veya işleyici) görsel güncellemelere bağlıdır. Bu nedenle, görsel güncelleme, söz konusu iş parçacığının güncellemeyi son tarihe kadar sağlamasına bağlıdır. İleti dizisinin güncellenmesine bağlı olarak etkin bir animasyon olduğunda, ilgili ileti dizisinin akıcılığı etkilediğini söyleriz.

Bazı animasyon türlerinin tanımlanması ve tespit edilmesi diğerlerinden daha kolaydır. Tanımlayıcı animasyonlar veya kullanıcı girişi odaklı animasyonlar, animasyonlu stil özelliklerinde dönemsel güncellemeler olarak uygulanan JavaScript odaklı animasyonlardan daha net bir şekilde tanımlanabilir.

requestAnimationFrame() kullansanız bile her rAF çağrısının her zaman görsel bir güncelleme veya animasyon oluşturduğunu varsayamazsınız. Örneğin, rAF anketini yalnızca kare hızını izlemek için kullanmak (yukarıda gösterildiği gibi), görsel güncelleme olmadığından pürüzsüzlük ölçümlerini etkilemez.

Nitelik ve nicelik

Son olarak, animasyon ve animasyon kare güncellemelerini algılamak, animasyon güncellemelerinin kalitesini değil yalnızca miktarını yakaladığı için hikayenin yalnızca bir parçasıdır.

Örneğin, video izlerken sabit bir 60 fps kare hızını görebilirsiniz. Teknik olarak bu işlem son derece pürüzsüz olsa da videonun bit hızı düşük olabilir veya ağ arabelleğe alma sorunları olabilir. Bu durum, animasyon akıcılığı metrikleri tarafından doğrudan yakalanmaz ancak kullanıcı için rahatsız edici olabilir.

Ya da <canvas>'ten yararlanan (hatta sabit kare hızını sağlamak için ekran dışı kanvas gibi teknikler kullanan) bir oyun, animasyon kareleri açısından teknik olarak mükemmel bir akıcılık sunarken sahneye yüksek kaliteli oyun öğeleri yükleyemeyebilir veya oluşturma yapıları gösterebilir.

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

Yani sanırım zamanlarına göre epey havalılar.

Tek bir animasyon çerçevesinin durumları

Kareler kısmen sunulabilir veya kare atlama, akıcılığı etkilemeyecek şekilde gerçekleşebilir. Bu nedenle, her karenin bir eksiklik veya akıcılık puanı olduğunu düşünmeye başladık.

Tek bir animasyon karenin durumunu en iyiden en kötüye doğru sırayla yorumlama yöntemlerimizin yelpazesi aşağıda verilmiştir:

Bu durumları bir puana dönüştürmek mümkündür. Bu puanı yorumlamanın bir yolu da, puanın kullanıcı tarafından gözlemlenebilir olma olasılığı olarak kabul edilmesidir. Tek bir atlanan kare çok fark edilmeyebilir ancak arka arkaya akıcılığı etkileyen çok sayıda atlanan kare dizisi kesinlikle fark edilir.

Özet

Bazen her animasyon karesinin durumunu ayrıntılı olarak incelemek gerekebilir ancak bir deneyim için "bir bakışta" puan vermek de faydalı olabilir.

Çerçeveler kısmen sunulabileceğinden ve tamamen atlanan çerçeve güncellemeleri bile akıcılığı etkilemeyebileceğinden, yalnızca kareleri saymaya değil, tarayıcının önemli olduğunda görsel olarak eksiksiz güncellemeler sağlayamamasının ne derecesine odaklanmak istiyoruz.

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

1. Saniyedeki Kare Sayısı:
2. Eksik ve önemli animasyon güncellemelerini algılayarak
3. Belirli bir dönemdeki Düşüş Yüzdesi.

Önemli olan, önemli güncellemeleri bekleme süresinin oranıdır. Bu, kullanıcıların web içeriğinin akıcılığıyla ilgili deneyimini yansıtır. İlk metrik grubu olarak şu ana kadar aşağıdakileri kullanıyoruz:

• Ortalama Düşüş Yüzdesi: Zaman çizelgesinin tamamında boşta olmayan tüm animasyon kareleri için
• En Kötü Durumda Atlanan Kare Yüzdesi: 1 saniyelik kaydırmalı zaman aralıkları boyunca ölçülür.
• Atlanan Kare Yüzdesinin 95. yüzdelik dilimi: 1 saniyelik kaydırmalı zaman aralıkları boyunca ölçülür.

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

Geliştirici araçlarında kendiniz deneyin.

Performans HUD'si

Chromium'da bir işaretin (chrome://flags/#show-performance-metrics-hud) arkasına gizlenmiş kullanışlı bir Performans HUD'u bulunur. Burada, Core Web Vitals gibi öğelerin canlı puanlarını ve zaman içindeki Atlanan Kare Yüzdesi'ne dayalı animasyon akıcılığı için birkaç deneysel tanım bulabilirsiniz.

Çerçeve Oluşturma İstatistikleri

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

Geliştirici Araçları performans profili kayıtlarındaki kare görüntüleyici

Geliştirici Araçları Performans panelinde uzun zamandır bir kare görüntüleyici bulunuyor. Ancak modern oluşturma ardışık düzeninin işleyiş şekline göre biraz uyumsuz hale gelmişti. Son zamanlarda Chrome Canary'nin son sürümünde bile çok sayıda iyileştirme yapıldı. Bu iyileştirmenin animasyon sorunlarında hata ayıklamayı büyük ölçüde kolaylaştıracağını düşünüyoruz.

Artık kare görüntüleyicideki karelerin vsync sınırlarıyla daha iyi hizalandığını ve duruma göre renk kodlamasına sahip 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ın gelecekte daha fazla ayrıntı eklemeyi planlıyoruz.

Chrome izleme

Son olarak, ayrıntılara inmek için tercih edilen araç olan Chrome İzleme ile yeni Perfetto kullanıcı arayüzü (veya about:tracing) üzerinden "Web içeriği oluşturma" izlemesi kaydedebilir ve Chrome'un grafik ardışık düzenine derinlemesine bakabilirsiniz. Bu, göz korkutucu bir görev olabilir ancak Chromium'a yakın zamanda eklenen bazı özellikler bu süreci kolaylaştırır. Life of a Frame (Kartın Ömrü) belgesinde, sunulan özelliklere genel bir bakış bulabilirsiniz.

İzleme etkinlikleri ile şunları kesin olarak belirleyebilirsiniz:

• Hangi animasyonların çalıştığı (TrackerValidation adlı etkinlikler kullanılır).
• Animasyon karelerinin tam zaman çizelgesini alma (PipelineReporter adlı etkinlikleri kullanarak).
• Kesintili animasyon güncellemeleri için animasyonunuzun daha hızlı çalışmasını engelleyen unsuru tam olarak öğrenin (PipelineReporter etkinliklerindeki etkinlik dökümlerini kullanarak).
• Giriş odaklı animasyonlar için görsel güncellemenin ne kadar sürdüğünü görün (EventLatency adlı etkinlikleri kullanarak).

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çlamaktadır. Toplam Engelleme Süresi (TBT) gibi laboratuvar tabanlı metrikler, olası etkileşim sorunlarını yakalamak ve teşhis etmek için hayati önem taşır. Animasyon akıcılığı için laboratuvar tabanlı benzer bir metrik tasarlamayı planlıyoruz.

Animasyon kare verilerine dayalı kapsamlı bir metrik tasarlamayla ilgili fikirleri değerlendirmeye devam ederken sizi bilgilendireceğiz.

Gelecekte, animasyon akıcılığının hem laboratuvarda hem de sahada gerçek kullanıcılar için etkili bir şekilde ölçülmesini sağlayan API'ler de tasarlamak istiyoruz. Bu konudaki gelişmeleri de takip edin.

Geri bildirim

Animasyonların akıcılığının ölçülmesini sağlayan, Chrome'da kullanıma sunulan 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ını bizimle paylaşın.

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