Veri Tasarrufu ile Hızlı ve Hafif Uygulamalar Sunma

Dave Gash

Ilya Grigorik

Jeremy Wagner

Save-Data istemci ipucu isteği başlık Chrome, Opera ve Yandex tarayıcılarda sunulan diğer olanaklar sayesinde geliştiricilerin daha hızlı uygulamalar sunar.

Basit sayfalara duyulan ihtiyaç

Daha hızlı ve daha hafif web sayfalarının kullanıcılara daha tatmin edici bir deneyim sunacağını herkes kabul eder içeriğin daha iyi anlaşılmasını ve elde tutulmasını sağlamak daha fazla dönüşüm ve gelir elde ettik. Google araştırma, reklamverenlerin "...optimize edilmiş sayfalar, orijinal sayfadan dört kat daha hızlı yüklenir ve %80 daha az bayt olabilir. Bu sayfalar çok daha hızlı yüklendiğinden, dönüşüm hacminde% 50'lik bir artış trafik artışı sağlıyor."

Ve 2G bağlantılarının sayısı nihayetinde reddet, 2G hâlâ baskın ağdı teknoloji 2015 yılında başladı. 3G ve 4G ağlarının kullanım oranı ve kullanım oranı artıyor ancak bununla ilişkili sahiplik maliyetleri ve ağ kısıtlamaları, yüz milyonlarca kullanıcı için çok önemli bir faktör.

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

Doğrudan geliştirici olmadan site hızını artırmak için alternatif yöntemler de vardır dahil olmak üzere tüm başka müdahaleleri devreye sokmalarına izin verilmez. Her ne kadar bazı dezavantajları vardır. Örneğin, (bazen kabul edilemez) resim ve metin sıkıştırma, işlenememe güvenli (HTTPS) sayfalar, yalnızca arama sonucu aracılığıyla ziyaret edilen sayfaları optimize etme ve daha fazla. Bu hizmetlerin çok popüler olması, web'in geliştiriciler, hızlı ve hafif uygulama içi reklamlarla ilgili yüksek kullanıcı talebini uygulamalar ve sayfalar. Ancak bu hedefe ulaşmak karmaşık bir süreçtir zorlu bir yol katetmiştim.

Save-Data istek başlığı

Oldukça basit bir teknik de, Save-Data istek başlığı. Bir web sayfası, bu başlığı tanımlayarak Ayrıca, maliyet ve performans kısıtlamalı bir uygulama için optimize edilmiş bir kullanıcı deneyimi sunar yardımcı olur.

Desteklenen tarayıcılar (aşağıda), kullanıcının indirgemek için tarayıcının bir dizi optimizasyon uygulamasına oluşturmak için gereken veri miktarıdır. Bu özellik kullanıma sunulduğunda veya alternatif olarak, tarayıcı daha düşük çözünürlüklü resimler isteyebilir, veya istekleri başka uygulamaları kullanan bir hizmet üzerinden yönlendirin içeriğe özgü optimizasyonlar (ör. resim ve metin kaynağı sıkıştırma)

Tarayıcı desteği

• Chrome 49+, kullanıcı Save-Data reklamı "Veri Tasarrufu"nu etkinleştirir veya "Veri Tasarrufu" öğesini seçin .
• Opera 35+, kullanıcı "Opera" özelliğini etkinleştirdiğinde Save-Data adlı uygulamanın reklamını yapar Turbo" moddayken veya "Veri tasarrufu" seçenek en iyi uygulamaları paylaşacağız.
• Yandex 16.2+, Turbo olduğunda Save-Data reklam yayınlar modu masaüstü veya mobil cihazlarda etkin daha fazla bilgi edinin.

Save-Data ayarı algılanıyor

"Işık"ın ne zaman teslim edileceğini belirlemek için kullanıcılara sunduğunuz deneyim, uygulaması, Save-Data istemci ipucu istek başlığını kontrol edebilir. Bu istek başlığı, istemcinin yüksek aktarım maliyetleri, yavaş bağlantı hızları veya başka nedenler olabilir.

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) gönderir. Bu yazının hazırlandığı an itibarıyla tarayıcı, başlıkta yalnızca bir *on-jetonunun tanıtımını yapar (Save-Data: on) ancak bu süre ileride diğer kullanıcıları da tercihler.

Ayrıca, JavaScript'te Save-Data özelliğinin etkin olup olmadığı tespit edilebilir:

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

navigator içinde connection nesnesinin olup olmadığı kontrol ediliyor nesnesidir. Ağ Bilgi API'sini temsil ettiği için bu nesne Google Chrome, Android için Chrome ve Samsung İnternet tarayıcılarında uygulanır. Başlangıç fiyatı varsa yalnızca navigator.connection.saveData değerinin eşit olup olmadığını kontrol etmeniz true ve bu koşulda istediğiniz veri kaydetme işlemlerini uygulayabilirsiniz.

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

Uygulamanız bir hizmet kullanıyorsa bir görev varsa, Deneyimi optimize etmek için istek başlıklarını inceleyin ve ilgili mantığı uygulayın. Alternatif olarak, sunucu reklamı yapılan tercihleri Save-Data istek başlığı ve alternatif bir yanıt döndürüyor — farklı küçük resimler, videolar vb. kullanabilirsiniz.

İpucu: Apache için PageSpeed veya Nginx kullanıyorsanız Sayfalarınızı optimize etmek için bu sayfaya bakın tartışma için Save-Data tasarruf edin._

Kullanımla 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 kullandığınızdan emin olun. Örnek:
   • Kullanıcılara Save-Data hizmetinin desteklendiğini bildirin ve onları kullanmaya teşvik edin.
   • Kullanıcıların modu belirleyip seçmesine olanak tanıyan uygun istemler ve kolay kullanılabilen açma/kapatma düğmeleri veya onay kutularıdır.
   • Veri tasarrufu modu seçildiğinde, kullanımı kolay ve bariz bir şekilde duyurun ve isterseniz tam deneyime geri dönmek için kullanabileceğiniz bir yöntemdir.
2. Basit uygulamaların daha basit uygulamalar olmadığını unutmayın. Bilmiyorlar önemli işlevsellik ve verileri göz ardı ediyor, yalnızca yazılımın ve kullanıcı deneyimini tartışıyorsunuz diyelim. Örnek:
   • Bir fotoğraf galerisi uygulaması daha düşük çözünürlüklü önizlemeler sunabilir veya çok sayıda kod içeren atlı karınca mekanizmasını kullanır.
   • Bir arama uygulaması aynı anda daha az sonuç döndürebilir. Bu nedenle, veya verilerin yoğun bir şekilde oluşturulması için gereken bağımlılık sayısını yapalım.
   • Haber odaklı bir site daha az haber gösterebilir, daha az popüler kategorileri atlayabilir, veya daha küçük medya önizlemeleri sunabilirsiniz.
3. Save-Data istek başlığını kontrol etmek ve aşağıdakileri değerlendirmek için sunucu mantığını sağlayın: etkinleştirildiğinde alternatif ve daha hafif bir sayfa yanıtı sağlar — ör. gereken kaynakların ve bağımlılıkların sayısını azaltmak, daha agresif yaklaşımlar uygulamak kaynak sıkıştırma vb.
   • Save-Data başlığına dayalı alternatif bir yanıt sunuyorsanız bunu Varyant listesine (Vary: Save-Data) eklemeyi unutmayın. bu sürümü yalnızca Save-Data istek başlığı mevcut. Daha fazla bilgi için en iyi uygulamalara göz atın şunun için: önbelleklerle etkileşim.
4. Service Worker kullanıyorsanız uygulamanız veri kaydedildiğinde bunu algılayabilir. seçeneği, Save-Data isteğinin olup olmadığı kontrol edilerek etkinleştirilir veya navigator.connection.saveData değerini kontrol ederek Etkinleştirilmişse getirme isteği göndermek için isteği yeniden yazıp yazamayacağınızı veya önceden getirilmiş bir yanıtı kullanın.
5. Save-Data özelliğini, kullanıcının bağlantı türü ve teknolojisi (bkz. NetInfo API) tıklayın. Örneğin, eğitime olsa bile 2G bağlantısı olan her kullanıcıya basit bir deneyim sunmak Save-Data etkin değil. Öte yandan, kullanıcının "hızlı" olması 4G veri kaydetmekle ilgilenmedikleri anlamına gelmez. kullanabilirsiniz. Ayrıca, sosyal becerilerin Kullanıcılara daha iyi uyum sağlamak için Device-Memory istemci ipucunu içeren Save-Data sınırlı belleğe sahip cihazlar. Kullanıcı cihaz belleği, navigator.deviceMemory istemci ipucu.

Yemek tarifleri

Save-Data aracılığıyla yapabilecekleriniz, yapabileceklerinizle sınırlıdır ekleyebilirsiniz. Yapılabilecekler konusunda size bir fikir vermek için, durumlarda işe yarar. Bunları okurken başka kullanım alanlarını ele alabilirsiniz. denemekten ve nelerin mümkün olduğunu görmekten çekinmeyin!

Sunucu tarafı kodunda Save-Data kontrol ediliyor

Save-Data durumu JavaScript'te algılayabileceğiniz bir şeyken navigator.connection.saveData mülkündeki bu özellik, sunucu tarafında algılandığında . JavaScript bazı durumlarda yürütülemeyebilir. Ayrıca, sunucu tarafı algılama, işaretlemeyi web sitesine gönderilmeden önce değiştirmenin tek yoludur. Save-Data ürününün en faydalı kullanım alanlarından bazılarına dahil oldu.

Sunucu tarafı kodunda Save-Data üstbilgisinin algılanması için özel söz dizimi kullanılan dile göre değişir, ancak temel fikir tekrarlandığından emin olun. Örneğin, PHP'de istek başlıkları $_SERVER süper global dizi: dizinlerde HTTP_ ile başlayan fiyatlar. Bu, Save-Data üst bilgisini şu şekilde algılayabileceğiniz anlamına gelir: $_SERVER["HTTP_SAVE_DATA"] değişkeninin varlığını ve değerini kontrol etme Örneğin:

// 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ü, müşteriye herhangi bir işaretleme gönderilmeden önce yaparsanız $saveData değişkeni Save-Data durumunu içerir ve kullanmaya başlayın. Bu mekanizmanın örneğiyle birlikte, başarılı olmak için kullanıcıya ne kadar veri göndereceğimizi öğrenmek için bu verileri nasıl kullanabileceğimizi belirler.

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

Web'deki resimler için yaygın bir kullanım alanı, resimlerin iki kişilik gruplar halinde sunulmasıdır: "Standart" için bir resim ekran (1x) ve iki kat daha büyük başka bir resim Yüksek çözünürlüklü ekranlar (ör. Retina Görüntülü Reklam Ağı) tıklayın. Bu yüksek sınıf ekranların yalnızca üst segment cihazlarla sınırlı olması gerekmez ve yaygınlaşmaya başladı. Daha hafif bir uygulama deneyiminin bu platformlara daha düşük çözünürlüklü (1x) resimler göndermek mantıklı olabilir. daha büyük (2x) varyantlara kıyasla Bunu başarmak için Save-Data üstbilgi varsa müşteriye 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ı, bir müşteriye ulaşmak için ne kadar az çaba daha az veri göndermenizi isteyebilir. Beğenmezseniz arka uçtaki işaretlemeyi değiştirdiğinizde aynı sonucu, Apache'nin mod_rewrite değerleridir. Orada proje yönetimi alanında bu yapılandırmaya çalışın.

Bu kavramı aşağıdaki gibi CSS background-image mülklerine de genişletebilirsiniz: <html> öğesine bir sınıf eklemeniz yeterlidir:

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

Buradan, save-data sınıfını<html> CSS'yi kullanarak resimlerin yayınlanma şeklini değiştirebilirsiniz. Düşük çözünürlüklü arka plan gönderebilirsiniz yukarıdaki HTML örneğinde gösterildiği gibi yüksek çözünürlüklü ekranlara bir araya getirmek.

Gereksiz görüntüleri kullanmayın

Web'deki bazı görsel içerikler kesinlikle gerekli değildir. Bu tür görüntüler, cazip görünse de, içerik üreticilerin bunları istemeyebileceğini ve sayaçlı veri planlarından ellerinden gelen her şeyi toplamalarını sağlar. Belki de en basit Save-Data kullanıldığında, önceki PHP algılama kodunu kullanıp bunu zorunlu olmayan resim işaretlemelerini

<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 oldukça belirgin bir etkisi olabilir, aşağıdaki resme bakın:

Veri Kaydetme özelliği etkinken yüklenen kritik olmayan görüntülerin var olan resmî belgeler olup olmadığı fark edilir;

Elbette, görüntüleri gizlemek tek olasılık değildir. Ayrıca, Save-Data yazı tipleri.

Gerekli olmayan web yazı tiplerini kullanmayın

Web yazı tipleri genellikle belirli bir sayfanın toplamının çok büyük bir kısmını oluşturmasa da olduğu gibi yükse bile oldukça popülerdir. Hiçbir zaman önemsiz miktarda verileri de dahil edilir. Ayrıca, tarayıcıların yazı tiplerini getirme ve oluşturma şekli, gibi kavramlarla FOIT, FOUT ve tarayıcı sezgisel ve sezgisel yöntemler sunar.

Zorunlu olmayan web sitelerini hariç tutmak isteyebilirsiniz. daha sade bir kullanıcı deneyimi isteyen kullanıcılar için yazı tipleri. Save-Data bunu şu şekilde yapar: zahmetsizce yapılabilir.

Örneğin, diyelim ki Fira Google'dan Sans Sitenizdeki yazı tipleri. Fira Sans mükemmel bir vücut ancak verileri kaydetmeye çalışan kullanıcılar için çok önemli olmayabilir. Save-Data başlığı olduğunda <html> öğesine save-data sınıfı Böylece, başta gerekli olmayan yazı tipini çağıran stiller yazabiliriz. ancak Save-Data başlığı mevcut olduğunda bunu devre dışı bırakır:

/* 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 çünkü tarayıcı, CSS kaynaklarını tahmine dayalı olarak yüklediğinden (web dahil olmak üzere DOM'ye stil uygulayarak ve ardından herhangi bir HTML kodu olup olmadığını kontrol ederek öğeleri, stil sayfasındaki kaynaklardan herhangi birini çağırır. Bir kişinin Save-Data açıkken Fira Sans hiçbir zaman yüklenmez çünkü stil özellikleri ayarlanmış DOM çağrıştırır. Bunun yerine hemen harekete geçilecektir. 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 incelik yoktur; olur veya devre dışı olur. uygun deneyimleri sağlama sorumluluğunu üstlenir. tercih edebilirsiniz.

Örneğin, bazı kullanıcılar veri tasarrufu modundan şüphelenirlerse veri tasarrufu moduna izin vermeyebilir. bağlantı zayıf olsa bile uygulama içeriği veya işlevi kaybolacaktır duymuşsunuzdur. Buna karşılık, bazı kullanıcılar bunu iyi bir bağlantı durumunda bile mümkün olduğunca küçük ve basit olmalıdır. Uygulamanızın, kullanıcının tam ve sınırsız sayıda içerik isteyeceğini varsayması en iyisidir. açık bir kullanıcı aracılığıyla aksini açıkça belirtene kadar deneyiminiz. eyleme dökülebilir.

Site sahipleri ve web geliştiricileri olarak biz de web sitesinin yönetiminde yönelik içeriklerimizi geliştirdik.

Save-Data hakkında daha fazla bilgi ve mükemmel pratik örnekler için Save Data kullanıcıları.