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.
![İlgili içeriği oluşturmak için kullanılan
Chrome'un Geliştirici Araçları'nda gösterilen Save-Data başlığı
Veri Tasarrufu uzantısı.](https://web.dev/static/articles/optimizing-content-efficiency-save-data/image/the-save-data-header-reve-3d6257f960c6c.png?authuser=5&hl=tr)
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.
Kullanımla ilgili ipuçları ve en iyi uygulamalar
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.
- Kullanıcılara
- 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.
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ızcaSave-Data
istek başlığı mevcut. Daha fazla bilgi için en iyi uygulamalara göz atın şunun için: önbelleklerle etkileşim.
- 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 veyanavigator.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. 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 sunmakSave-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çinDevice-Memory
istemci ipucunu içerenSave-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:
![Kritik olmayan görüntülerin karşılaştırması
Aynı görüntülerin atlanmasıyla kıyaslandığında Save-Data eksik olduğunda yüklenmekte
Save-Data olduğunda.](https://web.dev/static/articles/optimizing-content-efficiency-save-data/image/a-comparison-non-critica-f5ac2f016e117.png?authuser=5&hl=tr)
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ı.