Veri Tasarrufu ile Hızlı ve Hafif Uygulamalar Sunma

Dave Gash

Ilya Grigorik

Jeremy Wagner

Chrome, Opera ve Yandex tarayıcılarda kullanılabilen Save-Data istemci ipucu isteği başlığı sayesinde geliştiriciler, tarayıcılarında veri tasarrufu modunu etkinleştiren kullanıcılara daha hafif ve hızlı uygulamalar sunabilir.

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ığı konusunda herkes hemfikirdir. Google araştırmaları, "…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 düşüşe geçse de 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 sahiplik 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.

Proxy tarayıcılar ve kod dönüştürme hizmetleri gibi, geliştiricinin doğrudan katılımı olmadan site hızını artırmanın alternatif yöntemleri 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 arama sonucu üzerinden ziyaret edilen sayfaları optimize etme vb. Bu hizmetlerin popülerliği, web geliştiricilerin hızlı ve hafif uygulamalar ile sayfalara yönelik yüksek kullanıcı talebini yeterince karşılamadığını gösterir. Ancak bu hedefe ulaşmak karmaşık ve bazen zorlu bir süreçtir.

Save-Data istek başlığı

Oldukça basit bir teknik olarak, Save-Data istek başlığını kullanarak tarayıcının yardımcı olmasına izin verebilirsiniz. Bir web sayfası bu başlığı tanımlayarak maliyet ve performans kısıtlamaları olan kullanıcılara özel ve optimize edilmiş bir kullanıcı deneyimi sunabilir.

Aşağıda listelenen desteklenen tarayıcılar, 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 amacıyla 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 ya da istekleri, resim ve metin kaynağı sıkıştırma gibi içeriğe özel başka optimizasyonlar uygulayan bir hizmet üzerinden yönlendirebilir.

Tarayıcı desteği

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

Save-Data ayarını algılama

Uygulamanız, kullanıcılara ne zaman "basit" deneyim sunacağını belirlemek için Save-Data istemci ipucu istek üstbilgisinin olup olmadığını kontrol edebilir. Bu istek başlığı, yüksek aktarım maliyetleri, yavaş bağlantı hızları veya başka nedenlerle istemcinin veri kullanımını azaltma tercihini 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ığı sırada tarayıcı, üstbilgide yalnızca bir *on-token reklamı yayınlıyordu (Save-Data: on). Ancak bu durum, gelecekte diğer kullanıcı tercihlerini belirtecek şekilde genişletilebilir.

Ayrıca, JavaScript'te Save-Data özelliğinin 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.
  }
}

connection nesnesinin navigator nesnesi içinde bulunup bulunmadığını kontrol etmek ö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 sonra, yalnızca navigator.connection.saveData değerinin true değerine eşit olup olmadığını kontrol etmeniz gerekir. Bu durumda, veri tasarrufuyla ilgili tüm işlemleri uygulayabilirsiniz.

Chrome masaüstü sürümü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 alakalı mantığı uygulayabilir. Alternatif olarak, sunucu Save-Data istek başlığında reklamı yapılan tercihleri arayabilir ve farklı bir yanıt (farklı işaretleme, daha küçük resimler ve video vb.) döndürebilir.

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

Uygulama ipuçları ve en iyi uygulamalar

1. Save-Data kullanılı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'nın desteklendiğini bildirin ve kullanmaya teşvik edin.
   • Kullanıcıların uygun istemler ve sezgisel açma/kapatma düğmeleri veya onay kutularıyla modu tanımlayıp seçmelerine izin verin.
   • Veri tasarrufu modu seçildiğinde, bu modu devre dışı bırakmanın ve istenirse tam deneyime geri dönmenin kolay ve belirgin bir yolunu duyurun ve sunun.
2. Basit uygulamaların daha az önemli olmadığını unutmayın. Bu tür uygulamalar önemli işlevleri veya verileri atlamaz. Yalnızca ilgili maliyetler ve kullanıcı deneyimi konusunda daha bilinçlidir. Örneğin:
   • Bir fotoğraf galerisi uygulaması, daha düşük çözünürlüklü önizlemeler sunabilir veya daha az kod içeren bir rulo mekanizması kullanabilir.
   • Bir arama uygulaması, tek seferde daha az sonuç döndürebilir, medya açısından zengin sonuçların sayısını sınırlayabilir veya sayfanın oluşturulması 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. Örneğin, 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 üst bilgisine göre alternatif bir yanıt sunuyorsanız bu yanıtı 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. Bir hizmet çalışanı kullanıyorsanız uygulamanız, Save-Data istek başlığının varlığını kontrol ederek veya navigator.connection.saveData özelliğinin değerini kontrol ederek veri tasarrufu seçeneğinin etkin olup olmadığını 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'yı kullanıcının bağlantı türü ve teknolojisiyle ilgili bilgiler gibi diğer sinyallerle artırmayı düşünebilirsiniz (bkz. NetInfo API). Örneğin, Save-Data etkin olmasa bile 2G bağlantısı kullanan tüm kullanıcılara hafif deneyimi sunmak isteyebilirsiniz. Aksine, kullanıcının "hızlı" bir 4G bağlantısı kullanması, veri tasarrufu yapmak istemediği anlamına gelmez (ör. 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ının belleği, navigator.deviceMemory istemci ipucunda da reklamı yapılır.

Yemek tarifleri

Save-Data ile yapabilecekleriniz yalnızca hayal gücünüzle sınırlıdır. Neler yapabileceğiniz hakkında fikir edinmek için birkaç kullanım alanına göz atalım. Bu makaleyi okurken kendi kullanım alanlarınızı da belirleyebilirsiniz. Bu nedenle, denemeler yapmaktan ve neler yapabileceğinizi 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 sunucu tarafında algılamak bazen daha iyi olabilir. JavaScript bazı durumlarda çalışmayabilir. Ayrıca, sunucu tarafı algılama, işaretlemenin istemciye gönderilmeden önce değiştirilmesinin tek yoludur. Bu, Save-Data'nin en faydalı kullanım alanlarından bazılarında yer alı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 herhangi bir uygulama arka ucu için aynı olmalıdır. Örneğin, PHP'de istek başlıkları, $_SERVER süper genel dizisinde HTTP_ ile başlayan dizinlerde depolanır. Bu, Save-Data değişkeninin varlığını ve değerini aşağıdaki gibi kontrol ederek $_SERVER["HTTP_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ü herhangi bir biçimlendirme istemciye gönderilmeden önce yerleştirirseniz $saveData değişkeni Save-Data durumunu içerir ve sayfada herhangi bir yerde kullanılabilir. Bu mekanizmayı açıkladıktan 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 resimlerle ilgili 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) 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 iyi olabilir. Save-Data üstbilgisi mevcutken bunu sağlamak için müşteriye gönderdiğimiz biçimlendirmeyi 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ı, özellikle daha az veri göndermenizi isteyen bir kullanıcının isteğini karşılamak için ne kadar az çaba gerektiğini 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. Bunu nispeten az yapılandırmayla nasıl yapabileceğinize dair örnekler vardır.

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

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

Buradan, resimlerin nasıl sunulduğunu 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ı tamamen atlayabilirsiniz.

Gereksiz görüntüleri atlayın

Web'deki bazı resim içerikleri gereksizdir. Bu tür görüntüler içeriklere hoş birer ek olsa da, ücretli veri planlarından en iyi şekilde yararlanmaya çalışan kullanıcılar için istenmeyebilir. Belki de Save-Data'nın en basit kullanım alanında, daha önce kullandığımız PHP algılama kodunu kullanabilir ve gereksiz resim işaretlemelerini 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
}

Bu tekniğin kesinlikle belirgin bir etkisi olabilir. Aşağıdaki şekilde bunu görebilirsiniz:

Veri tasarrufu özelliği yokken yüklenen kritik olmayan görüntülerin, veri tasarrufu özelliği varken aynı görüntülerin yüklenmemesiyle karşılaştırılması.

Elbette, resimleri atlamak tek olasılık değildir. Ayrıca, belirli yazı tipleri gibi diğer kritik olmayan kaynakların gönderilmesini önlemek için Save-Data seçeneğini de kullanabilirsiniz.

Gereksiz web yazı tiplerini atlama

Web yazı tipleri genellikle belirli bir sayfanın toplam yükünün neredeyse tamamını oluşturmasa da (görsellerde olduğu gibi) 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ı sezgileri gibi kavramlar, oluşturma işlemini ayrıntılı bir hale 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, bu işlemi oldukça kolaylaştırır.

Örneğin, sitenize Google Fontlar'dan Fira Sans'ı eklediğinizi varsayalım. Fira Sans, gövde metni için mükemmel bir yazı tipi olsa da veri kaydetmeye çalışan kullanıcılar için o kadar önemli olmayabilir. Save-Data üstbilgisi mevcutken <html> öğesine save-data sınıfı ekleyerek, önce gerekli olmayan yazı tipini çağıran ancak Save-Data üstbilgisi mevcut olduğunda 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;
}

Bu yaklaşımı kullanarak Google Fonts'taki <link> snippet'ini yerinde bırakabilirsiniz. Tarayıcı, önce stilleri DOM'a uygulayıp ardından HTML öğelerinin stil sayfasındaki kaynaklardan herhangi birini çağırıp çağırmadığını kontrol ederek CSS kaynaklarını (web yazı tipleri dahil) spekülatif olarak yükler. Bir kullanıcı Save-Data açıkken sayfaya gelirse Fira Sans, stil verilmiş DOM tarafından hiçbir zaman çağrılmadığı için yüklenmez. Bunun yerine Arial kullanılır. Fira Sans kadar güzel olmasa da veri planlarını genişletmeye çalışan kullanıcılar için tercih edilebilir.

Özet

Save-Data başlığı çok fazla ayrıntı içermez. Bu başlık ya açıktır ya da kapalıdır ve uygulamalar, ayarına bağlı olarak uygun deneyimler sunma yükümlülüğünü, nedene bakılmaksızın üstlenir.

Örneğin, bazı kullanıcılar bağlantı kalitesinin düşük olduğu durumlarda bile uygulama içeriğinde veya işlevinde kayıp olacağından şüphelenirlerse veri tasarrufu moduna izin vermeyebilir. Bununla birlikte, bazı kullanıcılar iyi bağlantı koşullarında bile sayfaları mümkün olduğunca küçük ve basit tutmak için bu özelliği varsayılan olarak etkinleştirebilir. Kullanıcı açık bir işlemle aksi yönde net bir belirtide bulunana kadar uygulamanızın, kullanıcının tam ve sınırsız deneyimi istediğini varsayması en iyisidir.

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

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