Her yerde hızlı olan siteler geliştirmek zorlu bir olasılık olabilir. Genişlik cihaz özellikleri ve bağlandıkları ağların kalitesi bir görev gibi görünebilir. Bu kursta yükleme performansını iyileştirmek için tarayıcı özelliklerinin Kullanıcının cihazının neler yapabildiği veya ağının kalitesi bağlantı var mı? Çözüm, müşterinin ipuçları!
İstemci ipuçları, bize kullanıcının cihazı ve bağlı olduğu ağ ile ilgili bu özellikleri kullanır. Ölçüt bu bilgileri sunucu tarafında kullandığımızda, URL'mizi nasıl sunacağımızı içerik türlerine göre görüntüleyebilirsiniz. Bu sayede yüksek kaliteli ve daha kapsayıcı bir kullanıcı deneyimi sunmak.
İçerik Pazarlığı Her Şeydir
İstemci ipuçları da içerik pazarlığının başka bir yöntemidir. içerik yanıtları, tarayıcı istek başlıklarına göre belirlenir.
İçerik pazarlığının bir örneği,
Accept
istek başlığı ekleyin. Tarayıcının hangi içerik türlerini anladığını,
sunucu, yanıt müzakere etmek için kullanabilir. Resim isteklerinde, içerik
Chrome'un Accept
üstbilgisi şudur:
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Tüm tarayıcılar JPEG, PNG ve GIF gibi resim biçimlerini desteklese de Kabul Et seçeneği Bu durumda tarayıcı aynı zamanda WebP'yi ve APNG olarak değişir. Bu bilgileri kullanarak her tarayıcı için en uygun resim türlerini belirleme:
<?php
// Check Accept for an "image/webp" substring.
$webp = stristr($_SERVER["HTTP_ACCEPT"], "image/webp") !== false ? true : false;
// Set the image URL based on the browser's WebP support status.
$imageFile = $webp ? "whats-up.webp" : "whats-up.jpg";
?>
<img src="<?php echo($imageFile); ?>" alt="I'm an image!">
Accept
gibi, içerik pazarlığı için istemci ipuçları da kullanılabilir.
cihaz özellikleri ve ağ koşulları bağlamına yer verilir. Müşteri ipuçlarıyla,
kullanıcının özelliklerine dayalı olarak sunucu tarafı performans kararları
kritik olmayan kaynakların
kötü ağ koşullarına sahip kullanıcılar. Bu kılavuzda, proje yaşam döngüsü boyunca
ipuçları ve bunların içerik yayınlamayı daha verimli hale getirmek için
bir çözüm sunuyor.
Etkinleştirme
Accept
başlığından farklı olarak, istemci ipuçları yalnızca sihirli bir şekilde görünmez (
(daha sonra ele alacağımız Save-Data
hariç). Paydaşların
isteseniz bile, hangi istemci ipuçlarını paylaşacağınızı
bir kullanıcı Accept-CH
üstbilgisi göndererek
kaynak:
Accept-CH: Viewport-Width, Downlink
Accept-CH
değeri, site için istenen ipuçlarının virgülle ayrılmış bir listesidir.
, bir sonraki kaynak isteğinin sonuçlarını belirlemek için kullanacağı sonuçları belirler.
müşteri bu başlığı okursa "Bu site Viewport-Width
ve Downlink
istemci ipucu." Belirli ipuçlarının kendisi için endişelenmenize gerek yok.
Birazdan bunlara değineceğiz.
Bu etkinleştirme başlıklarını herhangi bir arka uç dilinde ayarlayabilirsiniz. Örneğin, PHP
header
işlevi kullanılabilir.
Hatta bu bilgileri http-equiv
özelliği
<meta>
etiketinde:
<meta http-equiv="Accept-CH" content="Viewport-Width, Downlink" />
.
Müşterilerden ipuçları!
İstemci ipuçları iki şeyden birini açıklar: kullanıcılarınızın cihazı, kullandığı cihaz ve sitenize erişmek için kullandıkları ağ. Proje yönetiminin tüm proje yönetimi her ipucunu bulabilirsiniz.
Cihaz ipuçları
Bazı istemci ipuçları, kullanıcının cihazının özelliklerini açıklar (genellikle ekran) özellikler. Bunlardan bazıları, projeniz için ideal medya kaynağını ancak hepsi medya merkezli olmak zorunda değildir.
Bu listeye girmeden önce, kullanılan birkaç anahtar terimin ekran görüntüsünü ve medya çözünürlüğünü belirtmeniz gerekir:
Gerçek boyut: Bir medya kaynağının gerçek boyutları. Örneğin, Photoshop'ta bir resim açtığınızda, resim boyutu iletişim kutusunda gösterilen boyutlar doğal boyutunu tanımlamalıdır.
Yoğunluk düzeltilmiş içsel boyut: piksel yoğunluğunda düzeltildi. Resmin yerleşik boyutudur bir cihaz pikseline bölünür oranı. Örneğin, şu işaretlemeyi kabul edelim:
<img
src="whats-up-1x.png"
srcset="whats-up-2x.png 2x, whats-up-1x.png 1x"
alt="I'm that image you wanted."
/>
Bu örnekte 1x
resminin iç boyutunun 320x240 olduğunu ve
2x
resminin gerçek boyutu 640x480'dir. Bu işaretleme bir istemci tarafından ayrıştırılırsa
Ekran cihaz piksel oranı 2 olan bir cihazda (ör. Retina) yüklü
ekranında) 2x
resmi istenir. Yoğunluğu düzeltilmiş içsel boyut
640x480, 2'ye bölündüğünde 320x240 olduğu için 2x
resmi 320x240'tır.
Harici boyut: Medya kaynağının CSS ve diğer düzenden sonraki boyutu
faktörler (width
ve height
özellikleri gibi) uygulanmıştır. Haydi
yoğunluk düzeltilmiş haliyle bir resim yükleyen <img>
öğeniz olduğunu varsayalım
içsel boyut olarak 320x240 ile birlikte, aynı zamanda CSS width
ve height
özelliklerine de sahip
sırasıyla 256px
ve 192px
değerleri uygulanmıştır. Bu örnekte
bu <img>
öğesinin dışsal boyutu 256x192 olur.
width: 256px;
CSS kuralları uygulanıyor
height: 192px;
da 320x240 doğal boyutlu resmi dönüştürür
256x192 dışsal boyutlu bir ekrana dönüştürülebilir.Biraz terminolojiye göz atalım. ipuçlarından bahsetmek istiyorum.
Görüntü Alanı-Genişliği
Viewport-Width
, kullanıcının görüntü alanının CSS pikseli cinsinden genişliğidir:
Viewport-Width: 320
Bu ipucu farklı içerik sunmak için ekrana özgü diğer ipuçlarıyla birlikte belirli ekran boyutları için optimum olan bir resmin işlenmesi (ör. kırpma) (ör. sanat yön), mevcut ekran genişliği için gerekli olmayan kaynakları çıkarabilirsiniz.
DPR
Cihaz piksel oranının kısaltması olan DPR
, fiziksel piksellerin CSS'ye oranını bildirir
kullanıcı ekranının pikselleri:
DPR: 2
Bu ipucu, bir ekranın görüntüsüne karşılık gelen resim kaynaklarını seçerken
piksel yoğunluğu (ör. x
açıklayıcıların srcset
özelliği) belirtin.
Genişlik
Width
ipucu, <img>
veya
sizes
kullanan <source>
etiket
özelliğini gönderin.
sizes
, tarayıcıya kaynağın dışsal boyutunun ne olacağını bildirir;
Width
doğal boyutu şu olan bir resim istemek için bu dış boyutu kullanıyor:
geçerli düzen için en uygun seçenektir.
Örneğin, bir kullanıcının 320 CSS pikseli geniş ekranı olan bir sayfa istediğini varsayalım
2 DPR ile Cihaz, şunları içeren bir <img>
öğesine sahip doküman yükler:
85vw
olan bir sizes
özellik değeri (ör. Tümü için görüntü alanı genişliğinin% 85'i
ekran boyutları) gösterilir. Width
ipucu etkinleştirildiyse istemci
<img>
kullanıcısının src
isteği ile sunucuya şu Width
ipucunu gönderir:
Width: 544
Bu durumda istemci sunucuya en iyi iç yapının istenen resmin genişliği, görüntü alanı genişliğinin% 85'i (272 piksel) olur ekranın DPR'si (2) ile çarpılmasıyla elde edilen değer, 544 piksele eşittir.
Bu ipucu yalnızca ekran genişliğinin yoğunluğu düzeltildi ve bu kritik parça, resmin düzen içinde dış boyutuyla ilgili bilgilerin tümünü içerir. Bu da hem de hem sunucu hem de birincil alan adı için ideal olan resim yanıtları ve düzene uyum sağlayabilirsiniz.
İçerik-DPR
Ekranların cihaz piksel oranına sahip olduğunu zaten biliyorsunuz. Ancak kaynaklar
kendi piksel oranlarına sahiptir. En basit kaynak seçiminin kullanıldığı durumlarda,
cihazlar ve kaynaklar arasındaki oranlar aynı olabilir. Ama! Hem
DPR
ve Width
başlıkları geçerliyse bir kaynağın dış boyutu
ve bu iki senaryonun birbirinden farklı olduğu senaryolar üretir. Content-DPR
ipucunu burada bulabilirsiniz
işte burada devreye giriyor.
Diğer istemci ipuçlarından farklı olarak Content-DPR
,
yerine bir yanıt üstbilgisi sunucuları bir DPR
ve
Width
ipucu, kaynak seçmek için kullanılır. Content-DPR
değeri
şu denklemin sonucudur:
Content-DPR
= [Seçilen resim kaynağı boyutu] / ([Width
] / [DPR
])
Content-DPR
istek başlığı gönderildiğinde tarayıcı nasıl ölçeklendirme yapacağını bilir
ekranın cihaz piksel oranı ve düzen için verilen resim. Bu olmadan,
görseller doğru şekilde ölçeklenmeyebilir.
Cihaz-Bellek
Teknik olarak Cihaz Belleği'nin bir parçasıdır.
API, Device-Memory
,
yaklaşık miktar
hafıza
GiB'de mevcut:
Device-Memory: 2
.
Bu ipucu için olası bir kullanım örneği, JavaScript miktarını azaltmaktır. belleğe sahip cihazlardaki tarayıcılara gönderilir. Çünkü JavaScript, genellikle kaynak yoğun içerik türü tarayıcılar yükleyin. Alternatif olarak, kodu çözmek için daha az bellek kullandıkları için daha düşük DPR resimleri gönderebilirsiniz.
Ağ ipuçları
Network Information API (Ağ Bilgileri API'si), kullanıcının ağının performansını açıklayan istemci ipuçları kategorisi bağlantı. Bence en kullanışlı ipuçları bunlar. Onlarla, sunma şeklimizi değiştirerek deneyimleri kullanıcılara göre ya da yavaş bağlantısı olan müşterilere yönelik kaynaklar oluşturmaktır.
RTT
RTT
ipucu, yaklaşık Gidiş Dönüş Süresi'ni (milisaniye cinsinden) sağlar.
katmanız var. RTT
ipucu, aktarım katmanı RTT'nin aksine
unutmayın.
RTT: 125
.
Gecikmenin yükleme performansında oynadığı rol nedeniyle bu ipucu yararlıdır.
RTT
ipucunu kullanarak ağın yanıt verme hızına,
Bu da bütün bir deneyimin daha hızlı teslim edilmesine yardımcı olur (ör.
(bazı istekler atlanarak).
Aşağı bağlantı
Yükleme performansında gecikme önemli olsa da bant genişliği de önemlidir.
çok önemlidir. Saniyedeki megabit (Mb/sn) cinsinden ifade edilen Downlink
ipucu,
Kullanıcının bağlantısının yaklaşık aşağı akış hızı:
Downlink: 2.5
.
RTT
ile birlikte Downlink
, içeriğin
kullanıcılara ağ bağlantısının kalitesine göre sunulur.
ECT
ECT
ipucu, Etkili Bağlantı Türü anlamına gelir. Değeri
her biri bir bağlantıyı tanımlayan ve
hem RTT
hem de Downlink
olmak üzere belirtilen aralıklarda
değerleri için de geçerlidir.
Bu üstbilgi, gerçek bağlantı türünün ne olduğunu açıklamaz;
ağ geçidinizin baz istasyonu mu yoksa kablosuz ağ bağlantısı mı olduğunu bildirmez.
puan. Bunun yerine, mevcut bağlantının gecikmesini ve bant genişliğini analiz eder
en çok benzeyen ağ profilini belirler. Örneğin,
kablosuz ağ üzerinden yavaş bir ağa bağlıyken ECT
, 2g
değeriyle doldurulabilir,
Bu, etkili bağlantıya en yakın tahmindir:
ECT: 2g
ECT
için geçerli değerler 4g
, 3g
, 2g
ve slow-2g
'dir. Bu ipucu,
bağlantı kalitesini değerlendirmek için başlangıç noktası olarak kullanılır ve daha sonra
RTT
ve Downlink
ipuçları kullanılarak hassaslaştırılır.
Verileri Kaydet
Save-Data
, ağ koşullarını kullanıcıya anlatmaktan çok fazla ipucu değildir
sayfaların daha az veri göndermesi gerektiğini belirten bir tercihtir.
Save-Data
adlı ağı, ağ ipucu olarak sınıflandırmayı tercih ediyorum çünkü
diğer ağ ipuçlarına benzerdir. Kullanıcılar ayrıca
yüksek gecikmeli/düşük bant genişliğine sahip ortamlarda onu etkinleştirme olasılığı yüksektir. Bu ipucu,
mevcut olduğunda her zaman aşağıdaki gibi görünür:
Save-Data: on
Google’da, Google’da yeni bir web sitesi ile
Save-Data
değerleridir.
Bu teknolojinin performans üzerinde büyük etkisi olabilir. Bu, kullanıcıların
daha az içerik göndermenizi istiyorlar. Bunları dinleyip buna göre hareket ederseniz
kullanıcılar bunu takdir eder.
Hepsini bir araya getirme
İstemci ipuçlarıyla ne yapacağınız size bağlıdır. Çünkü çok fazla şey sunuyorlar birçok seçeneğiniz vardır. Fikir üretebilmek için bir bakalım. Sconnie için uygulayabileceğiniz Timber, kurgusal bir ağaç şirkettir. Uzaktan iletişim araçlarında olduğu gibi alanlar, ağ bağlantıları kırılgan olabilir. Burası, istemci ipuçları gibi bir teknolojinin kullanıcılar için gerçekten bir fark yaratabilir.
Duyarlı Resimler
En basit duyarlı resim kullanım alanları karmaşık hale gelebilir. Peki ya
Farklı ekranlar için aynı resimlerin birden fazla tedavisi ve varyantına sahip olma
ve farklı biçimlerde? Bu işaretleme çok karmaşık hale geliyor, çok
hızlı bir şekilde.
Kolay yanlış anlaşılabilir ve kolay unutulabilir ya da önemli konuları yanlış anlaşılabilir
kavramlar (ör. sizes
).
<picture>
ve srcset
muhteşem araçlar olsa da
ve bakım gerektiren kullanım alanlarının geliştirilmesi ve sürdürülmesi çok zaman alır. Otomatikleştirilmiş
ancak bunu yapmak da zordur.
<picture>
ve srcset
, otomasyon ihtiyaçlarını karşılayacak kadar karmaşık özellikler sunuyor
korunacak biçimde yapılması çok önemlidir.
İstemci ipuçları bu işlemi basitleştirebilir. Resim yanıtları için müşteriyle pazarlık yapılıyor ipuçları aşağıdaki gibi görünebilir:
- İş akışınız için mümkünse önce bir görüntü işleme (ör.
sanat odaklı görüntüler)
Viewport-Width
ipucunu kontrol ederek. Width
veDPR
ipucunu kontrol ederek bir resim çözünürlüğü seçin ve resmin düzen boyutuna ve ekran yoğunluğuna uygun bir kaynak seçmek (benzerx
vew
tanımlayıcılarınınsrcset
içinde işleyiş şekline ilişkin) içerir.- Tarayıcının desteklediği en optimum dosya biçimini (
Accept
bize yardımcı olur).
Kereste firması olan hayali bir müşterimin endişe duyduğu yerde naif bir istemci ipuçlarını kullanan PHP'de duyarlı resim seçme rutini. Bu, şu anlama geliyordu: göndermek yerine:
<picture>
<source
srcset="
company-photo-256w.webp 256w,
company-photo-512w.webp 512w,
company-photo-768w.webp 768w,
company-photo-1024w.webp 1024w,
company-photo-1280w.webp 1280w
"
type="image/webp"
/>
<img
srcset="
company-photo-256w.jpg 256w,
company-photo-512w.jpg 512w,
company-photo-768w.jpg 768w,
company-photo-1024w.jpg 1024w,
company-photo-1280w.jpg 1280w
"
src="company-photo-256w.jpg"
sizes="(min-width: 560px) 251px, 88.43vw"
alt="The Sconnie Timber Staff!"
/>
</picture>
Bireysel tarayıcı desteğine bağlı olarak bu sayıyı aşağıdaki değerlere düşürebildim:
<img
src="/image/sizes:true/company-photo.jpg"
sizes="(min-width: 560px) 251px, 88.43vw"
alt="SAY CHEESY PICKLES."
/>
Bu örnekte, /image
URL'si bir PHP komut dosyası ve ardından gelen parametrelerdir.
tarafından yeniden yazıldı
mod_rewrite. Google
arka uç komut dosyasına yardımcı olmak için bir resim dosya adı ve ek parametreler alır
belirlenen koşullardaki en iyi resmi seçmeye çalışır.
"Ancak bu, <picture>
ve srcset
ifadelerini
arka uç?" ilk sorunuzdur.
Bir bakıma evet. Ancak önemli bir ayrım var: Bir uygulama müşteriden medya yanıtları oluşturmak için ipuçları paylaşacağım; işin çoğu (hepsi olmasa da) Bunu yapabilen bir hizmet (CDN gibi) içerebilen, otomatikleştirilmesi daha kolaydır sizin adınıza çalışır. HTML çözümlerinde ise, yeni işaretlemenin her kullanım alanı için yardımcı olalım. Elbette, işaretleme oluşturma işlemini otomatikleştirebilirsiniz. Eğer veya gereklilikler değiştiğinde de bu farklılığı tekrar gözden geçirebilir.
İstemci ipuçları kayıpsız, yüksek çözünürlüklü
herhangi bir kombinasyon için en uygun olacak şekilde dinamik olarak yeniden boyutlandırılabilen bir resimdir.
ve düzenin ne kadar iyi
olduğunu konuşalım. Sabit bir değeri numaralandırmanızı gerektiren srcset
tarayıcı için olası görsel adaylarının bir listesidir. Bu yaklaşım,
daha esnek olabiliyor. srcset
, tarayıcılara genel bir grup sunmanızı zorunlu kılarken
varyant sayısı (ör. 256w
, 512w
, 768w
ve 1024w
) müşteri ipuçları sağlar
destekli bir çözüm, büyük bir işaretleme yığını olmadan her genişlikte hizmet verebiliyor.
Elbette resim seçme mantığını kendiniz yazmanız gerekmez. Bulutsal
w_auto
kullandığınızda resim yanıtları oluşturmak için istemci ipuçlarını kullanır.
parametresini kullanın.
ve ortalama kullanıcıların tarayıcı kullanırken% 42 daha az bayt indirdiğini gözlemledik.
ipuçlarından bahsetmek istiyorum.
Ama dikkatli olun! Chrome 67'nin masaüstü sürümünde yapılan değişiklikler, desteği kaldırmıştır kaynaklar arası istemci için ipuçları. Neyse ki, bu kısıtlamalar Chrome'un mobil sürümlerini etkilemiyor ve Özellik üzerinde çalışırken tüm platformlar için Politika'nın tamamlanmış olması gerekir.
Yavaş ağlardaki kullanıcılara yardımcı olma
Uyarlanabilir performans, kaynakları sunma şeklimizi ayarlayabildiğimiz ilkesidir. müşteri ipuçlarının bize sağladığı bilgilere göre; özel olarak Kullanıcının ağ bağlantısının geçerli durumuna ilişkin bilgiler.
Sconnie Timber’ın sitesi söz konusu olduğunda
ağları yavaş. Save-Data
, ECT
, RTT
ve Downlink
üstbilgileri şu anda
arka uç kodumuzda incelenmiştir. Bu işlem yapıldığında ağ kalitesi oluştururuz.
daha iyi bir kullanıcıya müdahale etmemiz gerekip gerekmediğini belirlemek için
sunmaktır. Bu ağ puanı 0
ile 1
arasındadır. Burada 0
en kötü değerdir
ağ olası ağ kalitesini artırır ve 1
en iyisidir.
Başlangıçta Save-Data
olup olmadığını kontrol ederiz. Böyle bir durumda, puan şu şekilde ayarlanır:
0
(Kullanıcının
ve daha hızlı bir deneyim sunar.
Ancak Save-Data
yoksa devam eder ve ECT
,
Ağı açıklayan bir puan hesaplamak için RTT
ve Downlink
ipuçları
bağlantı kalitesini artırır. Ağ puanı oluşturma kaynağı
kod
GitHub'da bulabilirsiniz. Buradan çıkaracağımız fikir şu:
bazı moda uyguluyorsanız, yavaş hareket edenler için deneyimleri daha iyi hale getirebiliriz
ağlar.
![Client-ID kullanmayan bir sitenin karşılaştırması
yavaş bir ağ bağlantısına (solda) ve bunu yapan aynı siteye uyum sağlaması için ipuçları
(sağ) tıklayın.](https://web.dev/static/articles/performance-optimizing-content-efficiency-client-hints/image/a-comparison-a-site-doe-b20caac28fc7f.png?authuser=5&hl=tr)
Siteler, istemci ipuçlarının sağladığı bilgilere uyum sağladığında, yaklaşımı benimsemektir. Hangi kaynakların gönder. Duyarlı resim seçme mantığımızı daha düşük kalitede gönderecek şekilde değiştirebiliriz. ağ kalitesi olduğunda yükleme performansını hızlandırmak için belirli bir ekrana ait resimler kötüdür.
Bu örnekte, bir dizi anahtar kelime eklendiğinde istemci ipuçlarının Daha yavaş ağlardaki sitelerin performansını artırma Aşağıda bir WebPagetest'i görebilirsiniz Yavaş bir ağda bulunan ve istemci ipuçlarına uyum sağlamayan bir sitenin şelalesi:
![Sconnie'nin WebPagetest şelalesi
Kereste site, yavaş bir ağ bağlantısında tüm kaynakları yüklüyor.](https://web.dev/static/articles/performance-optimizing-content-efficiency-client-hints/image/a-webpagetest-waterfall-6bc17bbfd8c27.png?authuser=5&hl=tr)
Ve şimdi aynı yavaş bağlantıda aynı site için bir şelale dışında, varsa, site kritik olmayan sayfa kaynaklarını elemek için istemci ipuçlarını kullanır:
![Sconnie'nin WebPagetest şelalesi
Bir tarayıcıda kritik olmayan kaynakları yüklememeye karar vermek için istemci ipuçlarını kullanarak
yavaş ağ bağlantısı.](https://web.dev/static/articles/performance-optimizing-content-efficiency-client-hints/image/a-webpagetest-waterfall-3ba4268e712f2.png?authuser=5&hl=tr)
İstemci ipuçları, sayfa yüklenme süresini 45 saniyeden daha az bir süreye düşürdü bunun onda biri. Bu senaryoda müşteri ipuçlarının faydaları önem taşır ve eleştirel dil arayan kullanıcılar için ciddi bir fayda olabilir. yavaş ağlar üzerinden bilgi sağlar.
Ayrıca, deneyimi bozmadan istemci ipuçlarını kullanmak mümkündür
Chrome Tarayıcı'yı desteklemez. Örneğin, 2024 yılı boyunca
teslim etmeye devam ederken ECT
ipucunun değerini
bir varsayılan değer ayarlayabiliriz.
Örneğin:
// Set the ECT value to "4g" by default.
$ect = isset($_SERVER["HTTP_ECT"]) ? $_SERVER["HTTP_ECT"] : "4g";
Burada "4g"
, ECT
üstbilgisindeki en yüksek kaliteli ağ bağlantısını temsil eder
anlatacağım. $ect
öğesini "4g"
öğesine başlatırsak istemciyi desteklemeyen tarayıcılar
ipuçları etkilenmez. FTW'yi etkinleştir!
Bu önbelleklere dikkat edin!
HTTP başlığına dayalı bir yanıtı her değiştirdiğinizde, bunu
önbelleklerin söz konusu kaynak için gelecekteki getirmeleri nasıl işleyeceğini. Vary
başlık
Bu özellik, girişleri istek başlıklarının değerine göre önbelleğe aldığı için
bir seçimdir. Basitçe anlatırsak, verilen bir HTTP temel alınarak herhangi bir yanıtı değiştirdiğinizde
Bu üstbilgiyi, neredeyse her zaman Vary
öğesine eklemeniz gerekir.
Örneğin:
Vary: DPR, Width
Bununla birlikte, bu konuda önemli bir uyarı var: Vary
ürününün hiçbir zaman önbelleğe alınmasını önlemek için
sık değişen bir üstbilgide (ör. Cookie
) yanıtlar
kaynaklar etkili bir şekilde önbelleğe alınamaz. Bunu bildiğinizde uzak durun
RTT
veya Downlink
gibi istemci ipucu başlıklarında Vary
ekleme, çünkü bunlar
bağlantı faktörlerini ortaya çıkarır. Raporda değişiklik yapmak
yalnızca ECT
üstbilgisini anahtarlamaya çalışın. Bu şekilde
önbellekteki eksiklikleri en aza indirin.
Elbette bu durum yalnızca her şeyden önce bir yanıtı önbelleğe alıyorsanız geçerlidir.
Örneğin, içerikleri dinamikse HTML öğelerini önbelleğe alamazsınız. Bunun nedeni,
sürekli ziyaretlerde kullanıcı deneyimini bozabilir. Böyle durumlarda
gerekli olduğunu düşündüğünüz herhangi bir temelde bu tür yanıtları değiştirebilirsiniz.
Vary
konusunda endişelenmenize gerek yok.
Service Worker'lardaki istemci ipuçları
İçerik pazarlığı artık yalnızca sunuculardan ibaret değil. Çünkü Service Worker'lar,
arasında proxy sağlamak için, kaynakların nasıl dışa aktarılacağını ve
JavaScript aracılığıyla sunulur. Buna istemci ipuçları da dahildir. Hizmet çalışanında
fetch
etkinliği için event
nesnesini kullanabilirsiniz
request.headers.get
aşağıdaki gibi bir kaynağın istek başlıklarını okumak için kullanılır:
self.addEventListener('fetch', (event) => {
let dpr = event.request.headers.get('DPR');
let viewportWidth = event.request.headers.get('Viewport-Width');
let width = event.request.headers.get('Width');
event.respondWith(
(async function () {
// Do what you will with these hints!
})(),
);
});
.
Etkinleştirdiğiniz istemci ipucu başlıkları bu şekilde okunabilir. Ancak bu
bu bilgileri almanın tek yolu değil. Ağa özel ipuçları
navigator
nesnesindeki eşdeğer JavaScript özelliklerinde okunabilir:
İstemci ipucu | JS eşdeğeri |
---|---|
"ECT" | `navigator.connection.effectiveType` |
"RTT" | `navigator.connection.rtt` |
"Save-Verileri" | `navigator.connection.saveData` |
"Aşağı bağlantı" | `navigator.connection.downlink` |
"Cihaz Belleği" | `navigator.deviceMemory` |
Bu API'ler,
in
operatör:
if ('connection' in navigator) {
// Work with netinfo API properties in JavaScript!
}
Buradan, sunucudakine benzer bir mantık kullanabilirsiniz ancak istemci ipuçlarıyla içerik pazarlığı yapmak için bir sunucuya ihtiyacınız olmaz. Hizmet nedenleriyle deneyimleri daha hızlı ve daha dayanıklı hale getirme gücüne ek olarak, kullanıcı çevrimdışıyken de içerik sunabiliyor.
Özet
İstemci ipuçları sayesinde, kullanıcılarımıza kısa bir sürede deneyimleri
bir yöntem belirlemektir. Kullanıcının cihazına göre medya yayınlayabiliriz
özellikleri, yalnızca görsel reklam
kullanmaya kıyasla duyarlı resimler sunmayı
özellikle karmaşık kullanım alanlarında <picture>
ve srcset
üzerinde çalışır. Bu sayede,
yalnızca geliştirme tarafında harcanan zamanı ve çabayı azaltmakla kalmayıp, aynı zamanda
kaynaklar (özellikle de görseller) kullanıcının ekranlarını hedefleyecek şekilde
Belki daha da önemlisi, zayıf ağ bağlantılarını yakından inceleyebilir ve hem de bunu nasıl sağladığımızı değiştirerek kullanıcılar için açıklığa kavuşturmaya çalışırız. Bu kırılgan ağlardaki kullanıcıların sitelere daha kolay erişmesini sağlamada uzun bir yol katetmektir. Service Worker'larla birlikte kullanıldığında, kullanıcılar için son derece hızlı çevrimdışı kullanılabilir.
İstemci ipuçları yalnızca Chrome ve Chromium tabanlı uygulamalarda kullanılabilir. veya gözünüzün önünde bir engelin olmadığı desteklenmeyen tarayıcılarda kullanabilirsiniz. Benzersiz bir web sitesi oluşturmak için her kullanıcının cihazından haberdar olan kapsayıcı ve uyarlanabilir deneyimler özellikleri ve bağlandıkları ağlar. Diğer tarayıcı tedarikçilerinin bunların değerini görür ve uygulama niyetini gösterir.
Kaynaklar
- İstemciyle Otomatik Duyarlı Resimler İpuçları
- İstemci İpuçları ve Duyarlı Resimler - Chrome'da Neler Değişti? 67
- (İstemci) İpucu Alın! (Slaytlar)
- Google Cloud Platform'un
Save-Data
Ilya Grigorik'e teşekkür ederiz, Eric Portis, Jeff Posnick, Yoav Weiss ve Estelle Weyl, bu makalede değerli geri bildirimler ve düzenlemeler var.