Save-Data ile hızlı ve hafif uygulamalar sunma

Dave Gash

Ilya Grigorik

Jeremy Wagner

Chrome, Opera ve Yandex tarayıcılarında kullanılabilen 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ına olanak tanır.

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ına ve akılda kalmasına olanak tanıdığı, dönüşümleri ve geliri artırdığı herkes tarafından kabul edilmektedir. Google'ın araştırmaları, "…optimize edilmiş sayfaların orijinal sayfadan dört kat daha hızlı yüklendiğini ve %80 daha az bayt kullandığını göstermiştir. Bu sayfalar çok daha hızlı yüklendiği için sayfalara gelen trafikte de %50 artış gördük."

2G bağlantılarının sayısı nihayet düşüşe geçmiş olsa da 2015'te 2G hâlâ baskın ağ teknolojisiydi. 3G ve 4G ağlarının yaygınlığı ve kullanılabilirliği hızla artıyor ancak ilgili 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ü argümanlardır.

Geliştiricinin doğrudan müdahalesi olmadan 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 önemli dezavantajları vardır: 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ı. Bu hizmetlerin popülerliği, web geliştiricilerin hızlı ve hafif uygulama ve sayfalara yönelik yüksek kullanıcı talebini gerektiği gibi karşılamadığının bir göstergesidir. Ancak bu hedefe ulaşmak karmaşık ve bazen zorlu 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. Web sayfaları, bu başlığı tanımlayarak maliyet ve performans kısıtlamaları olan kullanıcılara özel ve optimize edilmiş bir kullanıcı deneyimi sunabilir.

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

Tarayıcı desteği

• Chrome 49+, kullanıcı mobil cihazda "Veri Tasarrufu" seçeneğini veya masaüstü tarayıcılarda "Veri Tasarrufu" uzantısını etkinleştirdiğinde Save-Data reklam yayınlar.
• Opera 35+, kullanıcı masaüstünde "Opera Turbo" modunu veya Android tarayıcılarında "Veri tasarrufu" seçeneğini etkinleştirdiğinde Save-Data bildirir.
• Yandex 16.2+, masaüstü veya mobil tarayıcılarda Turbo modu etkinleştirildiğinde Save-Data reklamı yapar.

Save-Data ayarı algılanıyor

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

Kullanıcı tarayıcısında veri tasarrufu modunu etkinleştirdiğinde tarayıcı, giden tüm isteklere (hem HTTP hem de HTTPS) Save-Data istek başlığını ekler. Bu makalenin yazıldığı tarih itibarıyla tarayıcı, üstbilgide yalnızca bir *on- jetonu bildirir (Save-Data: on). Ancak bu, gelecekte diğer kullanıcı tercihlerini gösterecek şekilde genişletilebilir.

Ayrıca, JavaScript'te Save-Data özelliğinin etkin olup olmadığını tespit etmek de mümkündür:

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

navigator nesnesinde connection nesnesinin olup olmadığını kontrol etmek çok önemlidir. Bu nesne, yalnızca Chrome, Android için Chrome ve Samsung Internet tarayıcılarında uygulanan Network Information API'yi temsil eder. Buradan, yalnızca navigator.connection.saveData değerinin true değerine eşit olup olmadığını kontrol etmeniz gerekir. Bu koşulda, veri tasarrufu işlemlerini uygulayabilirsiniz.

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

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

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

Uygulamayla ilgili ipuçları ve en iyi uygulamalar

1. Save-Data kullanırken bunu destekleyen bazı kullanıcı arayüzü cihazları sağlayın ve kullanıcıların deneyimler arasında kolayca geçiş yapmasına izin verin. Ö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 uygun istemler ve sezgisel açma/kapatma düğmeleri veya onay kutularıyla modu tanımlamasına ve seçmesine izin verin.
   • Veri tasarrufu modu seçildiğinde bunu duyurun ve devre dışı bırakıp istenirse tam deneyime geri dönmek için kolay ve belirgin bir yol sunun.
2. Hafif uygulamaların daha az özellikli uygulamalar olmadığını unutmayın. Önemli işlevleri veya verileri atlamazlar, yalnızca ilgili maliyetlerin ve kullanıcı deneyiminin daha fazla farkındadırlar. Örneğin:
   • Bir fotoğraf galerisi uygulaması, daha düşük çözünürlüklü önizlemeler sunabilir veya daha az kod içeren bir bant mekanizması kullanabilir.
   • Arama uygulaması, tek seferde daha az sonuç döndürebilir, medya ağırlıklı 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 bu başlık 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ırma uygulayın vb.).
   • Save-Data başlığına göre alternatif bir yanıt sunuyorsanız bunu Vary listesine (Vary: Save-Data) eklemeyi unutmayın. Böylece, yukarı akış önbelleklerine bu sürümü yalnızca Save-Data istek başlığı mevcutsa önbelleğe almaları ve sunmaları gerektiğini bildirmiş olursunuz. Daha fazla bilgi için önbelleklerle etkileşim ile ilgili en iyi uygulamalara bakın.
4. Hizmet çalışanı kullanıyorsanız uygulamanız, Save-Data istek başlığının varlığını veya navigator.connection.saveData özelliğinin değerini kontrol ederek veri tasarrufu seçeneğinin etkinleştirilip etkinleştirilmediğini algılayabilir. Etkinleştirilmişse isteği daha az bayt getirecek şekilde yeniden yazıp yazamayacağınızı veya önceden getirilmiş bir yanıtı kullanıp kullanamayacağınızı değerlendirin.
5. Save-Data'i, kullanıcının bağlantı türü ve teknolojisiyle ilgili bilgiler gibi diğer sinyallerle destekleyebilirsiniz (NetInfo API'ye bakın). Örneğin, Save-Data etkin olmasa bile 2G bağlantısı kullanan tüm kullanıcılara basit deneyimi sunmak isteyebilirsiniz. Bununla birlikte, kullanıcının "hızlı" bir 4G bağlantısı kullanıyor olması, veri tasarrufu yapmak istemediği anlamına gelmez. Örneğin, dolaşımdayken veri tasarrufu yapmak isteyebilir. 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ının belleği, navigator.deviceMemory istemci ipucunda da bildirilir.

Yemek tarifleri

Save-Data ile yapabilecekleriniz yalnızca hayal gücünüzle sınırlıdır. Neler yapabileceğiniz hakkında fikir edinmeniz için birkaç kullanım alanını inceleyelim. Bu bölümü okurken aklınıza başka kullanım alanları da gelebilir. Denemeler yaparak neler yapabileceğinizi görebilirsiniz.

Sunucu tarafı kodunda Save-Data kontrol ediliyor

Save-Data durumu, JavaScript'te navigator.connection.saveData özelliği aracılığıyla tespit edebileceğiniz bir durum olsa da bazen sunucu tarafında tespit edilmesi tercih edilir. JavaScript bazı durumlarda çalışmayabilir. Ayrıca, sunucu tarafı algılama, işaretlemeyi istemciye gönderilmeden önce değiştirmenin tek yoludur. Bu, Save-Data'nin en faydalı kullanım alanlarından bazılarında yer alır.

Sunucu tarafı kodunda Save-Data başlığını algılamaya yönelik söz dizimi, kullanılan dile bağlıdır ancak temel mantık tüm uygulama arka uçları için aynıdır. Örneğin PHP'de istek başlıkları, HTTP_ ile başlayan dizinlerdeki $_SERVER süper global dizisinde depolanır. Bu, $_SERVER["HTTP_SAVE_DATA"] değişkeninin varlığını ve değerini şu ş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 yerleştirirseniz $saveData değişkeni Save-Data durumunu içerir ve sayfada her yerde kullanılabilir. Bu mekanizmayı açıkladıktan sonra, kullanıcıya gönderdiğimiz veri miktarını sınırlamak için bunu 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 yayınlama

Web'deki resimler için yaygın bir kullanım alanı, resimleri ikişerli gruplar halinde sunmaktır: "Standart" ekranlar (1x) için bir resim ve yüksek çözünürlüklü ekranlar (ör. Retina Ekran) için iki kat daha büyük (2x) başka bir resim. Bu yüksek çözünürlüklü ekran sınıfı, üst düzey 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 daha akıllıca olabilir. Save-Data başlığı mevcut olduğunda bunu başarmak için istemciye gönderdiğimiz işaretlemeyi değiştiririz:

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ı, sizden özellikle daha az veri göndermenizi isteyen birinin talebini yerine getirmenin ne kadar kolay olduğunu gösteren mükemmel bir örnektir. Arka uçta 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 az yapılandırmayla bunu nasıl başaracağınıza dair örnekler vardır.

Bu kavramı, <html> öğesine bir sınıf ekleyerek CSS background-image özelliklerine de uygulayabilirsiniz:

<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 belirli kaynakları tamamen çıkarabilirsiniz.

Gerekli olmayan görüntüleri kullanmayın

Web'deki bazı resim içerikleri gerekli değildir. Bu tür görseller içeriğe hoş bir hava katabilir ancak kotalı veri planlarından mümkün olduğunca fazla yararlanmaya çalışan kullanıcılar tarafından tercih edilmeyebilir. Save-Data için belki de en basit kullanım alanında, daha önceki PHP algılama kodunu kullanabilir ve gerekli olmayan görsel işaretlemelerini 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
}

Bu tekniğin belirgin bir etkisi olabilir. Aşağıdaki resimde bu etkiyi görebilirsiniz:

Save-Data yokken yüklenen kritik olmayan görüntülerin, Save-Data varken atlanan aynı görüntülerle karşılaştırması.

Elbette tek seçenek resimleri kaldırmak değildir. Ayrıca, belirli yazı tipleri gibi kritik olmayan diğer kaynakları göndermemek için Save-Data üzerinde işlem yapabilirsiniz.

Gerekli olmayan web yazı tiplerini atlayın

Web yazı tipleri genellikle belirli bir sayfanın toplam yükünün görseller kadar büyük bir kısmını oluşturmasa da oldukça popülerdir. Ayrıca, önemsiz miktarda veri de 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ı sezgisel yöntemleri gibi kavramlar, oluşturmayı ayrıntılı bir işlem haline getirir.

Bu nedenle, daha yalın kullanıcı deneyimleri isteyen kullanıcılar için gerekli olmayan web yazı tiplerini hariç tutmak isteyebilirsiniz. Save-Data sayesinde bu işlem oldukça kolay bir şekilde yapılabilir.

Örneğin, sitenize Google Fonts'tan Fira Sans'ı eklediğinizi varsayalım. Fira Sans, gövde metni için mükemmel bir yazı tipidir ancak veri tasarrufu yapmaya çalışan kullanıcılar için o kadar önemli olmayabilir. Save-Data başlığı mevcut olduğunda <html> öğesine save-data sınıfı ekleyerek, başlangıçta gerekli olmayan yazı karakterini çağıran ancak Save-Data başlığı mevcut olduğunda bu yazı karakterini 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;
}

Bu yaklaşımı kullanarak Google Fonts'tan gelen <link> snippet'ini olduğu gibi bırakabilirsiniz. Tarayıcı, CSS kaynaklarını (web yazı tipleri dahil) tahmine dayalı içerik olarak yükler. Bunun için önce stilleri DOM'a uygular, ardından HTML öğelerinin stil sayfasındaki kaynaklardan herhangi birini çağırıp çağırmadığını kontrol eder. Save-Data etkinleştirilmiş bir kullanıcı sayfanızı ziyaret ederse Fira Sans hiçbir zaman yüklenmez çünkü stil uygulanmış DOM bu yazı tipini hiçbir zaman çağırmaz. Bunun yerine Arial kullanılır. Fira Sans kadar güzel olmasa da veri planlarını idareli kullanmaya çalışan kullanıcılar için tercih edilebilir.

Özet

Save-Data başlığında çok fazla nüans yoktur; açık veya kapalıdır ve uygulama, nedeni ne olursa olsun ayarına göre uygun deneyimler sunma yükünü taşır.

Örneğin, bazı kullanıcılar bağlantı zayıf olsa bile uygulama içeriğinin veya işlevinin kaybolacağından şüphelenirse veri tasarrufu moduna izin vermeyebilir. Öte yandan, bazı kullanıcılar iyi bir bağlantı durumunda bile sayfaları mümkün olduğunca küçük ve basit tutmak için bu özelliği etkinleştirebilir. Uygulamanızın, açık bir kullanıcı işlemiyle aksi belirtilene 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 deneyimini iyileştirmek için içeriğimizi yönetme sorumluluğunu üstlenelim.

Save-Data hakkında daha fazla bilgi ve mükemmel pratik örnekler için Kullanıcılarınıza Yardımcı Olun Save Data başlıklı makaleyi inceleyin.