İmzalı Takaslar (SXG'ler)

SXG, bir kaynağın kaynağının, nasıl yayınlandığından bağımsız olarak kimlik doğrulamasını sağlayan bir yayınlama mekanizmasıdır.

Katie Hempenius
Katie Hempenius
Devin Mullins
Devin Mullins

İmzalı exchange'ler (SXG), bir kaynağın kaynağının nasıl yayınlandığından bağımsız olarak kimlik doğrulamasını sağlayan bir yayınlama mekanizmasıdır. SXG'yi uygulamak, gizliliği koruyan kaynak dışı önceden getirme özelliğini etkinleştirerek Largest Contentful Paint'i (LCP) iyileştirebilir. Ayrıca bu ayrıştırma, çevrimdışı internet deneyimleri ve üçüncü taraf önbelleklerinden içerik yayınlama gibi çeşitli kullanım alanlarını geliştirir.

Bu makalede, SXG'ye (işleyiş şekli, kullanım alanları ve araçlar) kapsamlı bir genel bakış sunulmaktadır.

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 önbelleğe sahiptir. Bu, yönlendiren sitelerden kaynak arası gezinme işlemlerini hızlandırmaya yardımcı olurken sayfaların değiştirilmemesini ve kaynaklarıyla doğru şekilde ilişkilendirilmesini sağlar. Kimliği tanımlayabilecek tüm bilgiler, kullanıcı bir siteye gidene kadar gizlenir. Böylece kullanıcının gizliliği korunur. Google Arama, SXG önceden getirme özelliklerini erken benimseyen bir platformdur. 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üklemeleri sunmak açısından önemli bir araç olabilir. Bu etkiyi zaman içinde daha fazla yönlendiren için sunmayı umuyoruz.

İşleyiş Şekli

Site, bir istek/yanıt çiftini ("HTTP takası") tarayıcıya içeriğin dağıtılma şeklinden bağımsız olarak içeriğin kaynağını ve bütünlüğünü doğrulamasını sağlayacak şekilde imzalar. Sonuç olarak tarayıcı, içeriği yayınlayan sunucunun URL'si yerine adres çubuğunda kaynak sitenin URL'sini gösterebilir.

İmzalı Exchange'lerin işleyiş şeklini açıklayan şema. Hedef siteyle iletişim kuran önbellekle iletişim kuran tarayıcı

Geçmişte, bir sitenin ilişkilendirmeyi korurken içeriğini dağıtmak için üçüncü taraf kullanmasının tek yolu, SSL sertifikalarını distribütörle paylaşmasıydı. Bunun güvenlikle ilgili sakıncaları vardır. Ayrıca, içeriği gerçekten taşınabilir hale getirmek için çok daha fazlası gerekir.

SXG biçimi

SXG, iki temel bileşene sahip bir ikili kodlu dosyada kapsüllenir: HTTP değişimi ve değişimi kapsayan bir imza. HTTP değişimi, istek URL'sinden, içerik pazarlığı bilgilerinden ve bir HTTP yanıtından oluşur.

Aşağıda, kodu çözülmüş bir SXG dosyası örneği verilmiştir.

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 geçerlilik bitiş tarihini belirtir. SXG en fazla 7 gün boyunca 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 Paketleme özellik teklifi ailesinin bir parçasıdır. SXG'lere ek olarak, Web Paketleme spesifikasyonunun diğer önemli bileşeni Web Paketleri ("paketlenmiş HTTP takasları")dir. Web paketleri, HTTP kaynaklarının ve paketi yorumlamak için gerekli meta verilerin bir koleksiyonudur.

SXG'ler ile web paketleri arasındaki ilişki, sıklıkla karıştırılan bir konudur. SXG ve web paketleri birbirine bağlı olmayan iki farklı teknolojidir. Web paketleri hem imzalı hem de imzasız borsalarla kullanılabilir. Hem SXG'lerin hem de web paketlerinin ortak hedefi, sitelerin çevrimdışı tüketim için tamamıyla paylaşılmasına olanak tanıyan bir "web paketleme" 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 bu sayede sitenizin Önemli Web Verileri'ni, özellikle de Largest Contentful Paint (LCP)'yi etkileyebilir. SXG'yi erken benimseyen Google Arama, kullanıcılara arama sonuçları sayfasından yüklenen sayfalar için daha hızlı bir sayfa yükleme deneyimi sunmak amacıyla SXG'yi kullanır.

Google Arama, mevcut olduğunda SXG'leri tarar ve önbelleğe alır ve kullanıcının ziyaret etmesi muhtemel SXG'leri (ör. ilk arama sonucuna karşılık gelen sayfa) önceden getirir.

SXG, CDN 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. Uygulamadan sonra, SXG'leri önceden getirmenin LCP avantajını en üst düzeye çıkarmak için bu önerileri uygulayın. Bu tür optimizasyonlar birçok durumda Google Arama'dan gelen sayfaların neredeyse anında yüklenmesine neden olabilir:

İmzalı Takasların Etkisi

Geçmiş denemelerde, SXG özellikli ön getirme işlemlerinin LCP'de ortalama 300 ila 400 ms düşüş sağladığını gözlemledik. Bu, sitelerin kullanıcılarda daha iyi bir ilk izlenim bırakmasına yardımcı olur ve genellikle işletme metriklerini olumlu yönde etkiler.

Birkaç global marka ve site, imzalanan exchange'lerden yararlanmaya başladı. Örnek olay olarak, imzalanan exchange'lerin uygulanmasının tanınmış bir İçerik Yönetim Sistemi (İYS) olan RebelMouse'un müşterilerinin performansını ve işletme 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ış elde etti
  • MLT Blog sayfa yükleme süresini%21 azalttı

Cloudflare, SXG'nin test ettiği sitelerin % 98'inde TTFB'yi iyileştirdiği ve sitelerin% 85'inde LCP'yi iyileştirdiği, 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 temelde 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 oluşturmak için ayrı araçları vardır.İmzalı takasları kullanarak AMP'yi nasıl yayınlayacağınızı amp.dev adresinden öğrenebilirsiniz.

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ı ve Ağ panelini açın ve bu örnek arama sayfasını ziyaret edin. İmzalı Exchange'ler, Tür sütununda signed-exchange aranarak tanımlanabilir.

DevTools&#39;daki &quot;Ağ&quot; panelinde bir SXG isteğini gösteren ekran görüntüsü
DevTools'daki paneli

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

SXG için &quot;Önizleme&quot; sekmesinin ekran görüntüsü
DevTools'daki Önizleme sekmesi

Araç

SXG'leri uygulamak, belirli bir URL'ye karşılık gelen SXG'yi oluşturmayı ve ardından bu SXG'yi istek sahiplerine (genellikle tarayıcılar) sunmayı içerir.

Sertifikalar

SXG oluşturmak için SXG'leri imzalayabilecek bir sertifikaya ihtiyacınız vardır. Bazı araçlar bu sertifikaları otomatik olarak edinir. Bu sayfada bu tür sertifika yayınlayabilen 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 bulunur. sxg-rs'de de yakında bu özellik eklenecektir.

Platforma özgü SXG araçları

Bu araçlar belirli teknoloji gruplarını destekler. Bu araçlardan biri tarafından desteklenen bir platform kullanıyorsanız bu aracın kurulumunu, genel amaçlı bir aracın kurulumundan daha kolay bulabilirsiniz.

Genel amaçlı SXG araçları

sxg-rs HTTP sunucusu

sxg-rshttp_server, SXG'lerin sunulması için geri 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 README dosyasını inceleyin.

Web Paketleyici Sunucusu

webpkgserver adlı Web Paketleyici sunucusu, Go dilinde yazılmış sxg-rs http_server'a bir alternatiftir. Web Paketleyici sunucusunu ayarlamayla ilgili talimatlar için Web Paketleyici'yi kullanarak imzalı takasları ayarlama başlıklı makaleye göz atın.

Web Paketleyici CLI

Web Paketleyici 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 dosyayı sunucunuza yükleyin ve application/signed-exchange;v=b3 MIME türüyle sunun. Ayrıca SXG sertifikasını application/cert-chain+cbor olarak yayınlamanız gerekir.

SXG kitaplıkları

Aşağıdaki kitaplıklardan yararlanarak kendi SXG oluşturucunuzu oluşturabilirsiniz:

  • sxg_rs, SXG oluşturmak için kullanılan bir Rust kitaplığıdır. En çok özellikli SXG kitaplığıdır ve cloudflare_worker ile fastly_compute araçlarının temeli olarak kullanılır.

  • libsxg, SXG oluşturmak için kullanılan minimum düzeyde bir C kitaplığıdır. NGINX SXG modülü ve Envoy SXG filtresi için temel olarak kullanılır.

  • go/signed-exchange, webpackage spesifikasyonu tarafından SXG oluşturmanın referans uygulaması olarak sağlanan minimum bir Go kitaplığıdır. Referans CLI aracının ve daha fazla özellikli Web Paketleyici araçlarının temeli olarak kullanılır.gen-signedexchange

İçerik pazarlığı

Kabul üstbilgisi, application/signed-exchange için q değerinin text/html için q değerinden büyük veya bu değere eşit olduğunu belirttiğinde sunucular SXG yayınlamalıdır. Pratikte bu, bir kaynak sunucunun SXG'yi tarayıcılara değil, tarayıcılara yayınlayacağı anlamına gelir. Yukarıdaki araçların çoğu bunu varsayılan olarak yapar ancak diğer araçlarda, SXG olarak yayınlanması gereken isteklerin Accept başlığını 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.

Update cache API

Google SXG Önbelleği'nde, site sahiplerinin SXG'leri Cache-Control: max-age nedeniyle geçerlilik süreleri dolmadan önce önbellekten kaldırmak için kullanabileceği bir API vardır. Ayrıntılar için update cache API referansına bakın.

SXG'ye bağlama

Herhangi bir site, ve etiketlerini kullanarak bağlantı verdiği sayfaların SXG'lerini (varsa) önbelleğe alabilir, yayınlayabilir 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ğı gösterilmektedir.

Benzersiz Avantajlar

SXG, kaynaktan bağımsız önceden getirmeyi etkinleştirebilecek birçok teknolojiden biridir. Hangi teknolojiyi kullanacağınıza karar verirken farklı yönleri optimize etmek arasında bir seçim yapmanı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ı değiştikçe zaman içinde değişebilir.

Yayınlanacak daha az istek

Siteler arası ön getirme özelliğinde sunucunuzun ek istek yayınlaması gerekebilir. Bu durum, 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 bu kullanılmayan ek 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 ön getirme işlemi yalnızca önbelleğe alma sunucusu tarafından işlenebilir.
  • SXG'ler, sitenizde çerezleri olan ve olmayan kullanıcılara gösterilebilir. Bu nedenle, gezinme işleminden sonra sayfanın yeniden getirilmesi gerekmez.

Sayfa hızında iyileştirme

Şu anda desteklediği ön getirme yüzeyleri ve özellikleri nedeniyle ek sayfa hızı iyileştirmeleri görebilirsiniz:

  • SXG'ler, siteniz için çerezleri olan kullanıcılara gösterilebilir.
  • SXG, Link başlığı kullanılarak belirtildiğinde sayfalarınız için JavaScript, CSS, yazı tipleri ve resimler gibi alt kaynakları da önceden yükler.
  • Google Arama'dan SXG önceden getirme özelliği yakın gelecekte daha fazla arama sonucu türünde kullanılabilecek.

Sonuç

İmzalı Exchange'ler, bir kaynağın kaynağını ve geçerliliğini kaynağın nasıl yayınlandığından bağımsız olarak doğrulamayı sağlayan bir yayınlama mekanizmasıdır. Sonuç olarak SXG'ler, tam yayıncı ilişkilendirmesini korurken üçüncü taraflar tarafından dağıtılabilir.

Daha fazla bilgi