Uyarlanabilir yükleme: yavaş cihazlarda web performansını iyileştirme

Cihaz yetenekleri ve ağ bağlantıları çok değişkendir. İleri teknoloji cihazlarda kullanıcıları memnun eden siteler kullanılamaz düşük uçlu olanlarda. Hızlı ağlarda sorunsuz yüklenen siteler, yavaş ağlarda durma noktasına gelebilir. Herhangi bir kullanıcı yavaş bir web sitesiyle karşılaşabilir, bu nedenle “herkese uyan tek beden” çözümler geliştirmek her zaman işe yaramayabilir.

onların içinde Chrome Geliştirici Zirvesi konuşması, Google’dan Addy Osmani ve Facebook’tan Nate Schloss, bu soruna bir çözüm keşfediyor; çeşitli kullanıcı kısıtlamalarına daha iyi hitap eden sayfalar sunmak için bir model. ona diyorlar uyarlanabilir yükleme.

Uyarlanabilir yükleme nedir? #

Uyarlanabilir yükleme, özellikle aşağıdakiler olmak üzere, ağ ve donanım kısıtlamalarına bağlı olarak farklı kullanıcılara farklı deneyimler sunmayı içerir:

• Tüm kullanıcılar için hızlı bir temel deneyim (düşük kaliteli cihazlar dahil).

• Bir kullanıcının ağı ve donanımı bunu kaldırabiliyorsa, aşamalı olarak yalnızca üst düzey özelliklerin eklenmesi.

Belirli donanım ve ağ kısıtlamalarını optimize ederek, her kullanıcının kendi cihazı için mümkün olan en iyi deneyimi elde etmesini sağlarsınız. Deneyimi kullanıcıların kısıtlamalarına göre uyarlamak şunları içerebilir:

• Yavaş ağlarda düşük kaliteli resimler ve videolar sunmak.

• Düşük kaliteli cihazlarda animasyonların kare hızını azaltma.

• Düşük kaliteli cihazlarda hesaplama açısından pahalı işlemlerden kaçınma.

• Daha 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ğı #

Adaptif yükleme için kullanabileceğiniz sinyaller aşağıda listelenmiştir. Her sinyal için tarayıcı desteği de dahildir:

Navigator.deviceMemory #

bu navigator.deviceMemory özelliği, düşük kaliteli cihazlarda bellek tüketimini azaltmak için kullanılır.

Navigator.hardwareConcurrency #

bu navigator.hardwareConcurrency özellik, CPU çekirdek sayısıdır. Pahalı JavaScript yürütmesini sınırlamak ve bir cihaz iyi işleyemediğinde yoğun CPU mantığını azaltmak için kullanılır.

NetworkInformation.effectiveType #

bu navigator.connection.effectiveType özelliği, daha az bant genişliği kullanmak üzere veri aktarımında ince ayar yapmak için kullanılır.

NetworkInformation.saveData #

bu 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’lerine sahipsiniz. Sunucuda, kullanıcının cihaz yetenekleri ve bağlı oldukları ağ hakkında fikir edinmek için istemci ipuçlarını kullanabilirsiniz.

React’te uyarlamalı yükleme #

React Uyarlanabilir Yükleme Kancaları ve Yardımcı Programlar sitelerinizi alt uç cihazlara uyarlamayı kolaylaştıran, React ekosistemi için bir pakettir. O içerir:

• bu useNetworkStatus() ağ durumuna göre uyarlama için kanca (slow-2g, 2g, 3gveya 4g).

• bu useSaveData() kullanıcının Veri Tasarrufu tercihlerine göre uyarlamak için kanca.

• bu useHardwareConcurrency() kullanıcının cihazındaki mantıksal CPU işlemci çekirdeği sayısına göre uyarlama için kanca.

• bu useMemoryStatus() kullanıcının cihaz belleğine (RAM) göre uyarlama için kanca.

Her kanca, başlangıç ​​değerini ayarlamak 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ı işleme için. Örneğin, useNetworkStatus() kanca, sunucu tarafı işleme için istemci ipucundan iletilen ilk değeri kullanabilir ve istemcide yürütüldüğünde, ağ etkin türü değişirse kendini günceller.

React Adaptive Loading Hooks & Utilities, web platformu API’leri (Ağ Bilgileri, Cihaz hafızası Ve Donanım Eş Zamanlılığı). Uyarlanabilir yükleme kavramlarını aşağıdakiler gibi diğer çerçevelere ve kitaplıklara uygulamak için aynı API’leri kullanabilirsiniz: Açısal, Vueve diğerleri.

Uyarlanabilir yükleme iş başında #

Bu bölüm, uyarlanabilir yüklemeyi nasıl kullanabileceğinize dair demoları ve Facebook, eBay, Tinder ve diğerleri gibi sitelerden gerçek dünyadan örnekleri araştırıyor.

bu Tepki Filmi demo nasıl yapılacağını gösterir medya sunumunu ağ durumuna göre uyarlayın. Posterleri, özetleri ve oyuncu listelerini gösteren filmlere göz atmak için bir uygulamadır. Kullanıcının etkin bağlantı tipine göre hızlı bağlantılarda yüksek kaliteli posterler, yavaş bağlantılarda ise düşük kaliteli posterler sunar.

Twitter’da Veri Tasarrufu modu var kullanılan veri miktarını azaltmak için tasarlanmıştır. Bu modda, önizleme resimleri düşük çözünürlükte yüklenir ve büyük resimler yalnızca önizlemeye dokunduğunuzda yüklenir. Bu seçenek etkinleştirildiğinde, iOS ve Android’deki kullanıcılar resimlerden veri kullanımında %50, web’deki kullanıcılar ise %80 tasarruf sağladı. İşte bir Tepki gösteri Twitter zaman çizelgesini çoğaltmak için Verileri Kaydet kancasını kullanan. DevTools’unuzu açmayı deneyin Ağ paneli ve Verileri Kaydet devre dışıyken kaydırdığınızda aktarılan veri miktarı ile etkinleştirildiğindeki farka bakma.

eBay, bir kullanıcının donanımı veya ağ koşulları onları iyi desteklemediğinde, yakınlaştırma gibi özellikleri koşullu olarak açar ve kapatır. Bunu, uyarlanabilir kod bölme ve kod yükleme yoluyla başarabilirsiniz; bu, daha yüksek düzeyde etkileşimli bileşenleri koşullu olarak yüklemenin veya ileri teknoloji aygıtlarda hesaplama açısından daha ağır işlemler yürütmenin ve bu komut dosyalarını daha yavaş aygıtlardaki kullanıcılara göndermemenin bir yolu. adresindeki videoya göz atın 16 dakika burada Addy, React.lazy() ve Suspense ile uygulanan bu kalıbı bir demo eBay ürün sayfası.

Tinder, bir dizi uyarlanabilir yükleme modeli kullanıyor. ağ Ve Hafif uygulama deneyimi herkes için hızlı tutmak. Bir kullanıcı yavaş bir ağdaysa veya Veri Tasarrufu etkinleştirilmişse, videoyu otomatik oynatmayı devre dışı bırakır, rota önceden getirmeyi sınırlar ve döngüdeki bir sonraki görüntünün yüklenmesini, kullanıcılar kaydırdıkça görüntüleri birer birer yüklemekle sınırlandırır. Bu optimizasyonları uyguladıktan sonra, Endonezya gibi ülkelerde ortalama kaydırma sayısında önemli gelişmeler gördüler.

Facebook’ta uyarlanabilir yükleme #

Uyarlanabilir yüklemede ortaya çıkan sorunlardan biri, cihazları mevcut sinyallere göre üst uç ve alt uç sınıflara ayırmaktır. Mobil cihazlarda şu kullanıcı aracısı (UA) string, Facebook’un mobil cihazları sınıflar halinde gruplandırmak için cihaz özelliklerine ilişkin herkese açık verileri kullanmasını sağlayan cihaz adını sağlar. Ancak, masaüstü cihazlarda UA’nın sağladığı tek ilgili bilgi, cihazın işletim sistemidir.

Facebook, masaüstü cihazlarını gruplandırmak için işletim sistemi, CPU çekirdekleri ( navigator.hardwareConcurrency) ve RAM belleği (navigator.deviceMemory) performans izlemelerinde. Farklı donanım türleri ve performans arasındaki ilişkilere bakarak, cihazları beş kategoride sınıflandırdılar. Performans izlemeye entegre edilen donanım sınıflarıyla, insanların cihazlarına bağlı olarak Facebook ürünlerini nasıl kullandıklarına dair daha eksiksiz bir resim elde ediyorlar ve gerilemeleri daha kolay tanımlayabiliyorlar.

adresindeki videoya göz atın 24 dakikaburada Nate, Facebook’un cihaz gruplandırmasına nasıl yaklaştığını ve animasyonlar ve yükleme JavaScript’i için uyarlamalı yüklemeyi nasıl kullandığını anlatıyor.

Uyarlanabilir yükleme hakkında daha fazla bilgi edinin #

Uyarlanabilir yükleme, sitelerinizi kapsayıcılığı göz önünde bulundurarak tasarlamakla ilgilidir. Herkes için harika çalışan bir temel deneyim oluşturun, ardından bir kullanıcının yeterli belleği, CPU’su veya hızlı bir ağı varsa daha da harika hale getiren özellikleri değiştirin veya katmanlayın. Uyarlanabilir yükleme hakkında daha fazla bilgi edinmek için mevcut demolar ve Chrome Geliştirici Zirvesi konuşmasını izleyin: