SXG, bir kaynağın kaynağının nasıl teslim edildiğinden bağımsız olarak doğrulanmasını mümkün kılan bir yayınlama mekanizmasıdır.
İmzalı takaslar (SXG), bir kaynağın kaynağının nasıl yayınlandığından bağımsız olarak kimliğini doğrulamayı mümkün kılan bir yayınlama mekanizmasıdır. SXG'yi uygulamak, gizliliği korumaya yönelik çapraz kaynak önceden getirme özelliğini etkinleştirerek Largest Contentful Paint (LCP) değerini iyileştirebilir. Ayrıca bu ayrım, çevrimdışı internet deneyimleri ve üçüncü taraf önbelleklerinden sunma gibi çeşitli kullanım alanlarını geliştirir.
Bu makalede SXG'ye dair kapsamlı bir genel bakış sunulmaktadır: SXG'nin işleyiş şekli, kullanım alanları ve araçları.
Tarayıcı uyumluluğu
SXG, Chromium tabanlı tarayıcılar tarafından desteklenir (Chrome 73, Edge 79 ve Opera 64 sürümlerinden itibaren).
Genel Bakış
SXG, birincil kullanım alanı olarak, kaynak tarafından kriptografik olarak imzalanmış içeriği önceden getirmek ve sunmak için bir önbellek kullanır. Bu sayede, yönlendiren sitelerden gelen çapraz kaynaklı gezinmeler hızlandırılırken sayfaların değiştirilmemesi ve kaynaklarıyla doğru şekilde ilişkilendirilmesi sağlanır. Kimliği tanımlayabilecek bilgiler, kullanıcı bir siteye gidene kadar gizlenir. Böylece kullanıcının gizliliği korunur. Google Arama, SXG önceden getirme özelliklerini ilk kullananlardan biridir ve trafiğinin büyük bir kısmını Google Arama'dan alan siteler için SXG, kullanıcılara daha hızlı sayfa yükleme olanağı sunan önemli bir araç olabilir. Zaman içinde bu etkinin diğer yönlendirenleri de kapsayacak şekilde genişleyeceğini umuyoruz.
İşleyiş şekli
Bir site, istek/yanıt çiftini ("HTTP takası") tarayıcının içeriğin kaynağını ve bütünlüğünü, içeriğin nasıl dağıtıldığından bağımsız olarak doğrulayabileceği şekilde imzalar. Sonuç olarak tarayıcı, içeriği sunan sunucunun URL'si yerine kaynak sitenin URL'sini adres çubuğunda gösterebilir.
Geçmişte, bir sitenin içeriğini dağıtmak için üçüncü taraf kullanırken ilişkilendirmeyi sürdürmesinin tek yolu, SSL sertifikalarını dağıtıcıyla paylaşmasıydı. Bu durumun güvenlik açısından dezavantajları vardır. Ayrıca, içeriği gerçekten taşınabilir hale getirmekten çok uzaktır.
SXG biçimi
SXG, iki ana bileşeni olan ikili kodlanmış bir dosyada kapsüllenir: HTTP exchange ve exchange'i kapsayan bir imza. HTTP alışverişi; istek URL'si, içerik anlaşması bilgileri ve HTTP yanıtından oluşur.
format version: 1b3
request:
method: GET
uri: https://example.org/
headers:
response:
status: 200
headers:
Cache-Control: max-age=604800
Digest: mi-sha256-03=kcwVP6aOwYmA/j9JbUU0GbuiZdnjaBVB/1ag6miNUMY=
Expires: Mon, 24 Aug 2020 16:08:24 GMT
Content-Type: text/html; charset=UTF-8
Content-Encoding: mi-sha256-03
Date: Mon, 17 Aug 2020 16:08:24 GMT
Vary: Accept-Encoding
signature:
label;cert-sha256=<em>ViFgi0WfQ+NotPJf8PBo2T5dEuZ13NdZefPybXq/HhE=</em>;
cert-url="https://test.web.app/ViFgi0WfQ-NotPJf8PBo2T5dEuZ13NdZefPybXq_HhE";
date=1597680503;expires=1598285303;integrity="digest/mi-sha256-03";sig=<em>MEUCIQD5VqojZ1ujXXQaBt1CPKgJxuJTvFlIGLgkyNkC6d7LdAIgQUQ8lC4eaoxBjcVNKLrbS9kRMoCHKG67MweqNXy6wJg=</em>;
validity-url="https://example.org/webpkg/validity"
header integrity: sha256-Gl9bFHnNvHppKsv+bFEZwlYbbJ4vyf4MnaMMvTitTGQ=</p>
<p>The exchange has a valid signature.
payload [1256 bytes]:</p>
<pre class="prettyprint"><code><title>SXG example</title>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
}
</style>
</code></pre>
<div>
<h1>Hello</h1>
</div>
<p>İmzadaki expires parametresi, SXG'nin geçerlilik bitiş tarihini gösterir. SXG en fazla 7 gün geçerli olabilir. İmza üstbilgisi hakkında daha fazla bilgiyi İmzalanmış HTTP Takasları spesifikasyonunda bulabilirsiniz.
Sunucu tarafı kişiselleştirme desteği
Vary: Cookie üstbilgisi içeren bir SXG yalnızca imzalı istek URL'si için çerezleri olmayan kullanıcılara gösterilir. Siteniz, giriş yapmış kullanıcılarına farklı HTML sunuyorsa bu deneyimi değiştirmeden SXG'lerden yararlanmak için bu özelliği kullanabilirsiniz. Dinamik SXG ile sunucu tarafı kişiselleştirme hakkında ayrıntılı bilgi edinin.
Web Paketleme
SXG, daha geniş kapsamlı Web Packaging spesifikasyon teklifi ailesinin bir parçasıdır. SXG'lerin yanı sıra Web Paketleme spesifikasyonunun diğer önemli bileşeni Web Paketleri ("paketlenmiş HTTP alışverişleri") olur. Web Paketleri, HTTP kaynaklarının ve paketi yorumlamak için gereken meta verilerin bir koleksiyonudur.
SXG'ler ile Web Paketleri arasındaki ilişki, kafa karışıklığına yol açan yaygın bir durumdur. SXG ve Web Paketleri, birbirine bağlı olmayan iki farklı teknolojidir. Web Paketleri hem imzalı hem de imzasız takaslarla kullanılabilir. Hem SXG'ler hem de Web Paketleri tarafından desteklenen ortak bir hedef, sitelerin çevrimdışı tüketim için bütünüyle paylaşılmasına olanak tanıyan bir "web paketi" biçimi oluşturmaktır.
İmzalı takaslarla sayfa yüklemelerini hızlandırma
İmzalı Değişimler'i etkinleştirmek, web sayfası performansını hızlandırmaya yardımcı olabilir ve böylece sitenizin Core Web Vitals'ını, özellikle de Largest Contentful Paint (LCP) metriğini etkileyebilir. İlk kullanıcılardan biri olan Google Arama, arama sonuçları sayfasından yüklenen sayfalar için kullanıcılara daha hızlı bir sayfa yükleme deneyimi sunmak amacıyla SXG'yi kullanır.
Google Arama, mevcut olduğunda SXG'leri tarayıp önbelleğe alır ve kullanıcının ziyaret etme olasılığı yüksek olan SXG'yi (ör. ilk arama sonucuna karşılık gelen sayfa) önceden getirir.
SXG, CDN'lerin kullanımı ve oluşturmayı engelleyen alt kaynakların azaltılması gibi diğer performans optimizasyonlarıyla birlikte kullanıldığında en iyi sonucu verir. Uygulamadan sonra, SXG'leri önceden getirerek LCP avantajını en üst düzeye çıkarmak için bu önerileri uygulayın. Çoğu durumda bu optimizasyon, Google Arama'dan gelen sayfa yüklemelerinin neredeyse anında gerçekleşmesini sağlayabilir:
İmzalı Takasların Etkisi
Geçmişteki denemelerden, SXG özellikli önceden getirmelerden LCP'de ortalama 300 ms ila 400 ms azalma olduğunu gözlemledik. Bu sayede siteler, kullanıcılar üzerinde daha iyi bir ilk izlenim bırakır ve bu durum genellikle işletme metrikleri üzerinde olumlu bir etki yaratır.
Birçok global marka ve site, imzalı değişimlerden yararlanmaya başladı. Örnek olay olarak, İmzalı Değişimler'i uygulamanın, önde gelen bir içerik yönetim sistemi (İYS) olan RebelMouse'un müşterilerinin performansını ve işletme metriklerini iyileştirmesine nasıl yardımcı olduğuna bakalım:
- Narcity, LCP'yi %41 oranında iyileştirdi
- Paper Magazine, kullanıcı başına oturum sayısında% 27 artış olduğunu fark etti.
- MLT Blog, sayfa yüklenme süresini %21 azalttı.
Cloudflare, SXG'nin test ettiği sitelerin% 98'inde TTFB'yi ve %85'inde LCP'yi iyileştirdiğini, SXG'ye uygun sayfa yüklemelerinde ortalama% 20'nin üzerinde bir iyileşme sağladığını tespit etti.
Dizine ekleme
Bir sayfanın SXG ve SXG olmayan temsilleri Google Arama tarafından farklı şekilde sıralanmaz veya dizine eklenmez. SXG, nihayetinde bir yayınlama mekanizmasıdır ve temel içeriği değiştirmez.
AMP
AMP içeriği SXG kullanılarak yayınlanabilir. SXG, AMP içeriğinin AMP URL'si yerine standart URL'si kullanılarak önceden getirilmesine ve görüntülenmesine olanak tanır.AMP'nin SXG'ler oluşturmak için kendi ayrı araçları vardır. amp.dev adresinde imzalı takasları kullanarak AMP'yi nasıl sunacağınızı öğrenin.
Chrome Geliştirici Araçları ile SXG'lerde hata ayıklama
SXG'yi ilk elden görmek için bir Chromium tarayıcı kullanın, Geliştirici Araçları'nı açın, Ağ panelini açın ve bu örnek arama sayfasını ziyaret edin. İmzalı Değişimler, Tür sütununda signed-exchange aranarak bulunabilir.
Önizleme sekmesi, SXG'nin içeriği hakkında daha fazla bilgi sağlar.
Araçlar
SXG'leri uygulamak, belirli bir URL'ye karşılık gelen SXG'yi oluşturup bu SXG'yi istekte bulunanlara (genellikle tarayıcılar) sunmaktan ibarettir.
Sertifikalar
SXG oluşturmak için SXG'leri imzalayabilen bir sertifikaya ihtiyacınız vardır. Ancak bazı araçlar bu sertifikaları otomatik olarak alır. Bu sayfada, bu tür sertifikaları verebilecek sertifika yetkilileri listelenir. Sertifikalar, herhangi bir ACME istemcisi kullanılarak Google sertifika yetkilisinden otomatik olarak alınabilir. Web Packager Server'da yerleşik bir ACME istemcisi vardır ve sxg-rs de yakında bu istemciye sahip olacaktır.
Platforma özgü SXG araçları
Bu araçlar belirli teknoloji yığınlarını destekler. Bu araçlardan birinin desteklediği bir platformu zaten kullanıyorsanız bu aracı ayarlamak, genel amaçlı bir aracı ayarlamaktan daha kolay olabilir.
sxg-rs/cloudflare_worker, Cloudflare Workers'da çalışır.sxg-rs/fastly_compute, Fastly Compute@Edge üzerinde çalışır.Otomatik İmzalı Değişimler, otomatik olarak sertifika alan ve İmzalı Değişimler oluşturan bir Cloudflare özelliğidir.
NGINX SXG modülü, nginx kullanan siteler için SXG'ler oluşturur ve sunar. Kurulum talimatlarını burada bulabilirsiniz.
Envoy SXG Filtresi, Envoy kullanan siteler için SXG'ler oluşturur ve sunar.
Genel amaçlı SXG araçları
sxg-rs HTTP sunucusu
sxg-rs http_server, SXG'leri yayınlamak için ters proxy görevi görür. SXG tarayıcılarından gelen istekler için http_server, arka uçtan gelen yanıtları imzalar ve SXG ile yanıt verir. Yükleme talimatları için BENİOKU dosyasını inceleyin.
Web Packager sunucusu
Web Packager Server (webpkgserver), sxg-rs http_server'a alternatif olarak Go dilinde yazılmıştır. Web Packager sunucusunu kurma talimatları için Web Packager kullanarak imzalı değişimler nasıl kurulur? başlıklı makaleyi inceleyin.
Web Packager CLI
Web Packager CLI, belirli bir URL'ye karşılık gelen bir SXG oluşturur.
webpackager \
--private\_key=private.key \
--cert\_url=https://example.com/certificate.cbor \
--url=https://example.com
SXG dosyası oluşturulduktan sonra sunucunuza yükleyin ve application/signed-exchange;v=b3 MIME türüyle sunun. Ayrıca SXG sertifikasını application/cert-chain+cbor olarak sunmanız gerekir.
SXG kitaplıkları
Bu kitaplıklar kendi SXG oluşturucunuzu oluşturmak için kullanılabilir:
sxg_rs, SXG'ler oluşturmak için kullanılan bir Rust kitaplığıdır. En çok özelliğe sahip SXG kitaplığıdır vecloudflare_workerilefastly_computearaçlarının temelini oluşturur.libsxg, SXG'ler oluşturmak için kullanılan minimal bir C kitaplığıdır. NGINX SXG modülü ve Envoy SXG filtresi için temel olarak kullanılır.go/signed-exchange, SXG'ler oluşturmak için web paketi spesifikasyonu tarafından referans uygulama olarak sağlanan minimum bir Go kitaplığıdır. Referans KSA aracıgen-signedexchangeve daha fazla özellik içeren Web Packager araçları için temel olarak kullanılır.
İçerik anlaşması
Sunucular, Accept üst bilgisi application/signed-exchange için q değerinin text/html için q değerinden büyük veya ona eşit olduğunu gösterdiğinde SXG yayınlamalıdır. Pratikte bu, kaynak sunucunun tarayıcılara değil, tarayıcılara SXG sunacağı anlamına gelir. Yukarıdaki araçların çoğu bunu varsayılan olarak yapar ancak diğer araçlarda, SXG olarak sunulması gereken isteklerin Accept başlığıyla eşleştirmek için aşağıdaki normal ifade kullanılabilir:
http
Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/
Bu öneri, Apache ve nginx için örnekler içerir.
Önbellek API'sini güncelleme
Google SXG Önbelleği, site sahiplerinin SXG'leri Cache-Control: max-age nedeniyle süresi dolmadan önce önbellekten kaldırmak için kullanabileceği bir API'ye sahiptir. Ayrıntılar için update cache API referansına bakın.
SXG'ye bağlantı verme
Herhangi bir site, ve etiketlerini kullanarak bağlantı verdiği sayfaların SXG'lerini önbelleğe alabilir, sunabilir ve önceden getirebilir (mümkün olduğunda):
html
<a href="https://example.com/article.html.sxg">
<link rel="prefetch" as="document" href="https://example.com/article.html.sxg">
Bu makalede, SXG'leri dağıtmak için nginx'in nasıl kullanılacağı gösterilmektedir.
Benzersiz avantajlar
SXG, çapraz kaynak önceden getirmeyi etkinleştirmek için kullanılabilecek birçok teknolojiden biridir. Hangi teknolojiyi kullanacağınıza karar verirken farklı yönleri optimize etme arasında bir denge kurmanız gerekebilir. Aşağıdaki bölümlerde, SXG'nin olası çözümler alanında sunduğu benzersiz değerlerden birkaçı gösterilmektedir. Bu faktörler, mevcut çözümlerin kapsamı geliştikçe zaman içinde değişebilir.
Yayınlanacak daha az istek
Siteniz, siteler arası önceden getirme özelliğiyle ek istekler sunmak zorunda kalabilir. Bu, bir sayfanın önceden getirildiği ancak kullanıcının sayfayı ziyaret etmediği veya önceden getirilen baytların kullanıcıya gösterilemediği durumlar için geçerlidir. SXG için bu ek kullanılmayan istekler önemli ölçüde azaltılabilir:
- SXG'ler önbelleğe alınır ve geçerlilik süreleri dolana kadar kullanıcılara gönderilebilir. Bu nedenle, birçok önceden getirme işlemi yalnızca önbellek sunucusu tarafından gerçekleştirilebilir.
- SXG'ler, sitenizde çerezleri olan ve olmayan kullanıcılara gösterilebilir. Bu nedenle, gezinme işleminden sonra sayfanın tekrar getirilmesi gereken durumlar daha az olur.
Sayfa hızı iyileştirmesi
Şu anda desteklediği önceden getirme yüzeyleri ve özellikleri sayesinde sayfa hızında ek iyileştirmeler görebilirsiniz:
- SXG'ler, siteniz için çerez barındıran kullanıcılara gösterilebilir.
- SXG,
Linkbaşlığı kullanılarak belirtildiğinde sayfalarınızın alt kaynaklarını (ör. JavaScript, CSS, yazı tipleri ve resimler) önceden getirir. - Yakın gelecekte, Google Arama'dan SXG önceden getirme özelliği daha fazla arama sonucu türünde kullanılabilecek.
Sonuç
İmzalı Değişimler, bir kaynağın kaynağını ve geçerliliğini, kaynağın nasıl teslim edildiğinden bağımsız olarak doğrulamayı mümkün kılan bir teslim mekanizmasıdır. Bu sayede SXG'ler, yayıncı ilişkilendirmesi tam olarak korunurken üçüncü taraflarca dağıtılabilir.