Chrome 108'de kullanıcılara Chrome'un sistem kaynaklarını kullanma şekli üzerinde daha fazla kontrol vermek amacıyla Bellek Tasarrufu ve Enerji Tasarrufu olmak üzere iki yeni mod kullanıma sunuldu.
Bu yeni modlar, esasen kullanıcılara yönelik olmakla birlikte, sitenizdeki kullanıcı deneyimini potansiyel olarak etkileyebileceği için web geliştiricilerin dikkat etmesi gereken bazı etkileri vardır.
Bu gönderide, söz konusu yeni modların olası etkileri ve web geliştiricilerinin mümkün olan en iyi deneyimi sunmak için neler yapabileceği ele alınmaktadır.
Bellek Tasarrufu modu
Bellek Tasarrufu modu etkinleştirildiğinde Chrome, bir süre arka planda kullanılmayan sekmeleri proaktif olarak siler. Böylece, etkin sekmelerin yanı sıra çalışıyor olabilecek diğer uygulamalar için bellekte yer açılır. Kullanıcılar Chrome'a belirli siteler için sekmeleri silmemesini söyleyebilir. Ancak bu bir kullanıcı tercihidir ve geliştirici olarak sizin kontrol edebileceğiniz bir şey değildir.
Bir sekme silindiğinde, başlığı ve site simgesi sekme şeridinde görünmeye devam eder ancak sekme normal şekilde kapatılmış gibi sayfanın kendisi kaybolur. Kullanıcı bu sekmeyi yeniden ziyaret ederse sayfa otomatik olarak yeniden yüklenir.
Sadece içerik ağı sayfaları için, bir sekmenin silinip yeniden yüklenmesi büyük olasılıkla kullanıcı deneyimini etkilemeyecektir. Ancak karmaşık kullanıcı akışlarına sahip zengin, etkileşimli sitelerde site, sayfayı tam olarak kullanıcının bıraktığı yere geri yükleyemezse bu akışın ortasında yeniden bir yeniden yükleme yapılması son derece can sıkıcı olabilir.
Hafızadan tasarruf etmek amacıyla sekmelerin silinmesi Chrome yıllardır yapılan bir işlemdir, ancak bu işlem yalnızca sistemin bellek baskısı altında olduğu durumlarda yapılıyordu. Nispeten nadir görülen bir durum olduğu için web geliştiricileri bunun olduğunu fark etmemiş olabilir.
Chrome 108'den itibaren sekme silme işlemi giderek yaygınlaşacağından, sitelerin bu sorunları sorunsuz şekilde ele alabilmesi çok önemlidir.
Sekme silme işlemlerini yönetmeyle ilgili en iyi uygulamalar
Sekmelerin silinmesi, web geliştiricilerinin karşılaştığı yeni bir sorun değildir. Kullanıcıların, görevlerini tamamlamadan önce kasıtlı olarak ya da yanlışlıkla bir sayfayı yeniden yüklemesi her zaman mümkündür. Bu nedenle sitelerin, kullanıcı ayrılıp geri gelirse geri yükleyebilmesi için kullanıcı durumunu depolaması her zaman önemli olmuştur.
Dikkate alınması gereken en önemli nokta, kullanıcı durumunun saklanıp depolanmayacağı değil, ne zaman depolanacağıdır. Bu çok önemlidir, çünkü bir sekme silindiğinde tetiklenen herhangi bir etkinlik olmadığından, geliştiricilerin bu gibi durumlara tepki vermesi mümkün değildir. Bunun yerine, geliştiricilerin bu olasılığı göz önünde bulundurması ve önceden hazırlanması gerekir.
Kullanıcı durumunu depolamak için en iyi zamanlar şunlardır:
- Durum değiştikçe düzenli olarak.
- Bir sekme arka plana alındığında (
visibilitychangeetkinliği).
Mağaza durumunun en kötü olduğu zamanlar:
beforeunloadetkinliği geri çağırmasında.- Bir
unloadetkinliği geri çağırmasında.
Bunlar, durumlarının saklanması için en kötü zamanlardır. Çünkü bu etkinlikler, tamamen güvenilmezdir ve birçok durumda (sekmenin silinmesi dahil olmak üzere) etkinleşmez.
Bir sayfa silinirken hangi etkinliklerin tetiklenmesi gerektiğini öğrenmek için Sayfa Yaşam Döngüsü etkinlik şemasına bakabilirsiniz. Bu şemadan görebileceğiniz gibi, sekmeler herhangi bir etkinlik tetiklenmeden "gizli" durumundan "silindi" durumuna geçebilir.
Aslında, sayfa "gizli" durumda olduğunda, sayfa tarayıcı tarafından silinmeden veya kullanıcı tarafından sonlandırılmadan önce başka bir etkinliğin tetikleneceğine dair bir garanti yoktur. Bu nedenle, başka bir şansınız olmayabileceği için kaydedilmemiş kullanıcı durumlarının her zaman visibilitychange etkinliğinde depolanması önemlidir.
Aşağıdaki kodda, geçerli kullanıcı durumu değiştiğinde veya kullanıcı sekmenin arka planında ya da sayfadan ayrılırsa geçerli kullanıcı durumunu devam ettirmek için bazı örnek mantıklar sunulmuştur:
let state = {};
let hasUnstoredState = false;
function storeState() {
if (hasUnstoredState) {
// Store `state` to localStorage or IndexedDB...
}
hasUnstoredState = false;
}
export function updateState(newState) {
state = newState;
hasUnstoredState = true;
requestIdleCallback(storeState);
}
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
storeState();
}
});
Bir sekmenin silindiğini algılama
Daha önce belirtildiği gibi, bir sekmenin silinmek üzere olduğunu tespit etmek mümkün değildir, ancak kullanıcı bir sekmeye geri dönüp sayfa yeniden yüklendikten sonra sekmenin silindiğini tespit etmek mümkündür. Bu durumlarda document.wasDiscarded özelliği doğru olur.
if (document.wasDiscarded) {
// The page was reloaded after a discard.
} else {
// The page was not reloaded after a discard.
}
Kullanıcılarınızın bu tür durumlarla ne sıklıkta karşılaştığını anlamak istiyorsanız, analiz aracınızı bu bilgileri yakalayacak şekilde yapılandırabilirsiniz.
Örneğin, Google Analytics'te, sayfa görüntülemelerinin yüzde kaçının sekme silme işlemlerinden geldiğini belirlemenize olanak tanıyan bir özel etkinlik parametresi yapılandırabilirsiniz:
gtag('config', 'G-XXXXXXXXXX', {
was_discarded: document.wasDiscarded,
});
Analiz sağlayıcısıysanız bu boyutu varsayılan olarak ürününüze eklemeyi düşünebilirsiniz.
Sitenizi Bellek Tasarrufu modunda test etme
Bir sayfanın silinme işlemini nasıl ele aldığını test etmek için sayfayı yükleyip ayrı bir sekmede veya pencerede chrome://discards adresini ziyaret edebilirsiniz.
chrome://discards kullanıcı arayüzünde, listeden silmek istediğiniz sekmeyi bulup İşlemler sütunundan Acil Silme'yi tıklayabilirsiniz.
Bu işlem, sekmeyi silerek söz konusu sekmeyi yeniden ziyaret etmenize ve sayfanın, bıraktığınız gibi yeniden yüklendiğini doğrulamanıza olanak tanır.
Web sürücüsü veya kullanıcı aracı gibi test araçlarıyla sekme silme işlemini otomatikleştirmenin şu anda bir yolu olmadığını unutmayın. Ancak sekme silme ve geri yükleme işlemleri, sayfa yeniden yükleme işlemleriyle neredeyse aynı olduğundan, kullanıcı akışının ortasında yeniden yükleme işleminden sonra kullanıcı durumunun geri yüklendiğini test ederseniz muhtemelen silme/geri yükleme için de işe yarayacaktır. İkisi arasındaki temel fark, bir sekme silindiğinde beforeunload, pagehide ve unload etkinliklerinin tetiklenmemesidir. Bu nedenle, kullanıcı durumunu sürdürmek için bu etkinliklere güvenmediğiniz sürece, silme/geri yükleme davranışını test etmek için yeniden yüklemeleri kullanabilirsiniz.
Enerji Tasarrufu modu
Enerji Tasarrufu modu etkinleştirildiğinde Chrome, ekran yenileme hızını azaltarak pil gücünden tasarruf eder. Bu işlem, kaydırma ile animasyonun kalitesini ve video kare hızını etkiler.
Genel olarak geliştiricilerin Enerji Tasarrufu modunu desteklemek için herhangi bir şey yapmaları gerekmez. Bu mod etkinleştirildiğinde, animasyonlar, geçişler ve requestAnimationFrame() için CSS ve JavaScript API'leri görüntü yenileme hızındaki değişikliklere otomatik olarak uyum sağlar.
Bu modun sorunlu olabileceği ana senaryo, sitenizin tüm kullanıcılar için belirli bir yenileme hızına sahip olduğunu varsayan JavaScript tabanlı animasyonlar kullanmasıdır.
Örneğin, siteniz requestAnimationFrame() döngüleri kullanıyorsa ve geri çağırma işlevleri arasında tam olarak 16, 67 milisaniye geçtiğini varsayarsa Enerji Tasarrufu modu etkinleştirildiğinde animasyonlarınız iki kat daha yavaş çalışır.
Geliştiricilerin tüm kullanıcılar için varsayılan yenileme hızının 60 Hz olduğunu varsaymalarının her zaman sorunlu bir durum olduğunu hatırlatmak isteriz. Çünkü bu durum, mevcut cihazların çoğunda geçerli değildir.
Ekran yenileme hızını ölçme
Görüntü yenileme hızını ölçmek için özel bir web API'si yoktur ve genel olarak mevcut API'lerle bunu yapmaya çalışmak önerilmez.
Geliştiricilerin mevcut API'lerle yapabileceği en iyi şey, ardışık requestAnimationFrame() geri çağırmalarının zaman damgalarını karşılaştırmaktır. Çoğu durumda bu, belirli bir noktadaki yenileme hızını tahmin etmek için işe yarar ancak yenileme hızı değiştiğinde bunu size bildirmez. Bunun için sürekli olarak requestAnimationFrame() anket yapmanız gerekir. Bu anket, kullanıcılarınızın enerji veya pil ömründen tasarruf etme amacını yerine getirir.
Sitenizi Enerji Tasarrufu modunda test etme
Sitenizi Enerji Tasarrufu modunda test etmenin bir yolu, Chrome ayarlarında modu etkinleştirmek ve cihazınız fişe takılı değilken çalışacak şekilde yapılandırmaktır.
Fişten çekilebilen bir cihazınız yoksa aşağıdaki adımları uygulayarak modu manuel olarak da etkinleştirebilirsiniz:
chrome://flags/#battery-saver-mode-availableişaretini etkinleştir.chrome://discardsadresini ziyaret edin ve Pil tasarrufu modunu aç/kapat bağlantısını tıklayın (önemli: bağlantının çalışması için#battery-saver-mode-availableişaretinin etkinleştirilmesi gerekir).
Etkinleştirildikten sonra sitenizle etkileşimde bulunabilir ve her şeyin olması gerektiği gibi göründüğünü doğrulayabilirsiniz: örneğin animasyonların ve geçişlerin istenen hızda çalışması.
Özet
Chrome'un Bellek Tasarrufu ve Enerji Tasarrufu modları esasen kullanıcılara yönelik özellikler olsa da bu modlar düzgün kullanılmadığı takdirde sitenizi ziyaret etme deneyimini olumsuz etkileyebileceğinden bu modlar geliştiriciler için bazı sonuçlar doğurabilir.
Bu yeni modlar genel olarak geliştiricilerin mevcut en iyi uygulamaları göz önünde bulundurularak tasarlanmıştır. Geliştiriciler uzun süredir web'e yönelik en iyi uygulamaları izliyorlarsa, siteleri bu yeni modlarla sorunsuz çalışmaya devam edecektir.
Ancak sitenizde bu yayında açıklanan uygulamalardan herhangi biri varsa kullanıcılarınızın yalnızca bu iki modu etkinleştirdiğinizde ortaya çıkan sorunlar yaşaması muhtemeldir.
Her zaman olduğu gibi, iyi bir deneyim sunduğunuzu doğrulamanın en iyi yolu, sitenizi kullanıcılarınızın koşullarıyla eşleşen koşullara göre test etmektir.