SXG, bir kaynağın kaynağının yayınlanma şeklinden bağımsız olarak kimliğinin doğrulanmasını sağlayan bir yayınlama mekanizmasıdır.
İmzalı takaslar (SXG), bir kaynağın kaynağının yayınlanma şeklinden bağımsız olarak kimliğinin doğrulanmasını sağlayan bir yayınlama mekanizmasıdır. SXG uygulamak, gizliliği koruyan çapraz kaynak önceden getirme özelliğini etkinleştirerek Largest Contentful Paint (LCP) özelliğini iyileştirebilir. Ayrıca bu ayırma, çevrimdışı internet deneyimleri ve üçüncü taraf önbelleklerinden yayınlama gibi çeşitli kullanım alanlarını geliştirir.
Bu makalede, SXG'ye kapsamlı bir genel bakış sunulmaktadır: 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 yayınlamak için bir önbellek kullanır. Bu, yönlendiren sitelerden kaynaklar arasında gezinmelerin hızlanmasına yardımcı olurken, sayfaların değişmeden kalmasını ve kaynakla düzgün bir şekilde ilişkilendirilmesini sağlar. Kimliği tanımlayabilecek bilgiler, kullanıcı bir siteye gidene kadar gizlenir. Böylece, kullanıcının gizliliği korunur. Google Arama, SXG'nin önceden getirme özelliklerinin ilk kullanıcılarından biridir. Trafiğinin büyük bir kısmını Google Arama'dan alan sitelerde ise SXG, sayfaların daha hızlı yüklenmesini sağlamak açısından önemli bir araç olabilir. Zaman içinde bu etkinin diğer yönlendirenleri de kapsayacak şekilde genişleyeceğini umuyoruz.
İşleyiş Şekli
Site, tarayıcının içeriğin dağıtılma biçiminden bağımsız olarak içeriğin kaynağını ve bütünlüğünü doğrulamasını mümkün kılacak bir istek/yanıt çiftini ("HTTP exchange") imzalar. Sonuç olarak tarayıcı, adres çubuğunda içeriği ileten sunucunun URL'si yerine kaynak sitenin URL'sini görüntüleyebilir.
Geçmişte, bir sitenin içeriğini dağıtmak için bir üçüncü taraf kullanmasının ve atıfın devamlılığını sağlamanın tek yolu, sitenin SSL sertifikalarını distribütörle paylaşması olmuştur. Bunun güvenlik dezavantajları vardır; dahası, içeriği gerçekten taşınabilir hale getirmekten çok uzaktır.
SXG biçimi
SXG, iki birincil bileşene sahip ikili kodlu bir dosyaya kapsüllenir: HTTP değişimi ve değişimi kapsayan bir imza. HTTP exchange'i; istek URL'si, içerik anlaşma 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 son kullanma tarihini belirtir. Bir SXG en fazla 7 gün boyunca geçerli olabilir. İmza başlığı hakkında daha fazla bilgiyi İmzalı HTTP Değişimleri spesifikasyonunda bulabilirsiniz.
Sunucu tarafı kişiselleştirme için destek
Vary: Cookie
başlığı içeren 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 ile ilgili ayrıntıları inceleyin.
Web Paketi
SXG, daha geniş kapsamlı Web Paketi spesifikasyon teklifi ailesinin bir parçasıdır. SXG'lere ek olarak, Web Paketi spesifikasyonunun diğer önemli bileşeni de Web Paketleri'dir ("paketlenmiş HTTP exchange'leri"). 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 sık karşılaşılan bir karışıklık noktasıdır. SXG ve Web Bundle, birbirine bağımlı olmayan iki farklı teknolojidir. Web Paketleri hem imzalı hem de imzasız değişimlerle kullanılabilir. Hem SXG'ler hem de Web Bundle tarafından geliştirilen yaygın bir hedef, sitelerin çevrimdışı kullanım için tamamen paylaşılmasına olanak tanıyan bir "web paketleme" biçimi oluşturmaktır.
İmzalı Takas ile Sayfa Yüklemelerini Hızlandırma
İmzalı Takasları etkinleştirmek, web sayfası performansını hızlandırmaya yardımcı olabilir ve özellikle Largest Contentful Paint (LCP) içinde sitenizin Core Web Vitals'ını etkileyebilir. Google Arama, ilk kullanıcılardan biri olan SXG'yi, kullanıcılara arama sonuçları sayfasından yüklenen sayfalar için daha hızlı sayfa yükleme deneyimi sunmak amacıyla kullanıyor.
Google Arama, mümkün olduğunda SXG'leri tarayıp önbelleğe alır ve kullanıcının ziyaret etme olasılığı yüksek olan SXG'yi (örneğin, ilk arama sonucuna karşılık gelen sayfayı) ö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 performansı gösterir. Uygulamayı uyguladıktan sonra, SXG'lerin önceden yüklenmesiyle elde edilecek LCP avantajını en üst düzeye çıkarmak için bu önerileri uygulayın. Birçok durumda, bu tür bir optimizasyon Google Arama'dan neredeyse anında sayfa yüklemeleriyle sonuçlanabilir:
İmzalı Takasların Etkisi
Daha önceki denemelerde, SXG özellikli önceden getirme işlemlerinden dolayı LCP'de ortalama 300 ms - 400 ms'lik düşüş gözlemledik. Bu, sitelerin kullanıcılar üzerinde daha iyi bir ilk izlenim bırakmasına yardımcı olur ve genellikle işletme metrikleri üzerinde olumlu bir etkisi olur.
Birçok global marka ve site şimdiden İmzalı Takaslardan faydalandı. Örnek olay olarak, İmzalı Takasları uygulamanın önde gelen bir İçerik Yönetim Sistemi (İYS) olan RebelMouse'un, müşterilerinin performansını ve iş metriklerini iyileştirmesine nasıl yardımcı olduğunu inceleyelim:
- Narcity LCP'yi%41 artırdı
- Paper Magazine, kullanıcı başına oturum sayısında% 27 artış olduğunu fark etti
- MLT Blogu sayfa yükleme süresini%21 azalttı
Cloudflare'e göre SXG, test ettiği sitelerin% 98'inde TTFB'yi iyileştirdi ve sitelerin% 85'inde LCP'yi iyileştirdi. SXG'ye uygun sayfa yüklemelerinde ise% 20'nin üzerinde bir ortanca değer artışı elde etti.
Dizine ekleme
Bir sayfanın SXG ve SXG olmayan temsilleri, Google Arama tarafından farklı şekilde sıralanmaz veya dizine eklenemez. SXG, nihayetinde bir yayınlama mekanizmasıdır, 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 üzerinde imzalı takasları kullanarak AMP'nin nasıl sunulacağını öğrenin.
Chrome Geliştirici Araçları ile SXG'lerde Hata Ayıklama
Bir SXG'yi ilk elden görmek için Chromium kullanın, Geliştirici Araçları'nı açın, Ağ panelini açın ve bu örnek arama sayfasını ziyaret edin. İmzalı Takaslar, Type (Tür) sütununda signed-exchange
araması yapılarak anlaşılabilir.
![DevTools'daki "Ağ" panelinde bir SXG isteğini gösteren ekran görüntüsü](https://web.dev/static/articles/signed-exchanges/image/screenshot-showing-sxg-r-9a4f9df2440b3.png?authuser=6&hl=tr)
Önizleme sekmesi, SXG'nin içeriği hakkında daha fazla bilgi sağlar.
![Bir SXG için "Önizleme" sekmesinin ekran görüntüsü](https://web.dev/static/articles/signed-exchanges/image/screenshot-the-preview-033e1253a3e1.png?authuser=6&hl=tr)
Aletler
SXG'lerin uygulanması, belirli bir URL'ye karşılık gelen SXG'nin oluşturulmasından ve ardından bu SXG'nin istekte bulunanlara (genellikle tarayıcılara) sunulmasından oluşur.
Sertifikalar
SXG oluşturmak için bazı araçlar bunları otomatik olarak edinse de SXG'leri imzalayabilen bir sertifikaya ihtiyacınız vardır. Bu sayfada, bu tür sertifikalar oluşturabilen sertifika yetkilileri listelenmiştir. Sertifikalar, herhangi bir ACME istemcisi kullanılarak Google sertifika yetkilisinden otomatik olarak alınabilir. Web Paketleyici Sunucusu yerleşik bir ACME istemcisine sahiptir ve sxg-rs yakında kullanıma sunulacaktır.
Platforma özgü SXG araçları
Bu araçlar, belirli teknoloji yığınlarını destekler. Bu araçlardan biri tarafından desteklenen bir platform kullanıyorsanız genel amaçlı bir araç kullanmak yerine bu platformun ayarlanması sizin için daha kolay olabilir.
sxg-rs/cloudflare_worker
, Cloudflare Workers'da çalışır.sxg-rs/fastly_compute
, FastlyCompute@Edge üzerinde çalışır.Otomatik İmzalı Takaslar, sertifikaları otomatik olarak edinen ve İmzalı Takaslar oluşturan bir Cloudflare özelliğidir.
NGINX SXG modülü, nginx kullanan siteler için SXG'ler oluşturur ve yayınlar. Kurulum talimatlarını burada bulabilirsiniz.
Envoy SXG Filter, Envoy kullanan siteler için SXG'ler oluşturur ve yayınlar.
Genel amaçlı SXG araçları
sxg-rs HTTP sunucusu
sxg-rs
http_server, SXG'leri sunmak için ters proxy görevi görür. SXG tarayıcılarından gelen isteklerde http_server
, arka uçtan gelen yanıtları imzalar ve bir SXG ile yanıtlar. Yükleme talimatları için README sayfasını inceleyin.
Web Paketleyici Sunucusu
Web Packager Server (webpkgserver
), Go'da yazılmış sxg-rs http_server'a bir alternatiftir. Web Packager sunucusunu ayarlama talimatları için Web Packager'ı kullanarak imzalı exchange'leri ayarlama bölümüne bakın.
Web Paketleyici KSA
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 bunu 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ı
Şu kitaplıklar kendi SXG oluşturma aracınızı oluşturmak için kullanılabilir:
sxg_rs
, SXG oluşturmak için kullanılan bir Rust kitaplığıdır. En özellikli SXG kitaplığıdır vecloudflare_worker
ilefastly_compute
araçları için temel olarak kullanılır.libsxg
, SXG oluşturmak için kullanılan minimal C kitaplığıdır. NGINX SXG modülü ve Envoy SXG Filtresinin temeli olarak kullanılır.go/signed-exchange
, web paketi spesifikasyonu tarafından SXG oluşturmaya yönelik bir referans uygulaması olarak sağlanan minimal Go kitaplığıdır. Bu API, referans KSA aracı olangen-signedexchange
ve daha fazla özellik sunan Web Packager araçları için temel olarak kullanılır.
İçerik pazarlığı
Accept başlığı, uygulama/imzalı değişim için q değerinin metin/html için q değerinden büyük veya ona eşit olduğunu belirttiğinde sunucular SXG'yi sunmalıdır. Pratikte bu, kaynak sunucunun tarayıcılara SXG sunacağı, ancak tarayıcılara sunmayacağı anlamına gelir. Yukarıdaki araçların birçoğu bunu varsayılan olarak yapar ancak diğer araçlarda, SXG olarak sunulması gereken isteklerin Accept üstbilgisini 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 örnekleri içerir.
Önbellek API'sini güncelleme
Google SXG Önbelleği, site sahiplerinin Cache-Control: max-age
nedeniyle süreleri dolmadan önce SXG'leri önbellekten kaldırmak için kullanabilecekleri bir API'ye sahiptir. Ayrıntılar için güncelleme önbelleği API referansı bölümüne bakın.
SXG'ye bağlanma
Tüm siteler, mümkün olduğunda ve etiketlerini kullanarak bağlantı verdiği sayfaların SXG'lerini önbelleğe alabilir, sunabilir ve önceden getirebilir:
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ğı açıklanmaktadır.
Benzersiz Avantajlar
SXG, kaynaklar arası önceden getirmeyi sağlayan pek çok teknolojiden biridir. Hangi teknolojiyi kullanacağınıza karar verirken, farklı yönleri optimize etmek arasında seçim yapmanız gerekebilir. Aşağıdaki bölümlerde SXG'nin olası çözümler alanında sağladığı benzersiz değerlerden birkaçı gösterilmektedir. Mevcut çözümlerin alanı geliştikçe bu faktörler zamanla değişebilir.
Daha az yayınlanma isteği
Siteler arası önceden getirme ile sunucunuzun ek istekler yerine getirmesi gerekebilir. 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 durumlara karşılık gelir. SXG için kullanılmayan bu ek istekler önemli ölçüde azaltılabilir:
- SXG'ler önbelleğe alınır ve süreleri dolana kadar kullanıcılara gönderilebilir. Böylece, birçok önceden getirme işlemi yalnızca önbellek sunucusu tarafından işlenebilir.
- SXG'ler, sitenizde çerezlere sahip olan ve olmayan kullanıcılara gösterilebilir. Bu nedenle, gezinmeden sonra sayfanın tekrar getirilmesi gereken durumlar daha az olur.
Sayfa hızında iyileşme
Sayfanın şu anda desteklediği önceden getirme yüzeyleri ve özellikleri nedeniyle sayfa hızında ek iyileşme görebilirsiniz:
- SXG'ler, sitenize ait çerezleri olan kullanıcılara gösterilebilir.
- SXG ayrıca
Link
baş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ılabilecektir.
Sonuç
İmzalı Takaslar, kaynağın nasıl teslim edildiğinden bağımsız olarak kaynağın kökeninin ve geçerliliğinin doğrulanmasını sağlayan bir teslim mekanizmasıdır. Bunun sonucunda SXG'ler, yayıncı ilişkilendirmesinin tamamını korurken üçüncü taraflarca dağıtılabilir.