Chrome 108'de kullanıcılara Chrome'un sistem kaynaklarını nasıl kullandığı konusunda daha fazla kontrol sağlamak için iki yeni mod olan Bellek Tasarrufu ve Enerji Tasarrufu adlı iki yeni modu kullanıma sunduk.
Bu yeni modlar öncelikle kullanıcıya yönelik olsa da, sitenizdeki kullanıcı deneyimini potansiyel olarak etkileyebileceğinden, web geliştiricilerinin dikkat etmesi gereken bazı etkileri vardır.
Bu gönderide, bu yeni modların olası etkileri ve web geliştiricilerinin mümkün olan en iyi deneyimi sunmak için neler yapabilecekleri ele alınmaktadır.
Bellek Tasarrufu modu
Bellek Tasarrufu modu etkinleştirildiğinde Chrome, arka planda bir süredir 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 sitelerdeki sekmeleri silmemesini söyleyebilir; Ancak bu bir kullanıcı tercihidir ve geliştirici olarak 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 kapanmış gibi sayfanın kendisi kaybolur. Kullanıcı söz konusu sekmeyi yeniden ziyaret ederse sayfa otomatik olarak yeniden yüklenir.
Sadece içerik sayfalarında, bir sekmeyi silip yeniden yüklemek kullanıcı deneyimini etkilemeyecektir. Ancak karmaşık kullanıcı akışları olan zengin ve etkileşimli sitelerde site, sayfayı tam olarak kullanıcının bıraktığı yere geri yüklenemiyorsa bu akışın ortasında yeniden yükleme yapmak son derece can sıkıcı olabilir.
Hafızayı korumak için sekmeleri silme, Chrome'un yıllardır yaptığı bir işlem olmasına rağmen yalnızca sistemin bellek baskısı altında olduğu durumlarda yapıldı. Oldukça nadir rastlanan bir durum düşünüldüğünde, web geliştiricileri bunun gerçekleştiğini fark etmemiş olabilir.
Chrome 108'den itibaren sekme silme işlemi daha yaygın hale gelecektir. Bu nedenle, sitelerin bu tür durumları sorunsuz şekilde ele alabilmesi son derece önemlidir.
Sekme silme işlemiyle ilgili en iyi uygulamalar
Sekme silme, web geliştiricileri için yeni bir zorluk değildir. Kullanıcılar görevlerini tamamlamadan önce kasıtlı veya yanlışlıkla bir sayfayı yeniden yükleyebilirler. Bu nedenle siteler için kullanıcı durumunu depolaması her zaman önemlidir. Böylece, kullanıcı ayrılıp geri döndüğünde geri yükleyebilirler.
Dikkat edilmesi gereken en önemli nokta, kullanıcı durumunun saklanıp saklanmayacağı değil, ne zaman depolanacağıdır. Bu önemli bir noktadır. Çünkü bir sekme silindiğinde tetiklenen bir etkinlik olmaz. Dolayısıyla, geliştiricilerin bu durumun meydana gelmesine tepki vermesi mümkün değildir. Bunun yerine geliştiricilerin bu olasılığı öngörmesi ve önceden hazırlanmaları gerekiyor.
Kullanıcı durumunun depolanması için en uygun zamanlar şunlardır:
- Durum değiştikçe düzenli aralıklarla.
- Bir sekme arka plana alındığında (
visibilitychangeetkinliği).
Eyaletlerin depolanması için en kötü zamanlar şunlardır:
beforeunloadetkinliği geri çağırmasında.unloadetkinliği geri çağırmasında.
Bunlar, durum verilerinin depolanması için en kötü zamanlardır çünkü bu etkinlikler tamamen güvenilir değildir ve bir sekmenin silinmesi de dahil olmak üzere birçok durumda tetiklenmez.
Bir sayfa silinirken tetiklenmesi beklenen etkinlikleri görmek için Sayfa Yaşam Döngüsü etkinlik şemasına bakabilirsiniz. Bu şemadan görebileceğiniz gibi, bir sekme "gizli" durumu "silindi" olarak değiştirin durumlardan birine sahip olmalıdır.
Aslında, sayfa "gizli" olduğunda durumu, sayfa tarayıcı tarafından silinmeden veya kullanıcı tarafından sonlandırılmadan önce başka bir etkinliğin tetikleneceğinin bir garantisi yoktur. Bu nedenle, başka bir fırsatınız olmayabileceği için kaydedilmemiş kullanıcı durumlarını her zaman visibilitychange etkinliğinde depolamak önemlidir.
Aşağıdaki kodda, her değiştiğinde veya kullanıcı sekmeyi arka plana aldığında ya da sayfadan ayrıldığında hemen geçerli kullanıcı durumunun devam ettiği sıraya dair bazı örnek mantık örnekleri verilmiştir:
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 tespit etme
Daha önce de belirtildiği gibi, bir sekmenin silinmek üzere olduğunu tespit etmek mümkün değildir, ancak kullanıcı söz konusu 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 durumları ne sıklıkta yaşadığını öğrenmek 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 sekmenin silinmesinden 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 ürününüze varsayılan olarak eklemeyi düşünebilirsiniz.
Sitenizi Bellek Tasarrufu modunda test etme
Sayfayı yükleyip ardından ayrı bir sekmede veya pencerede chrome://discards adresini ziyaret ederek bir sayfanın nasıl silindiğini test edebilirsiniz.
chrome://discards kullanıcı arayüzünde, listeden silmek istediğiniz sekmeyi bulabilir ve İşlemler sütunundan Acil Sil'i tıklayabilirsiniz.
Bu işlem, sekmeyi siler, sayfayı yeniden ziyaret etmenizi ve sayfanın bıraktığınız zamanki durumuna yeniden yüklendiğini doğrulamanıza olanak verir.
Sekme silme işlemini webdriver veya puppeteer gibi test araçlarıyla otomatikleştirmenin şu anda mümkün olmadığını unutmayın; Ancak, sekme silme ve geri yükleme işlemleri sayfa yeniden yüklemeleriyle neredeyse aynı olduğundan, kullanıcı akışının ortasında bir yeniden yüklemenin ardından kullanıcı durumunun geri yüklendiğini test ederseniz büyük olasılıkla silme/geri yükleme için de işe yarayacaktır. İkisi arasındaki temel fark şudur: beforeunload, pagehide ve unload etkinlikleri bir sekme silindiğinde tetiklenmez. Kullanıcı durumunun devam etmesini sağlamadığınız 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ın yenileme hızını azaltarak pil gücünden tasarruf eder. Bu durum, kaydırma, animasyon kalitesini ve video kare hızını etkiler.
Genel olarak, geliştiricilerin Enerji Tasarrufu modunu desteklemek için herhangi bir işlem yapmaları gerekmez. Bu mod etkinleştirildiğinde animasyonlar, geçişler ve requestAnimationFrame() için CSS ve JavaScript API'leri, ekran yenileme hızında yapılacak tüm değişikliklere otomatik olarak uyum sağlar.
Bu modun sorun yaratabileceği ana senaryo, sitenizde tüm kullanıcılar için belirli bir yenileme hızı olduğunu varsayan JavaScript tabanlı animasyonlar kullanılmasıdır.
Örneğin, siteniz requestAnimationFrame() döngüleri kullanıyorsa ve geri çağırmalar 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.
Mevcut cihazların çoğu için geçerli olmadığından, geliştiricilerin tüm kullanıcılar için varsayılan yenileme hızının 60 Hz olduğunu varsaymasının her zaman sorunlu olduğunu unutmayın.
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 bu işlemi mevcut API'lerle yapmaya çalışmak önerilmez.
Geliştiricilerin mevcut API'lerle yapabileceği en iyi şey, art arda yapılan requestAnimationFrame() geri çağırmaları arasındaki zaman damgalarını karşılaştırmaktır. Bu, çoğu durumda belirli bir noktada yenileme hızını tahmin etmek için işe yarar ancak yenileme hızı değiştiğinde bunu size bildirmez. Bunu yapmak için sürekli olarak bir requestAnimationFrame() anketi yürütmeniz gerekirdi. Bu anket, kullanıcılarınızın enerji veya pil ömrünü koruma hedefini yitirir.
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 çıkarılabilecek bir cihazınız yoksa modu aşağıdaki adımları uygulayarak 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).
Bu özelliği etkinleştirdikten 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ıştığından).
Özet
Chrome'un Bellek Tasarrufu ve Enerji Tasarrufu modları öncelikli olarak kullanıcılara yönelik özellikler olsa da doğru şekilde uygulanmazsa sitenizi ziyaret etme deneyimini olumsuz yönde etkileyebileceğinden bu modlar, geliştiricileri olumsuz etkileyebilir.
Genel olarak bu yeni modlar, geliştiricilerin mevcut en iyi uygulamaları göz önünde bulundurularak tasarlanmıştır. Geliştiriciler uzun süredir web'e ilişkin en iyi uygulamaları kullanıyorsa, siteleri bu yeni modlarla sorunsuz bir şekilde çalışmaya devam edecektir.
Ancak, sitenizde bu gönderide belirtilen uygulamalardan herhangi biri varsa, kullanıcılarınız muhtemelen yalnızca bu iki modun etkin olmasıyla artan sorunlar yaşıyordur.
Her zaman olduğu gibi, mükemmel bir deneyim sunduğunuzu onaylamanın en iyi yolu, sitenizi kullanıcılarınızın koşullarıyla eşleşen koşullarla test etmektir.