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ı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ı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 idi. 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ü argümanlardır.

Geliştiricinin doğrudan müdahalesi olmadan site hızını artırmanın alternatif yöntemleri vardır (ör. proxy tarayıcılar ve kod dönüştürme hizmetleri). 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 birçok önemli dezavantajı vardır. 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ı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ümler, 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ını yapar.
• 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 istek üstbilgisini 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 belirtir.

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 makalenin yazıldığı tarih itibarıyla tarayıcı, üstbilgi bölümünde yalnızca bir *on jetonu (Save-Data: on) reklamını yapmaktadır ancak bu, 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, yalnızca navigator.connection.saveData değerinin true değerine eşit olup olmadığını kontrol etmeniz gerekir. Bu durumda, veri kaydetme işlemlerini uygulayabilirsiniz.

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

Uygulamanız bir hizmet çalışanı kullanıyorsa isteği başlıkları 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 alternatif bir yanıt döndürebilir (farklı işaretleme, daha küçük resimler ve video vb.).

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

Uygulamayla ilgili ipuçları ve en iyi uygulamalar

1. Save-Data kullanırken, bu özelliği 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 uygun istemler ve sezgisel açma/kapatma düğmeleri veya onay kutularıyla modu 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 belirgin bir yolunu açıklayın.
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 kullanan 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 başlığına dayalı alternatif bir yanıt sunuyorsanız yayın öncesi önbellekleri bu sürümü yalnızca Save-Data istek başlığı mevcutsa önbelleğe almaları ve sunmaları gerektiğini belirtmek için 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. Etkinse isteği daha az bayt getirmek için yeniden yazıp yazamayacağınızı veya önceden getirilmiş bir yanıtı kullanıp kullanamayacağınızı düşünün.
5. Save-Data'ü, kullanıcının bağlantı türü ve teknolojisi hakkındaki bilgiler gibi diğer sinyallerle destekleyebilirsiniz (NetInfo API bölümüne bakın). Ö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 fazla uyum sağlamak için Save-Data'ün varlığını Device-Memory istemci ipucu ile artırabilirsiniz. Kullanıcı cihaz belleği, navigator.deviceMemory istemci ipucunda da reklamı yapılır.

Yemek tarifleri

Save-Data aracılığıyla elde edebileceğiniz sonuçlar 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ına göz atalım. Bu makaleyi okurken kendi kullanım alanlarınızı düşünebilirsiniz. Dilediğiniz denemeleri yaparak neler yapabileceğinizi keşfedin.

Sunucu tarafı kodunda Save-Data olup olmadığını kontrol etme

Save-Data durumu, navigator.connection.saveData mülkü aracılığıyla JavaScript'te algılayabileceğiniz bir durumdur ancak 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ıktan sonra, kullanıcıya gönderdiğimiz veri miktarını sınırlamak için 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 Görüntülü Reklam Ağı). 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 Üstbilgisi mevcutken bunu yapmak 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'inmod_rewrite URL yeniden yazma modülü gibi bir URL yeniden yazma modülü kullanarak da aynı sonucu elde edebilirsiniz. Nispeten az yapılandırmayla bu hedefe nasıl ulaşılacağına dair örnekler vardır.

Bu kavramı, <html> öğesine bir sınıf ekleyerek CSS background-image özelliklerine 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örseller, içeriğe güzel bir katkı sunabilir ancak kotalı veri planlarından en iyi şekilde yararlanmaya çalışanlar için istenmeyebilir. Save-Data'ün belki de en basit kullanım alanında, daha önceki PHP algılama kodunu kullanabilir ve gerekli olmayan resim işaretlemesini 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 resimde de görebileceğiniz gibi bu teknik kesinlikle belirgin bir etkiye sahip olabilir:

Veri Tasarrufu etkin olmadığında yüklenen kritik olmayan görüntülerle, Veri Tasarrufu etkin olduğunda aynı görüntülerin atlanması karşılaştırması.

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 belirli bir sayfanın toplam yükünün neredeyse görseller kadarını oluşturmasa da yine de 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ı Stilleri'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;
}

Bu yaklaşımı kullanarak Google Fonts'taki <link> snippet'ini yerinde bırakabilirsiniz. Bunun nedeni, tarayıcının önce DOM'a stil uygulayarak ve ardından herhangi bir HTML öğesinin stil sayfasında herhangi bir kaynağı çağırıp çağırmadığını kontrol ederek CSS kaynaklarını (web yazı tipleri dahil) varsayımsal olarak yüklemesidir. 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ığında çok fazla ayrıntı yoktur; açık veya kapalıdır ve uygulama, ayarından bağımsız olarak uygun deneyimleri sunma yükünü taşır.

Örneğin, bazı kullanıcılar, zayıf bağlantı durumunda bile uygulama içeriği veya işlevinde kayıp yaşanacağından şüphelenirse veri tasarrufu moduna izin vermeyebilir. Buna karşılık, bazı kullanıcılar iyi bir bağlantı durumunda bile sayfaları olabildiğince küçük ve basit tutmak için bu özelliği her zaman etkinleştirebilir. Uygulamanızın, açık bir kullanıcı işlemiyle aksi açıkça belirtilmediği sürece 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 mükemmel pratik örnekler için Kullanıcılarınıza Save Data Yardım Edin başlıklı makaleyi inceleyin.