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 temel olarak kullanıcılara yönelik olsa da sitenizin kullanıcı deneyimini etkileyebileceğinden web geliştiricilerin farkında olması 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 kaldırır. Bu sayede, etkin sekmeler ve çalışan diğer uygulamalar için bellekte yer açılır. Kullanıcılar Chrome'a belirli sitelerdeki sekmeleri silmemesi talimatını verebilirler. Ancak bu bir kullanıcı tercihidir ve geliştirici olarak kontrol edebileceğiniz bir şey değildir.
Bir sekme atıldığında başlığı ve simgesi sekme şeridinde görünmeye devam eder ancak sayfa, sekme normal şekilde kapatılmış gibi kaybolur. Kullanıcı bu sekmeye tekrar giderse sayfa otomatik olarak yeniden yüklenir.
Tamamen içerik sayfalarında, bir sekmenin atılması ve yeniden yüklenmesi kullanıcı deneyimini büyük olasılıkla etkilemez. Ancak karmaşık kullanıcı akışlarına sahip zengin ve etkileşimli sitelerde, site sayfayı kullanıcının kaldığı yerden tam olarak geri yükleyemezse bu akışların ortasında yeniden yükleme yapılması son derece can sıkıcı olabilir.
Chrome, bellek tasarrufu yapmak için sekmeleri yıllardır atıyor ancak bu işlem yalnızca sistemin bellek baskısı altında olduğu durumlarda yapılıyordu. Bu durumun nispeten nadir görülmesi nedeniyle web geliştiricileri bu durumun farkında olmayabilir.
Chrome 108'den itibaren sekmelerin atılması daha yaygın hale gelecek. Bu nedenle, sitelerin bu tür durumları sorunsuz bir şekilde ele alması çok önemli.
Sekmelerin atılmasını işlemeyle ilgili en iyi uygulamalar
Sekmelerin kapatılması, web geliştiricileri için yeni bir sorun değildir. Kullanıcıların, görevlerini tamamlamadan önce bir sayfayı kasıtlı veya yanlışlıkla yeniden yüklemesi her zaman mümkün olmuştur. Bu nedenle, kullanıcı siteden ayrılıp geri geldiğinde sitenin kullanıcı durumunu depolayarak geri yükleyebilmesi her zaman önemli olmuştur.
En önemli husus, kullanıcı durumunu depolayıp depolamamaya değil, ne zaman depolamaya karar vermektir. 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ırlanması gerekir.
Kullanıcı durumunu depolamak 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:
beforeunloadetkinlik geri çağırma işlevinde.unloadetkinliği geri çağırmasında.
Bu etkinlikler tamamen güvenilir olmadığı ve bir sekme atıldığında dahil olmak üzere birçok durumda tetiklenmediği için durumu depolamak için en kötü zamanlardır.
Bir sayfa atılırken hangi etkinliklerin tetiklenmesi gerektiğini görmek için Sayfa Yaşam Döngüsü etkinlik şemasına bakabilirsiniz. Bu şemadan da görebileceğiniz gibi, bir sekme herhangi bir etkinlik tetiklenmeden "gizli" durumundan "reddedilen" duruma geçebilir.
Aslında, sayfa "gizli" durumdayken sayfanın tarayıcı tarafından atılması veya kullanıcı tarafından sonlandırılması öncesinde başka etkinliklerin tetikleneceği garanti edilmez. Bu nedenle, başka bir şansınız olmayabileceğinden, kayıtlı olmayan tüm kullanıcı durumlarını her zaman visibilitychange etkinliğinde depolamak önemlidir.
Aşağıdaki kodda, geçerli kullanıcı durumu her değiştiğinde veya kullanıcı sekmeyi arka plana aldığında ya da sayfadan ayrıldığında hemen kalıcı hale getirmek için bazı örnek mantıklar özetlenmiş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 atıldığını algılama
Daha önce de belirtildiği gibi, bir sekmenin silinmek üzere olduğunu algılamak mümkün değildir ancak kullanıcı sekmeye geri döndükten ve sayfa yeniden yüklendikten sonra sekmenin silindiğini algılamak 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 sekme atlamalarından geldiğini belirlemenize olanak tanıyacak bir özel etkinlik parametresi yapılandırabilirsiniz:
gtag('config', 'G-XXXXXXXXXX', {
was_discarded: document.wasDiscarded,
});
Bir analiz sağlayıcıysanız bu boyutu varsayılan olarak ürününüze ekleyebilirsiniz.
Sitenizi Bellek Tasarrufu modunda test etme
Bir sayfanın, atılma işlemini nasıl işlediğini 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ütununda Acil Sil'i tıklayabilirsiniz.
Bu işlem, sekmeyi atar ve sekmeyi yeniden ziyaret ederek sayfanın, bıraktığınız durumda yeniden yüklenip yüklenmediğini doğrulamanıza olanak tanır.
Şu anda webdriver veya puppeteer gibi test araçları aracılığıyla sekme silme işlemlerini otomatikleştirmenin bir yolu olmadığını unutmayın. Ancak sekme silme ve geri yükleme işlemleri sayfayı yeniden yükleme işlemlerine neredeyse aynı olduğundan, kullanıcı akışının ortasında bir yeniden yükleme yapıldıktan sonra kullanıcı durumunun geri yüklendiğini test ederseniz bu işlem muhtemelen 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 yenileme hızını düşürerek pil gücünden tasarruf eder. Bu da kaydırma, animasyon kalitesi ve video kare hızları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ındaki değişikliklere otomatik olarak uyum sağlar.
Bu modun sorunlu olabileceği en önemli senaryo, sitenizde tüm kullanıcılar için belirli bir yenileme hızı varsayılan 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.
Geliştiricilerin tüm kullanıcılar için varsayılan 60 Hz yenileme hızı varsayması her zaman sorunlu olmuştur. Bunun nedeni, mevcut birçok cihazda bu değerin geçerli olmamasıdır.
Ekran yenileme hızını ölçme
Ekran 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, art arda gelen requestAnimationFrame() geri çağırma çağrıları 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 yayınlamanız gerekir. Bu da kullanıcılarınız için enerji veya pil tasarrufu yapma hedefini geçersiz kılar.
Sitenizi Enerji Tasarrufu modunda test etme
Sitenizi Enerji Tasarrufu modunda test etmenin bir yolu, Chrome'un ayarlarında modu etkinleştirmek ve cihazınızın fişi çekildiğinde ç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ştirin.chrome://discardsadresini ziyaret edin ve Pil tasarrufu modunu etkinleştir veya devre dışı bırak 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ştirdikten sonra sitenizle etkileşime geçebilir ve her şeyin olması gerektiği gibi göründüğünü (ör. animasyonların ve geçişlerin istenen hızda çalıştığını) doğrulayabilirsiniz.
Özet
Chrome'un Bellek Tasarrufu ve Enerji Tasarrufu modları öncelikle kullanıcılara yönelik özellikler olsa da düzgün şekilde yönetilmezse sitenizi ziyaret etme deneyimini olumsuz yönde etkileyebileceğinden geliştiriciler için de önem taşır.
Genel olarak bu yeni modlar, mevcut geliştirici 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 yayında belirtilen uygulamalardan herhangi biri varsa kullanıcılarınız bu iki mod etkinleştirildiğinde daha da artacak sorunlar yaşıyor olabilir.
Her zaman olduğu gibi, mükemmel bir deneyim sunduğunuzu doğrulamanın en iyi yolu sitenizi kullanıcılarınızla eşleşen koşullarda test etmektir.