Veri Tasarrufu ile Hızlı ve Hafif Uygulamalar Sunma

Dave Gash

Ilya Grigorik

Jeremy Wagner

Chrome, Opera ve Yandex tarayıcılarında bulunan Save-Data istemci ipucu isteği üst bilgisi, geliştiricilerin tarayıcılarında veri tasarrufu modunu etkinleştiren kullanıcılara daha hafif ve hızlı uygulamalar sunmalarına olanak tanır.

Hafif sayfalara ihtiyaç

Daha hızlı ve daha hafif web sayfalarının daha tatmin edici bir kullanıcı deneyimi sağladığı, içeriğin daha iyi anlaşılmasını ve tutulmasını sağladığı, daha fazla dönüşüm ve gelir sağladığı konusunda herkes hemfikirdir. Google'ın araştırması "...optimize edilmiş sayfaların orijinal sayfalara göre dört kat daha hızlı yüklendiğini ve %80 daha az bayt kullanıldığını" göstermiştir. Ayrıca bu sayfalar çok daha hızlı yüklendiklerinden, kod dönüşümü yapılan sayfalara gelen trafikte% 50'lik bir artış olduğunu gördük."

2G bağlantı sayısı nihayetinde düşüşte olsa da 2G, 2015 yılında hâlâönde gelen ağ teknolojisi olmuştur. 3G ve 4G ağlarının yaygınlığı ve kullanılabilirliği hızla büyüse de ilgili sahiplik maliyetleri ve ağ kısıtlamaları, yüz milyonlarca kullanıcı için hâlâ önemli bir faktördür.

Bunlar, sayfa optimizasyonuna ilişkin güçlü bağımsız değişkenlerdir.

Site hızını doğrudan geliştirici müdahalesi olmadan iyileştirmek için proxy tarayıcılar ve kod dönüştürme hizmetleri gibi alternatif yöntemler vardır. Bu tür hizmetler oldukça popüler olsa da, basit (ve bazen kabul edilemez) resim ve metin sıkıştırma, güvenli (HTTPS) sayfaları işleyememe, yalnızca bir arama sonucu aracılığıyla ziyaret edilen sayfaları optimize etme ve daha fazlası gibi önemli dezavantajları vardır. Bu hizmetlerin çok popüler olması, web geliştiricilerinin hızlı ve hafif uygulama ve sayfalara yönelik yüksek kullanıcı talebini doğru bir şekilde ele almadığının göstergesidir. Ancak bu hedefe ulaşmak karmaşık ve bazen zor bir süreçtir.

Save-Data istek başlığı

Oldukça basit bir teknik, Save-Data istek başlığını kullanarak tarayıcının yardımcı olmasını sağlamaktır. Bir web sayfası, bu başlığı belirleyerek maliyet ve performans kısıtlamalı kullanıcılara özelleştirebilir ve optimize edilmiş bir kullanıcı deneyimi sunabilir.

Desteklenen tarayıcılar (aşağıda) kullanıcının bir *veri tasarrufu modunu etkinleştirmesine olanak tanır. Bu mod, sayfayı oluşturmak için gereken veri miktarını azaltmak üzere tarayıcıya bir dizi optimizasyon uygulama izni verir. Bu özellik kullanıma sunulduğunda veya tanıtıldığında, tarayıcı daha düşük çözünürlüklü resimler isteyebilir, bazı kaynakların yüklenmesini erteleyebilir veya istekleri, resim ve metin kaynağı sıkıştırma gibi içeriğe özgü başka optimizasyonlar uygulayan bir hizmet aracılığıyla yönlendirebilir.

Tarayıcı desteği

• Chrome 49 ve sonraki sürümler, kullanıcı mobil cihazlarda "Veri Tasarrufu" seçeneğini etkinleştirdiğinde veya masaüstü tarayıcılarda "Veri Tasarrufu" uzantısını etkinleştirdiğinde Save-Data için reklam gösterir.
• Opera 35 ve sonraki sürümler, kullanıcı masaüstünde "Opera Turbo" modunu veya Android tarayıcılarda "Veri tasarrufu" seçeneğini etkinleştirdiğinde Save-Data için reklam gösterir.
• Yandex 16.2 ve sonraki sürümler, masaüstü veya mobil tarayıcılarda Turbo mod etkinleştirildiğinde Save-Data reklamını gösterir.

Save-Data ayarı algılanıyor

Uygulamanız, "hafif" deneyimi kullanıcılarınıza ne zaman sunacağınızı belirlemek için Save-Data istemci ipucu isteği başlığını kontrol edebilir. Bu istek başlığı, istemcinin yüksek aktarım maliyetleri, düşük bağlantı hızları veya başka nedenlerden dolayı düşük veri kullanımı tercihini gösterir.

Kullanıcı, tarayıcısında veri kaydetme modunu etkinleştirdiğinde tarayıcı, tüm giden isteklere (hem HTTP hem de HTTPS) Save-Data istek başlığını ekler. Bu yazının hazırlandığı tarih itibarıyla tarayıcı, başlıkta (Save-Data: on) yalnızca bir *on-jetonunun reklamını yapıyor. Ancak bu süre ileride diğer kullanıcı tercihlerini belirtmek için genişletilebilir.

Ayrıca, JavaScript'te Save-Data politikasının açık olup olmadığı tespit edilebilir:

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

navigator nesnesinde connection nesnesinin olup olmadığının kontrol edilmesi, yalnızca Chrome, Android için Chrome ve Samsung internet tarayıcılarında uygulanan Network Information API'yi temsil ettiğinden hayati önem taşır. Buradan, yalnızca navigator.connection.saveData değerinin true değerine eşit olup olmadığını kontrol etmeniz gerekir. Bu koşulda tüm veri kaydetme işlemlerini uygulayabilirsiniz.

Chrome masaüstünde Veri Tasarrufu uzantısını etkinleştirme.

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 bildirilen tercihleri arayabilir ve farklı işaretleme, daha küçük resimler ve video gibi alternatif bir yanıt döndürebilir.

İpucu: Sayfalarınızı optimize etmek üzere Apache için Sayfa Hızı veya Nginx'i kullanıyorsanız kullanıcılarınız için Save-Data tasarrufunu nasıl etkinleştireceğinizi öğrenmek üzere bu tartışmaya bakın._

Uygulama ipuçları ve en iyi uygulamalar

1. Save-Data kullanırken, destekleyen ve kullanıcıların deneyimler arasında kolayca geçiş yapabilmesini sağlayacak kullanıcı arayüzü cihazları sağlayın. Örneğin:
   • Kullanıcılara Save-Data ürününün desteklendiğini bildirin ve uygulamayı kullanmaya teşvik edin.
   • Kullanıcıların, uygun istemler ve sezgisel açma/kapatma düğmeleri veya onay kutularıyla modu belirlemesine ve seçmesine olanak tanıyın.
   • Veri tasarrufu modu seçildiğinde, bunu duyurup özelliği devre dışı bırakmanın ve isterseniz tam deneyime geri dönmenin kolay ve bariz bir yolunu sunun.
2. Basit uygulamaların daha az uygulama olmadığını unutmayın. Bu araçlar önemli işlevleri veya verileri hariç tutmaz, sadece ilgili maliyetler ve kullanıcı deneyimi konusunda daha bilinçlidir. Örneğin:
   • Bir fotoğraf galerisi uygulaması, 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çısından yoğun sonuçların sayısını sınırlayabilir 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 olan kategorileri atlayabilir veya daha küçük medya önizlemeleri sağlayabilir.
3. Save-Data istek başlığını kontrol etmek için sunucu mantığı sağlayın ve etkinleştirildiğinde alternatif, daha hafif bir sayfa yanıtı sağlayın. Örneğin, gerekli kaynakların ve bağımlılıkların sayısını azaltın, daha agresif kaynak sıkıştırması uygulayın.
   • Save-Data üst bilgisine dayalı alternatif bir yanıt sunuyorsanız yukarı akış önbelleklerine, bu sürümü yalnızca Save-Data istek başlığı varsa önbelleğe almaları ve sunmaları gerektiğini bildirmek 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 uygulamalara bakın.
4. Service Worker kullanıyorsanız uygulamanız, Save-Data istek üst bilgisinin olup olmadığını veya navigator.connection.saveData özelliğinin değerini kontrol ederek veri kaydetme seçeneğinin ne zaman etkinleştirildiğini algılayabilir. Etkinleştirilirse isteği daha az bayt getirecek şekilde yeniden yazabilir veya önceden getirilmiş bir yanıtı kullanabilirsiniz.
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'si). Örneğin, Save-Data etkin olmasa bile 2G bağlantısı olan tüm kullanıcılara basit bir deneyim sunmak isteyebilirsiniz. Öte yandan, kullanıcının "hızlı" bir 4G bağlantısında olması, veri tasarrufu yapmak istemediği anlamına gelmez (örneğin, dolaşım sırasında). Ayrıca, sınırlı belleğe sahip cihazlardaki kullanıcılara daha iyi uyum sağlamak için Device-Memory istemci ipucuyla Save-Data varlığını güçlendirebilirsiniz. Kullanıcı cihazı belleği, navigator.deviceMemory istemci ipucunda da belirtilir.

Recipe'ler

Save-Data aracılığıyla yapabilecekleriniz, elde edebileceklerinizle sınırlıdır. Nelerin mümkün olduğu konusunda fikir vermesi için birkaç kullanım örneğini inceleyelim. Bunu okurken başka kullanım alanları da bulabilirsiniz, o yüzden denemeler yapmaktan çekinmeyin ve nelerin mümkün olduğunu görün.

Sunucu tarafı kodunda Save-Data olup olmadığı kontrol ediliyor

Save-Data durumu, JavaScript'te navigator.connection.saveData özelliği aracılığıyla algılayabileceğiniz bir şey olsa da, bazen sunucu tarafında tespit edilmesi tercih edilir. JavaScript bazı durumlarda yürütülemeyebilir. Ayrıca, işaretlemeyi istemciye gönderilmeden önce değiştirmenin tek yolu sunucu tarafı algılamadır. Bu, Save-Data'nin en faydalı kullanım alanlarından bazılarına da müdahale eder.

Sunucu tarafı kodunda Save-Data üst bilgisini algılamak için kullanılan özel söz dizimi, kullanılan dile bağlıdır ancak temel fikir tüm uygulama arka ucunda aynı olmalıdır. Örneğin PHP'de istek üst bilgileri, $_SERVER süper küresel dizisinde HTTP_ ile başlayan dizinlerde depolanır. Bu, $_SERVER["HTTP_SAVE_DATA"] değişkeninin varlığını ve değerini aşağıdaki şekilde kontrol ederek Save-Data üst bilgisini 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 denetimi, istemciye herhangi bir işaretleme gönderilmeden önce yerleştirirseniz $saveData değişkeni, Save-Data durumunu içerir ve sayfada her yerde kullanılabilir. Bu mekanizmayı gösterdikten sonra, kullanıcıya gönderdiğimiz veri miktarını sınırlamak için bu mekanizmayı nasıl kullanabileceğimize dair birkaç örneğe bakalım.

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

Web'deki resimlerin yaygın olarak kullanıldığı bir durum, resimlerin iki grup halinde sunulmasını içerir: "standart" ekranlar için bir resim (1x) ve yüksek çözünürlüklü ekranlar için iki kat büyük (2x) başka bir resim (ör. Retina Ekran). Bu yüksek çözünürlüklü ekranlar sınıfının çoğu, ileri teknoloji cihazlarla sınırlı olmak zorunda değildir ve giderek yaygınlaşıyor. Daha hafif bir uygulama deneyiminin tercih edildiği durumlarda, bu ekranlara daha büyük (2x) varyantlar yerine daha düşük çözünürlüklü (1x) resimler göndermek akıllıca 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ı, özellikle kendilerine daha az veri göndermenizi isteyen bir kişiyi barındırmak için ne kadar az çaba gerektiğinin mükemmel bir örneği. Arka uçtaki işaretlemeyi değiştirmek istemiyorsanız Apache'nin mod_rewrite gibi bir URL yeniden yazma modülü kullanarak da aynı sonucu elde edebilirsiniz. Nispeten daha az yapılandırmayla bunun nasıl yapılacağına dair örnekler vardır.

Ayrıca <html> öğesine bir sınıf ekleyerek bu kavramı CSS background-image özelliklerine 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 düşük çözünürlüklü arka plan resimlerini yüksek çözünürlüklü ekranlara gönderebilir veya belirli kaynakları hiç çıkarabilirsiniz.

Gerekli olmayan görüntüleri çıkarma

Web'deki bazı resim içerikleri gerekli değildir. Bu tür görüntüler, içerik dışında faydalı olabilir, ancak sınırlı veri planlarından tamamen yararlanmaya çalışanlar istemeyebilir. Save-Data ürününün belki de en basit kullanım örneği olan Save-Data, önceki PHP algılama kodunu kullanabilir ve gerekli olmayan resim işaretlemesini tamamen çıkarabiliriz:

<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 grafikte görebileceğiniz gibi bu tekniğin kesinlikle belirgin bir etkisi olabilir:

Verileri Kaydetme özelliği olmadığında yüklenen kritik olmayan görüntülerle Veri Kaydet özelliği mevcut olduğunda atlanan görüntülerin karşılaştırılması.

Elbette, tek ihtimal resimleri atlamak değildir. Belirli yazı tipleri gibi kritik olmayan diğer kaynakları göndermekten vazgeçmek için Save-Data üzerinde de işlem yapabilirsiniz.

Gerekli olmayan web yazı tiplerini çıkarın

Web yazı tipleri genellikle belirli bir sayfanın toplam yükünün genellikle resimler kadar büyük bir kısmını oluşturmasa da oldukça popülerdir. Ayrıca çok fazla veri tüketmezler. Dahası, tarayıcıların yazı tiplerini getirme ve oluşturma yolu düşünebileceğinizden daha karmaşıktır. FOIT, FOUT gibi kavramlar ve oluşturma işlemini çok ayrıntılı bir işlem haline getiren tarayıcı bulguları.

Bu durumda, daha sade kullanıcı deneyimi isteyen kullanıcılar için gerekli olmayan web yazı tiplerini hariç tutmak iyi bir fikir olabilir. Save-Data bunu oldukça zahmetsiz bir hale getirir.

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

/* 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ı, önce DOM'a 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ği için, bu yaklaşımı kullanarak Google Fonts'tan gelen <link> snippet'ini yerinde bırakabilirsiniz. Save-Data özelliği etkinken birisi gerçekleşirse stile sahip DOM bunu hiçbir zaman çağırmadığı için Fira Sans hiçbir zaman yüklenmez. Arial devreye girer. Fira Sans kadar iyi olmasa da veri planlarını genişletmeye çalışan kullanıcılar için tercih edilebilir.

Özet

Save-Data üst bilgisinde çok küçük bir fark yoktur. Açık veya kapalıdır ve nedeni ne olursa olsun, ayara göre uygun deneyimleri sağlama sorumluluğu uygulamanın sorumluluğundadır.

Örneğin, bağlantı zayıf olsa bile uygulama içeriğini veya işlevini kaybedeceğinden kuşkulanan bazı kullanıcılar veri tasarrufu moduna izin vermeyebilir. Buna karşılık, bazı kullanıcılar, bağlantı durumu iyi olsa bile, elbette sayfaların mümkün olduğunca küçük ve basit kalmasını sağlayabilir. Uygulamanız için en iyi yöntem, açık bir kullanıcı eylemiyle aksini açıkça belirtene kadar kullanıcının tam ve sınırsız deneyim istediğini varsaymaktır.

Site sahipleri ve web geliştiricileri olarak verileri ve maliyeti kısıtlı kullanıcılar için kullanıcı deneyimini iyileştirmek üzere içeriğimizi yönetme sorumluluğunu üstleniriz.

Save-Data hakkında daha fazla bilgi ve mükemmel pratik örnekler için Kullanıcılarınıza Yardım Etme Save Data sayfasını inceleyin.