Sitelerinizi belirli donanım ve ağ kısıtlamalarına göre optimize ederek her kullanıcının mümkün olan en iyi deneyimi yaşamasını nasıl sağlayacağınızı öğrenin.
Cihaz özellikleri ve ağ bağlantıları önemli ölçüde farklılık gösterir. İleri teknoloji cihazlarda kullanıcıları memnun eden siteler, düşük kaliteli sitelerde kullanışsız olabilir. Hızlı ağlarda sorunsuz yüklenen siteler yavaş ağlarda durma noktasına gelebilir. Her kullanıcı yavaş bir web sitesi ile karşılaşabilir. Bu nedenle, "herkes için tek boyutlu" çözümler geliştirmek her zaman işe yaramayabilir.
Chrome Dev Summit konuşmasında Google'dan Addy Osmani ve Facebook'tan Nate Schloss bu soruna bir çözüm bulmaya çalışıyor. Bu çözüm, çeşitli kullanıcı kısıtlamalarına daha iyi uyum sağlayan sayfalar sunmak için bir kalıp oluşturuyor. Buna uyarlanabilir yükleme denir.
Uyarlanabilir yükleme nedir?
Uyarlanabilir yükleme, farklı kullanıcılara ağ ve donanım kısıtlamalarına göre farklı deneyimler sunmayı içerir. Özellikle:
Tüm kullanıcılar için hızlı bir temel deneyim (düşük teknolojili cihazlar dahil).
Kullanıcının ağı ve donanımı bunu karşılayabiliyorsa yalnızca ileri teknolojiye yönelik özelliklerin kademeli olarak eklenmesi.
Belirli donanım ve ağ kısıtlamalarına göre optimizasyon yaparak her kullanıcının, cihazında mümkün olan en iyi deneyimi elde etmesini sağlarsınız. Deneyimi kullanıcıların kısıtlamalarına göre özelleştirmek şunları içerebilir:
Yavaş ağlarda düşük kaliteli görüntü ve videolar sunuluyor.
Düşük özellikli cihazlarda animasyonların kare hızını azaltma.
Düşük teknolojili cihazlarda işlem açısından pahalı olan işlemlerden kaçınma.
Yavaş cihazlarda üçüncü taraf komut dosyalarını engelleme.
Yalnızca hızlı CPU'larda etkileşim için kritik olmayan JavaScript yükleniyor.
Tarayıcı desteği ve uyarlanabilir yüklemenin nasıl uygulanacağı
Uyarlanabilir yükleme için kullanabileceğiniz sinyaller aşağıda listelenmiştir. Her sinyal için tarayıcı desteği de sunulur:
Navigator.deviceMemory
navigator.deviceMemory özelliği, düşük teknolojili cihazlarda bellek tüketimini azaltmak için kullanılır.
Navigator.hardwareConcurrency
navigator.hardwareConcurrency özelliği CPU çekirdek sayısıdır. Maliyetli JavaScript yürütmelerini sınırlandırmak ve bir cihaz bunu iyi bir şekilde işleyemediğinde CPU yoğun mantığını azaltmak için kullanılır.
NetworkInformation.effectiveType
navigator.connection.effectiveType özelliği, daha az bant genişliği kullanacak şekilde veri aktarımına ince ayar yapmak için kullanılır.
NetworkInformation.saveData
navigator.connection.saveData özelliği, kullanıcının Veri Tasarrufu tercihlerinden yararlanmak için kullanılır.
Kullanıcılara ne sunacağınıza karar verebileceğiniz iki yer vardır: istemci ve sunucu. İstemcide, yukarıda belirtilen JavaScript API'leriniz vardır. Sunucuda, kullanıcının cihaz özellikleri ve bağlı olduğu ağ hakkında bilgi edinmek için istemci ipuçlarını kullanabilirsiniz.
Tepki'de uyarlanabilir yükleme
React Uyarlanabilir Yükleme Kancaları ve Yardımcı Programlar, sitelerinizi alt segment cihazlara uyarlamayı kolaylaştıran, React ekosistemine yönelik bir pakettir. Şunları içermektedir:
Ağ durumuna (
slow-2g,2g,3gveya4g) göre uyarlama yapmak içinuseNetworkStatus()kancası.Kullanıcının Veri Tasarrufu tercihlerine göre uyarlamak için
useSaveData()kancası.Kullanıcının cihazındaki mantıksal CPU işlemci çekirdeği sayısına göre uyarlama yapmak için
useHardwareConcurrency()kancası.Kullanıcının cihaz belleğine (RAM) göre uyarlamak için
useMemoryStatus()kancası.
Her kanca, başlangıç değerinin ayarlanması için isteğe bağlı bir bağımsız değişkeni kabul eder. Bu seçenek iki senaryoda kullanışlıdır: Kullanıcının tarayıcısı ilgili API'yi desteklemediğinde ve sunucudaki başlangıç değerini ayarlamak için istemci ipucu verilerini kullanabileceğiniz sunucu tarafında oluşturma işlemi için. Örneğin useNetworkStatus() kancası, sunucu tarafı oluşturma için istemci ipucundan geçirilen ilk değeri kullanabilir ve istemcide yürütüldüğünde ağ etkili türü değişirse kendini güncelleyebilir.
Tepki Uyarlanabilir Yükleme Kancaları ve Yardımcı Programları, web platformu API'leri (Ağ Bilgileri, Cihaz Belleği ve Donanım Eşzamanlılığı) kullanılarak uygulanır. Uyarlanabilir yükleme kavramlarını Angular, Vue ve diğer çerçevelere ve kitaplıklara uygulamak için aynı API'leri kullanabilirsiniz.
Uyarlanabilir yüklemenin işleyiş şekli
Bu bölümde, uyarlanabilir yüklemeyi nasıl kullanabileceğinize ilişkin demolar ve Facebook, eBay, Tinder gibi sitelerden alınan gerçek örnekler incelenmektedir.
Tepki Filmi demosu, medya sunumunu ağ durumuna göre nasıl uyarlayacağınızı gösterir. Bu, posterler, özetler ve oyuncu listeleri gösteren filmlere göz atmak için kullanılan bir uygulamadır. Kullanıcının etkili bağlantı türüne bağlı olarak, hızlı bağlantılarda yüksek kaliteli posterler, yavaş bağlantılarda düşük kaliteli posterler sunar.
Twitter'da, kullanılan veri miktarını azaltmak için tasarlanmış bir Veri Tasarrufu modu bulunur. Bu modda önizleme resimleri düşük çözünürlüklü olarak, büyük resimler ise yalnızca önizlemeye dokunduğunuzda yüklenir. Bu seçenek etkinleştirildiğinde iOS ve Android'deki kullanıcılar resimlerden% 50 veri kullanımı, web'deki kullanıcılar ise %80 tasarruf etti. Twitter zaman çizelgesini kopyalamak için Veri Kaydet kancasını kullanan bir React demosunu burada bulabilirsiniz. DevTools Ağ panelinizi açmayı ve Verileri Kaydet özelliği devre dışıyken kaydırma sırasında aktarılan veri miktarı ile bu özelliğin etkin olduğu zamanların farkına bakmayı deneyin.
eBay, kullanıcıların donanımı veya ağ koşulları iyi desteklemediğinde yakınlaştırma gibi özellikleri koşullu olarak açıp kapatır. Bunu, daha yüksek etkileşimli bileşenleri koşullu olarak yüklemenin veya ileri teknoloji cihazlarda daha fazla işlem yüküne sahip işlemler yürütmenin ve bu komut dosyalarını yavaş cihazlardaki kullanıcılara göndermenin bir yolu olan uyarlanabilir kod bölme ve kod yükleme yoluyla elde edebilirsiniz. Addy'nin bir demo eBay ürün sayfasında React.lazy() ve Suspense ile uygulanan bu kalıbı gösterdiği 16 dakikalık videoya göz atın.
Tinder, bu deneyimi herkes için hızlı tutmak amacıyla web ve Lite uygulamasında bir dizi uyarlanabilir yükleme kalıbı kullanmaktadır. Kullanıcı yavaş bir ağdaysa veya Veri Tasarrufu'nu etkinleştirmişse video otomatik oynatma özelliğini devre dışı bırakır, yönlendirme önceden getirme özelliğini sınırlandırır ve banttaki bir sonraki resmin yüklenmesi, kullanıcılar ekranı kaydırdıkça resimleri tek tek yükleyecek şekilde sınırlandırır. Bu optimizasyonları uyguladıktan sonra, Endonezya gibi ülkelerde ortalama kaydırma sayısında önemli artışlar gözlemlediler.
Facebook'ta uyarlanabilir yükleme
Uyarlanabilir yüklemede karşılaşılan sorunlardan biri, cihazların mevcut sinyallere göre üst düzey ve alt uç sınıflara göre gruplandırılmasıdır. Mobil cihazlarda kullanıcı aracısı (UA) dizesi, Facebook'un mobil cihazları sınıflara ayırmak için cihaz özellikleriyle ilgili herkese açık verileri kullanmasına olanak tanıyan cihaz adını sağlar. Ancak masaüstü cihazlarda UA'nın sağladığı tek alakalı bilgi cihazın işletim sistemidir.
Facebook, masaüstü cihazları gruplandırmak için performans izleme sürecinde işletim sistemi, CPU çekirdekleri (navigator.hardwareConcurrency tarafından) ve RAM belleği (navigator.deviceMemory) ile ilgili verileri günlüğe kaydeder. Farklı donanım ve performans türleri arasındaki ilişkilere bakarak cihazları beş kategoriye ayırdılar. Performans izlemeye entegre donanım sınıfları sayesinde, kullanıcıların cihazlarına bağlı olarak Facebook ürünlerini nasıl kullandığına dair daha kapsamlı bir fikir edinebilir ve regresyonları daha kolay tespit edebilir.
24 dakikalık videoya göz atın. Bu videoda Nate, Facebook'un cihaz gruplamaya yaklaşımını açıklıyor, animasyonlar ve JavaScript'i yüklemek için uyarlanabilir yüklemeyi kullanıyor.
Uyarlanabilir yükleme hakkında daha fazla bilgi
Uyarlanabilir yükleme, sitelerinizi kapsayıcılığı göz önünde bulundurarak tasarlamakla ilgilidir. Herkes için ideal bir temel deneyim oluşturun, ardından kullanıcı yeterli belleğe, CPU'ya veya hızlı bir ağa sahipse uygulamayı daha da iyi hale getirecek özellikleri açıp kapatın ya da katmanlara ayırın. Uyarlanabilir yükleme hakkında daha fazla bilgi edinmek için mevcut demolara göz atın ve Chrome Geliştirici Zirvesi konuşmasını izleyin: