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 istek başlığı, geliştiricilerin tarayıcılarında veri tasarrufu modunu etkinleştiren kullanıcılara daha hafif ve daha hızlı uygulamalar sunmasını sağlar.

Hafif sayfalara duyulan 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 akılda kalıcılığını artırdığı, dönüşüm ve gelir oranlarını yükselttiği konusunda herkes hemfikirdir. Google 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 kullandığı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ılarının sayısı nihayet azalmaya başlasa da 2015'te hâlâ baskın ağ teknolojisi olarak kullanılıyordu. 3G ve 4G ağlarının yaygınlığı ve kullanılabilirliği hızla artıyor ancak bunlarla ilişkili sahip olma maliyetleri ve ağ kısıtlamaları, yüz milyonlarca kullanıcı için hâlâ önemli bir faktör.

Bunlar, sayfa optimizasyonu için güçlü bağımsız değişkenlerdir.

Doğrudan geliştiricilerin müdahalesine gerek kalmadan site hızını artırmak 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 üzerinden ziyaret edilen sayfaları optimize etme ve daha birçok önemli dezavantajı vardır. Bu hizmetlerin çok popüler olması, web geliştiricilerinin hızlı ve hafif uygulamalar ile sayfalara yönelik yüksek kullanıcı talebini düzgün bir şekilde karşılayamadığının bir göstergesidir. Ancak bu hedefe ulaşmak karmaşık ve bazen zor bir yoldur.

Save-Data istek başlığı

Oldukça basit bir teknik, Save-Data istek başlığını kullanarak tarayıcının yardım etmesine izin vermektir. Bir web sayfası, bu başlığı tanımlayarak maliyet ve performans açısından kısıtlanmış kullanıcılara özelleştirilmiş ve optimize edilmiş bir kullanıcı deneyimi sunabilir.

Desteklenen tarayıcılar (aşağıda), kullanıcının *veri tasarrufu modunu etkinleştirmesine olanak tanır. Bu mod, tarayıcıya sayfayı oluşturmak için gereken veri miktarını azaltmak üzere bir dizi optimizasyon uygulama izni verir. Bu özellik kullanıma sunulduğunda veya reklamı yapı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çerikle ilgili diğer optimizasyonları uygulayan bir hizmet üzerinden yönlendirebilir.

Tarayıcı desteği

• Chrome 49 ve sonraki sürümlerde kullanıcı, mobil cihazlarda "Veri Tasarrufu" seçeneğini veya masaüstü tarayıcılarda "Veri Tasarrufu" uzantısını etkinleştirdiğinde Save-Data uygulamasını tanıtır.
• 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 reklamını yapar.
• Yandex 16.2 ve sonraki sürümler, masaüstü veya mobil tarayıcılarda Turbo modu etkinleştirildiğinde Save-Data reklamı yapar.

Save-Data ayarını algılama

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 de 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'ün etkin olup olmadığını algılamak da mümkündür:

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

Yalnızca Chrome, Android için Chrome ve Samsung İnternet tarayıcılarında uygulanan Network Information API'yi temsil ettiğinden, navigator nesnesinde connection nesnesinin bulunup bulunmadığı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 alternatif bir yanıt döndürebilir (farklı işaretleme, daha küçük resimler ve video vb.).

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 özelliğinin desteklendiğini bildirin ve bu özelliği kullanmalarını 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. Hafif uygulamaların daha az özellikli uygulamalar olmadığını unutmayın. Bu kişiler önemli işlevleri veya verileri atlamaz, yalnızca maliyetleri ve kullanıcı deneyimini daha iyi bilir. Ö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ı, tek seferde daha az sonuç döndürebilir, çok fazla medya içeren sonuçların sayısını sınırlayabilir veya sayfayı oluşturmak için gereken bağımlılıkların 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, daha hafif bir sayfa yanıtı sunmayı düşünün (ö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 fazla bilgi için önbelleğe etkileşim ile ilgili en iyi uygulamalara bakın.
4. Bir hizmet çalışanı kullanıyorsanız uygulamanız, Save-Data istek başlığının varlığını kontrol ederek veya navigator.connection.saveData mülkünün değerini kontrol ederek veri tasarrufu seçeneğinin ne zaman etkinleştirildiğini algılayabilir. Etkinleştirildiğinde, daha az bayt getirmesi için isteği yeniden yazıp yazamayacağınızı veya önceden getirilmiş bir yanıtı kullanıp kullanamayacağınızı düşünün.
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ı kullanan tüm kullanıcılara hafif deneyim sunmak isteyebilirsiniz. Buna karşılık, kullanıcının "hızlı" bir 4G bağlantısı kullanması, örneğin dolaşımdayken veri tasarrufu yapmak istemediği anlamına gelmez. 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 reklamı yapılır.

Yemek tarifleri

Save-Data ile yapabilecekleriniz, elde edebileceklerinizle sınırlıdır. Neler yapabileceğiniz hakkında fikir edinmeniz için birkaç kullanım alanına göz atalım. Bu yazıları 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 olup olmadığını kontrol etme

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 çalışmayabilir. Ayrıca, işaretlemeyi istemciye gönderilmeden önce değiştirmenin tek yolu sunucu tarafı algılamadır. Bu, Save-Data'nin en yararlı kullanım alanlarından bazılarında kullanılır.

Sunucu tarafı kodunda Save-Data üst bilgisini algılamaya yönelik söz dizimi, kullanılan dile bağlıdır ancak temel fikir tüm uygulama arka uçları için aynı olmalıdır. Örneğin, PHP'de istek başlıkları HTTP_ ile başlayan dizelerde $_SERVER süper küresel dizisinde depolanır. Bu, $_SERVER["HTTP_SAVE_DATA"] değişkeninin varlığını ve değerini kontrol ederek Save-Data üstbilgisini algılayabileceğ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 sayfadaki herhangi bir yerde kullanılabilir. Bu mekanizmayı açıkladığımıza göre, kullanıcıya gönderdiğimiz veri miktarını sınırlamak için bu mekanizmayı nasıl kullanabileceğimize dair birkaç örnek inceleyelim.

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

Web'deki resimler için yaygın bir kullanım alanı, resimleri ikili gruplar halinde yayınlamaktır: "Standart" ekranlar için bir resim (1x) ve yüksek çözünürlüklü ekranlar (ör. Retina Ekran). Bu yüksek çözünürlüklü ekran sınıfı, yüksek kaliteli 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) 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 daha az veri göndermenizi isteyen bir kullanıcıya uyum sağlamak için ne kadar az çaba gerektiğinin mükemmel bir örneğidir. İşaretleri arka uçta değiştirmeyi tercih etmiyorsanız Apache'in 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> öğesindeki 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 belirli kaynakları tamamen atlayabilirsiniz.

Gereksiz görüntüleri atlama

Web'deki bazı resim içerikleri 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 resimleri çıkarmak tek seçenek değildir. Ayrıca belirli yazı tipleri gibi kritik olmayan diğer kaynakları göndermekten vazgeçmek için Save-Data'yi de kullanabilirsiniz.

Gerekli olmayan web yazı tiplerini atlama

Web yazı tipleri genellikle bir sayfanın toplam yükünü genellikle resimler kadar oluşturmasa da oldukça popülerdir. Ayrıca önemli miktarda veri tüketmezler. Ayrıca, tarayıcıların yazı tiplerini getirme ve oluşturma şekli düşündüğünüzden daha karmaşıktır. FOIT, FOUT ve tarayıcı keşifleri gibi kavramlar, oluşturma işlemini incelikli bir işlem haline getirir.

Bu nedenle, daha basit kullanıcı deneyimleri isteyen kullanıcılar için gerekli olmayan web yazı tiplerini hariç tutmanız mantıklı olabilir. Save-Data, bu işlemi oldukça kolay hale getirir.

Örneğin, Google Yazı Tipleri'nden Fira Sans'ı sitenize eklediğinizi varsayalım. Fira Sans mükemmel bir gövde metni yazı tipidir ancak veri tasarrufu yapmaya çalışan kullanıcılar için çok önemli olmayabilir. Save-Data başlığı mevcutken <html> öğesine save-data sınıfı ekleyerek, başlangıçta zorunlu olmayan yazı tipini çağıran ancak Save-Data başlığı mevcutken bu yazı tipini 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ı siteye gelirse stil uygulanmış DOM'u hiç çağırmadığı için Fira Sans hiçbir zaman yüklenmez. Bunun yerine Arial kullanılır. Fira Sans kadar güzel olmasa da veri planlarını uzatmaya çalışan kullanıcılar için tercih edilebilir.

Ö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, zayıf 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. Uygulamanızın, açık bir kullanıcı işlemiyle aksini açıkça belirtene kadar kullanıcının tam ve sınırsız deneyim istediğini varsayması en iyisidir.

Site sahipleri ve web geliştiricileri olarak, veri ve maliyet kısıtlamaları olan kullanıcıların kullanıcı deneyimini iyileştirmek için içeriklerimizi yönetme sorumluluğunu üstlenelim.

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.