Veri Tasarrufu ile Hızlı ve Hafif Uygulamalar Sunma

Save-Data ayarı algılanıyor

Uygulamanız, kullanıcılarınıza "hafif" deneyimin ne zaman sunulacağını belirlemek için Save-Data istemci ipucu isteği başlığını kontrol edebilir. Bu istek başlığı; yüksek aktarım maliyetleri, düşük bağlantı hızları veya diğer nedenlerden dolayı istemcinin az veri kullanımını tercih ettiğini gösterir.

Kullanıcı, tarayıcısında veri tasarrufu modunu etkinleştirdiğinde tarayıcı, Save-Data istek başlığını tüm giden isteklere (hem HTTP hem HTTPS) ekler. Bu yazı hazırlandığı sırada tarayıcı, başlıkta (Save-Data: on) yalnızca bir *on- jetonun tanıtımını yapar, ancak bu süre gelecekte diğer kullanıcı tercihlerini belirtmek için genişletilebilir.

Ayrıca, JavaScript'te Save-Data özelliğinin etkin olup olmadığı tespit edilebilir:

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // Implement data saving operations here.
  }
}

Yalnızca Chrome, Android için Chrome ve Samsung internet tarayıcılarında uygulanan Network Information API'yi temsil ettiği için navigator nesnesinde connection nesnesinin olup olmadığını kontrol etmek çok önemlidir. Buradan sonra yalnızca navigator.connection.saveData öğesinin true ile eşit olup olmadığını kontrol etmeniz gerekir. Böylece, bu koşulda tüm veri kaydetme işlemlerini uygulayabilirsiniz.

Uygulamanız bir hizmet çalışanı kullanıyorsa istek başlıklarını inceleyebilir ve deneyimi optimize etmek için ilgili mantığı uygulayabilir. Alternatif olarak, sunucu Save-Data istek başlığında reklamı yapılan tercihleri arayabilir ve farklı bir işaretleme, daha küçük resimler ve video gibi alternatif bir yanıt döndürebilir.

Kullanımla ilgili ipuçları ve en iyi uygulamalar

1. Save-Data kullanırken bunu destekleyen ve kullanıcıların deneyimler arasında kolayca geçiş yapmasına olanak tanıyan bazı kullanıcı arayüzü cihazları sağlayın. Örneğin:
   • Kullanıcılara Save-Data hizmetinin desteklendiğini bildirin ve onları kullanmaya teşvik edin.
   • Kullanıcıların, modu uygun istemler ve sezgisel açma/kapatma düğmeleri veya onay kutularıyla tanımlayıp seçmesine izin verin.
   • Veri tasarrufu modu seçildiğinde bu modu devre dışı bırakmanın ve isterseniz tam deneyime geri dönmenin kolay ve bariz bir yolunu duyurup sunun.
2. Basit uygulamaların daha basit uygulamalar olmadığını unutmayın. Önemli işlevsellikleri veya verileri göz ardı etmezler. Yalnızca ilgili maliyetleri ve kullanıcı deneyimini daha iyi anlarlar. Örneğin:
   • Bir fotoğraf galerisi uygulaması, daha düşük çözünürlüklü önizlemeler sunabilir veya daha az kod ağırlıklı bir bant mekanizması kullanabilir.
   • Bir arama uygulaması aynı anda daha az sonuç döndürebilir, medya ağırlıklı sonuçların sayısını sınırlandırabilir veya sayfayı oluşturmak için gereken bağımlılık sayısını azaltabilir.
   • Haber odaklı bir site daha az haber gösterebilir, daha az popüler kategorileri atlayabilir veya daha küçük medya önizlemeleri sunabilir.
3. Save-Data istek başlığını kontrol etmek için sunucu mantığı sağlayın ve etkinleştirildiğinde alternatif ve daha hafif bir sayfa yanıtı sağlama seçeneğini değerlendirin (ör.gerekli kaynakların ve bağımlılıkların sayısını azaltın, daha agresif kaynak sıkıştırması uygulayın vb.).
   • Save-Data üst bilgisini temel alan alternatif bir yanıt sunuyorsanız yukarı akış önbelleklerine, bu sürümü yalnızca Save-Data istek üst bilgisi mevcutsa önbelleğe almaları ve sunmaları gerektiğini belirtmek için bunu Vary listesine (Vary: Save-Data) eklemeyi unutmayın. Daha ayrıntılı bilgi için önbelleklerle etkileşim ile ilgili en iyi uygulamaları inceleyin.
4. Service Worker kullanıyorsanız uygulamanız, Save-Data istek başlığının olup olmadığını veya navigator.connection.saveData özelliğinin değerini kontrol ederek veri kaydetme seçeneğinin etkinleştirildiğini tespit edebilir. Bu ayar etkinleştirilirse isteği daha az bayt getirecek şekilde yeniden yazma veya önceden getirilen bir yanıtı kullanma seçeneğini değerlendirin.
5. Save-Data öğesini, kullanıcının bağlantı türü ve teknolojisi hakkındaki bilgiler gibi diğer sinyallerle genişletmeyi düşünün (bkz. NetInfo API). Örneğin, Save-Data etkin olmasa bile 2G bağlantısı olan tüm kullanıcılara basit deneyimi sunmak isteyebilirsiniz. Buna karşılık, kullanıcının "hızlı" bir 4G bağlantısına sahip olması, veri tasarrufu yapmak istemediği anlamına gelmez (örneğin, dolaşımdayken). Ayrıca, sınırlı belleğe sahip cihazlardaki kullanıcılara daha iyi uyum sağlamak için Save-Data varlığını Device-Memory istemci ipucuyla artırabilirsiniz. Kullanıcı cihaz belleği, navigator.deviceMemory istemci ipucunda da belirtilir.

Recipe'ler

Save-Data ile yapabilecekleriniz, elde edebileceklerinizle sınırlıdır. Nelerin mümkün olduğu konusunda size bir fikir vermesi için birkaç kullanım alanına göz atalım. Bu yazıyı okurken başka kullanım alanlarını ele alabilirsiniz. Bu nedenle, denemeler yapmaktan ve nelerin mümkün olduğunu görmekten çekinmeyin.

Sunucu tarafı kodunda Save-Data kontrol ediliyor

Save-Data durumu, JavaScript'te navigator.connection.saveData özelliği aracılığıyla algılayabileceğiniz bir durum olsa da bazen sunucu tarafında algılanması tercih edilir. JavaScript bazı durumlarda yürütülemeyebilir. Ayrıca, sunucu tarafı algılama, işaretlemeyi istemciye gönderilmeden önce değiştirmenin tek yoludur. Bu işlem, Save-Data ürününün en faydalı kullanım alanlarından bazılarına dahildir.

Sunucu tarafı kodundaki Save-Data üst bilgisini algılamak için gereken söz dizimi, kullanılan dile bağlıdır ancak temel fikir tüm uygulamaların arka ucunda aynı olmalıdır. Örneğin, PHP'de istek başlıkları, HTTP_ ile başlayan dizinlerde $_SERVER süper genel dizi içinde depolanır. Bu, $_SERVER["HTTP_SAVE_DATA"] değişkeninin varlığını ve değerini aşağıdaki şekilde kontrol ederek Save-Data başlığını tespit edebileceğiniz anlamına gelir:

// false by default.
$saveData = false;

// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
  // `Save-Data` detected!
  $saveData = true;
}

Bu kontrolü, istemciye herhangi bir işaretleme gönderilmeden önce yaparsanız $saveData değişkeni, Save-Data durumunu içerir ve sayfanın herhangi bir yerinde kullanılabilir. Bu mekanizmayı açıklayarak kullanıcıya ne kadar veri göndereceğimizi sınırlamak için bunu nasıl kullanabileceğimize dair birkaç örneğe göz atalım.

Yüksek çözünürlüklü ekranlar için düşük çözünürlüklü resimler sunun

Web'deki resimler için yaygın bir kullanım alanı, resimlerin ikili gruplar halinde sunulmasıdır: "Standart" ekranlar için bir resim (1x), yüksek çözünürlüklü ekranlar için ise iki kat daha büyük (2x) (ör. Retina Ekran'a gidin. Bu yüksek çözünürlüklü ekran sınıfı, üst segment cihazlarla sınırlı değildir ve giderek daha yaygın hale gelmektedir. Daha hafif bir uygulama deneyiminin tercih edildiği durumlarda, bu ekranlara daha büyük (2x) varyant yerine daha düşük çözünürlüklü (1x) resimler göndermek daha mantıklı olabilir. Save-Data üst bilgisi mevcut olduğunda bunu sağlamak için müşteriye gönderdiğimiz işaretlemeyi değiştirmemiz yeterlidir:

if ($saveData === true) {
  // Send a low-resolution version of the image for clients specifying `Save-Data`.
  ?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
  // Send the usual assets for everyone else.
  ?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}

Bu kullanım alanı, özel olarak daha az veri göndermenizi isteyen bir kullanıcıya ulaşmak için ne kadar az çaba sarf edildiğini gösteren mükemmel bir örnektir. Arka uçtaki işaretlemeyi değiştirmekten hoşlanmıyorsanız Apache'nin mod_rewrite gibi bir URL yeniden yazma modülü kullanarak da aynı sonucu elde edebilirsiniz. Nispeten az yapılandırmayla bunu nasıl yapabileceğinizi gösteren örnekler vardır.

Bu kavramı, <html> öğesine bir sınıf ekleyerek CSS background-image mülklerine de genişletebilirsiniz:

<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">

Buradan, resimlerin yayınlanma şeklini değiştirmek için CSS'nizdeki <html> öğesinde save-data sınıfını hedefleyebilirsiniz. Yukarıdaki HTML örneğinde gösterildiği gibi yüksek çözünürlüklü ekranlara düşük çözünürlüklü arka plan resimleri gönderebilir veya bazı kaynakları hiç almaabilirsiniz.

Gereksiz görüntüleri kullanmayın

Web'deki bazı görsel içerikler kesinlikle gerekli değildir. Bu tür görüntüler içerik için güzel olabilse de, sayaçlı veri planlarından mümkün olan her şeyi sıkıştırmaya çalışan kullanıcılar tarafından istenmeyebilir. Save-Data’ın en basit kullanım örneği olarak, daha önceki PHP algılama kodunu kullanabilir ve gerekli olmayan resim işaretlemeyi tamamen atlayabiliriz:

<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
  // Only send this image if `Save-Data` hasn't been detected.
  ?><img src="meme.jpg" alt="One does not simply consume data."><?php
}

Aşağıdaki şekilde görebileceğiniz gibi bu tekniğin kesinlikle belirgin bir etkisi olabilir:

Elbette, görüntüleri gizlemek tek olasılık değildir. Ayrıca belirli yazı tipleri gibi diğer kritik olmayan kaynakları göndermekten vazgeçmek için Save-Data ile ilgili işlem yapabilirsiniz.

Gerekli olmayan web yazı tiplerini kullanmayın

Web yazı tipleri genellikle bir sayfanın toplam yükünü genellikle resimler kadar oluşturmasa da oldukça popülerdir. Önemli miktarda veri de kullanmazlar. Dahası, tarayıcıların yazı tiplerini getirme ve oluşturma yöntemi, sandığınızdan daha karmaşık. FOIT, FOUT gibi kavramlar ve tarayıcı bulguları, oluşturmayı incelikli bir işleme dönüştürüyor.

Daha yalın bir kullanıcı deneyimi isteyen kullanıcılar için gerekli olmayan web yazı tiplerini hariç tutmak isteyebilirsiniz. Save-Data, bunu makul düzeyde zahmetsiz bir şekilde yapılabilecek.

Örneğin, sitenize Google Fonts'tan Fira Sans'ı eklediğinizi varsayalım. Fira Sans mükemmel bir gövde metni yazı tipidir, ama verilerini kaydetmeye çalışan kullanıcılar için çok önemli olmayabilir. Save-Data üst bilgisi mevcut olduğunda <html> öğesine bir save-data sınıfı ekleyerek, başta gerekli olmayan yazı karakterini çağıran, ancak Save-Data üst bilgisi mevcut olduğunda bunu devre dışı bırakan stiller yazabiliriz:

/* Opt into web fonts by default. */
p,
li {
  font-family: 'Fira Sans', 'Arial', sans-serif;
}

/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
  font-family: 'Arial', sans-serif;
}

Tarayıcı, öncelikle DOM'ye stiller uygulayarak ve ardından herhangi bir HTML öğesinin stil sayfasındaki kaynaklardan herhangi birini çağırıp çağırmadığını kontrol ederek CSS kaynaklarını (web yazı tipleri dahil) tahmine dayalı olarak yüklediğinden, Google Fonts'taki <link> snippet'ini yerinde bırakabilirsiniz. Save-Data açıkken bir kullanıcı olursa Fira Sans hiçbir zaman yüklenmez çünkü stillendirilmiş DOM bunu hiçbir zaman çağırmaz. Bunun yerine hemen harekete geçilecektir. Fira Sans kadar güzel olmasa da, veri planlarını uzatmaya çalışan kullanıcılar için daha uygun olabilir.

Özet

Save-Data başlığı çok incelik içermez; açık veya kapalıdır ve nedeni ne olursa olsun, ayarına bağlı olarak uygun deneyimler sağlama sorumluluğunu üstlenir.

Örneğin, bazı kullanıcılar kötü bir bağlantı durumunda bile uygulama içeriği veya işlevi kaybı olacağından şüpheleniyorlarsa veri tasarrufu moduna izin vermeyebilirler. Buna karşılık, bazı kullanıcılar iyi bir bağlantı durumunda bile sayfaları mümkün olduğunca küçük ve basit tutmak için bunu elbette etkinleştirebilir. En iyi yöntem, aksi takdirde açık bir kullanıcı işlemi aracılığıyla net bir gösterge elde etmediğiniz sürece kullanıcının tam ve sınırsız bir deneyim istediğini varsaymaktır.

Site sahipleri ve web geliştiricileri olarak, verilerimizi ve maliyeti kısıtlı olan kullanıcılara daha iyi bir kullanıcı deneyimi sunmak için içeriğimizi yönetme sorumluluğunu biz üstleniriz.

Save-Data hakkında daha fazla bilgi ve pratik örnekler için Kullanıcılarınıza Yardımcı Olun Save Data sayfasına göz atın.