İmzalı Takaslar (SXG'ler)

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.

Katie Hempenius
Katie Hempenius
X
Devin Mullins
Devin Mullins
X GitHub

İ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.

İmzalı Takasların Nasıl Çalıştığını açıklayan diyagram. Hedef siteyle iletişim kuran önbellekle iletişim kuran tarayıcı

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.

Kodu çözülmüş bir SXG dosyası örneğini burada bulabilirsiniz.

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=&quot;https://test.web.app/ViFgi0WfQ-NotPJf8PBo2T5dEuZ13NdZefPybXq_HhE&quot;;
    date=1597680503;expires=1598285303;integrity=&quot;digest/mi-sha256-03&quot;;sig=<em>MEUCIQD5VqojZ1ujXXQaBt1CPKgJxuJTvFlIGLgkyNkC6d7LdAIgQUQ8lC4eaoxBjcVNKLrbS9kRMoCHKG67MweqNXy6wJg=</em>;
    validity-url=&quot;https://example.org/webpkg/validity&quot;
header integrity: sha256-Gl9bFHnNvHppKsv+bFEZwlYbbJ4vyf4MnaMMvTitTGQ=</p>

<p>The exchange has a valid signature.
payload [1256 bytes]:</p>
<pre class="prettyprint"><code>&lt;title&gt;SXG example&lt;/title&gt;
&lt;meta charset=&#34;utf-8&#34;&gt;
&lt;meta http-equiv=&#34;Content-type&#34; content=&#34;text/html; charset=utf-8&#34;&gt;
&lt;style type=&#34;text/css&#34;&gt;
body {
    background-color: #f0f0f2;
    margin: 0;
    padding: 0;
}
&lt;/style&gt;
</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&#39;daki &quot;Ağ&quot; panelinde bir SXG isteğini gösteren ekran görüntüsü
DevTools'daki Ağ paneli

Önizleme sekmesi, SXG'nin içeriği hakkında daha fazla bilgi sağlar.

Bir SXG için &quot;Önizleme&quot; sekmesinin ekran görüntüsü
Geliştirici Araçları'ndaki Önizleme sekmesi

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.

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 ve cloudflare_worker ile fastly_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ı olan gen-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.

Daha fazla bilgi