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.

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. Chrome ekibi, bu tür sorunları gidermek için animasyon algılamayla ilgili laboratuvar araçlarımıza daha fazla destek eklemek ve Chromium'daki oluşturma ardışık düzeni teşhislerinde sürekli iyileştirmeler yapmak üzere çalışıyor.

Son zamanlarda kaydettiğimiz ilerlemelerden bahsetmek, somut araç yönergeleri 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ında üç ana konu ele alınacaktır:

• Animasyonlara ve animasyon karelerine hızlıca bir göz atın.
• 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ü uygulanan animasyonlar veya çok fazla animasyon eklemek deneyimi kötüleştirebilir ve kesinlikle eğlenceli olmaktan çıkarabilir. 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 az hareketliliği tercih edebilir. Bu kullanıcı tercihine uymanız gerekir.

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.
• Kompozit ö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 kullanışlı olabilir ancak 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.

Tanımlayıcı CSS animasyonlarını tanımlamak veya Web Animasyonlarını kullanmak ve kompozit mülkleri animasyonlu hale getirdiğinizden emin olmak, sorunsuz ve verimli animasyonlar elde etmek için mükemmel bir ilk adımdı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. Bazı daha modern ekranlar daha yüksek yenileme hızları sunabilir (90-120 Hz yaygınlaşmaya başlamıştır). Bu ekranlar genellikle yenileme hızları arasında gerektiği gibi etkin bir şekilde uyum sağlayabilir veya hatta 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 aynı görüntü 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ştiriciler, bir tarayıcının görsel güncellemeleri hızlı ve verimli bir şekilde oluşturma ve sunma özelliğini büyük ö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 yol açar.

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 kullanmaktır ancak bunun bazı dezavantajları 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.
• Anket etkinleştirilip devre dışı bırakılırsa çerçeve bütçesinin aşıldığı durumları kaçırırsınız.
• Tarayıcı değişken güncelleme sıklığı kullandığında (ör. güç veya görünürlük durumu nedeniyle) anket, yanlış pozitifler bildirir.
• En önemlisi de tüm animasyon güncellemelerini yakalamaz.

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ığı yavaşladığında görsel güncellemeler takılmaya başlar. Bu çok saçma.

Birçok ölçüm aracı, ana iş parçacığının zamanında sonuç vermesi ve animasyon karelerinin sorunsuz şekilde çalışmasına yoğun şekilde odaklanıyordu. 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.

Ancak 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 örnekte, ana iş parçacığında aynı anda birçok atlanan kare olmasına rağmen, uyumlatıcı iş parçacığında kaydırmayla ilgili birçok başarılı şekilde yayınlanan kare vardır. Uzun görev tamamlandıktan sonra ana iş parçacığı boyama güncellemesi görsel olarak herhangi bir değişiklik sunmaz. rAF anketi, kare sayısının 0'a düştüğünü öne sürse de kullanıcılar görsel olarak bir fark fark edemez.

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

Animasyon kareleri: Önemli güncellemeler

Yukarıdaki örnek, hikayenin requestAnimationFrame()'ten çok daha fazlasını içerdiğini göstermektedir.

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 kompozitör iş parçacığı güncellemeleri

Animasyon kare güncellemeleri doğru/yanlış değildir. Çerçeveler 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 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, görsel güncellemeleri verimli ve paralel olarak üretmeye devam edebilir.

Öte yandan, bir ana mesaj güncellemesinin nihayet sunuma hazır hale gelmesinin ancak birkaç çerçeve son tarihinin kaçırılmasından sonra gerçekleştiği durumlar olabilir. Tarayıcıda bazı yeni güncellemeler bulunur ancak en son güncelleme 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çermelidir ancak bu yalnızca animasyonlar, birleştirici iş parçacığı tarafından yönlendiriliyorsa 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.

Bir sayfa tamamen statik olsa bile tarayıcılar, hızlı kaydırma sırasında görsel güncellemeleri oluşturmakta gecikebilir. Bunun nedeni, GPU belleğinden tasarruf etmek için görünür görüntü alanının dışındaki içeriğin piksel gösterimlerinin atılabilmesidir. 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. Buna genellikle damarlı görüntü denir.

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 özelliğinin ölçülmesi, genel olarak kare aktarım hızı olarak bilinir.

GPU gerçekten yavaşlarsa 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 durum teknik olarak atlanan kare güncellemelerinin sayısını azaltsa da görsel olarak kare aktarım hızı daha düşük 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. Beyan biçimindeki 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 sorunsuz bir durumdur ancak videonun bit hızı düşük olabilir veya ağda 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 🙂

Zamanlarına göre oldukça havalıydı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 kullanıcı tarafından gözlemlenme olasılığı olarak değerlendirmek olabilir. Tek bir atlanan kare çok fark edilmeyebilir ancak arka arkaya akıcılığı etkileyen çok sayıda atlanan kare dizisi kesinlikle fark edilir.

Tümünü bir araya getirme: Atlanan kare yüzdesi metriği

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 aktarım hızına odaklansa da kare gecikmesi gibi diğer faktörleri de değerlendiririz.

Geliştirici araçlarını kullanarak bunu kendiniz de deneyebilirsiniz.

Performans HUD'i

Chromium'da bir işaretin (chrome://flags/#show-performance-metrics-hud) arkasında 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'da "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 kare görüntüleyici bulunuyor. Ancak modern oluşturma ardışık düzeninin gerçek işleyiş şekliyle biraz uyumsuz hale gelmişti. Son Chrome Canary sürümünde bile yakın zamanda birçok iyileştirme yapıldı. Bu iyileştirmelerin, animasyon sorunlarının hata ayıklama sürecini 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 sayesinde kesin olarak şunları 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. Total Blocking Time (TBT) gibi laboratuvar tabanlı metrikler, olası etkileşim sorunlarını tespit etmek ve teşhis etmek için çok önemlidir. 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 edebilirsiniz.

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 ne gibi sonuçlar elde ettiğinizi bize bildirin.

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